@extends ('../welcome')


@section('content')
<div class="card">
    <div class="card-body register-card-body">
        <h5 class="login-box-msg" style="color:#17a2b8; margin-right:7%;"><strong>Edit {{$client->name}}
                Profile</strong></h5>

        <form action="{{ route('clients.update',$client->id) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-6">
                    <!-- Left Side -->
                    <input type="hidden" value="{{$client->id}}" name="clientId">
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Name</label>
                        <input type="text" readonly name="name" value="{{ $client->name }}" class="form-control">
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Email</label>
                        <input type="email" class="form-control" placeholder="email@example.com" name="email"
                            value="{{ $client->email }}" required>
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Job Title</label>
                        <input type="text" class="form-control" value="{{ $client->job_title }}" name="job_title">
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Source</label>
                        <input type="text" class="form-control" value="{{ $client->came_from }}" name="came_from">
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block;">
                        <label for="campaign_id">Campaign</label>
                        <select name="campaign_id" class="select2 custom-select form-control-border">
                            <option value="">Select Campaign</option>
                            @foreach($campaigns as $campaign)
                            <option {{ $client->campaign_id == $campaign->id ? 'selected' : '' }}
                                value="{{$campaign->id}}"> {{ $campaign->name }} </option>
                            @endforeach
                        </select>
                    </div>
                    <br>
                    <div class="col-5 mb-3" style="display: inline-block">
                        <label>Civil ID Date</label>
                        <input type="text" class="form-control" name="civil_date" value="{{$client->civil_date}}">
                    </div>
                    <div class="col-5 mb-3" style="display: inline-block">
                        <label>Civil ID City</label>
                        <input type="text" class="form-control" name="civil_city" value="{{$client->civil_city}}">
                    </div>
                    <br>
                    <div class="col-5 mb-3" style="display: inline-block">
                        <label>Civil ID Number</label>
                        <input type="text" class="form-control" name="civil_number" value="{{$client->civil_number}}">
                    </div>
                    <div class="col-5 mb-3" style="display: inline-block">
                        <label>Civil ID Address</label>
                        <input type="text" class="form-control" name="civil_address" value="{{$client->civil_address}}">
                    </div>
                    <br>

                    <br>
                    <!-- End Left Side -->
                </div>
                <div class="col-6">
                    <!-- right Side -->
                    <div class="col-md-12" style="margin-top:30px;">
                        <div class="card card-outline card-info">
                            <div class="card-header">
                                <h3 class="card-title">Mobile Number</h3>

                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                </div>
                                <!-- /.card-tools -->
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div id="inputFormRow" style="margin-left: 9px;">
                                    <div class="row">
                                        <div class="col-12" style="display: inline-block">
                                            <label></label>
                                            <button id="addRow" type="button" class="btn btn-light"
                                                style="margin-top:0px">
                                                Add Number <i class="fas fa-plus"></i>
                                            </button>

                                            @foreach($client->phone_numbers as $mobile)
                                            <div id="inputFormRow">
                                                <div class="row">
                                                    <div class="col-4">
                                                        <div class="form-group" style="margin-top:20px;">
                                                            <select name="country_id"
                                                                class="select2 custom-select form-control-border"
                                                                id="Country">
                                                                @foreach ($countries as $country)
                                                                <option value="{{$country->id}}"
                                                                    {{$mobile->country_id == $country->id ? 'selected' : ''}}>
                                                                    {{$country->name}} +{{$country->phonecode}}
                                                                </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-6" style="margin-top:20px;">
                                                        <input type="text" class="form-control m-input"
                                                            value="{{$mobile->phone}}" id="phone"
                                                            placeholder="Phone Number" name="mobile_number[]" required>
                                                    </div>
                                                </div>
                                            </div>
                                            @endforeach

                                        </div>
                                    </div>
                                    <div id="newRow"></div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>

                    <!-- Unit section -->

                    <!-- /.card -->
                </div>
                <br>
                <!-- End right Side -->
            </div>
            <div class="col-12" style="text-align:center;">
                <button type="submit" class="btn btn-info" style="width:200px;">Submit</button>
            </div>
        </form>
    </div>
</div>
<!-- /.form-box -->
</div>
<script src="{{asset('asset/plugins/jquery/jquery.min.js')}}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
// add row
$("#addRow").click(function() {
    var html = '';
    html += `
    <div id="inputFormRow">
        <div class="row">
            <div class="col-4">
                <div class="form-group" style="margin-top:20px;">
                    <select name="country_id"
                        class="select2 custom-select form-control-border" id="Country">
                        @foreach ($countries as $country)
                        <option value="{{$country->id}}">
                            {{$country->name}} +{{$country->phonecode}}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-6" style="margin-top:20px;">
                <input type="text" class="form-control m-input" id="phone"
                    placeholder="Phone Number" name="mobile_number[]" required>
            </div>

            <div class="col-2" style="padding-top:35px;margin-top:-15px">
                <button id="removeRow" type="button" class="btn btn-danger">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

    $('#newRow').append(html);
});

$("#addPayment").click(function() {
    var currentCount = $('#inputFormPayment .row').length;
    currentCount += 1;
    console.log(currentCount);
    var html = '';
    html += `
        <div id="inputFormPayment">
            <div class="row">
                <div class="col-8" style="display: inline-block">
                    <label>Payment Description</label>
                    <input type="text" class="form-control m-input" placeholder="Description"
                        name="payment[${currentCount}][description]">
                </div>
                <div class="col-3" style="display: inline-block">
                    <label>Payment Amount</label>
                    <input type="number" step="0.01" class="form-control m-input" placeholder="Amount"
                        name="payment[${currentCount}][amount]">
                </div>

                <div class="col-1" style="padding-top:35px;margin-top:-5px">
                    <button id="removePayment" type="button" class="btn btn-danger">
                    <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>
        </div>`;

    $('#newPayment').append(html);
});

// remove row
$(document).on('click', '#removeRow', function() {
    $(this).closest('#inputFormRow').remove();
});

$(document).on('click', '#removePayment', function() {
    $(this).closest('#inputFormPayment').remove();
});

$(document).on('change', '#projects', function() {
    console.log(this.value);
    var data = this.value;

    $.ajax({
        data: {
            'project_id': data
        },
        method: "POST",
        url: "{{route('unitReservation')}}",

        success: function(dataResult) {
            var dataResult = JSON.parse(dataResult);
            // console.log(dataResult.units);
            let facilities = "";
            let units = "";
            Array.from(dataResult.facilities).forEach(myFunction);

            function myFunction(item, index) {
                facilities += `
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <div class="form-check">
                                    
                                        <input class="form-check-input" name="facility_id[]" id="test" value="` + item
                    .id + `"
                                            type="checkbox">
                                        <label class="form-check-label">` + item.name + `</label>
                                    </div>
                                </div>
                            </div>
                        </div>`;
            }
            document.getElementById("facilities").innerHTML = facilities;


            Array.from(dataResult.units).forEach(myFunction2);

            function myFunction2(item, index) {
                units += `<option value="` + item.id + `">` + item.name + `</option>`;
            }
            document.getElementById("units").innerHTML = units;
        }
    });
});
</script><!-- /.card -->
@endsection