@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>
    <div id="dialog" style="display: none" class="modal fade" style="z-index:1; width:600px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Subscribe our Newsletter</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" placeholder="Email Address">
                        </div>
                        <button type="submit" class="btn btn-primary">Subscribe</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

<!--modal start-->
@if(isset($booking_details[0]))
<div id="view-d" class="modal bookingDetailModal modal-dialog" >
    {{-- <a href="#" class="modal-close-btn modal-close close">
        <i class="material-icons grey-text">close</i>
    </a> --}}

    <div class="modal-content" style="margin-top:-8.7% !important;" >
        <div class="row">
            <ul class="collection with-header mt-2">
                <li class="collection-header" style="position:relative">
                    <h5 class="center">Booking Details</h5>
                    <h6 class="chip booking-status   white-text" style="position:absolute; top:5px;right:20px">{{$booking_details[0]->bookingStatus->BookingStatus}}</h6>
                </li>


                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Room:  </b>
                        # {{$booking_details[0]->bookingDetails[0]->room->RoomName}}
                    </span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Room Type: </b>
                       {{$booking_details[0]->bookingDetails[0]->roomType->RoomTypeName}}
                    </span>
                </li>
                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Rates:{{$booking_details[0]->bookingDetails[0]->ratePlan->RatePlanName}}  </b>

                    </span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Occupancy: </b>
                          {{$booking_details[0]->bookingDetails[0]->GuestQuantity}}
                    </span>
                </li>
                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Arrival: </b>
                     {{$booking_details[0]->beginDate }}
                    </span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Departure: </b>
                        {{$booking_details[0]->endDate }}
                    </span>
                </li>
                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Booking Date: </b>
                          {{get_carbon($booking_details[0]->BookingDate)->format('d-m-Y')}}
                    </span>
                    {{-- <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Room Rent: </b>


                    </span> --}}
                </li>

                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Total Rent:  {{$booking_details[0]->TotalPrice}}  </b>
                         + Tax : {{$booking_details[0]->TotalPrice*0.16}}
                    </span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Booking ID:   </b>
                        # {{ $booking_details[0]->BookingId }}
                    </span>
                </li>

                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Guest Name: {{ $booking_details[0]->BookerFirstName }} </b>

                    </span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">Guest Email: </b>
                            {{$booking_details[0]->BookerEmail}}
                    </span>
                </li>
                <li class="collection-item booking-detail-row">
                    <span class="booking-detail-col"><b class="grey-text text-darken-1">Guest Phone: {{$booking_details[0]->BookerTelephone}} </b></span>
                    <span class="booking-detail-col">
                        <b class="grey-text text-darken-1">CNIC: {{$booking_details[0]->BookerCNIC ?: '----'}} </b>
                    </span>

                </li>

                <li class="collection-item left-align">
                    <span class="booking-detail-col">
                    <b class="grey-text text-darken-1">Guest Request: </b>

                    </span>
                </li>
            </ul>
            <div class="center-align">

                <div class="center-align text-center">
                    @if($booking_details[0]->bookingDetails[0]->room->RoomId != 0)
                        @if($booking_details[0]->beginDate >= (now()) && $booking_details[0]->endDate <= (now()->subDay()))
                            <a
                                href="#"
                                id="update-status-btn-{{$booking_details[0]->bookingId}}"
                                data-booking-id="{{$booking_details[0]->bookingId}}"
                                data-status-type="update"
                                data-status="{{$booking->_UpdateStatus}}"
                                class="btn btn-info update-status-btn btn btn-small blue waves-effect waves-light {{$booking->_UpdateStatus ? '' : 'hide'}}"
                            >{{$booking->_DisplayStatus}}</a>
                        @else
                            <a
                                href="#"
                                id="update-status-btn-{{$booking_details[0]->bookingId}}"
                                data-status-type="update"
                                data-booking-id="{{$booking_details[0]->bookingId}}"
                                data-status="{{$booking_details[0]->bookingStatus->UpdateStatus}}"
                                class="btn btn-info update-status-btn btn btn-small blue waves-effect waves-light hide"
                            >{{$booking_details[0]->bookingStatus->DisplayStatus}} </a>
                        @endif
                         {{-- <a
                            href="#"
                            id="cancel-status-btn-{{$booking_details[0]->bookingId}}"
                            data-booking-id="{{$booking_details[0]->bookingId}}"
                            data-status-type="cancel"
                            data-status="{{$in_array($booking_details[0]->BookingStatusId, [2])}}"
                            class="btn btn-danger update-status-btn btn btn-small red waves-effect waves-light {{in_array($booking_details[0]->BookingStatusId, [2]) ? '' : 'hide'}}"
                        >Cancel {{in_array($booking_details[0]->BookingStatusId, [2])}}
                          </a> --}}
                        <a
                            href="#"
                            data-booking-id="{{$booking_details[0]->BookingId}}"
                            class="btn btn-warning edit-booking-btn btn btn-small blue waves-effect waves-light"
                        >Edit</a>
                        <a
                            href="#"
                            id="cancel-booking-{{$booking_details[0]->BookingId}}"
                            data-booking-id="{{$booking_details[0]->BookingId}}"
                            data-status-type="booking-cancel"
                            data-status="Cancelled"
                            class="btn btn-danger update-status-btn btn btn-small red lighten-1 waves-effect waves-light {{in_array($booking_details[0]->BookingStatusId, [1, 5]) ? '' : 'hide'}}"
                        >Cancel</a>

                        @if(count($booking_details[0]->folios))
                            <a
                                href="#folio-{{$booking_details[0]->BookingId}}"
                                id="folio-btn-{{$booking_details[0]->BookingId}}"
                                class="btn btn-success modal-trigger btn btn-small"
                            >Folio</a>
                        @endif
                        <br><br>
                        <div class="center-align text-center">
                            <a
                                href="#"
                                id="confirm-mail-btn-{{$booking_details[0]->BookingId}}"
                                data-booking-id="{{$booking_details[0]->BookingId}}"
                                class="btn btn-success btn btn-small"
                            >Send Email</a>
                            <a
                                target="_blank"
                                href="{{route('admin.reservations.folio-pdf', $booking_details[0]->BookingId)}}"
                                class="btn btn-primary btn-small"
                            >Folio PDF</a>
                            <a
                               target="_blank"
                                href="{{route('admin.reservations.reg-card-pdf', $booking_details[0]->BookingId)}}"
                                class="btn btn-success btn-small red"
                            >Reg Card PDF</a>
                        </div>
                    @else
                        <a
                            href="#"
                            data-booking-id="{{$booking_details[0]->BookingId}}"
                            class="btn btn-warning edit-booking-btn btn btn-small blue waves-effect waves-light"
                        >Edit</a>
                        <a
                            href="#"
                            id="cancel-booking-{{$booking_details[0]->BookingId}}"
                            data-booking-id="{{$booking_details[0]->BookingId}}"
                            data-status-type="booking-cancel"
                            data-status="Cancelled"
                            class="btn-danger update-status-btn btn btn-small red lighten-1 waves-effect waves-light"
                        >Cancel</a>
                        @if(count($booking_details[0]->folios))
                            <a
                                href="#folio-{{$booking_details[0]->BookingId}}"
                                id="folio-btn-{{$booking_details[0]->BookingId}}"
                                class="btn-success modal-trigger btn btn-small"
                            >Folio</a>
                        @endif
                        <a
                            href="#"
                            id="confirm-mail-btn-{{$booking_details[0]->BookingId}}"
                            data-booking-id="{{$booking_details[0]->BookingId}}"
                            class="btn-primary btn btn-small"
                        >Send Email</a>
                    @endif
                </div>

            </div>
        </div>
    </div>
