<!-- Modal -->
<div class="modal" id="editAppointmentModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="max-width: 1000px">
        <div class="modal-content border-primary">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Edit</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form data-toggle="validator" autocomplete="off" class="form-styled" id="edit_appointment_form">
                    @csrf
                    <input type="hidden" id="appointment_id">
                    <div class="row">
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group has-feedback">
                                <label class="control-label">Title*</label>
                                <input required type="text" id="edit_appointment_title" maxlength="100"
                                       data-error="Must be at least 3 character" class="form-control">
                                <span
                                    class="help-block with-errors"></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group has-feedback">
                                <label class="control-label">Type*</label>
                                <select required id="edit_appointment_type" class="form-control">
                                    <option value="">Select Type</option>
                                    <option value="1">General Appointment</option>
                                    <option value="2">Accompanied Viewing</option>
                                    <option value="3">Valuation</option>
                                    <option value="4">Unaccompanied Viewing</option>
                                </select><span class="help-block with-errors"></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group">
                                <label class="control-label">Start*</label>
                                <input required id="edit_appointment_start" type="datetime-local"  class="form-control">
                                <span class="help-block with-errors"></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group">
                                <label class="control-label">End*</label>
                                <input required id="edit_appointment_end" type="datetime-local"  class="form-control">
                                <span class="help-block with-errors"></span>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group">
                                <label class="control-label">Contact</label>
                                <select data-live-search="true" id="edit_appointment_contact"
                                        class="form-control selectpicker show-tick">
                                    <option value="">Select Contact</option>
                                    @foreach (auth()->user()->contacts()->orderBy('name')->get() as $attr)
                                        <option value="{{ $attr->id }}">
                                            {{ $attr->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group">
                                <label class="control-label">Listing</label>
                                <select data-live-search="true" id="edit_appointment_listing"
                                        class="form-control selectpicker show-tick">
                                    <option value="">Select Listing</option>
                                    @if(auth()->user()->type == 1)
                                        @foreach (\App\Models\Listing::whereType(1)->orderBy('title')->get() as $attr)
                                            <option value="{{ $attr->id }}">
                                                {{ $attr->title }} ({{ $attr->p_id }})
                                            </option>
                                        @endforeach
                                    @else
                                        @foreach (auth()->user()->simple_listings()->orderBy('title')->get() as $attr)
                                            <option value="{{ $attr->id }}">
                                                {{ $attr->title }} ({{ $attr->p_id }})
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-4">
                            <div class="form-group has-feedback">
                                <label class="control-label">Guest will appear as</label>
                                <select id="edit_appointment_appear_as" class="form-control">
                                    <option value="1">Busy</option>
                                    <option value="2">Free</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-12">
                            <div class="form-group">
                                <label class="control-label">Location</label>
                                <input id="edit_appointment_location" maxlength="200" class="form-control">
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-12">
                            <div class="form-group">
                                <label class="control-label">Description</label>
                                <textarea id="edit_appointment_description" cols="30" rows="5" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="col-xs-12 col-lg-12">
                            <div class="form-group">
                                <label class="control-label">Private Description</label>
                                <textarea id="edit_appointment_p_description" cols="30" rows="5" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-lg-12">
                            <div class="form-group">
                                <button type="submit" id="edit_submit_btn" name="submit" class="btn btn-success"><i
                                        class="fa fa-check fa-lg"> </i>&nbsp;Submit
                                </button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal"><i
                                        class="fa fa-times fa-lg"></i> Close
                                </button>
                                <div class="alert alert-danger edit_errors" style="display: none">
                                    <ul></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
