@extends('admin.layouts.base')
@section('title', 'Bookings - {{ $warehouse->name }}')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title gap-5">
                <h3 class="fw-bold">Bookings</h3>
                <div class="fs-6 text-muted mt-1">
                    Warehouse: <strong>{{ $warehouse->name }}</strong> • {{ $warehouse->city }}, {{ $warehouse->state }}
                </div>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('admin.warehouses.index') }}" class="btn btn-light me-3">View Warehouses</a>
                <a href="{{ route('admin.warehouse-bookings.index') }}" class="btn btn-light">Dashboard</a>
            </div>
        </div>

        <div class="card-body py-6">
            <div class="mb-6">
                <div class="row g-4 align-items-end">
                    <div class="col-md-4">
                        <input type="text" id="search_input" class="form-control" placeholder="Search by code or customer...">
                    </div>
                    <div class="col-md-3">
                        <select id="status_filter" class="form-select">
                            <option value="all">All Status</option>
                            <option value="pending">Pending</option>
                            <option value="confirmed">Confirmed</option>
                            <option value="active">Active</option>
                            <option value="completed">Completed</option>
                            <option value="cancelled">Cancelled</option>
                            <option value="expired">Expired</option>
                        </select>
                    </div>
                    <div class="col-md-5 text-md-end">
                        <button id="apply_filters" class="btn btn-primary me-3">Apply</button>
                        <button id="reset_filters" class="btn btn-secondary">Reset</button>
                    </div>
                </div>
            </div>

            <table class="table align-middle table-row-dashed fs-6 gy-5" id="bookings_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th>#</th>
                        <th>Booking Code</th>
                        <th>Customer</th>
                        <th>Period</th>
                        <th class="text-center">Space</th>
                        <th class="text-end">Price</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let bookingsTable;

$(document).ready(function () {
    bookingsTable = $('#bookings_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.warehouse-bookings.bookings-data", $warehouse->id) }}',
            data: function (d) {
                d.custom_search = $('#search_input').val().trim();
                d.custom_status = $('#status_filter').val();
            }
        },
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'code' },
            { data: 'customer' },
            { data: 'period' },
            { data: 'space', className: 'text-center' },
            { data: 'price', className: 'text-end' },
            { data: 'status', className: 'text-center' },
            { data: 'actions', className: 'text-center', orderable: false, searchable: false }
        ],
        language: {
            processing: '<div class="spinner-border text-primary"></div>',
            emptyTable: 'No bookings found',
            zeroRecords: 'No matching bookings found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100],
        // Optional: Hide default search box since we have custom one
        searching: true,
        dom: 'rt<"d-flex justify-content-between align-items-center mt-4"lip>',
    });

    // Apply filters button
    $('#apply_filters').on('click', function () {
        bookingsTable.ajax.reload();
    });

    // Reset filters
    $('#reset_filters').on('click', function () {
        $('#search_input').val('');
        $('#status_filter').val('all');
        bookingsTable.ajax.reload();
    });

    // Enter key on search input
    $('#search_input').on('keyup', function (e) {
        if (e.key === 'Enter') {
            bookingsTable.ajax.reload();
        }
    });

    // Status change → auto reload
    $('#status_filter').on('change', function () {
        bookingsTable.ajax.reload();
    });
});
</script>
@endpush