</div>
@else
  <div id="errors">No Booking Found.</div>
@endif



<!--modal end-->
@if(isset($booking_details[0]))
@if(count($booking_details[0]->folios))
    {{-- @dd($booking->folios) --}}
    @php
        $folios = $booking_details[0]->folios->keyBy('FolioDetailId')->sortBy('FolioDetailId');
        $firstFolio = $folios[1];
        $folioDetailId = $firstFolio->FolioDetailId;
    @endphp
    <div id="folio-{{$booking_details[0]->BookingId}}" class="modal modal1" >
        <div class="modal-content" style="height:100%;">
            <a href="#" class="modal-close-btn modal-close text-right">
                <i class="fa fa-close grey-text"></i>
            </a>
            <h6>Folio # {{$firstFolio->FolioId}}</h6>
            <p>
                <span class="right"><b class="grey-text text-darken-1">Room: </b>#{{$booking_details[0]->bookingDetails[0]->room->RoomName}}</span>
                <div class="clearfix"></div>
                <span class="right"><b class="grey-text text-darken-1">Guest Name: </b>{{$booking_details[0]->BookerFullName}}</span>
                <div class="clearfix"></div>
                <span class="right"><b class="grey-text text-darken-1">Folio Date: </b>{{get_carbon($firstFolio->FolioDate)->format('d-m-Y')}}</span>
                <div class="clearfix"></div>


                <br>
                <div class="center-align text-center">
                    <a href="#folio-charge-{{$booking_details[0]->BookingId}}" class="modal-trigger btn btn-warning btn-small">Charge</a>
                    <a href="#folio-pay-{{$booking_details[0]->BookingId}}" class="modal-trigger btn btn-success btn-small">Pay</a>
                </div>
            </p>
            <div class="row center folio-wrapper text-center">
                <div class="col l2 title">#</div>
                <div class="col l2 title">Date</div>
                <div class="col l2 title">Description</div>
                <div class="col l2 title">Quantity</div>
                <div class="col l2 title">Transaction Type</div>
                <div class="col l1 title">Amount</div>
                <div class="col l1 title">GST</div>

                {{-- Calculting the sum of all folios --}}
                {{-- @php $foliBalanceSum = 0; @endphp --}}
            </div>
                @forelse($folios as $folio)
                     @php
                        $existingFolioDate = '2021-11-17';
                        $todayDate = now()->toDateString();
                        $perDate = $folio->PerDate;
                    @endphp
                    @if ($perDate > $existingFolioDate)

                        @if ($todayDate >= $perDate)
                                @if($folio->FolioStatus == 1 || $folio->FolioStatus == 2)
                                <div class="row folio-detail-row folio-wrapper">
                                    {{-- {{ 'I am charge type of '.$folio->chargeType ? print_r($folio->chargeType[0]): '' }} --}}
                                    <div class="col col1 l2 value">{{$folio->FolioDetailId}}</div>
                                    <div class="col col1 l2 value">{{get_carbon($folio->FolioDate)->format('d-m-Y')}}</div>
                                    <div class="col col1 l2 value truncate">{{$folio->Description ?: '-'}}</div>
                                    <div class="col col1 l2 value">{{$folio->ChargeTypeId ? $folio->Quantity : '-'}}</div>
                                    <div class="col col1 l2 value">
                                        @php
                                            if($folio->Operator == '' || $folio->Operator == '+'){
                                                echo '<span style="color:green">Debit</span>';
                                            }
                                            else {
                                                echo '<span style="color:red">Credit</span>';
                                            }
                                        @endphp
                                    </div>

                                    <div class="col col1 l1 value">{{round($folio->Amount/1.16, 2) ?: '-'}}</div>
                                     <div class="col col1 l1 value">-
                                    </div>

                                </div>



                        @endif

                        @elseif ($todayDate <= $perDate)
                            @if($folio->FolioStatus == 1 || $folio->FolioStatus == 2)
                            <div class="row folio-detail-row folio-wrapper">
                                <div class="col col1  l2 value">{{$folio->FolioDetailId}}</div>
                                <div class="col col1 l2 value">{{get_carbon($folio->FolioDate)->format('d-m-Y')}}</div>
                                <div class="col col1 l2 value truncate">{{$folio->Description ?: '-'}}</div>
                                <div class="col col1 l2 value">{{$folio->ChargeTypeId ? $folio->Quantity : '-'}}</div>
                                <div class="col col1 l2 value">
                                    @php
                                        if($folio->Operator == '' || $folio->Operator == '+'){
                                            echo '<span style="color:green">Debit</span>';
                                        }
                                        else {
                                            echo '<span style="color:red">Credit</span>';
                                        }
                                    @endphp
                                </div>
                                <!--<div class="col col1 l2 value">{{$folio->Amount ?: '-'}}</div>-->
                                <div class="col col1 l1 value">{{$folio->Amount ? $folio->Amount/1.16: '-'}}

                                    </div>

                                    <div class="col col1 l1 value">-
                                    </div>

                            </div>
                            @endif

                        @endif
                    @else
                    <div class="row folio-detail-row folio-wrapper">
                        <div class="col col1 l2 value">{{$folio->FolioDetailId}}</div>
                        <div class="col col1 l2 value">{{get_carbon($folio->FolioDate)->format('d-m-Y')}}</div>
                        <div class="col col1 l2 value truncate">{{$folio->Description ?: '-'}}</div>
                        <div class="col col1 l2 value">{{$folio->ChargeTypeId ? $folio->Quantity : '-'}}</div>
                        <div class="col col1 l2 value">
                            @php
                                if($folio->Operator == '' || $folio->Operator == '+'){
                                    echo '<span style="color:green">Debit</span>';
                                }
                                else {
                                    echo '<span style="color:red">Credit</span>';
                                }
                            @endphp
                        </div>
                        <!--<div class="col col1 l2 value">{{$folio->Amount ?: '-'}}</div>-->
                        @if($folio->Operator == '' || $folio->Operator == '+')
                        <div class="col col1 l1 value">{{$folio->Amount ? $folio->Amount/1.16: '-'}}

                                    </div>

                                    <div class="col col1 l1 value">-                                    </div>
                                    @else
                                    <div class="col col1 l1 value">{{$folio->Amount ? $folio->Amount: '-'}}

                                    </div>
                                    <div class="col col1 l1 value">{{'-'}}
                                    </div>
                                    @endif

                    </div>
                    @endif
                @empty
                    <div class="col l12 value no-payment">No Payments Yet!</div>
                @endforelse



            <div class="right-align text-right">
                {{-- <h3>{{ $firstFolio->BookingId }}</h3> --}}
                @php
                    $folios = \App\Folio::where('BookingId', $booking_details[0]->BookingId)->where(function($query) {
                        $query->where('FolioStatus', '=', 1)
                        ->orWhere('FolioStatus', '=' ,2); }
                    )
                    ->where('AccommodationId', App\Helpers\CurrentAccommodation::id())->get();
                    $allFoliosBalance = 0;
                    foreach ($folios as $folio) {
                        if($folio->FolioStatus == 1 || $folio->FolioStatus == 2)
                        {
                            if($folio->Operator == '+' || $folio->Operator == '')
                            {
                                $allFoliosBalance += $folio->Amount;
                            }
                            else {
                                $allFoliosBalance -= $folio->Amount;
                            }
                        }
                    }
                @endphp
        <div style="margin-bottom:20px; margin-right:22px;" class="mt-5">
        <strong>Total Balance:</strong> <span id="balance-{{$booking_details[0]->BookingId}}" class="booking-bal-{{$booking_details[0]->BookingId}}">{{ number_format((float)$allFoliosBalance, 2, '.', '') }}</span>
         </div>
            </div>
            </div>
        </div>

