@extends ('../welcome')


@section('content')
    <div class="card">
        <div class="card-body register-card-body">
            <p class="login-box-msg">Edit Client Profile</p>

            <form action="{{ route('clients.update',$client->id) }}" method="POST">
                @csrf
                @method('PUT')

                <input type="hidden" value="{{$client->id}}" name="clientId">

                <div class="col-3 mb-3" style="display: inline-block">
                    <label>Email</label>
                    <input type="email" class="form-control" placeholder="email@example.com" value="{{ $client->email }}"
                        name="email">
                </div>
                <br>
                <div class="col-3 mb-3" style="display: inline-block">
                    <label>Name</label>
                    <input type="text" name="name" value="{{ $client->name }}" class="form-control">
                </div>
                <br>
                <div id="inputFormRow" style="margin-left: 9px;">
                    @foreach($client->phone_numbers as $mobile)
                    <div class="row">
                        <div class="col-2" style="display: inline-block;">
                            <label>Country</label>
                            <select name="country_id[]" class="select2 custom-select form-control-border" id="Country">
                                @foreach ($countries as $country)
                                <option {{$mobile->country_id == $country->id ? 'selected' : '' }} value="{{$country->id}}">{{$country->name}} +{{$country->phonecode}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2" style="display: inline-block; flex-d">
                            <label>Mobile Number</label>
                                <input type="text" class="form-control m-input" value="{{$mobile->phone}}" placeholder="Phone Number"
                                    name="mobile_number[]">
                        </div>
                    </div>
                    <br>
                    @endforeach
                    <button id="addRow" type="button" class="btn btn-info" style="margin:30px 10px;">
                        Add Mobile
                    </button>
                    <div id="newRow"></div>
                </div>
                <br>
                <div class="col-3 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-3 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-3 mb-3" style="display: inline-block;">
                    <label for="campaign_id">Campaign</label>
                    <select name="campaign_id" class="select2 custom-select form-control-border">
                        @foreach($campaigns as $campaign)
                            <option {{ $client->campaign_id == $campaign->id ? 'selected' : '' }} value="{{$campaign->id}}"> {{ $campaign->name }} </option>
                        @endforeach
                    </select>
                </div>
                <br>
                <div class="col-3 mb-3" style="display: inline-block">
                    <label>Status</label>
                    <select name="status" class="select2 custom-select form-control-border" id="status">
                        <option value="new" {{ $client->status == 'new' ? 'selected' : '' }}>New</option>
                        <option value="in-process" {{ $client->status == 'in-process' ? 'selected' : '' }}>In-Process
                        </option>
                        <option value="interestad" {{ $client->status == 'interestad' ? 'selected' : '' }}>Interestad
                        </option>
                        <option value="not_interested" {{ $client->status == 'not_interested' ? 'selected' : '' }}>Not
                            Interested</option>
                        <option value="wait" {{ $client->status == 'wait' ? 'selected' : '' }}>Wait</option>
                        <option value="follow_up" {{ $client->status == 'follow_up' ? 'selected' : '' }}>Follow Up</option>
                        <option value="recycled" {{ $client->status == 'recycled' ? 'selected' : '' }}>Recycled</option>
                        <option value="converted" {{ $client->status == 'converted' ? 'selected' : '' }}>Converted</option>
                        <option value="dead" {{ $client->status == 'dead' ? 'selected' : '' }}>Dead</option>
                    </select>
                </div>
                <br>
                <div class="col-3 mb-3" style="display: inline-block;">
                    <label for="user_id">Assigned User</label>
                    <select name="user_id" class="select2 custom-select form-control-border">
                        @foreach ($users as $user)
                            <option {{$client->user_id == $user->id ? 'selected' : ''}} value="{{$user->id}}">{{$user->name}}</option>
                        @endforeach
                    </select>
                </div>
                <br>
                <div class="col-3 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-3 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-3 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-3 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>
                <div class="card-info" style="padding:5px;">
                    <div class="card-header border-transparent">
                        <h3 class="card-title">Unit Section</h3>
                    </div>
                    <br>
                    <div class="col-3 mb-3" style="display: inline-block;">
                        <label for="unit_id">Units</label>
                        <select name="unit_id[]" class="select2 custom-select form-control-border">
                            @foreach ($units as $unit)
                                <option {{in_array($unit->id,old('unit_id',$clientUnits) ) ? 'selected' :''}} value="{{ $unit->id }}">{{ $unit->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <br>
                    <div id="inputFormPayment" style="margin-left: 9px;">
                        @foreach($client->payments as $key=>$payment)
                        <div class="row">
                            <div class="col-3" style="display: inline-block;">
                                <label>Payment Description</label>
                                <input type="text" class="form-control m-input" placeholder="Description"
                                    name="payment[{{$key}}][description]" value="{{$payment->description}}">
                            </div>
                            <div class="col-3" style="display: inline-block;">
                                <label>Payment Amount</label>
                                <input type="text" class="form-control m-input" placeholder="Amount"
                                    name="payment[{{$key}}][amount]" value="{{$payment->amount}}">
                            </div>
                        </div>
                        <br>
                        @endforeach
                        <button id="addPayment" type="button" class="btn btn-info" style="margin:30px 10px">
                            Add Payment
                        </button>
                        <div id="newPayment"></div>
                    </div>
                </div>
                <br>
                <div class="col-6" style="float:right;">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </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-2">
                    <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-3" style="margin-top:20px;">
                    <input type="text" class="form-control m-input" value="{{old('phone_number')}}"
                        placeholder="Phone Number" name="mobile_number[]">
                </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-3" 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="text" class="form-control m-input" placeholder="Amount"
                        name="payment[${currentCount}][amount]">
                </div>

                <div class="col-2" style="padding-top:35px;margin-top:-15px">
                    <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();
    });
</script><!-- /.card -->
@endsection