@extends('restaurant.pos.layout.master')
@section('title','KITCHEN List')

@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 List</h4>
        
        <a href="{{ route('restaurant.pos.reservation.create') }}" class="btn btn-sm btn-warning d-flex" type="button" name="button">
            <i class="bi bi-plus-lg me-1"></i>
            <div class="">Add New</div>
        </a>
    </div>

    <div class="card-body">
        <div class="row g-3 gy-2 mb-3">
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">From Date</label>
                <input type="text" id="date_from" name="date_from" class="form-control form-control-sm date-picker" value="{{ date("d-m-Y") }}" />
            </div>
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">To Date</label>
                <input type="text" id="date_to" name="date_to" class="form-control form-control-sm date-picker"  value="{{ date("d-m-Y") }}" />
            </div>
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">Type</label>
                <select name="type" id="type" class="form-select form-select-sm select2">
                    <option value="">All</option>
                    <option value="2">Table</option>
                    <option value="1">Hall</option>
                </select>
            </div>
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">Floor</label>
                <select class="form-select form-select-sm customClass" required name="floor_id" id="floor_id">
                    <option value=""> -- Select Floor -- </option>
                    @foreach (getFloorList() as $data)
                        <option value="{{ $data->id }}" {{ request()?->floor_id == $data->id ? 'selected' : '' }}>{{ $data->floor_no }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">Phone</label>
                <input type="number" id="phone" name="phone" class="form-control form-control-sm" />
            </div>
            <div class="col">
                <label for="" class="d-block">&nbsp;</label>
                <button type="button" class="btn btn-sm btn-danger" onclick="getData()">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table myTable table-sm table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th class="text-right">Phone</th>
                        <th class="text-center">Contact Person</th>
                        <th class="text-center">Floor</th>
                        <th class="text-center">Table</th>
                        <th class="text-center">Person</th>
                        <th class="text-center">Email</th>
                        <th class="text-center">Note</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="reservation_list">
                    
                </tbody>
            </table>
        </div>
    </div>
</div> 


@section('custom_js')
    <script src="{{ asset('restaurant/assets/js/dayjs.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                theme: "bootstrap-5",
                containerCssClass: "select2--small",
                dropdownCssClass: "select2--small",
            });
        });

        function getData() {
            const from_date = $('#date_from').val();
            const to_date = $('#date_to').val();
            const type = $('#type').val();
            const floor_id = $('#floor_id').val();
            const phone = $('#phone').val();

            const obj = {
                from_date: from_date,
                to_date: to_date,
                type: type,
                floor_id: floor_id,
                phone: phone,
            };

            ajaxCallV2("{{ route('restaurant.reservation.search') }}", "GET", obj, (res) => {
                $('#loader').hide();
                $('#reservation_list').empty();

                res.results.forEach(item => {
                    const tr = `<tr>
                        <td>${dayjs(item.date).format("DD/MM/YYYY")}</td>
                        <td>${dayjs(`${item.date} ${item.from_time}`).format('hh:mm: A')}</td>
                        <td>${dayjs(`${item.date} ${item.to_time}`).format('hh:mm: A')}</td>
                        <td class="text-right">${item.phone}</td>
                        <td class="text-center">${item.contact_person}</td>
                        <td class="text-center">${item.floor?.name ?? ''}</td>
                        <td class="text-center">${item.table?.name ?? ''}</td>
                        <td class="text-center">${item.person}</td>
                        <td class="text-center">${item.email}</td>
                        <td class="text-center">${item.note}</td>
                        <td class="text-center">
                            ${item.status === 1
                                ? '<p class="text-warning">Incoming</p>'
                                : item.status === 2
                                ? '<p class="text-success">Attended</p>'
                                : '<p class="text-danger">Cancelled</p>'
                            }
                        </td>
                        <td class="text-center">
                            <a href="/restaurant/pos/reservation/edit/${item.id}" title="Edit"
                                class="text-danger fs-5">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                        </td>
                    </tr>`;

                    $('#reservation_list').append(tr);
                });
            
            });
        }
    </script>
@endsection

@endsection