@endif
  @endif

@if(isset($booking_details[0]))
<div id="folio-charge-{{$booking_details[0]->BookingId}}" data-booking-id="{{$booking_details[0]->BookingId}}" class="modal">
    <div class="modal-content" style="height:100%;">
        <a href="#" class="modal-close-btn modal-close text-right">
            <i class="fa fa-close grey-text"></i>
        </a>
        <h5 class="center text-center">Charge Customer</h5>
        <form action="#">
            <div class="row">
                <div class="input-field col-sm-6">
                    <label for="charge_type" class="form-label">Charge Type</label>
                    <select name="charge_type" id="charge_type" class="form-select">
                        @foreach($folioChargeTypes as $chargeType)
                            <option value="{{$chargeType->ChargeTypeId}}">{{$chargeType->ChargeTypeName}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="input-field col-sm-6 ">
                    <label for="unit_cost" class="form-label mt-3">Unit Cost</label>
                    <input type="number" name="unit_cost" min="0" id="unit_cost" class="form-control">
                </div>
                <div class="input-field col-sm-6">
                    <label for="quantity" class="form-label mt-3">Quantity</label>
                    <input type="number" class="form-control" name="quantity" id="quantity" min="0" value="1">
                </div>
                <div class="input-field col-sm-6">
                    <label for="description" class="form-label mt-3">Description</label>
                    <input type="text" class="form-control" name="description" id="description">
                </div>
                <div class="input-field col-sm-6">
                    <label for="amount" class="form-label mt-3">Amount</label>
                    <input type="number" class="form-control" name="amount" id="amount" min="0" readonly>
                </div>
                <div class="text-center mt-5 row">
                <div class="col-sm-12 mt-5">
                    <button type="button" class="btn btn-success charge-btn btn-small">Charge</button>
                    <a href="#" class="btn btn-danger btn-small modal-close red">Cancel</a>
                </div>
            </div>
            </div>
        </form>
    </div>
</div>
@endif
@if(isset($booking_details[0]))
<div id="folio-pay-{{$booking_details[0]->BookingId}}" data-booking-id="{{$booking_details[0]->BookingId}}" class="modal">
    <div class="modal-content" style="height:100%;">
        <a href="#" class="modal-close-btn modal-close">
            <i class="fa fa-close grey-text"></i>
        </a>
    <h5 class="center text-center">Paid by Customer</h5>
        <form action="#" data-parsley-validate id="payFeeForm">
            <div class="row">
                <div class="input-field col-sm-6">
                    <label for="pay_type" class="form-label mt-3">Pay Type</label>
                    <select name="pay_type" id="pay_type" class="form-select">
                        @foreach($folioPaymentTypes as $paymentType)
                            <option value="{{$paymentType->PaymentTypeId}}">{{$paymentType->PaymentTypeName}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-field col-sm-6" id="bank_ref_no">
                    <label for="bank_ref_no_input" class="form-label mt-3">Reference Number</label>
                    <input type="number" name="bank_ref_no_input" id="bank_ref_no_input" class="form-control">
                </div>

                <div class="input-field col-sm-6 card-type-container">
                    <label for="card_type" class="form-label mt-3">Card Type</label>
                    <select name="card_type" id="card_type" class="form-select">
                        @foreach($folioCardTypes as $cardType)
                            <option value="{{$cardType->CardTypeId}}">{{$cardType->CardType}}</option>
                        @endforeach
                    </select>
                </div>

                <div class="input-field col-sm-6" id="card_last_digit_div">
                    <label for="card_last_digit" class="form-label mt-3">Card Number</label>
                    <input type="number" name="card_last_digit_input"  id="card_last_digit_input" class="form-control" placeholder="Enter Last Four digits">
                </div>

                <div class="input-field col-sm-6">
                    <label for="description" class="form-label mt-3">Description</label>
                    <input type="text" name="description" class="form-control" id="description">
                </div>
                <div class="input-field col-sm-6">
                    <label for="amount" class="form-label mt-3">Amount</label>
                    <input type="number" name="amount" class="form-control" id="amount" value="">
                </div>
                <div class="row text-center">
                    <div class="col-sm-12 mt-5">
                    <button type="button" class="pay-btn btn btn-success btn-small">Pay</button>

                    <a href="#" class="btn btn-danger btn-small modal-close red">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endif

@endsection



@section('js')
@if(isset($booking_details[0]))
<script type="text/javascript">
    $(function () {
        $("#view-d").dialog({
            maxHeight: 600,
            minWidth:700,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                     window.location.href = "https://app.techneeq.org/admin/reservations/calendar";
                }
            }
        });
    });

