
<div class="modal fade modal-primary" id="modal-appointment">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title new">{{__('sidebar.appointment')}}</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="mdi mdi-close"></span></button>
            </div>

            <div class="modal-body">
                <form method="post" action="#" id="form-save-patient-appointment" onkeydown="return (event.key != 'Enter' || (event.target.matches('textarea')));">
                    @csrf
                    <input type="hidden" class="form-control" name="uid" id="data-id" value="0" />
                    <div class="form-vertical">

                        @if(!in_array(request()->segment(1), ['sample']))
                        <div class="form-group" style="margin-bottom: 1.5rem !important;">
                            <label for="lab-code" class="control-label">{{__('appointment.patient')}}&nbsp;<span class="text-danger">*</span></label>
                            <select class="form-control select2" required name="patient_id" id="patient-id" style=" width: 100% !important;">
                                <option value=""></option>
                                @foreach($patients as $patient)
                                    <option {{$patient_id == $patient->id ? 'selected':''}} value="{{$patient->id}}">{{($patient->patient_uuid . ' - ' . $patient->name_en) . ((!empty($patient->phone_number) ? ' - '.$patient->phone_number: ''))}}</option>
                                @endforeach
                            </select>
                        </div>
                        @endif

						<div class="form-group mb-1">
                            <label for="lab-code" class="control-label">{{__('appointment.duration')}}</label>
                            <input type="number" name="duration" class="form-control" id="duration" value="" onchange="cal_apointment_date(this.value)">
                        </div>

                        <div class="form-group mb-1">
                            <label for="lab-code" class="control-label">{{__('appointment.date')}}&nbsp;<span class="text-danger">*</span></label>
                            <input type="datetime-local" name="appointment_date" class="form-control" onchange="getDateDiff(this.value)" id="appointment_date" value="{{date('Y-m-d\TH:i:s')}}">
                        </div>


                        <div class="form-group mb-1">
                            <label for="lab-code" class="control-label">{{__('appointment.type')}}&nbsp;<span class="text-danger">*</span></label>
                            <select class="form-control select2-tags rounded-0 border-light" name="appointment_type" id="appointment_type" style="width: 100% !important;">
                                <option></option>
                                @foreach($conceptCodes as $conceptCode)
                                    <option value="{{$conceptCode->appointment_type}}">{{$conceptCode->appointment_type}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-1">
                            <label for="lab-code" class="control-label">{{__('appointment.doctor')}}&nbsp;<span class="text-danger">*</span></label>
                            <select class="form-control select2_ rounded-0 border-light" name="doctor_id" id="doctor_id" style="width: 100% !important;">
                                <option></option>
                                @foreach($physicians as $doctor)
                                    <option value="{{$doctor->id}}">{{$doctor->name_en}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group mb-1">
                            <label for="lab-name-en">{{__('appointment.description')}} <span class="text-danger">*</span></label>
                            <textarea class="form-control" style="line-height:15px" name="description" id="description" rows="2"></textarea>
                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info rounded-25" id="btnSaveAppointment"><i class="fa fa-floppy-o"></i>&nbsp;&nbsp;<span class="save">{{__('lang.save')}}</span><span class="update" style="display: none">{{__('lang.update')}}</span></button>
                <button type="button" class="btn btn-secondary rounded-25 mx-3" data-dismiss='modal'>{{__('lang.cancel')}}</button>
            </div>
        </div>
    </div>
</div>
<script>

    function cal_apointment_date(dur) {
		var ap_date = new Date();
		console.log(new Date(ap_date.setDate(ap_date.getDate() + parseInt(dur))))
		ap_date.setMinutes(ap_date.getMinutes() - ap_date.getTimezoneOffset());
		$("#appointment_date").val(new Date(ap_date).toISOString().slice(0,16));
    }

    function getDateDiff(appDate){
        var d1 = new Date(); //"now"
        var d2 = new Date(appDate);  // some date
        var diff = Math.abs(d1-d2);  // difference in milliseconds
        console.log(diff)
        $('#duration').val(Math.round(diff/86400000))
    }

</script>
