@extends('layouts.layouts_ipad.layouts_Newipad')
@section('tophead')
    Booking List
@endsection
@section('style')
    <style>
        .modal-content {
            border: transparent !important;
        }

        .bg-orange {
            background: #DF6E51;
            color: #fff;
        }

        .btn-cancel-red {
            background: transparent;
            border: 1px solid #DF6E51;
            color: #DF6E51;
        }

        .btn-cancel-red:hover {
            background: #DF6E51;
            border: 1px solid #DF6E51;
            color: #fff;
        }

        #test::before {
            content: '>fsdf';
            color: red;
        }

        .cs-hover {
            cursor: pointer;
        }

        .text-detail tr:nth-child(odd) {
            background: #2B2F34;
        }

        .text-detail tr:nth-child(even) {
            background: #222529;
        }

        .btn-label .label-icon {
            background: #1e4870e6;
        }


        .table-book {
            overflow: auto;
            height: 10.3vh;

        }

        .table-book thead tr {
            position: sticky;
            top: 0px;
            z-index: 1;
        }
        .lg-control {
    width: 110%;
}
.center {
    text-align: center;
}

    </style>
@endsection
@section('modal')
    @include('EndoCAPTURE.ipad.modal.confirmModal')
    @include('EndoCAPTURE.ipad.booking.modal.modal_cancel')
@endsection

@section('content')

    @php
        use App\models\Mongo;
        use Illuminate\Support\Carbon;
    @endphp
    <input type="hidden" id="period_service" value="{{ @$booking->period_service }}">
    <input type="hidden" id="period_special" value="{{ @$booking->period_special }}">
    <input type="hidden" id="period_overtime" value="{{ @$booking->period_overtime }}">
    <div class="row p-4">
        <form action="{{ url('tablet/book') }}" method="GET">
            @method('GET')
            @csrf
            <input type="hidden" name="event" value="filters">
            <div class="row">
                <div class="col-2">
                    <input type="text" class="form-control form-control-dark lg-control" id="" name="search_hn"
                        placeholder="Search for HN">
                    {{-- @dd($nurse) --}}
                </div>
                <div class="col-2">
                    <input type="text" class="form-control form-control-dark lg-control " id="" name="search_name"
                        placeholder="Search for Name">
                    {{-- @dd($nurse) --}}
                </div>
                <div class="col-2">
                    <select class="form-select select2" id="select_book_physician" name="select_book_physician">
                        <option value="">Physician</option>
                        @foreach ($doctor as $data)
                            @php
                                $data = (object) $data;
                            @endphp
                            <option value="{{ $data->id }}">
                                @if (@$search_physician == $data->id)
                                @endif
                                {{ @$data->user_prefix }}
                                {{ @$data->user_firstname }}
                                &nbsp;&nbsp;
                                {{ @$data->user_lastname }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-2">
                    <button type="submit" class="btn btn-primary">Search</button> &ensp;
                    <a href="{{ url('tablet/book') }}" class="btn btn-warning">Clear</a>
                </div>
                {{-- @dd(1) --}}
                {{-- <div class="col-2 text-end">
            </div> --}}
                <div class="col-4 text-end">
                    <a href="{{ url('tablet/cal') }}" type="button"
                        class="btn btn-primary btn-label waves-effect right waves-light "><i
                            class="ri-edit-box-line label-icon align-middle fs-16 ms-2 "></i>Create Booking </a>

                    <a href="{{ url('tablet/bookingview') }}" type="button"
                        class="btn btn-primary btn-label waves-effect right waves-light">
                        <i class="ri-calendar-todo-fill label-icon align-middle fs-16 ms-2"></i>
                        Booking Calendar</a>

                </div>
            </div>
        </form>
        <div class="col-12 mt-2">
            {{-- @dd($tb_booking); --}}
            <table class="table table-nowrap text-detail table-book" id="table_book">
                <thead>
                    <tr style="background: #121212;">
                        <td>Date</td>
                        <td>HN</td>
                        <td>Name</td>
                        <td>Physician</td>
                        <td>Procedure</td>
                        <td>Description</td>
                        <td>Urgent</td>
                        <td>Confirm</td>
                        <td>Action</td>
                    </tr>
                </thead>
                <tbody>
                    @forelse($tb_booking as $data)
                        <tr>
                            @php
                                $data = (object) $data;
                            @endphp
                            <td>

                                    <input type="hidden" id="book_id" value="{{$data->_id}}">
                                    <input type="hidden" id="hn" value="{{$data->hn}}">

                                    {{-- <input type="date" class="form-control change_booking_date" value="{{@$data->date}}"> --}}
                                    {{ @$data->date }}

                            </td>

                            <td class="text-white" data-bs-toggle="modal" data-bs-target="#confirm_booking"
                                data-id="{{ @$data->noteid }}" onclick='modal_detail("{{ @$data->_id }}")'>
                                <u>{{ @$data->hn }}</u>
                            </td>

                            <td>{{ @$data->patient_name }}</td>
                            <td>{{ @$data->physician_name }}</td>
                            <td>
                                @php
                                    $procedureNames = [];
                                    foreach ($data->procedure as $proc) {
                                        $tb_procedure = Mongo::table('tb_procedure')->where('code', $proc)->first();
                                        $procedure = (object) $tb_procedure;
                                        $procedureNames[] = @$procedure->name;
                                    }
                                    $proc_name = implode(', ', array_filter($procedureNames));
                                @endphp
                                {{ @$proc_name }}
                            </td>
                            <td>{{ @$data->description }}</td>
                            <td>
                                @if ($data->urgent == 'urgency' || $data->urgent == 'emergency')
                                    <i class="ri-checkbox-circle-fill text-danger ri-lg"></i>
                                @endif
                            </td>
                            <td>
                                {{-- @dd($data); --}}
                                @if (@$data->confirm == 'confirm')
                                    <span class="text-success">
                                        มาตามนัด
                                    </span>
                                    {{-- <i class="ri-checkbox-circle-fill text-success ri-lg ck-confirm "id="{{ @$data->noteid }}"></i> --}}
                                @else
                                    <span class="text-danger"> {{ @$data->book_cancel }}</span>
                                @endif
                                @if (@$data->confirm == 'cancel')
                                    <span class="text-danger">

                                    </span>
                                    {{-- <i
                                        class="ri-checkbox-circle-fill text-danger ri-lg ck-confirm "id="{{ @$data->noteid }}"></i> --}}
                                @endif
                            </td>
                            <td>

                                <a href="{{ url('tablet/book/' . @$data->hn .'_'.@$data->_id . '/edit' ) }}"
                                    class="btn btn-warning btn-icon">
                                    <i class="ri-file-edit-fill text-white"></i>
                                 </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" style=" height: 50.3vh;">
                                <div class="row">
                                    <div class="col-12 center" style="margin-top: 130px;"><h3>No Data Found !</h3></div>
                                <div class="col-4"></div>
                                <div class="col-4 mt-3" style="border-bottom: 1px solid #70707050;"></div>
                                <div class="col-12 center mt-4" > <h3 style="color: #F06548B2">Please verify the status before proceeding</h3></div>
                            </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('#select_book_physician').select2({
            placeholder: "Select physician",
            allowClear: true, // เพิ่มปุ่มล้างค่าที่เลือก
            width: '100%' // ทำให้ Select2 เต็มความกว้างของคอลัมน์
        });
    });

    // $(".change_booking_date").change(function(){
    //         var date = $(this).val();
    //         var book_id = $(this).closest("td").find("#book_id").val();
    //         var hn = $(this).closest("td").find("#hn").val();
    //         console.log(book_id);

    //         $.post("{{ url('api/calbook') }}", {
    //             event: "change_date",
    //             date: date,
    //             book_id: book_id,
    //             hn: hn,
    //         }, function(d, s) {
    //             location.reload();
    //         });
    //     })