</script>
@else
<script type="text/javascript">
    $(function () {
        $("#errors").dialog({

            buttons: {
                Close: function () {
                    $(this).dialog('close');
                     window.location.href = "https://app.techneeq.org/admin/reservations/calendar";
                }
            }
        });
    });

</script>
@endif

    <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(){

        // alert('here');
        $("#myModal").addClass("modal-trigger");
        $("#modal-trigger").addClass("modal-trigger");
      $("#myModal").modal('show');
    //   $('#modal-trigger').addClass("modal-trigger");



            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>

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>
@endsection


<style>
    .col1{
        border:1px solid lightgray;
        padding:7px !important;
        font-size:12px !important;

    }
    .row{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
    }
    .folio-detail-row{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
        padding: 0px !important;

    }
    .folio-wrapper{
        margin-top:0px !important;
        margin-bottom: 0px !important;
        width:100% !important;
        padding:0px !important;



    }
    /* .modal1{
        padding-left:45px;

    } */


.bookingDetailModal {
overflow: auto;
/*width:800px !important;*/
}

table {
background-color: #fff;

}
table thead th{
background: rgb(40, 66, 115);
color: #fff;
border-radius: 0px !important;
}
table thead th label,
table thead th input,
table thead th span,
table thead th abbr{
color: #fff;
}
table tbody td input,
table tbody td span,
table tbody td label,
table tbody td button,
.datepicker-calendar .selects-container{
color: #616161;
}
.datepicker-calendar .selects-container input,
.datepicker-calendar table tbody td input,
.datepicker-calendar table tbody td span,
.datepicker-calendar table tbody td label,
.datepicker-calendar table tbody td button,
.datepicker-calendar table thead th label,
.datepicker-calendar table thead th input,
.datepicker-calendar table thead th span,
.datepicker-calendar table thead th abbr,
.datepicker-calendar table thead,
.datepicker-calendar table thead th{
background-color: transparent;
color: #616161;
}

.datepicker-table th, .datepicker-table td{
border: none;
}

/*Modal Overlay*/
.modal-overlay:nth-of-type(n+4)
{
opacity: 0 !important;
}

/*Error Pages*/
.error-page p.error-desc {
font-size: 2em;
text-align: center;
font-weight: 300;
}

.error-page h1.error-heading {
color:#fff;
text-align: center;
font-size: 15em;
font-weight: 500;
text-shadow: #797D7F 1px 1px, #797D7F 2px 2px, #797D7F 3px 3px, #797D7F 4px 4px, #797D7F 5px 5px, #797D7F 6px 6px, #797D7F 7px 7px, #797D7F 8px 8px, #797D7F 9px 9px, #797D7F 10px 10px, #797D7F 11px 11px, #797D7F 12px 12px, #797D7F 13px 13px, #797D7F 14px 14px, #797D7F 15px 15px, #797D7F 16px 16px, #797D7F 17px 17px, #797D7F 18px 18px, #797D7F 19px 19px, #797D7F 20px 20px;
}
.error-page a.error-back {
text-align: center;
}

li.select2-results__option {
display: block;
width: 100%;
height: 35px;
line-height: 24px;
color: #000;
}

.modal-close-btn {
position: absolute;
right: 12px;
top: 16px;
}

.dropdown-content li{
display: block !important;
}

.cancel-btn{
padding: 5px;
border-radius: 50%;
}



.booking-detail-row:after {
display: table;
content: "";
clear: both;
}

.collection{margin:.5rem 0 1rem 0;border:1px solid #e0e0e0;border-radius:2px;overflow:hidden;position:relative}.collection .collection-item{background-color:#fff;line-height:1.5rem;padding:10px 20px;margin:0;border-bottom:1px solid #e0e0e0}.collection .collection-item.avatar{min-height:84px;padding-left:72px;position:relative}.collection .collection-item.avatar:not(.circle-clipper)>.circle,.collection .collection-item.avatar :not(.circle-clipper)>.circle{position:absolute;width:42px;height:42px;overflow:hidden;left:15px;display:inline-block;vertical-align:middle}.collection .collection-item.avatar i.circle{font-size:18px;line-height:42px;color:#fff;background-color:#999;text-align:center}.collection .collection-item.avatar .title{font-size:16px}.collection .collection-item.avatar p{margin:0}.collection .collection-item.avatar .secondary-content{position:absolute;top:16px;right:16px}.collection .collection-item:last-child{border-bottom:none}.collection .collection-item.active{background-color:#26a69a;color:#eafaf9}.collection .collection-item.active .secondary-content{color:#fff}.collection a.collection-item{display:block;-webkit-transition:.25s;transition:.25s;color:#26a69a}.collection a.collection-item:not(.active):hover{background-color:#ddd}.collection.with-header .collection-header{background-color:#fff;border-bottom:1px solid #e0e0e0;padding:10px 20px}.collection.with-header .collection-item{padding-left:30px}.collection.with-header .collection-item.avatar{padding-left:72px}.secondary-content{float:right;color:#26a69a}.collapsible .collection{margin:0;border:none}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}

.chip{display:inline-block;height:32px;font-size:13px;font-weight:500;color:rgba(0,0,0,0.6);line-height:32px;padding:0 12px;border-radius:16px;background-color:#e4e4e4;margin-bottom:5px;margin-right:5px}.chip:focus{outline:none;background-color:#26a69a;color:#fff}.chip>img{float:left;margin:0 8px 0 -12px;height:32px;width:32px;border-radius:50%}.chip .close{cursor:pointer;float:right;font-size:16px;line-height:32px;padding-left:8px}

.selectize-control.single .selectize-input,
.selectize-dropdown.single {
border-color: #b8b8b8;
}
.selectize-dropdown .optgroup-header {
padding-top: 7px;
font-weight: bold;
font-size: 0.85em;
}
.selectize-dropdown .optgroup {
border-top: 1px solid #f0f0f0;
}
.selectize-dropdown .optgroup:first-child {
border-top: 0 none;
}

#choose-accommodation {
overflow-y: unset !important;
}


.table-container {
position: relative;
}

.table-wrapper {
position: relative;
display: block;
overflow: auto;
height: 600px;
}

/*#reservations-table {
display: block;
overflow-x:auto;
user-select:none;
border-collapse: unset;
border-spacing:0;
}*/

#left-btn {
position: absolute;
top: 80px;
left: 10px;
z-index: 99;
}

#right-btn {
position: absolute;
top: 80px;
right: 10px;
}

