@extends('layouts.app')
@section('title', 'EndoCapture')
@section('style')
<style>
    @media (min-width: 992px){
        .header-fixed.subheader-fixed.subheader-enabled .wrapper {
            padding-top: 65px;
        }
        .table_mobile{
            display: none;
        }
    }
    @media (max-width: 992px){
        #table_web{
            display: none;
        }
    }
    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: #B5B5C3;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #0071bb;
    }
    .label-pill{
        font-size: 1em;
    }
    td,th{
        vertical-align: inherit !important;
    }
    @keyframes ldio-vfu9b3lacsh {
      0% { opacity: 1 }
      50% { opacity: .5 }
      100% { opacity: 1 }
    }
    .ldio-vfu9b3lacsh div {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 15px;
      animation: ldio-vfu9b3lacsh 1s cubic-bezier(0.5,0,0.5,1) infinite;
    }.ldio-vfu9b3lacsh div:nth-child(1) {
      transform: translate(30px,0);
      background: #93dbe9;
      animation-delay: -0.6s;
    }.ldio-vfu9b3lacsh div:nth-child(2) {
      transform: translate(70px,0);
      background: #689cc5;
      animation-delay: -0.4s;
    }.ldio-vfu9b3lacsh div:nth-child(3) {
      transform: translate(110px,0);
      background: #5e6fa3;
      animation-delay: -0.2s;
    }.ldio-vfu9b3lacsh div:nth-child(4) {
      transform: translate(150px,0);
      background: #3b4368;
      animation-delay: -1s;
    }
    .loadingio-spinner-bars-zy9i70wgs1m {
      width: 200px;
      height: 50px;
      display: inline-block;
      overflow: hidden;
      background: #ffffff;
    }
    .ldio-vfu9b3lacsh {
      width: 100%;
      height: 100%;
      position: relative;
      transform: translateZ(0) scale(1);
      backface-visibility: hidden;
      transform-origin: 0 0; /* see note above */
    }
    .ldio-vfu9b3lacsh div { box-sizing: content-box; }
    /* generated by https://loading.io/ */
    #kt_content{
        min-height: 970px;
    }
    .product-scroll{
        height: 5em;;
    }
    .dontnew{
        width: 50%;
        /* white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; */
    }
    #show_procedure_list:hover{
        color: #0071bb;
    }
    /* .fc-time{
        opacity: 0;
    } */
</style>
@foreach ($room as $color)
    <style>
        .checkbox.checkbox-color{{$color->bookroom_id}} > input:checked ~ span {
            background-color: {{$color->bookroom_color}};
        }
        .icon_bg{{$color->bookroom_id}}{
            color:{{$color->bookroom_color}} !important;
            /* background-color:{{$color->bookroom_color}}; */
        }
        .fc-event{{$color->bookroom_id}}{
            border: 2px solid {{$color->bookroom_color}} !important;
            /* background:{{$color->bookroom_color}} !important; */
            /* background-color:{{$color->bookroom_color}}; */
        }
    </style>
@endforeach
@endsection

@section('modal')
    <!-- BEGIN MODAL -->

    <div class="modal fade none-border" id="event-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add New Event</h4>
                </div>
                <div class="modal-body p-b-0"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
                    <button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Add Category -->
    <div class="modal fade none-border" id="add-category" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add a category</h4>
                </div>
                <div class="modal-body p-b-0">
                    <form role="form">
                        <div class="form-group">
                            <label class="control-label">Category Name</label>
                            <input class="form-control form-white" placeholder="Enter name" type="text" name="category-name"/>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Choose Category Color</label>
                            <select class="form-control form-white" data-placeholder="Choose a color..." name="category-color">
                                <option value="success">Success</option>
                                <option value="danger">Danger</option>
                                <option value="info">Info</option>
                                <option value="pink">Pink</option>
                                <option value="primary">Primary</option>
                                <option value="warning">Warning</option>
                                <option value="inverse">Inverse</option>
                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger waves-effect waves-light save-category" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- END MODAL -->
    <div class="modal fade bd-example-modal-lg" id="barcode" 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-header" style="align-self: center;">
                    {{-- <i class="fas fa-barcode  icon-2x"></i> --}}
                    <h2 style="margin: 0;"> Scan Barcode</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="text" name="" id="barscan" class="form-control form-control-lg" style="font-size: xxx-large;text-align: center;font-weight: 500;" autocomplete="off">
                </div>
                <div class="modal-footer" style="    padding: 1em;">
                    <p id="showbarcode" style="width: 100%;">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