</script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script> --}}

    <script>
        $(".radio_patienttype").click(function() {
            var patient_type = $(this).val()
            $("#txt_patienttype").html(patient_type)
            // alert(patient_type)
        });
        $(".radio-type").click(function() {
            var time_type = $(this).val()
            $("#time_type").html(time_type)
        })

        $(".radio_urgency").click(function() {
            var txt_urgency = $(this).val()
            // alert(txt_urgency);
            $("#txt_urgent").html(txt_urgency)
        })
        $("#cal_physician").change(function() {
            var select_physician = $("#cal_physician option:selected").text();
            $("#txt_physician").html(select_physician)
            //    alert(select_physician);
        })

        $("#cal_physician").change(function() {
            var select_physician = $("#cal_physician option:selected").text();
            $("#txt_physician").html(select_physician)
            //    alert(select_physician);
        })


        $("#ga_anesthesia").click(function() {
            var txt_ga = $(this).val();
            $("#txt_anes_ga").html(txt_ga)
        })
        $("#sedation_anesthesia").click(function() {
            var txt_sedation = $(this).val();
            $("#txt_anes_sedation").html(txt_sedation)
        })
        $("#la_anesthesia").click(function() {
            var txt_la = $(this).val();
            $("#txt_anes_la").html(txt_la)
        })

        $("#cal_physician").change(function() {
            var select_physician = $("#cal_physician option:selected").text();
            $("#txt_physician").html(select_physician)
            //    alert(select_physician);
        })

        $("#cal_procedure01").change(function() {
            var select_procedure01 = $("#cal_procedure01 option:selected").text();
            console.log(select_procedure01, 'a');
            $("#txt_procedure01").html(select_procedure01)
        })

        $("#cal_procedure02").change(function() {
            var select_procedure02 = $("#cal_procedure02 option:selected").text();
            console.log(select_procedure02, 'b');
            $("#txt_procedure02").html(select_procedure02)
        })
        $("#cal_procedure03").change(function() {
            var select_procedure03 = $("#cal_procedure03 option:selected").text();
            console.log(select_procedure03, 'c');
            $("#txt_procedure03").html(select_procedure03)

        })


        $("#special_ck01").click(function() {
            var txt_spec_flu = $(this).val();
            $("#txt_spec_flu").html(txt_spec_flu)
        })
        $("#special_ck02").click(function() {
            var txt_spec_spy = $(this).val();
            $("#txt_spec_spyglass").html(txt_spec_spy)
        })
        $("#special_ck03").click(function() {
            var txt_spec_laser = $(this).val();
            $("#txt_spec_laser").html(txt_spec_laser)
        })
    </script>

    <script>
        $(document).ready(function() {
            $('#s_physician').select2({
                placeholder: "Physician",
                allowClear: true
            });

            $('#s_physician').on('select2:open', function(e) {
                $('.select2-dropdown').hide();
                setTimeout(function() {
                    jQuery('.select2-dropdown').slideDown(300);
                });
            });
        });
    </script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });



        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"), {});
        var service = $("#period_service").val();
        var special = $("#period_special").val();
        var overtime = $("#period_overtime").val();

        function modal_detail(_id) {
            // alert(1);
            $.post('{{ url('api/calbook') }}', {
                event: "get_book",
                bookid: _id
            }, function(data, status) {
                let values = JSON.parse(data)
                let id = values.bookid
                let procedures = values.procedure_name ?? []
                let procs = procedures.filter(item => item !== null && item !== undefined).join(', ');
                let period = values.period;
                if (period == "am") {
                    period = "{{ $booking->period_service }}";
                }else if (period == "pm") {
                    period = "{{ $booking->period_special }}";
                }else if (period == "ot") {
                    period = "{{ $booking->period_overtime }}";
                }


                $(".modal_book_id").val(values.bookid || "")
                $("#confirm_booking_hn").text(values.hn || "")
                $("#confirm_booking_title01").text(`${values.patient_name || ''} (${values.age || ''})`);
                $("#confirm_booking_title02").text(`Contact : ${values.phone || '-'}`);
                $("#confirm_department").text(values.department || "-")
                $("#modal_note_id").val(id || '-')
                $("#modal_date").text(values.date || '-')
                $("#modal_dateformat").text(values.dateformat || '-')

                $("#modal_physician").text(values.physician_name || '-')
                $("#modal_period").text(period || 'N/A')
                $("#modal_procedure").text(procs || 'N/A')
                $("#modal_urgent").text(values.urgent || 'N/A')
                $("#modal_patient_type").text(values.patient_type || 'N/A')
                $("#modal_anesthesia").text(values.anesthesia || 'N/A')
                $("#modal_special").text(values.special || 'N/A')
                $("#book_description").val(values.description || 'N/A')
                $("#book_cancel_reason").val(values.book_reason || 'N/A')
                $("#select-cancel").val(values.book_cancel || '-').change()
                $("#select-confirm-nurse").val(values.user_id || '-').change()
                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', id ? `{{ url('tablet/prepare') }}/${id}` :
                    "{{ url('tablet/book') }}");
            })
            myModal.show();
        }
    </script>

    <script>
        $("#book-cancel").on('click', function() {
            var user_id = $('#select-confirm-nurse').val()
            var desciption = $("#book_description").val();
            var date = $("#modal_date").text();
            var hn = $("#confirm_booking_hn").text();
            var department = $("#confirm_department").text();
            var book_cancel = $("#select-cancel").val();
            var book_reason = $("#book_cancel_reason").val();
            var book_id = $(".modal_book_id").val();
            // console.log(book_reason, book_cancel);

            $.post("{{ url('api/jquery') }}", {
                event: 'book_cancel',
                date: date,
                department: department,
                hn: hn,
                book_cancel: book_cancel,
                book_reason: book_reason,
                user_id: user_id,
                desciption: desciption,
                book_id: book_id
            }, function(data, status) {
                if (data == 'success') {
                    location.reload();
                }
            })
        })

        $(".book-confirm").on('click', function() {
            // alert(1);
            var date = $("#modal_date").text();
            var td_id = $("#modal_select_id").val();
            var user_id = $('#select-confirm-nurse').val()
            var desciption = $("#book_description").val();
            var book_id = $(".modal_book_id").val();
            var hn = $("#confirm_booking_hn").text();
            var department = $("#confirm_department").text();




            $.post("{{ url('api/jquery') }}", {
                event: 'book_confirm',
                date: date,
                department: department,
                hn: hn,
                user_id: user_id,
                desciption: desciption,
                book_id: book_id
            }, function(data, status) {
                if (data == 'success') {
                    location.reload();

                }
            });
        })
    </script>


    <script src='{{ url('assets/extra/fullcalendar/index.global.js') }}'></script>
    <script>
        let mday = {};
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            CustomButtons: {
                myCustombutton: {
                    text: 'button',
                    click: function() {
                        alert(1);
                    }
                }
            },
            initialDate: '{{ date('Y-m-d') }}',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            select: function(arg) {},
            eventClick: function(arg) {
                modal_calendareventclick(arg);
            },
            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: mday
        });
        calendar.render();
    </script>
@endsection
