@extends('layouts.app')

@section('title', 'Reservation Report - Tiqkets')
@section('page-title', 'Reservation Report')

@section('header-action')
    <button type="button" class="btn btn-primary" onclick="exportReport()">
        Export
    </button>
@endsection

@section('content')
    <div class="reservation-report-container">
        <!-- Filters Section -->
        <div class="filters-card">
            <form action="{{ route('restaurant-admin.reports.reservation') }}" method="GET" id="filterForm">
                <div class="filters-grid">
                    <!-- Search -->
                    <div class="filter-group">
                        <label class="filter-label">Search</label>
                        <div class="search-input-wrapper">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" class="filter-input" placeholder="Search"
                                   name="search" value="{{ request('search') }}">
                        </div>
                    </div>

                    <!-- Date Range -->
                    <div class="filter-group">
                        <label class="filter-label">Date</label>
                        <div class="date-input-wrapper">
                            <input type="text" class="filter-input date-range-picker"
                                   placeholder="20 Oct 2025 to 21 Oct 2025"
                                   name="date_range" value="{{ request('date_range') }}">
                            <i class="far fa-calendar calendar-icon"></i>
                        </div>
                    </div>

                    <!-- Branch Filter -->
                    <div class="filter-group">
                        <label class="filter-label">Branch</label>
                        <select class="filter-select" name="branch_id" onchange="this.form.submit()">
                            <option value="">All Branches</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}"
                                    {{ request('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>

        <!-- Reservation Table -->
        <div class="report-table-card">
            @if(count($tableData) > 0)
                <div class="table-wrapper">
                    <table class="report-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Branch ID</th>
                                <th>Branch Name</th>
                                <th class="text-center">Total Reserved</th>
                                <th class="text-center">Arrived</th>
                                <th class="text-center">Cancelled</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tableData as $data)
                                <tr>
                                    <td>{{ $data['date'] }}</td>
                                    <td>{{ $data['branch_id'] }}</td>
                                    <td>{{ $data['branch_name'] }}</td>
                                    <td class="text-center">{{ $data['reserved_count'] }}</td>
                                    <td class="text-center">{{ $data['arrived'] }}</td>
                                    <td class="text-center">{{ $data['cancelled'] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="empty-state">
                    <i class="fas fa-calendar-check fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No Data Found</h5>
                    <p class="text-muted">No reservation data available for the selected filters.</p>
                    <button type="button" class="btn btn-primary" onclick="resetFilters()">
                        <i class="fas fa-refresh me-1"></i> Reset Filters
                    </button>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    .reservation-report-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Filters Card */
    .filters-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px;
    }

    .filters-grid {
        display: grid;
        grid-template-columns: 2fr 2fr 2fr;
        gap: 20px;
        align-items: end;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
    }

    .filter-label {
        font-size: 13px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
    }

    .filter-input,
    .filter-select {
        height: 42px;
        padding: 0 12px;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 14px;
        color: #111827;
        transition: all 0.2s;
        background: #ffffff;
        width: 100%;
    }

    .filter-input:focus,
    .filter-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .filter-select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

    .search-input-wrapper,
    .date-input-wrapper {
        position: relative;
    }

    .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 14px;
    }

    .search-input-wrapper .filter-input {
        padding-left: 36px;
    }

    .calendar-icon {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 14px;
        pointer-events: none;
    }

    /* Report Table Card */
    .report-table-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    .report-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }

    .report-table thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .report-table thead th {
        padding: 16px 20px;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        border: none;
    }

    .report-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.2s;
    }

    .report-table tbody tr:hover {
        background-color: #f9fafb;
    }

    .report-table tbody tr:last-child {
        border-bottom: none;
    }

    .report-table tbody td {
        padding: 16px 20px;
        font-size: 14px;
        color: #111827;
        vertical-align: middle;
    }

    .report-table .text-center {
        text-align: center;
    }

    /* Empty State */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 20px;
        text-align: center;
    }

    .empty-state i {
        opacity: 0.3;
    }

    .empty-state h5 {
        margin-top: 16px;
        margin-bottom: 8px;
        color: #6b7280;
    }

    .empty-state p {
        margin-bottom: 20px;
        color: #9ca3af;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .filters-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .report-table {
            font-size: 13px;
        }

        .report-table thead th,
        .report-table tbody td {
            padding: 12px 10px;
        }
    }

    /* Date Range Picker Customization */
    .daterangepicker {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .daterangepicker .calendar-table {
        border: none;
        background: #fff;
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: #667eea;
        border-color: #667eea;
    }

    .daterangepicker .ranges li.active {
        background-color: #667eea;
    }
</style>
@endpush

@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize date range picker
        $('.date-range-picker').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD MMM YYYY'
            },
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        });

        $('.date-range-picker').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD MMM YYYY') + ' to ' + picker.endDate.format('DD MMM YYYY'));
            $('#filterForm').submit();
        });

        $('.date-range-picker').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            $('#filterForm').submit();
        });

        // Auto-submit on search after typing stops
        let searchTimeout;
        $('input[name="search"]').on('keyup', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function() {
                $('#filterForm').submit();
            }, 500);
        });
    });

    function exportReport() {
        const form = document.getElementById('filterForm');
        const currentAction = form.action;

        // Change form action to export route
        form.action = '{{ route("restaurant-admin.reports.export-reservation") }}';
        form.submit();

        // Restore original action
        setTimeout(() => {
            form.action = currentAction;
        }, 100);
    }

    function resetFilters() {
        window.location.href = '{{ route("restaurant-admin.reports.reservation") }}';
    }
</script>
@endpush