<div class="col-12 cardcode" style="display: none">
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <label id="discharge_toggle">
                <font size='4'><b>Page Detail</b></font>
            </label>
            <div class="row">
                <div class="col-12">
                    <a id="test123">HomeController -> Index</a>
                    <br>
                    Controller : <a
                        href="{{ url("autoit?run=visualcode_open\\endo.exe&path=HomeController") }}">HomeController</a>
                </div>
                <div class="col-12">
                    View : <a
                        href="{{ url("autoit?run=visualcode_open\\endo.exe&path=home/index.blade.php") }}">home/index.blade.php</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin: 0;">
    <div class="col-lg-9" style="padding: 1em;">
        <div class="card card-custom" style="height: 100%;">
            <div class="card-body">
                <div id="kt_calendar"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-3" style="padding: 1em;">
        <div class="card card-custom card-stretch" id="kt_page_stretched_card" style="height: 35%;">
            <div class="card-body">
                <div class="row">
                    <div class="col-8"><h3 class="mb-0">Doctor list</h3></div>
                    <div class="col-4 text-right"><button id="show_doctor_list" class="btn btn-outline-dark btn-sm">show all</button></div>
                    <div class="col-12 mt-2 mb-2">
                        <hr>
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4">Doctor</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" id="search_doctor" data-size="7" name="search_doctor" data-live-search="true">
                            @if ($doctor != '')
                                <option value="">Select Doctor</option>
                                @foreach ($doctor as $d)
                                <option value="{{$d->bookdoctor_id}}">{{$d->bookdoctor_name}}</option>
                                @endforeach
                            @else
                            <option>ไม่มีขู้มูล Doctor</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4">Procedure</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" id="search_procedure" data-size="7" name="search_procedure" data-live-search="true">
                            @if ($procedure != '')
                                <option value="">Select Procedure</option>
                                @foreach ($procedure as $p)
                                <option value="{{$p->bookprocedure_code}}">{{$p->bookprocedure_name}}</option>
                                @endforeach
                            @else
                                <option>ไม่มีขู้มูล Procedure</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row row_ct">
                    <div class="col-lg-4">Room</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" id="search_room" data-size="7" name="search_room" data-live-search="true">
                            <option value="">Select Room</option>
                            @if ($room != '')
                            @foreach ($room as $r)
                                <option data-icon="fa fas fa-circle icon_bg{{$r->bookroom_id}}" value="{{$r->bookroom_id}}">{{$r->bookroom_name}}</option>
                            @endforeach
                            @else
                                <option>ไม่มีขู้มูล Room</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="card-scroll">
                    <div class="row" style="width: 98%;">

                    </div>
                </div>
            </div>
        </div>
        <div class="card card-custom card-stretch mt-12" id="kt_page_stretched_card" style="height: 60%;">
            <form action="{{url('home')}}" method="POST" class="card-body" id="form_insert">
                @csrf
                @method('POST')
                <div class="row">
                    <div class="col-12"><h3 class="mb-0">Booking Detail</h3></div>
                    <input type="hidden" name="ap_id" id="this_ap_id">
                    <div class="col-12 mt-2 mb-2">
                        <hr>
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4">Date Time</div>
                    <div class="col-lg-8">
                        <div class='input-group' id='kt_daterangepicker_4'>
                            <textarea id="" cols="2"  class="form-control" name="date_time" id="date_time" readonly></textarea>
                            <div class="input-group-append">
                             <span class="input-group-text"><i class="la la-calendar-check-o"></i></span>
                            </div>
                        </div>
                        <input type="hidden" name="date_start" id="date_start">
                        <input type="hidden" name="date_end" id="date_end">
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" data-size="7" name="type_in" data-live-search="true">
                            <option value="day">ไม่เกิดซ้ำ</option>
                            <option value="week">ซ้ำในรายสัปดาห์</option>
                            <option value="month">ซ้ำในรายเดือน</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4">Doctor</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" data-size="7" id="insert_dc" name="doctor" data-live-search="true">
                            @if ($doctor != '')
                                <option value="">Select Doctor</option>
                                @foreach ($doctor as $d)
                                <option value="{{$d->bookdoctor_id}}">{{$d->bookdoctor_name}}</option>
                                @endforeach
                            @else
                            <option>ไม่มีขู้มูล Doctor</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row mb-1 row_ct">
                    <div class="col-lg-4">Procedure</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" id="insert_procedure" data-size="7" name="procedure" data-live-search="true">
                            @if ($procedure != '')
                                <option value="">Select Procedure</option>
                                @foreach ($procedure as $p)
                                <option value="{{$p->bookprocedure_code}}">{{$p->bookprocedure_name}}</option>
                                @endforeach
                            @else
                                <option>ไม่มีขู้มูล Procedure</option>
                            @endif
                        </select>
                    </div>
                </div>
                <div class="row mb-3 row_ct">
                    <div class="col-lg-4">Room</div>
                    <div class="col-lg-8">
                        <select class="form-control selectpicker" data-size="7" id="insert_room" name="room" data-live-search="true">
                            <option value="">Select Room</option>
                            @foreach ($room as $r)
                                <option data-icon="fa fas fa-circle icon_bg{{$r->bookroom_id}}" value="{{$r->bookroom_id}}">{{$r->bookroom_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mb-10 row_ct">
                    <div class="col-lg-12">Comment</div>
                    <div class="col-lg-12">
                        <textarea rows="3" class="form-control" id="insert_comment" name="comment"></textarea>
                    </div>
                </div>
                <div class="row mt-12">
                    <div class="col-12 text-right">
                        <button type="submit" name="btn_type" id="btn_submit" value="insert" class="btn btn-primary" style="width: 40%;">Create</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- <div class="row">
    <div class="col-12 text-center">
        <input type="text" name="" id="date_test" class="form-control w-40">
    </div>
</div> --}}








