@extends('layouts.admin')
@section('title')
Manage Rate Plans | Dashboard
@endsection
@section('css')
    <style>
        th {
            border-top: 2px solid #f4f4f4;
            border-bottom: 2px solid #f4f4f4;
            text-align:center;
        }
        .calendar-box {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hide-td {
            visibility: hidden;
        }

        table {
            padding: 20px 15px !important;
        }

        input {
            transition: ease .1s;
        }

        input:focus {
            outline: .3px solid #90caf9;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        #rate-plan-btn {
            position: fixed;
            bottom: 5px;
            left: calc(50% - 88px);
            text-align:center;
        }
        .checkbox-col{
            width: 30px !important;
            text-align: center;
        }
        .checkbox-col [type="checkbox"]+span:not(.lever){
            padding-left: 17px;
        }
        .no-y-padding {
            padding: 6px .3px !important;
        }
    </style>
@endsection
@section('content')
    <div class="pms-container">
        <div class="row">
            <div class="col s10">
                <h4 class="black-text">
                    <i class="small material-icons left red-text">brightness_1</i>Manage Rate Plans
                </h4>
            </div>
            <div class="col s2">
                <button class="btn waves-effect wave-light green left-align mt-2" id="bulk-update">Bulk Update</button>
            </div>
        </div>
        <form action="{{route('admin.rate-plans.update-rates')}}" id="rates-form" method="post" autocomplete="off">
            @csrf
            @method('PUT')
            <table class="highlight mb-3 z-depth-1">
                <thead id="dates-header" class="grey lighten-4">
                    <tr>
                        <th style="width:100px;border:1px solid #e0e0e0" colspan="2">
                            <div class="input-field center-align calendar-box" style="margin:5px">
                                <a href="#" id="prev" style="margin-right:6px">
                                    <i class="material-icons">chevron_left</i>
                                </a>
                                <input type="text" name="date" id="picker-date" class="datepicker center" />
                                <a href="#" id="next" style="margin-left:6px">
                                    <i class="material-icons">chevron_right</i>
                                </a>
                            </div>
                        </th>
                        @foreach($displayDates as $displayDate)
                            <th style="padding:4px;border:1px solid #e0e0e0">
                                <span style="font-size: 14px">{{$displayDate->day}}</span>
                                <br>
                                <span style="font-size: 13px">{{$displayDate->shortEnglishDayOfWeek}}</span>
                                <br>
                                <span style="font-size: 14px">{{$displayDate->shortEnglishMonth}}</span>
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach($roomTypes as $roomType)
                        <tr class="grey lighten-3">
                            @if(strlen($roomType->RoomTypeName) >= 15)
                                <td style="width:100px !important; max-width: 100px;">
                                    <b class="grey-text text-darken-1 tooltipped" data-tooltip="{{$roomType->RoomTypeName}}">{{str_limit($roomType->RoomTypeName,16)}}</b>
                                </td>
                            @else
                                <td style="width:100px !important; max-width: 100px;">
                                    <b class="grey-text text-darken-1">{{$roomType->RoomTypeName}}</b>
                                </td>
                            @endif
                            <td>
                                <b class="grey-text text-darken-1">Availability</b>
                            </td>
                            @if($roomInventories = $roomType->roomInventories->sortBy('InventoryDate'))

                                @foreach($roomInventories as $roomInventory)

                                    <td class="center">
                                        <span style="font-size: 13px">{{$roomInventory->RoomsAvailable}}</span>
                                    </td>
                                @endforeach
                            @else
                                <td colspan="16"></td>
                            @endif
                        </tr>
                        @include('admin.rate-plans.includes.rate-plans')
                    @endforeach
                </tbody>
            </table>
        </form>
        <a href="#" class="btn waves-effect wave-light blue btn-large" id="rate-plan-btn">Save Changes</a>
        <form action="{{route(Route::currentRouteName())}}" class="hide" id="date-form">
            {{-- submit to the current route --}}
            <input type="hidden" id="current-date" name="date" value="{{request()->date ? \Carbon\Carbon::createFromFormat('d-M-Y',request()->date) : now()->format('d-M-Y') }}">
        </form>
    </div>
    <div id="confirm-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">Confirm Submit</h4>
            <p>Changes you have made to rateplans will not be saved!</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-green btn-flat">Cancel</a>
            <a href="#!" id="confirm-modal-submit" class="modal-close waves-effect waves-red btn-flat">Continue</a>
        </div>
    </div>

    <div id="bulk-update-modal" class="modal">
        <a href="#" class="modal-close-btn modal-close">
            <i class="material-icons grey-text">close</i>
        </a>
        <form action="{{route('admin.rate-plans.bulk-update')}}" id="bulk-rates-form" method="post" autocomplete="off">
            @csrf
            @method('PUT')
            <div class="modal-content">
                <div class="row">
                    <h5>Bulk Update</h5>
                    <table>
                        <thead>
                            <tr>
                                <th class="checkbox-col"></th>
                                <th>Rate Plan</th>
                                <th>Room Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($ratePlans_bulk as $ratePlan)
                                <tr>
                                    <td class="checkbox-col">
                                        <label>
                                            <input type="checkbox"  name="bulkInventory[]" data-rateplan-id="" data-roomtype-id="{{ $ratePlan->RoomTypeId }}" value="{{ $ratePlan->RoomTypeId }}-{{ $ratePlan->RatePlanId }}" />
                                            <span></span>
                                        </label>
                                    </td>
                                    <td>{{ $ratePlan->RatePlanName }}</td>
                                    <td>{{ $ratePlan->roomType->RoomTypeName }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <br>
                    <div class="input-field col s6">
                        <input type="text" name="startDate" id="startDate" class="datepicker">
                        <label for="startDate">Start Date</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" name="endDate" id="endDate" class="datepicker">
                        <label for="endDate">End Date</label>
                    </div>
                    <div class="input-field col s12">
                        <input type="text" name="rate" id="rate" value="">
                        <label for="rate">Rate</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-close waves-effect waves-red btn-flat">Cancel</a>
                <a href="#!" onclick="event.preventDefault();document.querySelector('#bulk-rates-form').submit()" class="modal-close waves-effect waves-grey btn-flat">Continue</a>
            </div>
        </form>
    </div>
    @component('admin.includes.loader')
    @endcomponent
@endsection

@section('js')
    <script>
        /*$('.room-availability').change(function(){
            var input = $(this);
            var submit = $("#rate-plan-btn");
            var availability = input.data('count');
            if(input.val() > availability){
                input.css("outline", "1px solid red");
                M.toast({
                    html:"The number you entered is greater than the available rooms",
                    displayLength:1500
                });
                submit.addClass('disabled');
                input.addClass('exceeds');
            } else {
                input.css({'outline' : '1px solid #90caf9'});
                input.removeClass('exceeds');
                if($('.exceeds').length === 0){
                    if(submit.hasClass('disabled')){
                        submit.removeClass('disabled');
                    }
                }
            }
        });*/
        $(document).ready(function () {
            var date = new Date();
            initDatePicker(getEl('#startDate'),'body',date,true,'dd-mm-yyyy',date,true,null);
            initDatePicker(getEl('#endDate'),'body',date,true,'dd-mm-yyyy',date,true,null);
        });
    </script>
@endsection