{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')
<!--begin::Card-->
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <!--begin::Card header-->
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <!--begin::Toolbar-->
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <!--begin::Item-->
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-text font-size-lg">{{$page_title}}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--end::Toolbar-->
        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body">
            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                    <!--begin::Row-->
                    <div class="row">
                        @include("backend.errors")
                        <div class="col-12">

                            <!--begin::Group-->
                            <div class="form-group row mb-3 required">
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Date</label>
                                    <div class="input-group input-group-lg input-group-solid">
                                        <span class="input-group-text">
                                            <i class="la la-calendar"></i>
                                        </span>
                                        <input class="form-control form-control-lg form-control-solid datepicker_past required" type="text" name="date" id="date" value="{{ old('date', $data['date'] ?? '') }}" autocomplete="off" />
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Time</label>
                                    <input class="form-control form-control-lg form-control-solid bt_timepicker_2 required" type="text" name="time" id="time" value="{{ old('time', $data['time'] ?? '') }}" autocomplete="off" />
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Status</label>
                                    <select class="form-control form-control-lg form-control-solid form-select required" name="status">
                                        @foreach(config('constant.save_list') ?? [] as $id => $title)
                                        <option value="{{$id}}" data-id="{{$title}}" {{old('status', $data['status'] ?? '') == $id ? "selected" : "" }}>{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Participant</label>
                                    <select class="form-control form-control-lg form-control-solid form-select required" name="client_id" id="client_id" data-control="select2">
                                        <option value="">Select</option>
                                        @foreach($client_list ?? [] as $id => $title)
                                        <option value="{{$id}}" data-id="{{$title}}" {{old('client_id', $data['client_id'] ?? '') == $id ? "selected" : "" }}>{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Staff</label>
                                    <select class="form-control form-control-lg form-control-solid form-select required" name="staff_id" id="staff_id" data-control="select2">
                                        <option value="">Select</option>
                                        @foreach($staff_list ?? [] as $id => $title)
                                        <option value="{{$id}}" data-id="{{$title}}" {{old('staff_id', $data['staff_id'] ?? '') == $id ? "selected" : "" }}>{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Doctor Name</label>
                                    <input class="form-control form-control-lg form-control-solid required" type="text" name="doctor_name" value="{{ old('doctor_name', $data['doctor_name'] ?? '') }}"  autocomplete="off" />
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Health Practitioner</label>
                                    <select class="form-control form-control-lg form-control-solid form-select required" name="health_practitioner" id="health_practitioner">
                                        <option value="">Select</option>
                                        @foreach($health_practitioner_list ?? [] as $title)
                                        <option value="{{$title}}" data-id="{{$title}}" {{old('health_practitioner', $data['health_practitioner'] ?? '') == $title ? "selected" : "" }}>{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 health_practitioner_other_div d-none">
                                    <label class="col-form-label text-lg-right text-left no-required">Other:</label>
                                    <input class="form-control form-control-lg form-control-solid no-required" id="health_practitioner_other" type="text" name="health_practitioner_other" value="{{ old('health_practitioner_other', $data['health_practitioner_other'] ?? '') }}"  autocomplete="off" />
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Reason for Visit</label>
                                    <textarea class="form-control form-control-lg form-control-solid required" name="reason">{{ old('reason', $data['reason'] ?? '') }}</textarea>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Doctor Instructions</label>
                                    <textarea class="form-control form-control-lg form-control-solid required" name="instructions">{{ old('instructions', $data['instructions'] ?? '') }}</textarea>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left no-required">Location</label>
                                    <textarea class="form-control form-control-lg form-control-solid no-required" name="location">{{ old('location', $data['location'] ?? '') }}</textarea>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left">Appointment Type</label>
                                    <select class="form-control form-control-lg form-control-solid form-select required" name="appointment_type">
                                        <option value="">Select</option>
                                        @foreach($appointment_type_list ?? [] as $title)
                                        <option value="{{$title}}" data-id="{{$title}}" {{old('appointment_type', $data['appointment_type'] ?? '') == $title ? "selected" : "" }}>{{$title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row mb-3">
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                    <label class="col-form-label text-lg-right text-left no-required">Next Appointment Date</label>
                                    <div class="input-group input-group-lg input-group-solid">
                                        <span class="input-group-text">
                                            <i class="la la-calendar"></i>
                                        </span>
                                        <input class="form-control form-control-lg form-control-solid datepicker_future no-required" type="text" name="appointment_date" id="appointment_date" value="{{ old('appointment_date', $data['appointment_date'] ?? '') }}" autocomplete="off" readonly />
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 appointment_details_div d-none">
                                    <label class="col-form-label text-lg-right text-left no-required">Time</label>
                                    <input class="form-control form-control-lg form-control-solid bt_timepicker_2 no-required" type="text" name="appointment_time" id="appointment_time" value="{{ old('appointment_time', $data['appointment_time'] ?? '') }}" autocomplete="off" />
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 appointment_details_div d-none">
                                    <label class="col-form-label text-lg-right text-left no-required">Do you want to set the reminder</label>
                                    <div class="radio-inline">
                                        @foreach (config('constant.yes_no_list') as $key => $val)
                                            <label class="radio">
                                                <input class="form-check-input no-required" type="radio" value="{{ $key }}" name="set_reminder" id="set_reminder_{{ $key }}"
                                                    {{ (isset($data['set_reminder']) ? $data['set_reminder'] == $key : $key == 0) ? 'checked' : '' }} />
                                                {{ $val }}
                                            </label>
                                        @endforeach
                                    </div>
                                    <div class=""><span class="text-muted">Set Reminder to 'Yes'. When status is finalized, a new event will be added under My Calendar</span></div>
                                </div>
                            </div>
                            <div class="form-group row mb-7">
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                    <label class="col-form-label col-12 text-lg-right text-left">Upload Attachment</label>
                                    <input type="file" class="form-control" id="attachments" name="attachments[]" accept=".jpg,.png,.pdf,.doc,.docx" multiple>
                                    <!--begin::Hint-->
                                    <span class="form-text text-muted">Max file size limit is 10MB and multiple file upload is allowed.</span>
                                    <!--end::Hint-->
                                </div>
                            </div>
                            <div class="form-group fv-row mb-7">
                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <!--begin::Dropzone-->
                                    <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_attachments">
                                        <!--begin::Controls-->
                                        <div class="dropzone-panel mb-lg-0 mb-5 d-none">
                                            <a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a>
                                            <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>
                                        </div>
                                        <!--end::Controls-->

                                        <!--begin::Items-->
                                        <div class="dropzone-items wm-200px">
                                            <div class="dropzone-item" style="display:none">
                                                <!--begin::File-->
                                                <div class="dropzone-file">
                                                    <div class="dropzone-filename" title="some_image_file_name.jpg" style="width: 85%;word-break: break-all;">
                                                        <span data-dz-name>some_image_file_name.jpg</span>
                                                        <strong>(<span data-dz-size>340kb</span>)</strong>
                                                    </div>

                                                    <div class="dropzone-error" data-dz-errormessage></div>
                                                </div>
                                                <!--end::File-->

                                                <!--begin::Progress-->
                                                <div class="dropzone-progress">
                                                    <div class="progress">
                                                        <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--end::Progress-->

                                                <!--begin::Toolbar-->
                                                <div class="dropzone-toolbar">
                                                    <span class="dropzone-delete"><i class="bi bi-x fs-1"></i></span>
                                                </div>
                                                <!--end::Toolbar-->
                                            </div>

                                            {{-- @if(!empty(($master_data['id']??''))) --}}
                                            @foreach($attachments??[] as $fileId => $file)
                                            <div class="dropzone-item" id="{{$fileId}}" data-type="particularFile">
                                                <!--begin::File-->
                                                <div class="dropzone-file">
                                                    <div class="dropzone-filename" title="{{$file}}" style="width: 85%;word-break: break-all;">
                                                        <span data-dz-name><a href="{{asset('/uploads/doctor_visit/'.$data['id'].'/'.$file)}}" target="_blank">{{$file}}</a></span>
                                                        <strong><span data-dz-size></span></strong>
                                                    </div>

                                                    <div class="dropzone-error" data-dz-errormessage></div>
                                                </div>
                                                <!--end::File-->
                                                <!--begin::Toolbar-->
                                                <div class="dropzone-toolbar">
                                                    <span class="dropzone-delete"><i class="bi bi-x fs-1"></i></span>
                                                </div>
                                                <!--end::Toolbar-->
                                            </div>
                                            @endforeach
                                            <!--end::Input group-->
                                            {{-- @endif --}}
                                            

                                        </div>
                                        <!--end::Items-->
                                    </div>
                                    <!--end::Dropzone-->
                                    <br />
                                </div>
                            </div>
                            <textarea id="attachments_hidden_input" name="attachments_hidden_input" hidden></textarea>
                            <!--end::Group-->
                        </div>
                    </div>
                    <!--end::Row-->
                </div>
                <!--end::Tab-->
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-footer text-right">
            @if(!$hideSubmit)
            <button  type="submit" class="btn btn-primary me-2 btn-hover-rise" id="submit_btn" onclick="$('#manage_form').submit();">Submit</button>
            @endif
            <a href="{{route('doctor_visit.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
        var isAdmin = "{{ $isAdmin??false }}";
        initTimepicker();
        $('#manage_form').validate({
            // ignore: [],
            rules: {
                'phone': {
                    required: true,
                    phoneInd: true
                },
                cpassword: {
                    equalTo: '#password'
                },
                @if(empty($data['id']))
                password: {
                    required: true
                }
                @endif
            },
            messages: {
                phone: "Please enter valid contact number",
                cpassword: "Please confirm same password again"
            },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors && errors == 1) {
                    console.log(validator.errorList)
                }
            }
        });

        var date = new Date();
        $(".datepicker_past").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 1901,
            autoUpdateInput: false,
            "autoApply": false,
            locale: {
                format: 'DD-MM-YYYY',
            },
            maxDate: date
            //maxYear: parseInt(2030)
        }, function (start, end, label) {
            var years = moment().diff(start, "years");
            // alert("You are " + years + " years old!");
        }
        ).on('apply.daterangepicker', function (ev, picker) {
            // `e` here contains the extra attributes
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
            var year = parseInt(picker.startDate.format("YYYY"));
            if (year) {
                var age = currentYear - year;
                $('#age').val(age).trigger('change');
            }
        });

        $('.datepicker_past').on('cancel.daterangepicker', function (ev, picker) {
            $(this).val('');
        });

        function datepickerFuture(){
            $(".datepicker_future").daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                autoUpdateInput: false,
                "autoApply": false,
                locale: {
                    format: 'DD-MM-YYYY',
                },
                minDate: date
                //maxYear: parseInt(2030)
            }, function (start, end, label) {
                var years = moment().diff(start, "years");
                // alert("You are " + years + " years old!");
            }
            ).on('apply.daterangepicker', function (ev, picker) {
                // `e` here contains the extra attributes
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                var year = parseInt(picker.startDate.format("YYYY"));
                if (year) {
                    var age = currentYear - year;
                    $('#age').val(age).trigger('change');
                }
                $("#appointment_time").removeClass("no-required");
                $(".appointment_details_div").removeClass("d-none");
                $("#appointment_time").addClass("required");
            });

            $('.datepicker_future').on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
                $("#appointment_time").addClass("no-required");
                $(".appointment_details_div").addClass("d-none");
                $("#appointment_time").removeClass("required");
            });
        }

        datepickerFuture();

        function hideShowAppointmentDetails(){
            if ($("#appointment_date").val().trim() !== "") {
                $("#appointment_time").removeClass("no-required").addClass("required");
                $(".appointment_details_div").removeClass("d-none");
            } else {
                $("#appointment_time").removeClass("required").addClass("no-required");
                $(".appointment_details_div").addClass("d-none");
            }
        }

        hideShowAppointmentDetails();

        function hideShowHealthPractitionerOtherDiv(){
            var selectVal = $("#health_practitioner").val();
            if (selectVal == "Other") {
                $(".health_practitioner_other_div").removeClass("d-none");
            }else{
                $(".health_practitioner_other_div").addClass("d-none");
                $("#health_practitioner_other").val("");
            }
        }

        $("#health_practitioner").on("change", function(){
            hideShowHealthPractitionerOtherDiv();
        });
        
        hideShowHealthPractitionerOtherDiv();
        
        $("#client_id").on("change", function(){
            getStaffList();
        });
        function getStaffList() {
            var client_id = $("#client_id").val();
            if (isAdmin) {
                $.ajax({
                    type: 'GET',
                    data : {
                        client_id : client_id
                    },
                    url: "{!! route('doctor_visit.get_staff_list') !!}",
                    success: function(data) {
                        if (data.status) {
                            console.table(data.staff_list);
                            var $select = $('#staff_id');
                            $select.select2('destroy');

                            $select.find('option:not(:first)').remove();

                            $.each(data.staff_list, function(id, name) {
                                $select.append($('<option>', {
                                    value: id,
                                    text: name
                                }));
                            });
                            $select.select2({
                                placeholder: "Select Staff",
                                allowClear: true
                            })
                        }
                    }
                });
            }
        }
    });