<script src="{{asset('public/plugins/jquery-ui/jquery-ui.min.js')}}"></script>
@endsection
@section('script')
<script>
    $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    $(".card-scroll").hide();
    function date_select(){

        $(".fc-day-top").click(function(){
        var today = new Date();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
            var calendar_date = $(this).attr('data-date')+' '+time;
            $('#kt_daterangepicker_4 .form-control').val( '['+calendar_date + '],[' + calendar_date+']');
            $('#date_start').val(calendar_date);
            $('#date_end').val(calendar_date);
            $("#insert_dc").val('').change();
            $("#insert_procedure").val('').change();
            $("#insert_room").val('').change();
            $("#insert_comment").val();
            $("#date_start").val(calendar_date);
            $("#date_end").val(calendar_date);
            $("#btn_submit").val('insert').text('Create').attr('class','btn btn-primary');
        });
    }
    $("#search_doctor, #search_procedure, #search_room").change(function(){
        var doctor_val = $('#search_doctor').val();
        var procedure_val = $('#search_procedure').val();
        var room_val = $('#search_room').val();
        $.post('{{url('jquery')}}',{
            event           : 'search_calendar',
            doctor_val      : doctor_val,
            procedure_val   : procedure_val,
            room_val        : room_val,
            },function(data,status){
                var show_data = JSON.parse(data);
                var fruits = [];
                show_data.forEach(show_event);
                function show_event(item, index) {
                    event_is={'title':item.bookdoctor_name,
                    'start':item.ap_date_start,
                    'end:':item.ap_date_end,
                    'description':item.ap_id,
                    'appointment_id' : item.ap_id,
                    'className':"fc-event"+item.bookroom_id,
                    };
                    fruits.push(event_is);
                }
                calendar(fruits);
                date_select();
                save_point();
            });
    });
    function start_page(){
        $.post('{{url('jquery')}}',{
            event           : 'search_calendar',
            },function(data,status){
                var show_data = JSON.parse(data);
                var fruits = [];
                show_data.forEach(show_event);

                function show_event(item, index) {
                    event_is={'title':item.bookdoctor_name,
                    'start':item.ap_date_start,
                    'end:':item.ap_date_end,
                    'description':item.ap_id,
                    'appointment_id' : item.ap_id,
                    'className':"fc-event"+item.bookroom_id,
                    };
                    fruits.push(event_is);
                }

                calendar(fruits);
                date_select();
            });
    }
    $(document).ready(function(){
        start_page();
    });
    $("#show_doctor_list").click(function(){
        start_page();
        $('#search_doctor').val('').change();
        $('#search_procedure').val('').change();
        $('#search_room').val('').change();

        $('#kt_daterangepicker_4 .form-control').val('');
            $('#date_start').val();
            $('#date_end').val();
            $("#insert_dc").val('').change();
            $("#insert_procedure").val('').change();
            $("#insert_room").val('').change();
            $("#insert_comment").val();
            $("#date_start").val();
            $("#date_end").val();
            $("#btn_submit").val('insert').text('Create').attr('class','btn btn-primary');
        save_point();
    });
