@extends('layouts.admin')
@section('title')
Booking Calendar
@endsection
@section('content')
    <div class="pms-container mt-3">
        <div class="table-container z-depth-1 mb-3 mt-3">
            <a href="#" id="left-btn" class="btn-floating btn-small blue waves-effect waves-light"><i class="material-icons medium">chevron_left</i></a>
            <a href="#" id="right-btn" class="btn-floating btn-small blue waves-effect waves-light"><i class="material-icons medium">chevron_right</i></a>
            <div class="pane-hScroll table-wrapper z-depth-1 mb-3 mt-3">
                <table class="centered calender-table" id="reservations-table">
                    <thead>
                        <tr>
                            <th colspan="5" class="extra-width">
                                <div style="width:265px">
                                    <div class="input-field center-align date-picker-box" style="margin:5px">
                                        <a href="#" id="prev" style="margin-right:6px"><i class="material-icons">chevron_left</i></a>
                                        <input type="text" id="calendar-date-picker" class="datepicker center" value="{{Carbon\Carbon::parse(request()->date)->format('d-m-Y') ?: now()->format('d-m-Y')}}">
                                        <a href="#" id="next" style="margin-left:6px;"><i class="material-icons">chevron_right</i></a>
                                    </div>
                                </div>
                            </th>
                            @foreach($displayDates as $displayDate)
                                <th style="padding:4px;">
                                    <div style="font-family:sans-serif">
                                        <span>
                                            {{"{$displayDate->day} {$displayDate->shortEnglishDayOfWeek}"}}
                                        </span>
                                        <br> <span>{{$displayDate->englishMonth}}</span>
                                    </div>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody id="calendar-tbody">
                        @include('admin.reservations.includes.calendar-body')
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row mb-3">
            <h5 class="center mb-2">Booking Status</h5>
            <div class="col s12 m12 l11 offset-l1 row">
                <div class="col s12 m4 l4 offset-l2">
                    <span class="box-sm confirmed"></span> Booking confirmed.
                </div>
                <div class="col s12 m4 l4">
                    <span class="box-sm noshow"></span> Guest did not show up.
                </div>
                <div class="col s12 m4 l4 offset-l2">
                    <span class="box-sm checked-in"></span> Guest has checked in.
                </div>
                <div class="col s12 m4 l4">
                    <span class="box-sm checked-out"></span> Guest has checked out.
                </div>
                <div class="col s12 m4 l4 offset-l2">
                    <span class="box-sm cancelled"></span> Booking cancelled.
                </div>
            </div>
        </div>
    </div>
    <form action="{{url()->current()}}" class="hide" id="date-form">
        <input type="text" name="date" id="selected-calendar-date" value="{{Carbon\Carbon::parse(request()->date)->format('d-m-Y') ?: now()->format('d-m-Y')}}">
        <input type="text" name="type" id="type">
    </form>
    <div id="confirm-checkout-modal" class="modal">
        <a href="#" class="modal-close-btn modal-close">
            <i class="material-icons grey-text">close</i>
        </a>
        <div class="modal-content">
            <h4 class="red-text">Checkout Guest!</h4>
            <p class="grey-text text-darken-1">Are you sure?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-red btn-flat">Yes</a>
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">No</a>
        </div>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script src="{{asset('js/freeze-table.js')}}"></script>
    <script src="{{mix('js/calendar.js')}}"></script>
    <script>
        $(".table-wrapper").freezeTable({
            'scrollable': true,
            'freezeHead': true,
            'freezeColumn': true,
            'freezeColumnHead': true,
        });

        $(document).ready(function(){
            M.Modal.init(allEls('.modal'),{
                dismissible: false
            });

            M.Modal.init(allEls("div[id^='view-']"));

            var calendarDate = getEl('#calendar-date-picker');
            var selectedDate = getEl('#selected-calendar-date');

            M.Datepicker.init(calendarDate,{
                container: 'body',
                onSelect: function(date){
                    var curDate = new moment();
                    var diffDate = new moment(date);
                    getEl('#type').value =  (diffDate - curDate > 0) ? 'next' : 'prev';
                    selectedDate.value = diffDate.format('DD-MM-YYYY');
                    getEl('#date-form').submit();
                },
                defaultDate: new Date(moment(selectedDate.value,'DD-MM-YYYY')),
                setDefaultDate: true,
                format: 'dd-mm-yyyy',
                autoClose: true
            });

            {{-- /* scroll bookings table to right  */ --}}
            addEvent(getEl('#right-btn'),'click',function(e){
                e.preventDefault();
                $('.table-wrapper').animate({
                    scrollLeft: "+=600px"
                });
            });

            {{-- /* scroll bookings table to left */ --}}
            addEvent(getEl('#left-btn'),'click',function(e){
                e.preventDefault();
                $('.table-wrapper').animate({
                    scrollLeft: "-=600px"
                });
            });

            $('.pane-hScroll').scroll(function() {
                $('.pane-vScroll').width($('.pane-hScroll').width() + $('.pane-hScroll').scrollLeft());
            });

            $('.pane--table2').scroll(function() {
                $('.pane--table2 table').width($('.pane--table2').width() + $('.pane--table2').scrollLeft());
            });

            {{-- /* get previous 30 dates  */ --}}
            addEvent(getEl('#prev'),'click',function(){
                getEl('#type').value = 'prev';
                var date = moment(calendarDate.value, 'DD-MM-YYYY');
                getEl('#selected-calendar-date').value = date.subtract(30,'d').format('DD-MM-YYYY');
                getEl('#date-form').submit();
            });

            {{-- /* get next 30 dates */ --}}
            addEvent(getEl('#next'),'click',function(){
                getEl('#type').value = 'next';
                var date = moment(calendarDate.value, 'DD-MM-YYYY');
                getEl('#selected-calendar-date').value = date.add(30,'d').format('DD-MM-YYYY');
                getEl('#date-form').submit();
            });
        });
    </script>
@endsection