@extends('layouts.app')

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

@section('header-action')
    {{-- <a href="{{ route('outlet-staff.reports.export', ['date_range' => request('date_range')]) }}"
       class="btn btn-primary d-inline-flex align-items-center">
        <i class="fas fa-download me-2"></i> Export
    </a> --}}
@endsection

@section('content')
    <div class="container-fluid px-0">
        {{-- Filters Card --}}
        <div class="card mb-3">
            <div class="card-body">
                <form method="GET" action="{{ route('outlet-staff.reports.performance') }}" id="filterForm">
                    <input type="hidden" name="per_page" value="{{ request('per_page', 20) }}">

                    <div class="row g-3 align-items-end">
                        {{-- Search --}}
                        {{-- <div class="col-12 col-md-3">
                            <label class="form-label fw-semibold small text-muted">Search</label>
                            <div class="input-group">

                                <input type="text" class="form-control" placeholder="Search by date" name="search"
                                    value="{{ $search }}">
                                <span class="input-group-text bg-white">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                            </div>
                        </div> --}}

                        {{-- Date Range --}}
                        <div class="col-12 col-md-4">
                            <label class="form-label fw-semibold small text-muted">Date Range</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="daterange" name="date_range"
                                    value="{{ $startDate->format('d M Y') }} to {{ $endDate->format('d M Y') }}" readonly>
                                <span class="input-group-text bg-white">
                                    <i class="far fa-calendar text-muted"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Spacer --}}
                        <div class="col-12 col-md-4"></div>

                        {{-- Export Button --}}
                        <div class="col-12 col-md-4 text-md-end">
                            <label class="form-label d-none d-md-block">&nbsp;</label>
                            <a href="{{ route('outlet-staff.reports.export', ['date_range' => request('date_range')]) }}"
                                class="btn btn-primary d-inline-flex align-items-center justify-content-center">
                                Export
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            {{-- </div> --}}
            <style>
                .table-responsive {
                    border: 1px solid #e5e7eb;
                    border-radius: 12px;
                }
            </style>
            {{-- Report Table Card --}}
            {{-- <div class="card"> --}}
            @if ($orders->count() > 0)
                <div class="p-3">
                    <div class="table-responsive">
                        <table class="performance-table">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col">Date</th>
                                    <th scope="col" class="text-center">Total Orders</th>
                                    <th scope="col" class="text-center">Delivered</th>
                                    <th scope="col" class="text-center">Ready</th>
                                    <th scope="col" class="text-center">Cancelled</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($orders as $order)
                                    <tr>
                                        <td class="fw-semibold">
                                            {{ Carbon\Carbon::parse($order->order_date)->format('d M, Y') }}
                                        </td>
                                        <td class="text-center">
                                            <span class="">{{ $order->total_orders }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="">{{ $order->delivered_orders }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="">{{ $order->ready_orders }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="">{{ $order->cancelled_orders }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                {{-- Pagination --}}
                <div
                    class="d-flex flex-column flex-lg-row align-items-center justify-content-between gap-2 px-3 py-3 border-top bg-light">
                    <div class="small text-muted">
                        Showing <strong>{{ $orders->firstItem() }}</strong> to
                        <strong>{{ $orders->lastItem() }}</strong> of
                        <strong>{{ $orders->total() }}</strong> entries
                    </div>

                    <nav aria-label="Orders pagination">
                        <ul class="pagination mb-0">
                            {{-- Previous --}}
                            @if ($orders->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link">
                                        <i class="fas fa-chevron-left"></i>
                                    </span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $orders->previousPageUrl() }}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                            @endif

                            {{-- Page Numbers --}}
                            @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                                @if ($page == $orders->currentPage())
                                    <li class="page-item active" aria-current="page">
                                        <span class="page-link">{{ $page }}</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                    </li>
                                @endif
                            @endforeach

                            {{-- Next --}}
                            @if ($orders->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $orders->nextPageUrl() }}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <span class="page-link">
                                        <i class="fas fa-chevron-right"></i>
                                    </span>
                                </li>
                            @endif
                        </ul>
                    </nav>

                    {{-- Per page --}}
                    <div class="d-flex align-items-center gap-2">
                        <label for="perPageSelect" class="small text-muted mb-0">Show:</label>
                        <select id="perPageSelect" class="form-select form-select-sm" style="width:auto"
                            onchange="changePerPage(this.value)">
                            <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                            <option value="20"
                                {{ request('per_page') == 20 || !request('per_page') ? 'selected' : '' }}>20</option>
                            <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                        </select>
                    </div>
                </div>
            @else
                <div class="text-center py-5">
                    <div class="mb-3">
                        <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-light"
                            style="width:80px;height:80px;">
                            <i class="fas fa-inbox fs-2 text-muted"></i>
                        </span>
                    </div>
                    <h5 class="fw-semibold mb-1">No Data Found</h5>
                    <p class="text-muted mb-3">No orders available for the selected filters.</p>
                    <button type="button" class="btn btn-primary" onclick="resetFilters()">
                        <i class="fas fa-refresh me-2"></i>Reset Filters
                    </button>
                </div>
            @endif
            {{-- </div> --}}
        </div>
    </div>
@endsection
@push('styles')
    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> --}}
    <style>
        .performance-report-container {
            padding: 0;
        }

        /* Filters Card */
        .filters-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .filters-row {
            display: flex;
            gap: 16px;
            align-items: flex-end;
        }

        .filter-group {
            flex: 1;
            min-width: 0;
        }

        .filter-label {
            font-size: 14px;
            font-weight: 400;
            color: #272626;
            margin-bottom: 0;
            display: block;
        }

        .input-with-icon {
            position: relative;
        }

        .input-with-icon .form-control {
            padding-right: 40px;
        }

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

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 10px 12px;
            font-size: 14px;
            height: 42px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #8b2d6b;
            box-shadow: 0 0 0 3px rgba(139, 45, 107, 0.1);
            outline: none;
        }

        /* Outlet Select with Avatar */
        .outlet-select-wrapper {
            position: relative;
        }

        .outlet-avatar {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .avatar-circle {
            width: 32px;
            height: 32px;
            background: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: white;
        }

        .user-avatar {
            background: #8b2d6b;
        }

        .outlet-select {
            padding-right: 80px;
        }

        /* User Avatar Display */
        .user-avatar-display {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 42px;
        }

        /* Export Button */
        .btn-export {
            background: #8b2d6b;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            height: 42px;
        }

        .btn-export:hover {
            background: #6f2456;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 45, 107, 0.3);
        }

        /* Table Card */
        .table-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

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

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

        .performance-table thead th {
            padding: 16px 20px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #000000;
            /* text-transform: uppercase; */
            letter-spacing: 0.5px;
        }

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

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

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

        .performance-table tbody td {
            padding: 16px 20px;
            font-size: 14px;
            color: #111827;
        }

        .outlet-id {
            font-family: 'Courier New', monospace;
            font-weight: 600;
            color: #6b7280;
            font-size: 13px;
        }

        .outlet-name {
            font-weight: 500;
        }

        .order-count,
        .cancelled-count {
            font-weight: 600;
        }

        /* Pagination */
        .pagination-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-top: 1px solid #e5e7eb;
        }

        .pagination-info {
            font-size: 14px;
            color: #6b7280;
        }

        .pagination-info strong {
            color: #111827;
            font-weight: 600;
        }

        .pagination {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 4px;
        }

        .page-item {
            margin: 0;
        }

        .page-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 12px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            text-decoration: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .page-link:hover {
            background: #f9fafb;
            border-color: #8b2d6b;
            color: #8b2d6b;
        }

        .page-item.active .page-link {
            background: #8b2d6b;
            border-color: #8b2d6b;
            color: #fff;
        }

        .page-item.disabled .page-link {
            background: #f9fafb;
            border-color: #e5e7eb;
            color: #9ca3af;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            color: #6b7280;
        }

        .empty-state i {
            opacity: 0.3;
        }

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

        /* Responsive */
        @media (max-width: 1200px) {
            .filters-row {
                flex-wrap: wrap;
            }

            .filter-group {
                flex: 0 0 calc(50% - 8px);
            }
        }

        @media (max-width: 768px) {
            .filters-row {
                flex-direction: column;
            }

            .filter-group {
                flex: 0 0 100%;
            }

            .pagination-wrapper {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }
    </style>
@endpush
@push('styles')
    {{-- daterangepicker + fontawesome (Bootstrap is in layout) --}}
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {

            /* ===============================
               DATE RANGE PICKER (NO AUTO RELOAD)
               =============================== */
            $('#daterange').daterangepicker({
                opens: 'left',
                autoUpdateInput: true,
                startDate: moment('{{ $startDate->format('Y-m-d') }}'),
                endDate: moment('{{ $endDate->format('Y-m-d') }}'),
                locale: {
                    format: 'DD MMM YYYY',
                    separator: ' to '
                },
                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')
                    ]
                }
            });

            /* =====================================================
               SUBMIT ONLY WHEN USER CLICKS APPLY (CONTROLLED RELOAD)
               ===================================================== */
            $('#daterange').on('apply.daterangepicker', function(ev, picker) {

                // Reset pagination
                $('input[name="page"]').remove();

                // Ensure first page
                $('#filterForm').append('<input type="hidden" name="page" value="1">');

                // Submit form
                $('#filterForm').submit();
            });

            /* ===============================
               PER PAGE CHANGE
               =============================== */
            window.changePerPage = function(value) {
                $('input[name="page"]').remove();
                $('input[name="per_page"]').val(value);
                $('#filterForm').append('<input type="hidden" name="page" value="1">');
                $('#filterForm').submit();
            };

            /* ===============================
               RESET FILTERS
               =============================== */
            window.resetFilters = function() {
                window.location.href = '{{ route('outlet-staff.reports.performance') }}';
            };

            /* ===============================
               OPTIONAL: FOCUS SEARCH INPUT
               =============================== */
            const searchInput = $('input[name="search"]');
            if (searchInput.length) {
                searchInput.focus();
                let val = searchInput.val();
                searchInput.val('').val(val);
            }

        });
    </script>
@endpush