@php
use App\models\Mongo;
@endphp

@extends('layouts.layouts_index.main')
@section('title', 'EndoBook')
@section('style')
<link rel="stylesheet" type="text/css" href="{{url('public/css/booking/index.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/css/booking/jquery.datetimepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{url('public/css/booking/jquerysctipttop.css')}}">


<style>
    /* html{
        min-height: 0 !important;
    } */


    .btn-create{
        color: #fff;
        background: #3577F1;
    }
    .btn-create:hover{
        background: #16459a;
        color: #fff;
    }
    .bg-head-book{
        background: #D6D6D6;
    }
    .bg-head-book .col-8,.bg-head-book .col-4{
        font-weight: 600;
        font-size: 1.4em;
    }
    .table-bordered td{
        text-align: center;
        line-height: 1em;
    }
    .table-dark th{
        border: none !important;
    }
    .bg-endo{
        background: #2C6296 !important;
        color: #fff !important;
    }
    .bg-endo-1{
        background: #c3d8eb !important;
        color: #000000;

    }
    .box{
        width: 1.2em;
        height: 1.2em;
    }
    .w-2{
        width: 2em;
    }
    .w-f{
        width: 15em;
    }
    .p-center{
        padding: 12px 0px !important;
    }
    .border-gray td{
        border-color: #c2c0c0;
    }
    .btn-book{background-color: #405189;color: white;padding-left: 15px;padding-right: 15px;}
    .btn-book:hover{background-color: #1e2c5a;}
    .cn{
        align-items: center;
    }
    .font-weight-normal {
        font-weight: 300 !important;
    }
    .list-book-procedure{
        height: 8em;
        overflow-y: auto;
    }
    .list-book-procedure tr{
        line-height: 1em;
    }
    .margin-delete{
        margin-top: -15px;
    }
    .scoll-auto{
        overflow: auto;

    }
    .btn-outline-orange{
        background: #fff;
        color: #F06548;
        border: 1px solid #F06548;
    }
    .btn-outline-orange:hover{
        background: #F06548;
        color: #fff;
    }
    .list-book-procedure tr td{
        padding: 0;
        line-height: 1em;
    }
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: #888;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .list-date:hover{
        cursor: pointer;
        transition:  0.3s;
        border: 1px solid #79b1e9;
        background: #3699FF;
    }
    .list-month i:hover{
        cursor: pointer;
        color: #1e2c5a !important;
    }

    .no-warp{
        white-space: nowrap;
    }
    .bg-calendar,.list-month{
        background: #2c6296;
    }
    .list-month div{color: var(--vz-input-bg);}
    .row {
    --vz-gutter-x: 1em;
    }
    .list-month > .col-2:hover{
        color: var(--vz-vertical-menu-bg-dark);
    }
    .text-case{
        color: #ff7f00;
    }
    .border-calendar
    {
        table-layout: fixed;
        border: 1px solid black;
    }
    @media (max-width: 1438px) {
        .text-res
        {
            font-size: 10px;
        }
        .text-dateres{
            font-size: 13px;
            font-weight: bold;
        }

    }
    @media (max-width: 1280px) {
        .ml-res{
            margin-left: 1em;

        }
    }
    .d-grid{
        display: grid;
    }
    .d-grid a{
        align-self: center;
    }
    h3{
        white-space: nowrap;
    }
    #confirm_booking table tr td:nth-child(3){width: 3em;}
    #confirm_booking table td{
        white-space: nowrap;
    }
    .bg-orange{background: #DF6E51;}
    .btn-orange{background: #DF6E51;color: white !important;}
    .btn-orange:hover{background: #b4523a;}
    #book_detail_head{
        height: 13.6em;
        overflow-y: auto;
    }

        .tableFixHead {
            overflow-y: auto;
            height: 375px;
        }
        .tableFixHead  thead tr {
            position: sticky;
            top: 0px;
            z-index: 99;
            color: #9599AD;
            }
         table {
            border-collapse: collapse;
            width: 100%;
         }
         .form-icon i {
            right: 16px !important;

            }
    .ck-confirm{display: none;}
    .ck-confirm.active{display: block;}
    .ri-checkbox-circle-fill{font-size: 1.5em;}
    #resource_available{height: 16em;overflow-y: auto;}
    #resource_available > table td{line-height: 1em;padding: .4em}
    #resource_available > table tr td:nth-child(2){text-align: right;}

</style>
@endsection
@section('title-left')
    <h4 class="mb-sm-0">BOOKING LIST</h4>
@endsection
@section('title-right')
    <ol class="breadcrumb m-0">
        <li class="breadcrumb-item"><a href="javascript: void(0);">Apps</a></li>
        <li class="breadcrumb-item active">Calendar</li>
    </ol>
@endsection
@section('modal')
    @include("EndoBOOK.home.modal.modal_select_doctor")
<div class="modal fade" id="modalcancel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm remove</h5>
            </div>
            <div class="modal-body row m-0">
                <h4 id="modal_id" class="col-6"></h4>
                <h4 id="modal_hn" class="col-6"></h4>
                <h4 id="modal_name" class="col-6"></h4>
                <input type="hidden" name="id" id="modal_text_id">
            </div>
            <div class="modal-footer row m-0">
                <button id="btn_modalcancel_close" type="button" class="btn btn-secondary col" data-dismiss="modalcancel">Close</button>
                <button id="btn_bookingcancel" type="submit" class="btn btn-danger col-8">Confirm remove</button>
            </div>
    </div>
</div>




<div class="modal fade" id="confirm_booking" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-body row m-0 border-bottom">
                <div class="col">
                    <div id="confirm_booking_title01">HN : 1243534   Suratchanut Chitrat (29 y 2 m)</div>
                    <div id="confirm_booking_title02">Contact : 091-232-3452</div>
                </div>
                <div class="col-auto">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
            </div>
            <div class="modal-body border-bottom">
                <div class="col-12 text-gray">
                    Booking Detail
                </div>
                <table class="table table-borderless ">
                    <tr>
                        <td>Date :</td>
                        <td><span class="text-white bg-orange" id="modal_date">Tue, 11 February 2023</span></td>
                        <td></td>
                        <td>Physician :</td>
                        <td id="modal_physician">Md.Suratchanut Chitrat (Surgery)</td>
                    </tr>
                    <tr>
                        <td>Period :</td>
                        <td id="moda_period">Working Time (A.M.)</td>
                        <td></td>
                        <td>Patient Type :</td>
                        <td id="modal_patient_type">Service</td>
                    </tr>
                    <tr>
                        <td>Procedure :</td>
                        <td id="modal_procedure">EGD, Colonoscopy</td>
                        <td></td>
                        <td>Anesthesia :</td>
                        <td>N/A</td>
                    </tr>
                    <tr>
                        <td>Special :</td>
                        <td>N/A</td>
                        <td></td>
                        <td>Urgent :</td>
                        <td id="modal_urgent">Elective</td>
                    </tr>
                </table>
            </div>
            <div class="modal-body">
                <input type="hidden" id="modal_note_id">
                <input type="hidden" id="modal_select_id">
                <div class="row m-0 cn">
                    <div class="col text-gray">
                        Booking Detail
                    </div>
                </div>
                <div class="row m-0">
                    <div class="col mt-2">
                        <label class="checkbox">
                            <input type="checkbox" name="abstain_from_food" class="form-check-input" value="งดน้ำ/งดอาหาร 8 ชั่วโมง" id="abstain_from_food"/>
                            <span></span>
                            &emsp;งดน้ำ/งดอาหาร 8 ชั่วโมง
                        </label>
                    </div>
                    <div class="col mt-2">
                        <label class="checkbox">
                            <input type="checkbox" class="form-check-input" name="switt" value="ทานยา Swift ครบ" id="switt"/>
                            <span></span>
                            &emsp;ทานยา Swift ครบ
                        </label>
                    </div>
                    <div class="col-5 mt-2"></div>
                </div>
                <div class="row m-0">
                    <div class="col mt-2">
                        <label class="checkbox">
                            <input type="checkbox" class="form-check-input" name="pressure_medication" value="ทานยาลดความดัน" id="pressure_medication"/>
                            <span></span>
                            &emsp;ทานยาลดความดัน
                        </label>
                    </div>
                    <div class="col mt-2">
                        <label class="checkbox">
                            <input type="checkbox" class="form-check-input" name="clear_water" value="ถ่ายเป็นลักษณะน้ำใส" id="clear_water"/>
                            <span></span>
                            &emsp;ถ่ายเป็นลักษณะน้ำใส
                        </label>
                    </div>
                    <div class="col-5 mt-2"></div>
                </div>
                <br><br>
                <div class="row m-0">
                    <div class="col-auto">
                        <button id="btn_modalcancel" class="btn btn-outline-orange btn-sm "><i class="ri-delete-bin-line"></i> Cancel</button>
                    </div>
                    {{-- <div class="col-auto">
                        <button class="btn btn-orange btn-sm"><i class="ri-share-forward-line"></i> Postpone Booking</button>
                    </div> --}}
                    <div class="col-auto">
                        <a id="edit_history" class="btn btn-orange btn-sm"><i class="ri-edit-box-line"></i> Edit history taking</a>
                    </div>
                    <div class="col-auto">
                        <a id="appointment_card" class="btn btn-success btn-sm"> <i class="ri-printer-line"></i> Appointment Card </a>
                    </div>
                    <div class="col"></div>
                    <div class="col-auto">
                        <button type="button" data-bs-dismiss="modal" class="btn btn-book btn-label waves-effect right waves-light btn-sm book-confirm"><i class="ri-arrow-right-s-fill label-icon align-middle fs-16 ms-2"></i> Confirm</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="event-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-header p-3 bg-soft-info">
                <h5 class="modal-title" id="modal-title">Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>
            <div class="modal-body p-4">
                <form class="needs-validation" name="event-form" id="form-event" novalidate>
                    <div class="text-end">
                        <a href="#" class="btn btn-sm btn-soft-primary" id="edit-event-btn" data-id="edit-event" onclick="editEvent(this)" role="button">Edit</a>
                    </div>
                    <div class="event-details">
                        <div class="d-flex mb-2">
                            <div class="flex-grow-1 d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <i class="ri-calendar-event-line text-muted fs-16"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="d-block fw-semibold mb-0" id="event-start-date-tag"></h6>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 me-3">
                                <i class="ri-time-line text-muted fs-16"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="d-block fw-semibold mb-0"><span id="event-timepicker1-tag"></span> - <span id="event-timepicker2-tag"></span></h6>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-2">
                            <div class="flex-shrink-0 me-3">
                                <i class="ri-map-pin-line text-muted fs-16"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="d-block fw-semibold mb-0"> <span id="event-location-tag"></span></h6>
                            </div>
                        </div>
                        <div class="d-flex mb-3">
                            <div class="flex-shrink-0 me-3">
                                <i class="ri-discuss-line text-muted fs-16"></i>
                            </div>
                            <div class="flex-grow-1">
                                <p class="d-block text-muted mb-0" id="event-description-tag"></p>
                            </div>
                        </div>
                    </div>
                    <div class="row event-form">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Type</label>
                                <select class="form-select d-none" name="category" id="event-category" required>
                                    <option value="bg-soft-danger">Danger</option>
                                    <option value="bg-soft-success">Success</option>
                                    <option value="bg-soft-primary">Primary</option>
                                    <option value="bg-soft-info">Info</option>
                                    <option value="bg-soft-dark">Dark</option>
                                    <option value="bg-soft-warning">Warning</option>
                                </select>
                                <div class="invalid-feedback">Please select a valid event category</div>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Event Name</label>
                                <input class="form-control d-none" placeholder="Enter event name" type="text" name="title" id="event-title" required value="" />
                                <div class="invalid-feedback">Please provide a valid event name</div>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-12">
                            <div class="mb-3">
                                <label>Event Date</label>
                                <div class="input-group d-none">
                                    <input type="text" id="event-start-date" class="form-control flatpickr flatpickr-input" placeholder="Select date" readonly required>
                                    <span class="input-group-text"><i class="ri-calendar-event-line"></i></span>
                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-12" id="event-time">
                            <div class="row">
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">Start Time</label>
                                        <div class="input-group d-none">
                                            <input id="timepicker1" type="text" class="form-control flatpickr flatpickr-input" placeholder="Select start time" readonly>
                                            <span class="input-group-text"><i class="ri-time-line"></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="mb-3">
                                        <label class="form-label">End Time</label>
                                        <div class="input-group d-none">
                                            <input id="timepicker2" type="text" class="form-control flatpickr flatpickr-input" placeholder="Select end time" readonly>
                                            <span class="input-group-text"><i class="ri-time-line"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="event-location">Location</label>
                                <div>
                                    <input type="text" class="form-control d-none" name="event-location" id="event-location" placeholder="Event location">
                                </div>
                            </div>
                        </div>
                        <!--end col-->
                        <input type="hidden" id="eventid" name="eventid" value="" />
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea class="form-control d-none" id="event-description" placeholder="Enter a description" rows="3" spellcheck="false"></textarea>
                            </div>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                    <div class="hstack gap-2 justify-content-end">
                        <button type="button" class="btn btn-soft-danger" id="btn-delete-event"><i class="ri-close-line align-bottom"></i> Delete</button>
                        <button type="submit" class="btn btn-success" id="btn-save-event">Add Event</button>
                    </div>
                </form>
            </div>
        </div> <!-- end modal-content-->
    </div> <!-- end modal dialog-->
</div>


<div id="Modal-addEvent-calendar" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content" style="border: 0px;">
            <div class="modal-header p-2" style="background: #245788;">
                <span class="modal-title text-light ms-3" id="Modal-addEvent-calendar">Add Event</span>
                <button type="button" class="btn btn-ghost-light" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body">
                <div class="row p-2">
                    <div class="col-12">
                        <h5 class="fs-15">
                            Event Type
                        </h5>
                    </div>
                    <div class="col-12">
                        <input type="text" class="form-control" >
                    </div>

                </div>
                <div class="row p-2">
                    <div class="col-12">
                        <h5 class="fs-15">
                            Event Name
                        </h5>
                    </div>
                    <div class="col-12">
                        <input type="text" class="form-control" >
                    </div>

                </div>
                <div class="row p-2">
                    <div class="col-12">
                        <h5 class="fs-15">
                            Event Date
                        </h5>
                    </div>
                    <div class="col-12">
                        <input type="Date" class="form-control" >
                    </div>

                </div>
                <div class="row p-2 ">
                    <div class="col-12">
                        <h5 class="fs-15">
                            Event Type
                        </h5>
                    </div>
                    <div class="col-12">
                        <textarea name="" id="" cols="30" rows="8" class="form-control w-100" ></textarea>
                    </div>

                </div>
            </div>
            <div class="border-bottom"></div>
                <div class="row py-3  mt-3">
                    <div class="col-12 text-center">
                        <button type="button" class="btn btn-success w-75 ">Add Event</button>
                    </div>
                </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


@endsection


@section('content')

<div class="row m-0 px-2 mb-1" id="head_menu">

    <div class="col-lg-12">
        <div class="row">
            <div class="col-xl-3">
                <div>
                    <div class="pe-2 me-n1 mb-3" data-simplebar style="height: 400px">
                        <a href="{{url("/")}}" class="btn btn-info mb-3"><i class=" ri-arrow-left-up-line "></i> &nbsp; Back</a>
                        @foreach($case10nextday as $key => $value)
                            <div class="card p-3 mb-2">
                                <div class="row">
                                    <div class="col-12">
                                        <i class="mdi mdi-checkbox-blank-circle font-size-11 me-2 text-success"></i>
                                        <span class="text-muted">
                                            {{$value['date']}}
                                        </span>
                                    </div>

                                    <div class="col-12 mt-3">
                                        <span class="h5">Procedure</span>
                                        <span class="d-inline">{{$value['num']}} cases</span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="col-xl-9">
                <div class="card card-h-100">
                    <div class="card-body">
                        <div id="external-events"></div>
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
    <script>
        function myFunction() {
            var input, filter, table, tr, td, i, txtValue;
            input = document.getElementById("myInput");
            filter = input.value.toUpperCase();
            table = document.getElementById("table_book");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
                }
            }
        }
    </script>
    <script>
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    function search_data(){
        var doctor = $("#s_physician").val()
        var search_all = $("#search_all").val()

        $('#table_book tbody tr').each(function(){
                if(doctor!='none'){
                    find_physician = ($(this).find('td').eq(3).text()).includes(doctor);
                }else{
                    find_physician = false;
                }
                if(search_all!=''){
                    find_hn = ($(this).find('td').eq(1).text()).includes(search_all);
                    find_name = ($(this).find('td').eq(2).text()).includes(search_all);
                    if(doctor=='none'){
                        find_physician = true;
                    }
                }else{
                    find_hn = false;
                    find_name = false;
                }
                if(find_physician && (find_hn||find_name)){
                    $(this).show();
                }else{
                    $(this).hide()
                }
            });
            if(doctor=='none'&&search_all==''){
                $('#table_book tbody tr').show()
            }

    }
    function select_day(day,month,year) {
        $("#search_day").val(day)
        $("#search_month").val(month)
        $("#search_year").val(year)

        $("#date_select").val(year+"-"+month+"-"+day);

        $("#filters").submit()
    }

    function change_month(status,month,year) {
        var s_day = $("#search_day").val()
        var s_month = $("#search_month").val()
        var s_year = $("#search_year").val()
        $.post("{{url('book/doctor')}}",
        {
            event       : 'gen_calendar',
            year        : year,
            month       : month,
            s_day       : s_day,
            s_month     : s_month,
            s_year      : s_year,
            status      : status,
        },
        function(data, status) {
            $("#show_calendar").html(data)
        })
    }

    $("#call_modal_select_doctor").click(function() {
        $("#modal_select_doctor").modal("show");
    });

