@extends ('../welcome')


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

        <form action="{{ route('clients.store') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-6">
                    <!-- Left Side --> 
                    @if(isset($lead))
                    <input type="hidden" value="{{$lead->id}}" name="leadId">
                    @endif
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Name</label> 
                        @if(!empty($lead))
                        <input type="hidden" name="name" value="{{ $lead->name }}">
                        <input type="text" readonly name="name" value="{{ $lead->name }}" class="form-control">
                        @else
                        <input type="text" name="name" placeholder="Client Name" class="form-control">
                        @endif
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Email</label>
                        @if(isset($lead))
                        <input type="hidden" name="email" value="{{ $lead->email }}">
                        <input type="email" readonly class="form-control" placeholder="email@example.com"
                            value="{{ $lead->email }}" name="email">
                        @else
                        <input type="email" class="form-control" placeholder="email@example.com" name="email">
                        @endif
                    </div>
                    
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Job Title</label>
                        @if(isset($lead))
                        <input type="hidden" name="job_title" value="{{ $lead->job_title }}">
                        <input type="text" readonly class="form-control" value="{{ $lead->job_title }}"
                            name="job_title">
                        @else
                        <input type="text" class="form-control" placeholder="ex: Developer" name="job_title">
                        @endif
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block">
                        <label>Source</label>
                        @if(isset($lead))
                        <input type="hidden" name="came_from" value="{{ $lead->came_from }}">
                        <input type="text" readonly class="form-control" value="{{ $lead->came_from }}"
                            name="came_from">
                        @else
                        <input type="text" class="form-control" name="came_from">
                        @endif
                    </div>
                    <br>
                    <div class="col-10 mb-3" style="display: inline-block;">
                        <label for="campaign_id">Campaign</label>
                        @if(isset($lead))
                        <input type="hidden" name="campaign_id" value="{{ $lead->campaign_id }}">
                        <input type="text" readonly class="form-control" value="{{ $lead->campaign_id }}"
                            name="campaign_id">
                        
                        @else
                        <select name="campaign_id" class="select2 custom-select form-control-border">
                            <option value="">Select Campaign</option>
                            @foreach ($campaigns as $campaign)
                            <option value="{{$campaign->id}}">{{$campaign->name}}</option>
                            @endforeach
                        </select>
                        @endif
                    </div>
                    <br>
                    {{-- <div class="col-10 mb-3" style="display: inline-block">
                        <label>Status</label>
                        @if(isset($lead))
                        <select name="client_status" disabled class="select2 custom-select form-control-border" id="status">
                            <option value="new" {{ $lead->status == 'new' ? 'selected' : '' }}>New</option>
                            <option value="in-process" {{ $lead->status == 'in-process' ? 'selected' : '' }}>In-Process
                            </option>
                            <option value="interestad" {{ $lead->status == 'interestad' ? 'selected' : '' }}>Interestad
                            </option>
                            <option value="not_interested" {{ $lead->status == 'not_interested' ? 'selected' : '' }}>Not
                                Interested</option>
                            <option value="wait" {{ $lead->status == 'wait' ? 'selected' : '' }}>Wait</option>
                            <option value="follow_up" {{ $lead->status == 'follow_up' ? 'selected' : '' }}>Follow Up
                            </option>
                            <option value="recycled" {{ $lead->status == 'recycled' ? 'selected' : '' }}>Recycled
                            </option>
                            <option value="converted" {{ $lead->status == 'converted' ? 'selected' : '' }}>Converted
                            </option>
                            <option value="dead" {{ $lead->status == 'dead' ? 'selected' : '' }}>Dead</option>
                        </select>
                        @else
                        <select name="client_status" class="select2 custom-select form-control-border" id="status">
                            <option value="new">New</option>
                            <option value="in-process">In-Process</option>
                            <option value="interestad">Interestad</option>
                            <option value="not_interested">Not Interested</option>
                            <option value="wait">Wait</option>
                            <option value="follow_up">Follow Up</option>
                            <option value="recycled">Recycled</option>
                            <option value="converted">Converted</option>
                            <option value="dead">Dead</option>
                        </select>
                        @endif
                    </div>--}}
                    <br>
                    {{--<div class="col-10 mb-3" style="display: inline-block;">
                        <label for="user_id">Assigned User</label>
                        @if(isset($lead))
                        <select name="user_id" class="select2 custom-select form-control-border">
                            @foreach ($users as $user)
                            <option value="{{$user->id}}" {{$user->id ==  $lead->user->id ? 'selected' :''}}>{{$user->name}}</option>
                            @endforeach
                        </select>
                        @else
                        <select name="user_id" class="select2 custom-select form-control-border">
                            <option value="">Select User</option>
                            @foreach ($users as $user)
                            <option value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                        </select>
                        @endif
                    </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">
                    </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">
                    </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">
                    </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">
                    </div>
                    <br>

                    <br>
                    <!-- End Left Side -->
                </div>
                <div class="col-6">
                    <!-- right Side -->
                    <div class="col-md-12">
                        <div class="card card-outline card-warning">
                            <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>
                                            @if(isset($lead))
                                            @foreach($lead->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
                                            @else
                                            <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"
                                                            placeholder="Phone Number" id="phone" name="mobile_number[]" required>
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div id="newRow"></div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>

                    <!-- Unit section -->

                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Assign Unit</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">
                            <meta name="csrf-token" content="{{ csrf_token() }}">
                            <div class="row" style="margin-left:5px;">
                                <div class="col-12 mb-3" style="display: inline-block;">
                                    <label for="project_id">Select Project</label>
                                    <select name="project_id" id="projects" class="custom-select form-control-border">
                                        <option></option>
                                        @foreach ($projects as $project)
                                        <option value="{{ $project->id }}">{{ $project->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row" style="margin-left:5px;">
                                <div class="col-8 mb-3" style="display: inline-block;">
                                    <label for="unit_id">Choose unit</label>
                                    <select name="unit_id" id="units" class="custom-select form-control-border">

                                    </select>
                                </div>
                                <div class="col-3 mb-3" style="display: inline-block;">
                                    <label for="status">Status</label>
                                    <select name="unit_status" class="select2 custom-select form-control-border">
                                        <option value="hold">hold</option>
                                        <option value="reserved">reserved</option>
                                        <option value="downpayment">downpayment</option>
                                        <option value="taken">taken</option>
                                    </select>
                                </div>
                            </div>
                            <label for="facilities" style="margin-left:20px;">Has Facilities ?</label>
                            <div id="facilities" style="margin-left:20px;">

                            </div>
                            <br>
                            <div id="inputFormPayment" style="margin-left: 9px;">
                                <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[0][description]" required>
                                    </div>
                                    <div class="col-3" style="display: inline-block">
                                        <label>Payment Amount</label>
                                        <input type="number" class="form-control m-input" placeholder="Amount"
                                            name="payment[0][amount]" required>
                                    </div>
                                    <button id="addPayment" type="button" class="btn btn-info" style="margin-top:33px">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                                <div id="newPayment"></div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <br>
                <!-- End right Side -->
            </div>
    </div>

    <div class="col-12" style="text-align:center;">
        <button type="submit" class="btn btn-info" style="width:200px;">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-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