@extends('layouts.main')

@push('styles')
    <link href="{{ asset('fullcalendar/packages/core/main.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('fullcalendar/packages/daygrid/main.css') }}" rel="stylesheet" />
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">{{ __('patients.appointments') }}</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}">{{ __('patients.dashboard') }}</a></li>
                <li><a href="{{ route('patients.index') }}">{{ __('patients.patients') }}</a></li>
                <li class="active">{{ __('patients.appointments') }}</li>
            </ol>
        </div>
    </div>

    <div class="white-box">
        @include('flash::message')

        <div class="row">
            <div class="col-md-6">
                <a href="{{ url('/patients/appointment_requests') }}" class="btn btn-success">{{ __('patients.view_appointment_requests') }}</a>
            </div>
            <div class="col-md-6">
                <a href="{{ url('/patients/create_appointment') }}" class="btn btn-success pull-right">{{ __('patients.create_new_appointment') }}</a>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {{ Form::label('clinic_allocation', __('patients.clinic_allocation')) }}
                    {{ Form::select('clinic_allocation', $clinics, '', ['class' => 'form-control col-sm-12 compulsory search_criteria', 'id' => 'clinic_allocation']) }}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {{ Form::label('in_charge', __('patients.incharge')) }}
                    <select id="in_charge" class="form-control col-sm-12 compulsory search_criteria">
                        <option value="0">{{ __('patients.all_staff') }}</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->first_name }} {{ $user->last_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div id='calendar'></div>
        <br><br>
        <p>{{ __('patients.search_criteria') }} <code id="search_criteria_text">{{ __('patients.all') }}</code></p>
        <div class="table-responsive">
            <table class="table color-bordered-table success-bordered-table">
                <thead>
                    <tr>
                        <th>{{ __('patients.patient_name') }}</th>
                        <th>{{ __('patients.clinic') }}</th>
                        <th>{{ __('patients.incharge') }}</th>
                        <th>{{ __('patients.appointment_time') }}</th>
                        <th>{{ __('patients.patient_contact') }}</th>
                        <th>{{ __('patients.comments') }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="patients_table"></tbody>
            </table>
        </div>
    </div>

    <div class="modal" id="modal_select_actions" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">{{ __('patients.select_actions') }}</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-success btn-rounded" data-toggle="modal" id="startAppWithClinicBtn">{{ __('layout.start_appointment_with_clinic') }}</button>
                        </div>
                        <div class="col-md-3">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-success btn-rounded" onclick="displayActivationModel()">{{ __('patients.start_appointment') }}</a>
                        </div>
                        <div class="col-md-3">
                            <a class="btn btn-warning btn-rounded" onclick="reschedule_appointment()">{{ __('patients.reschedule_appointment') }}</a>
                        </div>
                        <div class="col-md-3">
                            <a class="btn btn-danger btn-rounded" onclick="cancel_appointment()">{{ __('patients.cancel_appointment') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- start an appointment with a clinic and a doctor option -->
    <div class="modal fade" id="startAppointmentWithClinicModal" tabindex="-1" role="dialog" aria-labelledby="appointmentWithDoctorAndClinicLabel1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="appointmentWithDoctorAndClinicLabel1">{{ __('patient_episode.doctor_and_clinic_allocation') }}</h4>
                </div>
                <div class="modal-body">
                    {{ Form::open(['route' => 'patient_episodes.start_appointment_with_doctor_and_clinic']) }}

                    {{ Form::hidden('patient_id', 0, ['id' => 'selected_patient_id']) }}
                    {{ Form::hidden('selected_appointment_id', 0, ['id' => 'selected_appointment_id']) }}

                    <div class="form-group">
                    {{ Form::label('special_clinic_id', __('layout.select_clinic')) }}
                    {{ Form::select('special_clinic_id', $special_clinics, '', ['class' => 'form-control', 'required' => 'true'])}}
                    </div> 

                    <div class="form-group">
                    {{ Form::label('allocated_services_id_with_doctor_id', __('patient_episode.doctor_allocation')) }}
                    {{ Form::select('allocated_services_id_with_doctor_id', $users_array, '', ['class' => 'form-control appWithClinicDoctorDropDown'])}}
                    </div>                                   
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('<?php echo __('patient_episode.are_you_sure_doctor_and_clinic'); ?>');">{{ __('patient_episode.continue_allocation') }}</button>
                    {{ Form::close() }}
                    <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">{{ __('layout.close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('fullcalendar/packages/core/main.js') }}"></script>
    <script src="{{ asset('fullcalendar/packages/interaction/main.js') }}"></script>
    <script src="{{ asset('fullcalendar/packages/daygrid/main.js') }}"></script>
    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

    <script type="text/javascript">
        let clinic_id = -1;
        let user_id = 0;
        let selected_date_search = "2020-01-01";
        let selectedPatientId = 0;
        let appointmentId = 0;

        function reschedule_appointment() {
            if (confirm("<?php echo __('patients.reschedule_appointment_warning')?>")) {
                window.location.href = "/patients/reschedule_appointment/" + appointmentId;
            }
        }

        function cancel_appointment() {
            if (confirm("<?php echo __('patients.cancel_appointment_warning')?>")){
                $.ajax({
                    method: 'GET',
                    url: '/patients/cancel_patient_appointment/' + appointmentId,
                    success: function(response){
                        if(response == 1) {
                            alert("<?php echo __('patients.appointment_cancelled')?>");
                            $("#modal_select_actions").modal("hide");
                            fetch_patients();
                        } else {
                            alert("<?php echo __('patients.cancel_appointment_failed')?>");
                        }
                    }
                });
            }
        }

        function displayAppointmentActions(patientId, appointment_id) {
            selectedPatientId = patientId;
            appointmentId = appointment_id;

            $("#modal_select_actions").modal("show");
        }

        function displayActivationModel(){
            window.location.href = "/patients/complete_appointment/" + appointmentId;
        }

        $('#startAppWithClinicBtn').click(function(e) {
            $('#modal_select_actions').modal('hide');
            $('#selected_appointment_id').val(appointmentId);
            $('#selected_patient_id').val(selectedPatientId);
            $('#startAppointmentWithClinicModal').modal('show');
        });

        $('.appWithClinicDoctorDropDown').select2({
            placeholder: "Select",
            width: "100%",
            dropdownParent: $('#startAppointmentWithClinicModal')
        });

        document.addEventListener('DOMContentLoaded', function() {
            $('#clinic_allocation, #in_charge').select2({
                //
            });

            // ever felt like you're spelling a word wrong and auto-correct is taking it's sweet vacation time!
            $('.search_criteria').change(function () {
                user_id = $('#in_charge').val();
                clinic_id = $('#clinic_allocation').val();

                let user_name = $('#in_charge').find('option:selected').text();
                let clinic_name = $('#clinic_allocation').find('option:selected').text();

                let text = "<?php echo __('patients.clinic')?>: " + clinic_name + " | <?php echo __('patients.user')?>: " + user_name;

                $('#search_criteria_text').text(text);
                fetch_patients();
            });

            let calendarEl = document.getElementById('calendar');

            let calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'interaction', 'dayGrid','bootstrap' ],
                themeSystem: 'bootstrap',
                height: 100,
                selectable: true,
                select: function(arg) {
                    selected_date_search = arg.start.getFullYear() + "-" + (arg.start.getMonth() + 1) + "-" +  arg.start.getDate();
                    fetch_patients();
                },
                editable: true,
                eventLimit: true,
                events: <?php echo json_encode($calender_dates); ?>
            });

            calendar.render();

            $(".fc-day-header").css("background", "#43c392");

            $(".fc-button").click(function () {
                $(".fc-day-header").css("background", "#43c392");
            });
        });

        function fetch_patients() {
            $.ajax({
                type: "POST",
                url: "/patients/follow_up_fetch_patients",
                data: {
                    selected_date: selected_date_search,
                    clinic_id: clinic_id,
                    user_id: user_id
                },
                cache: false,
                success: function (response) {
                    $('#patients_table').html(response);
                }/*,
                error: function(xhr, status, error) {
                    alert(xhr.responseText);
                }*/
            });
        }
    </script>

@endpush