</script>

<script>
    let noteid_temp = "";
    $("#btn_modalcancel").click(function() {
        noteid_temp = $(this).attr("noteid");
        $("#confirm_booking").modal("hide");
        $("#modalcancel").modal("show");
    });

    $("#btn_bookingcancel").click(function() {
        $.post("{{url('api/photo')}}",{
            event   : "cancel_booking",
            noteid  : noteid_temp
        },function(data, status) {
            window.location.reload();
        });
    });

    $("#btn_modalcancel_close").click(function() {
        $("#modalcancel").modal("hide");
    });

</script>


<script>
    var myModal = new bootstrap.Modal(document.getElementById("confirm_booking"), {});
    function modal_detail(id){
        $.post("{{url('api/jquery')}}",{
        event       : 'get_book_data',
        id          : id
        },function(data, status) {
            var values = JSON.parse(data)
            $("#confirm_booking_title01").text(`HN : ${values.hn}   ${values.name} (${values.age})`);
            $("#confirm_booking_title02").text(`Contact : `);
            $("#abstain_from_food").prop('checked',values.abstain_from_food)
            $("#switt").prop('checked',values.switt)
            $("#pressure_medication").prop('checked',values.pressure_medication)
            $("#clear_water").prop('checked',values.clear_water)
            $("#modal_note_id")     .val(id)
            $("#modal_date")        .text(values.date)
            $("#modal_physician")   .text(values.physician)
            $("#moda_period")       .text(values.period)
            $("#modal_patient_type").text(values.patient_type)
            $("#modal_procedure")   .text(values.procedure)
            $("#modal_urgent")      .text(values.urgent)
            if(values.user_id!=''){
                $("#modal_user_id").val(values.user_id).change()
            }
        })

        $("#btn_modalcancel")   .attr('noteid',`${id}`)
        $('#edit_history')      .attr('href',`{{url("book/registration")}}/${id}`)
        $('#appointment_card')  .attr('href',`{{url("book/prepare")}}/${id}'`)

        myModal.show();
    }
    $(".book-confirm").on('click',function(){
        var id                  = $("#modal_note_id").val();
        var td_id               = $("#modal_select_id").val();
        var user_id             = $('#modal_user_id').val()
        var abstain_from_food   = '';
        var switt               = '';
        var pressure_medication = '';
        var clear_water         = '';
        if($("#abstain_from_food").is(':checked')){
            abstain_from_food = $("#abstain_from_food").val()
        }
        if($("#switt").is(':checked')){
            switt = $("#switt").val()
        }
        if($("#pressure_medication").is(':checked')){
            pressure_medication = $("#pressure_medication").val()
        }
        if($("#clear_water").is(':checked')){
            clear_water = $("#clear_water").val()
        }
        $.post("{{url('api/jquery')}}",{
            event               : 'book_confirm',
            id                  : id,
            abstain_from_food   : abstain_from_food,
            switt               : switt,
            pressure_medication : pressure_medication,
            clear_water         : clear_water,
            user_id             : user_id
        },function(data, status) {
            if(data=='success'){
                if($("#"+id).hasClass('active')){

                }else{
                    $("#"+id).addClass('active')
                }
            }
        });
    })



</script>

{{-- @include('endobook.booking.calendarcase') --}}
@include('endobook.booking.calendarcase2')
@endsection
