@extends('layouts.app')
@section('title', __('lang_v1.calendar'))

@section('content')
    @include('hms::layouts.nav')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black" >@lang('lang_v1.calendar')</h1>
        <p><i class="fa fa-info-circle"></i> @lang('hms::lang.calender_help_text') </p>
    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.widget')
            <div class="box-header">
                <div class="box-tools pull-left">
                    <h3>@lang('hms::lang.jump_to')</h3>
                    <input type="text" value="{{ request()->input('date') ? request()->input('date') : '' }}"
                        class="form-control date_picker">
                </div>
                <div class="box-tools pull-left" style="margin-left: 25px; margin-top:45px;">
                    <a class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm" id="week_prev" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <a class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm  mt-5" id="day_prev" aria-label="Previous">
                        <span aria-hidden="true">&lsaquo;</span>
                    </a>
                </div>

                <div class="box-tools pull-right" style="margin-top:45px;">
                    <a class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm" id="day_next" aria-label="next">
                        <span aria-hidden="true">&rsaquo;</span>
                    </a>
                    <a class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm" id="week_next" aria-label="next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </div>
            </div>
            <table class="table table-bordered " id="bookings_calender">
                <thead>
                    <tr>
                        <th style="width: 150px;">
                            {!! Form::select('type_id', $types, request()->input('type_id') ? request()->input('type_id') : null, [
                                'class' => 'form-control',
                                'id' => 'type_id',
                                'placeholder' => __('hms::lang.type'),
                            ]) !!}
                        </th>
                        {!! $date_html !!}
                    </tr>
                    {!! $html !!}
                </thead>
            </table>
        @endcomponent

    </section>
    <!-- /.content -->

@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            var currentDate = new Date();
            var currentDateTime = moment(currentDate);

            $('.date_picker').datetimepicker({
                format: moment_date_format,
                ignoreReadonly: true,
                defaultDate: currentDateTime
            });

            $('.date_picker').on('dp.change', function(e) {

                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&date=" + $('.date_picker').val();

            });

            $('#type_id').on('change', function() {
                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&date=" + $('.date_picker').val();
            })


            $('#week_next').on('click', function() {
                var weekNext = "{{ request()->input('week_next') }}";
                if (weekNext == '') {
                    weekNext = 1;
                } else {
                    weekNext++;
                }
                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&week_next=" + weekNext;
            })

            $('#week_prev').on('click', function() {

                var weekNext = "{{ request()->input('week_next') }}";
                if (weekNext == '') {
                    weekNext = -1;
                } else {
                    weekNext--;
                }
                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&week_next=" + weekNext;
            })


            $('#day_next').on('click', function() {

                var daynext = "{{ request()->input('day_next') }}";
                if (daynext == '') {
                    daynext = 1;
                } else {
                    daynext++;
                }
                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&day_next=" + daynext;
            })

            $('#day_prev').on('click', function() {

                var daynext = "{{ request()->input('day_next') }}";
                if (daynext == '') {
                    daynext = -1;
                } else {
                    daynext--;
                }
                window.location.href = "{{ route('booking_calendar') }}?type_id=" + $('#type_id').val() +
                    "&day_next=" + daynext;
            })

            $(".add_booking").hover(
                function() {
                    $(this).find(".add_booking_div").fadeIn();
                },
                function() {
                    $(this).find(".add_booking_div").fadeOut();
                }
            );


        });
    </script>
@endsection

<style>
    .hotel-reservation-outer:last-child {
        padding-bottom: 5px;
        height: 30px;
    }

    .hotel-reservation-outer {
        height: 25px;
        width: 100%;
        position: relative;
    }

    .hotel-reservation-inner {
        height: 20px;
        width: 100%;
        border-radius: 2px;
        padding: 0 5px;
        color: #fff;
    }

    .bg-confirmed {
        background-color: #5ac5b6;
        border-color: #5ac5b6;
        color: #fff;
    }

    .add_booking_div {
        display: none;
        padding-top: 15px;
    }
</style>