/*  th {
border-top: 2px solid #f4f4f4;
border-bottom: 2px solid #f4f4f4;
text-align:center;
}*/

.date-picker-box {
display: flex;
align-items: center;
justify-content: center;
}

.main-td {
padding: 0 !important;
border: none;
}

.td-booking, .td-no-booking {
border: none;
padding: 0px;
}

.multiple-bookings {
display: flex;
}

.td-booking {
height: 68px !important;
border: 1px solid #ccc;
display: block;
cursor: pointer;
}

.td-no-booking {
height: 68px !important;
width: 160px;
border: 1px solid #ccc;
display: block;
}

.td-booking a div {
width: 100%;
height: 100%;
}

.booking-div {
position: relative;
width: 100%;
height: 100%;
}

.booking-user {
position: absolute;
top: 5px;
left: 8px;
width: 100%;
font-size: 14px;
text-align: left;
color: #fff !important;
}

.booking-total {
font-size: 13px;
position: absolute;
right: 3px;
bottom: 1px;
font-family: sans-serif;
border-top-left-radius: 2px;
padding: 3px 0;
text-align: center;
}

td[data-id] {
cursor: pointer
}

td[data-id]:hover {
background: #fafafa
}

.td-highlight {
background: #e8eaec
}

td[readonly] {
background: #f5f5f5;
cursor: unset;
}

