@extends('restaurant.pos.layout.master')

@section('custom_css')

@endsection

@section('content')
    <style>
        
    </style>


    <div class="card rounded-0">
        <div class="card-header d-flex justify-content-between align-items-center icon-triangle lt rounded-0">
            <h4 class="col-6 pl-0">Reservation Create</h4>
            
            <a href="{{ route('restaurant.pos.reservation.index') }}" class="btn btn-sm btn-warning d-flex" type="button" name="button">
                <i class="bi bi-plus-lg me-1"></i>
                <div class="">List</div>
            </a>
        </div>

        <div class="card-body">
            <div class="row g-3">
                <div class="col-lg-4 col-6">
                    <label>Reservation Type <span class="text-danger fs-5">*</span></label>
                    <select class="form-select select2" required name="type" id="type" onchange="setReservationType(event.target.value)">
                        <option value="2" @if (isset($edit) && $edit->type == 2) selected @endif>Table</option>
                        <option value="1" @if (isset($edit) && $edit->type == 1) selected @endif>Hall</option>
                    </select>
                </div>

                <div class="col-lg-4 col-6 floor_div" style="display: none;">
                    <label>Floor <span class="text-danger fs-5">*</span></label>
                    <select class="form-select select2" name="floor_id" id="floor_id">
                        <option value="">-- Select Floor --</option>
                        @foreach (getFloorList() as $data)
                            <option value="{{ $data->id }}" @if (isset($edit) && $edit->floor_id) {{ $edit->floor_id == $data->id ? 'selected' : '' }} @endif>{{ $data->floor_no }}</option>
                        @endforeach
                    </select>

                    @if ($errors->has('floor_id'))
                        <p class="error" style="color: red">{{ $errors->first('floor_id') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6 person_div">
                    <label>Person <span class="text-danger fs-5">*</span></label>
                    <input class="form-control" value="@if (isset($edit)){{ $edit->person }}@else{{ old('person') }}@endif" name="person_search" type="number" id="person_search" />
                
                    @if ($errors->has('person_search'))
                        <p class="error" style="color: red">{{ $errors->first('person_search') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Date <span class="text-danger fs-5">*</span></label>
                    <input type="text" value="@if (isset($edit)){{ date("d-m-Y", strtotime($edit->date)) }}@else{{ old('date') }}@endif" class="form-control date-picker" required name="date" id="date" />
                
                    @if ($errors->has('date'))
                        <p class="error" style="color: red">{{ $errors->first('date') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Time From <span class="text-danger fs-5">*</span></label>
                    <input type="time" value="@if (isset($edit)){{ date("H:i:s", strtotime($edit->from_time)) }}@else{{ old('from_time') }}@endif" class="form-control time-picker" required name="from_time" id="from_time" />
                
                    @if ($errors->has('from_time'))
                        <p class="error" style="color: red">{{ $errors->first('from_time') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Time To <span class="text-danger fs-5">*</span></label>
                    <input type="time" value="@if (isset($edit)){{ date("H:i:s", strtotime($edit->to_time)) }}@else{{ old('to_time') }}@endif" class="form-control time-picker" required name="to_time" id="to_time" />

                    @if ($errors->has('to_time'))
                        <p class="error" style="color: red">{{ $errors->first('to_time') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Status</label>
                    <select class="form-select select2" name="status">
                        <option value="1" @if (isset($edit)) {{ $edit->status == 1 ? 'selected' : '' }} @endif>Active</option>
                        <option value="2" @if (isset($edit)) {{ $edit->status == 2 ? 'selected' : '' }} @endif>Inactive</option>
                    </select>
                </div>

                <div class="col-12 text-center">
                    <button type="button" id="check_btn" class="btn btn-secondary px-4" onclick="checkAvailablity()">Check <i class="bi bi-arrow-repeat ms-1 fs-5"></i></button>
                </div>
            </div>
        </div> 
    </div>


    <div id="reservation_div" class="card rounded-0 mt-3" style="display: none;">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-lg-4 col-6 floor_div" style="display: none;">
                    <label>Person <span class="text-danger fs-5">*</span></label>
                    <input class="form-control" value="@if (isset($edit)){{ $edit->person }}@else{{ old('person') }}@endif" required name="person" type="number" id="person" />
                
                    @if ($errors->has('person'))
                        <p class="error" style="color: red">{{ $errors->first('person') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6 person_div">
                    <label>Table <span class="text-danger fs-5">*</span></label>
                    <select class="form-select select2" multiple required name="table_ids" id="table_ids">
                        {{-- <option value="">-- Select Table --</option> --}}
                    </select>

                    @if ($errors->has('table_id'))
                        <p class="error" style="color: red">{{ $errors->first('table_id') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Contact Person <span class="text-danger fs-5">*</span></label>
                    <input type="text"  class="form-control" value="@if (isset($edit)){{ $edit->contact_person }}@else{{ old('contact_person') }}@endif" required name="contact_person" id="contact_person" />
                
                    @if ($errors->has('contact_person'))
                        <p class="error" style="color: red">{{ $errors->first('contact_person') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Phone <span class="text-danger fs-5">*</span></label>
                    <input type="number"  class="form-control" value="@if (isset($edit)){{ $edit->phone }}@else{{ old('phone') }}@endif" required name="phone" id="phone" />
                
                    @if ($errors->has('phone'))
                        <p class="error" style="color: red">{{ $errors->first('phone') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Email <span class="text-danger fs-5">*</span></label>
                    <input type="email" class="form-control" value="@if (isset($edit)){{ $edit->email }}@else{{ old('email') }}@endif" required name="email" id="email" />
                
                    @if ($errors->has('email'))
                        <p class="error" style="color: red">{{ $errors->first('email') }}</p>
                    @endif
                </div>

                <div class="col-lg-4 col-6">
                    <label>Note <span class="text-danger fs-5">*</span></label>
                    <textarea name="note" id="note" class="form-control" rows="1">@if (isset($edit)){{ $edit->note }}@else{{ old('note') }}@endif</textarea>
                
                    @if ($errors->has('note'))
                        <p class="error" style="color: red">{{ $errors->first('note') }}</p>
                    @endif
                </div>

                <div class="col-12 text-center">
                    <button type="button" id="reserve_btn" class="btn btn-danger px-4" onclick="reserve()">Reserve <i class="bi bi-bookmark-star fs-5"></i></button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('custom_js')
    <script>
        const reservation_div = $('#reservation_div');
        const floor = $('.floor_div');
        const table = $('.person_div');
        let edit = null;

        $(document).ready(function() {
            edit = @json(@$edit);

            $('.select2').select2({
                theme: "bootstrap-5",
                containerCssClass: "select2--small",
                dropdownCssClass: "select2--small",
            });
            flatpickr('.date-picker', {
                enableTime: false,
                dateFormat: 'd-m-Y',
                disableMobile: "true"
            });
            flatpickr('.time-picker', {
                enableTime: true,
                noCalendar: true,
                dateFormat: "h:i K"
            });
            
            if (edit) {
                $('#check_btn').click();
            }
        });

        

        function setReservationType(val) {
            reservation_div.slideUp();

            if (val == 1) {
                table.hide();
                floor.show();
            } else {
                floor.hide();
                table.show();
            }
        }

        function getAllValues() {
            const type = $("#type").val();
            const floor_id = $("#floor_id").val();
            const date = $("#date").val();
            const from_time = $("#from_time").val();
            const to_time = $("#to_time").val();
            const table_id = $("#table_ids").val();
            const person = $("#person").val();
            const person_search = $("#person_search").val();
            const contact_person = $("#contact_person").val();
            const phone = $("#phone").val();
            const email = $("#email").val();
            const note = $("#note").val();
            
            return {
                ...(edit && {id: edit.id}),
                type: type,
                date: date,
                from_time: from_time,
                to_time: to_time,
                ...(type == 1 && {floor_id: floor_id}),
                ...(type == 2 && {table_id: table_id}),
                person: type == 2 ? person_search : person, 
                contact_person: contact_person,
                phone: phone,
                email: email,
                note: note,
            }
        }

        function getSelectedTables(array, id) {
            return array.includes(id.toString()) ? 'selected' : '';
        }

        function checkAvailablity() {
            $('#loader').show();
            $('#check_btn').prop('disabled', true);

            const type = $("#type").val();
            const person_search = $("#person_search").val();
            const floor_id = $("#floor_id").val();
            const date = $("#date").val();
            const from_time = $("#from_time").val();
            const to_time = $("#to_time").val();

            const obj = {
                ...(edit && {id: edit.id}),
                date: date,
                ...(type == 2 ? {person: person_search} : {floor_id: floor_id}),
                from_time: from_time,
                to_time: to_time,
            }

            // show/hide field on edit
            setReservationType(type);

            if (type == 1) {
                ajaxCallV2("{{ route('restaurant.hall-booking.search') }}", "GET", obj, (res) => {
                    if (res.status == 2) {
                        reservation_div.slideDown();
                    } else {
                        callSweetAlert('error', res.message);
                    }
                    
                    $('#loader').hide();
                    $('#check_btn').prop('disabled', false);
                }, 
                (err) => {
                    $('#loader').hide();
                    $('#check_btn').prop('disabled', false);

                    let html = '';
                    if (res.errors) {
                        res.errors.forEach(err => {
                            html += `<div>${err[0]}</div>`;
                        })
                        callSweetAlert('error', html);
                    } else {
                        callSweetAlert('error', res.message);
                    }
                });
            } 
            else {
                ajaxCallV2("{{ route('restaurant.table-booking.search') }}", "GET", obj, (res) => {
                    $('#table_ids').empty();
                    let tableIdArray = [];
                    if (edit) {
                        tableIdArray = edit.table_id.split(',');
                    }

                    res.tables.forEach(item => {
                        $('#table_ids').append(`<option value="${item.id}" ${edit ? getSelectedTables(tableIdArray, item.id)  : ''}>${item.name}</option`);
                    });

                    reservation_div.slideDown();
                    $('#loader').hide();
                    $('#check_btn').prop('disabled', false);
                },
                (err) => {
                    $('#loader').hide();
                    $('#check_btn').prop('disabled', false);
    
                    let html = '';
                    if (res.errors) {
                        res.errors.forEach(err => {
                            html += `<div>${err[0]}</div>`;
                        })
                        callSweetAlert('error', html);
                    } else {
                        callSweetAlert('error', res.message);
                    }
                });
            }
        }

        function reserve() {
            $('#loader').show();
            $('#reserve_btn').prop('disabled', true);
            const valuesObj = getAllValues();

            if (valuesObj.type == 1) {
                const route = edit ? `/restaurant/reservation/update-hall/${edit.id}` : "{{ route('restaurant.hall-booking.store') }}";

                ajaxCallV2(route, `${edit ? 'PATCH' : 'POST'}`, valuesObj, (res) => {
                    $('#loader').hide();
                    $('#reserve_btn').prop('disabled', false);
                    
                    callSweetAlert('success', res.message);
                    location.href = '/restaurant/pos/reservation/list';
                },
                (err) => {
                    $('#loader').hide();
                    $('#reserve_btn').prop('disabled', false);
                    
                    if (err?.responseJSON?.errors) {
                        var object = err.responseJSON.errors,
                        result = Object.keys(object).reduce(function (r, k) {
                            return r.concat(object[k] + '<br>');
                        }, []);

                        result = result.join("");
                        callSweetAlert('error', 'Opps!', result);
                    }
                    else {
                        callSweetAlert('error', 'Opps!', err.responseJSON.message);
                    }
                });
            } 
            else {
                const route = edit ? "{{ route('restaurant.reservation.update_table') }}" : "{{ route('restaurant.table-booking.store') }}";
    
                ajaxCallV2(route, "POST", valuesObj, (res) => {
                    $('#loader').hide();
                    $('#reserve_btn').prop('disabled', false);
    
                    callSweetAlert('success', res.message);
                    location.href = '/restaurant/pos/reservation/list';
                },
                (err) => {
                    $('#loader').hide();
                    $('#reserve_btn').prop('disabled', false);
                    
                    if (err?.responseJSON?.errors) {
                        var object = err.responseJSON.errors,
                        result = Object.keys(object).reduce(function (r, k) {
                            return r.concat(object[k] + '<br>');
                        }, []);

                        result = result.join("");
                        callSweetAlert('error', 'Opps!', result);
                    }
                    else {
                        callSweetAlert('error', 'Opps!', err.responseJSON.message);
                    }
                });
            }
        }
    </script>
@endsection