</script>
<script type="text/javascript">
    // var ajaxDropzoneUrl = "{{route('doctor_visit.attachmentupload',$data['id']??'')}}";
    var ajaxDropzoneDeleteUrl = "{!! route('doctor_visit.destroy',1) !!}";

    // var validator;

    // function initDropZone5() {
    //     // set the dropzone container id
    //     const id = "#kt_dropzonejs_attachments";
    //     const dropzone = document.querySelector(id);
    //     if(!dropzone)
    //     {
    //         return;
    //     }

    //     var uploadedFiles = [];

    //     // set the preview element template
    //     var previewNode = dropzone.querySelector(".dropzone-item");
    //     previewNode.id = "";
    //     var previewTemplate = previewNode.parentNode.innerHTML;
    //     previewNode.parentNode.removeChild(previewNode);

    //     var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
    //         url: ajaxDropzoneUrl, // Set the url for your upload script location
    //         method: 'post',
    //         headers: {
    //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    //         },
    //         // parallelUploads: 20,
    //         maxFilesize: 10, // Max filesize in MB
    //         previewTemplate: previewTemplate,
    //         acceptedFiles: "application/pdf,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    //         // acceptedFiles: "application/pdf",
    //         previewsContainer: id + " .dropzone-items", // Define the container to display the previews
    //         clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
    //     });

    //     myDropzone.on("addedfile", function(file) {
    //         // Hookup the start button
    //         const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
    //         dropzoneItems.forEach(dropzoneItem => {
    //             dropzoneItem.style.display = '';
    //         });
    //     });

    //     // Update the total progress bar
    //     myDropzone.on("totaluploadprogress", function(progress) {
    //         const progressBars = dropzone.querySelectorAll('.progress-bar');
    //         progressBars.forEach(progressBar => {
    //             progressBar.style.width = progress + "%";
    //         });
    //     });

    //     myDropzone.on("sending", function(file) {
    //         // Show the total progress bar when upload starts
    //         const progressBars = dropzone.querySelectorAll('.progress-bar');
    //         progressBars.forEach(progressBar => {
    //             progressBar.style.opacity = "1";
    //         });
    //     });

    //     // Hide the total progress bar when nothing"s uploading anymore
    //     myDropzone.on("complete", function(progress) {
    //         const progressBars = dropzone.querySelectorAll('.dz-complete');
    //         // console.log(progress, progress.xhr);
    //         if (progress && progress.xhr && progress.xhr.status == 200 && progress.xhr.response) {
    //             var res = JSON.parse(progress.xhr.response);
    //             $(progress.previewElement).attr('id', res['id']);
    //             $(progress.previewElement).attr('file_name', res['file_name']);
    //             $(progress.previewElement).attr('data-sub-type', 'inside_of_cabin');
    //             uploadedFiles.push(res['file_name']);
    //             $('#attachments_hidden_input').val(uploadedFiles.join(";"));                
    //         } else {
    //             $(progress.previewElement).attr('id', 'new');
    //         }
    //         setTimeout(function() {
    //             progressBars.forEach(progressBar => {
    //                 progressBar.querySelector('.progress-bar').style.opacity = "0";
    //                 progressBar.querySelector('.progress').style.opacity = "0";
    //             });
    //         }, 300);
    //     });
    // }
    // initDropZone5();

    $(document).on('click', '.dropzone-delete', function() {
        actionDeleteDropZone(this);
    });

    function actionDeleteDropZone(ele) {
        var row = $(ele).parents('.dropzone-item:first');
        if (row) {
            var id = row.attr('id');
            let deleteConfirmation = deleteAlert;
            deleteConfirmation['text'] = "Are you sure you want to delete this file?";
            Swal.fire(deleteConfirmation).then(function(result) {
                if (result.value) {
                    let requestData = {
                        "_method": 'DELETE',
                        "_token": "{{ csrf_token() }}",
                        "type": id == "new" ? 'DeleteNewFile' : 'particularFile'
                    };
                    if (id == "new") {
                        requestData["file_name"] = row.attr('file_name');
                        requestData["id"] = "new";
                    } else {
                        requestData["file_id"] = id;
                        requestData['id'] = "{{$data['id']??''}}";
                    }
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: requestData,
                        url: ajaxDropzoneDeleteUrl,
                        success: function(data) {
                            if (data.status) {
                                let deleteSuccess = deleteSuccessAlert;
                                deleteSuccess['text'] = "File deleted successfully!";
                                Swal.fire(deleteSuccess);
                                row.remove();
                            }
                        }
                    });
                }
            });
        }
    }
</script>
@endsection