.booking-detail-row:after {
display: table;
content: "";
clear: both;
}

.confirmed {
background: #4caf50;
}

.confirmed-bd {
border: 1px solid #4caf50;
}

.checked-in {
background: #37474f
}

.checked-in-bd {
border: 1px solid #37474f
}

.checked-out {
background: #57a1a8
}

.checked-out-bd {
border: 1px solid #57a1a8
}

.cancelled {
background: #ef5350
}

.cancelled-bd {
border: 1px solid #ef5350
}

.noshow {
background: #ff8700
}

.noshow-bd {
border: 1px solid #ff8700
}

.box-sm {
padding: 1px 8px;
margin-right: 10px;
}

.booking-detail-col {
width: 50%;
float: left;
text-align: left;
}

table.calender-table {
border-collapse: unset;
background: white;
table-layout: fixed;
width: 100%;
}

th, td {
padding: 8px 16px;
border: .5px solid #ddd;
width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: unset;
}

.pane {
background: #eee;
}

/*.pane-hScroll {*/

/*    overflow: auto;*/

/*    width: 100%;*/

/*}*/

.pane-vScroll {
overflow-y: auto;
overflow-x: hidden;
height: calc( 100% - 85px);
}

.pane--table2 {
width: 400px;
overflow-x: scroll;
}