</script>

<script>

var KTBootstrapDaterangepicker = function () {

        var demos = function () {
            $('#kt_daterangepicker_4').daterangepicker({
                buttonClasses: ' btn',
                applyClass: 'btn-primary',
                cancelClass: 'btn-secondary',

                timePicker: true,
                timePickerIncrement: 30,
                locale: {
                format: 'DD/MM/YYYY HH:mm'
                }
            }, function(start, end, label) {
                $('#kt_daterangepicker_4 .form-control').val( '['+start.format('DD/MM/YYYY HH:mm') + '],[' + end.format('DD/MM/YYYY HH:mm')+']');
                $('#date_start').val(start.format('MM/DD/YYYY H:mm'));
                $('#date_end').val(end.format('MM/DD/YYYY H:mm'));
            });
            var start = moment().subtract(29, 'days');
            var end = moment();

            $('#kt_daterangepicker_6').daterangepicker({
            buttonClasses: ' btn',
            applyClass: 'btn-primary',
            cancelClass: 'btn-secondary',

            startDate: start,
            endDate: end,
            ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
            }, function(start, end, label) {
            $('#kt_daterangepicker_6 .form-control').val( start.format('DD/MM/YYYY') + ' / ' + end.format('DD/MM/YYYY'));
            });
            }
            return {
            init: function() {
            demos();
            }
        };
    }();

    jQuery(document).ready(function() {
        KTBootstrapDaterangepicker.init();
    });
</script>

<script>
    function calendar (xval){
    var KTCalendarBasic = function() {

    return {
        //main function to initiate the module
        init: function() {
            var todayDate = moment().startOf('day');
            var YM = todayDate.format('YYYY-MM');
            var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
            var TODAY = todayDate.format('YYYY-MM-DD');
            var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
            $("#kt_calendar").empty();
            var calendarEl = document.getElementById('kt_calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
                themeSystem: 'bootstrap',

                isRTL: KTUtil.isRTL(),

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },

                height: 800,
                contentHeight: 780,
                aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio

                nowIndicator: true,
                now: TODAY + 'T09:25:00', // just for demo

                views: {
                    dayGridMonth: { buttonText: 'month' },
                    timeGridWeek: { buttonText: 'week' },
                    timeGridDay: { buttonText: 'day' }
                },

                defaultView: 'dayGridMonth',
                defaultDate: TODAY,

                editable: true,
                eventLimit: true, // allow "more" link when too many events
                navLinks: true,
                events:
                    xval
                ,

                eventRender: function(info) {
                    var element = $(info.event.extendedProps.description);
                    if (info.event.extendedProps && info.event.extendedProps.description) {
                        if (element.hasClass('fc-day-grid-event')) {
                            element.data('content', info.event.extendedProps.description);
                            element.data('placement', 'top');
                            KTApp.initPopover(element);
                        } else if (element.hasClass('fc-time-grid-event')) {
                            element.find('.fc-title').append('<div class="fc-description">' +  '</div>');
                        } else if (element.find('.fc-list-item-title').lenght !== 0) {
                            element.find('.fc-list-item-title').append('<div class="fc-description">' + '</div>');
                        }

                    }
                    console.log(element);
                },
                eventClick: function(calEvent, jsEvent, view) {
                    console.log(calEvent);
                    var app_id = calEvent.event._def.extendedProps.appointment_id;
                    console.log(app_id);
                    $.post('{{url('jquery')}}',{
                    event   : 'filler_calendar',
                    app_id  : app_id,
                    },function(data,status){
                        var vald = JSON.parse(data);
                        console.log(vald);
                        $("#kt_daterangepicker_4 .form-control").val('['+vald.ap_date_start+'],['+vald.ap_date_end+']');
                        $("#insert_dc").val(vald.ap_doctor).change();
                        $("#insert_procedure").val(vald.ap_procedure).change();
                        $("#insert_room").val(vald.ap_room).change();
                        $("#insert_comment").val(vald.ap_comment);
                        $("#date_start").val(vald.ap_date_start);
                        $("#date_end").val(vald.ap_date_end);
                        $("#this_ap_id").val(app_id);
                        $("#btn_submit").val('update').text('edit').attr('class','btn btn-warning');
                    });
                },
            });

            calendar.render();
        }
    };
}();

jQuery(document).ready(function() {
    KTCalendarBasic.init();
    date_select();
});

}

</script>

@endsection