.pane--table2 th, .pane--table2 td {
width: auto;
min-width: 160px;
}

.pane--table2 tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
height: 200px;
}

.pane-vScroll::-webkit-scrollbar {
display: none;
}

.pane--table2 thead {
display: table-row;
}

.extra-width {
width: 300px !important;
}

th.extra-width a {
color: #fff
}

.inside-table {
border-collapse: unset;
}

.folio-wrapper .title, .folio-wrapper .value {
border: 1px solid #e0e0e0;
padding: 5px 3px;
}

.folio-wrapper .title {
font-weight: bold;
font-size: 13px;
}

.folio-wrapper .value {
word-wrap: break-word !important;
font-size: 12.7px;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
z-index: 9999;
}

td.is-selected button {
color: #fff !important;
}

td.is-disabled button {
background: transparent !important;
color: #9e9e9e !important;
}

#booking-room-name {
background: #616161 !important;
text-transform: uppercase;
padding: 0 22px;
font-size: 14px;
color: #e0e0e0;
font-family: sans-serif;

}


.modal{display:none;position:fixed;left:0;right:0;background-color:#fafafa;padding:0;max-height:70%;width:55%;margin:auto;overflow-y:auto;border-radius:2px;will-change:top, opacity}.modal:focus{outline:none}@media only screen and (max-width: 992px){.modal{width:80%}}.modal h1,.modal h2,.modal h3,.modal h4{margin-top:0}.modal .modal-content{padding:24px}.modal .modal-close{cursor:pointer}.modal .modal-footer{border-radius:0 0 2px 2px;background-color:#fafafa;padding:4px 6px;height:56px;width:100%;text-align:right}.modal .modal-footer .btn,.modal .modal-footer .btn-large,.modal .modal-footer .btn-small,.modal .modal-footer .btn-flat{margin:6px 0}.modal-overlay{position:fixed;z-index:999;top:-25%;left:0;bottom:0;right:0;height:125%;width:100%;background:#000;display:none;will-change:opacity}.modal.modal-fixed-footer{padding:0;height:70%}.modal.modal-fixed-footer .modal-content{position:absolute;height:calc(100% - 56px);max-height:100%;width:100%;overflow-y:auto}.modal.modal-fixed-footer .modal-footer{border-top:1px solid rgba(0,0,0,0.1);position:absolute;bottom:0}.modal.bottom-sheet{top:auto;bottom:-100%;margin:0;width:100%;max-height:45%;border-radius:0;will-change:bottom, opacity}
/*.modal{*/
    /*max-height: 100%;*/
/*    padding-top:-20px;*/
    /*overflow:hidden;*/
/*    z-index:1 !important;*/
    /*width:800px !important;*/
/*    margin-left:-3% !important;*/

/*}*/

/*.modal-content{*/
/*    width:890px !important;*/
/*    overflow:hidden;*/
/*    z-index:1 !important;*/
/*    margin-bottom:100px !important;*/
/*    padding-bottom:40px;*/
/*}*/


/*.border{*/
/*    border:1px solid black !important;*/
/*}*/

/*.radius{*/
    /*border-radius:20% !important;*/
    /*width:150px;*/
    /*padding:0px !important;*/
/*}*/

/* input:valid {
color: green;
}
input:invalid {
color: red; */
}
</style>