@extends('layouts.app')

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

@section('content')
    <div class="performance-report-container">
        <!-- Filters Card -->
        <div class="filters-card">
            <form action="{{ route('food-court.reports.performance') }}" method="GET">
                <div class="filters-row">
                    <!-- Search -->
                    {{-- <div class="filter-group">
                        <label class="filter-label">Search</label>
                        <div class="input-with-icon">
                            <input type="text" class="form-control search_id" placeholder="Search" name="search" id="search_id"
                                value="{{ request('search') }}">
                            <i class="fas fa-search input-icon"></i>
                        </div>
                    </div> --}}

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

                    <!-- Outlet Filter -->
                    <div class="filter-group">
                        <label class="filter-label">Outlet</label>
                        <div class="outlet-select-wrapper">
                            <select class="form-select outlet-select" name="outlet_id">
                                <option value="">All Outlets</option>
                                @foreach ($outlets as $outlet)
                                    <option value="{{ $outlet->id }}"
                                        {{ request('outlet_id') == $outlet->id ? 'selected' : '' }}>
                                        {{ $outlet->outlet_name }}
                                        @if ($outlet->shop_number)
                                            ({{ $outlet->shop_number }})
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                            {{-- <div class="outlet-avatar">
                                <div class="avatar-circle">R</div>
                            </div> --}}
                        </div>
                    </div>

                    <!-- User Avatar (Display only) -->
                    {{-- <div class="filter-group">
                        <label class="filter-label" style="opacity: 0;">User</label>
                        <div class="user-avatar-display">
                            <div class="avatar-circle user-avatar">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </div>
                        </div>
                    </div> --}}

                    <!-- Export Button -->
                    <div class="filter-group text-end">
                        <label class="filter-label" style="opacity: 0;">Export</label>
                        <button type="button" class="btn btn-export" onclick="exportData()">
                            Export
                        </button>
                    </div>
                </div>
            </form>
            {{-- </div> --}}

            <!-- Table Card -->
            <div class="table-card mt-3">
                @if ($paginatedData->count() > 0)
                    <div class="table-responsive">
                        <table class="performance-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Outlet ID</th>
                                    <th>Outlet Name</th>
                                    <th>Orders</th>
                                    <th>Cancelled</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($paginatedData as $data)
                                    <tr>
                                        <td>{{ $data['date_formatted'] }}</td>
                                        <td>
                                            <span class="outlet-id">{{ $data['outlet_id'] ?? 'N/A' }}</span>
                                        </td>
                                        <td>
                                            <span class="outlet-name">{{ $data['outlet_name'] }}</span>
                                        </td>
                                        <td>
                                            <span class="outlet-name">{{ $data['total_orders'] }}</span>
                                        </td>
                                        <td>
                                            <span class="outlet-name">{{ $data['cancelled'] }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if ($paginatedData->hasPages())
                        <div class="pagination-wrapper">
                            <div class="pagination-info">
                                Showing <strong>{{ $paginatedData->firstItem() }}</strong> to
                                <strong>{{ $paginatedData->lastItem() }}</strong> of
                                <strong>{{ $paginatedData->total() }}</strong> results
                            </div>

                            <nav aria-label="Performance report pagination">
                                <ul class="pagination">
                                    {{-- Previous Button --}}
                                    @if ($paginatedData->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="{{ $paginatedData->appends(request()->query())->previousPageUrl() }}">
                                                <i class="fas fa-chevron-left"></i>
                                            </a>
                                        </li>
                                    @endif

                                    {{-- Page Numbers --}}
                                    @php
                                        $start = max($paginatedData->currentPage() - 2, 1);
                                        $end = min($start + 4, $paginatedData->lastPage());
                                        $start = max($end - 4, 1);
                                    @endphp

                                    @if ($start > 1)
                                        <li class="page-item">
                                            <a class="page-link"
                                                href="{{ $paginatedData->appends(request()->query())->url(1) }}">1</a>
                                        </li>
                                        @if ($start > 2)
                                            <li class="page-item disabled"><span class="page-link">...</span></li>
                                        @endif
                                    @endif

                                    @for ($i = $start; $i <= $end; $i++)
                                        @if ($i == $paginatedData->currentPage())
                                            <li class="page-item active">
                                                <span class="page-link">{{ $i }}</span>
                                            </li>
                                        @else
                                            <li class="page-item">
                                                <a class="page-link"
                                                    href="{{ $paginatedData->appends(request()->query())->url($i) }}">{{ $i }}</a>
                                            </li>
                                        @endif
                                    @endfor

                                    @if ($end < $paginatedData->lastPage())
                                        @if ($end < $paginatedData->lastPage() - 1)
                                            <li class="page-item disabled"><span class="page-link">...</span></li>
                                        @endif
                                        <li class="page-item">
                                            <a class="page-link"
                                                href="{{ $paginatedData->appends(request()->query())->url($paginatedData->lastPage()) }}">
                                                {{ $paginatedData->lastPage() }}
                                            </a>
                                        </li>
                                    @endif

                                    {{-- Next Button --}}
                                    @if ($paginatedData->hasMorePages())
                                        <li class="page-item">
                                            <a class="page-link"
                                                href="{{ $paginatedData->appends(request()->query())->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>
                        </div>
                    @endif
                @else
                    <div class="empty-state">
                        <i class="fas fa-chart-bar fa-4x mb-3"></i>
                        <h5>No Data Found</h5>
                        <p>No performance data available for the selected filters.</p>
                        <a href="{{ route('food-court.reports.performance') }}" class="btn btn-primary">
                            <i class="fas fa-refresh me-1"></i> Reset Filters
                        </a>
                    </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('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'
                }
            });

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

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

            // Auto-submit on outlet change
            $('.outlet-select').on('change', function() {
                $(this).closest('form').submit();
            });
            $('.search_id').on('keyup', function() {
                $(this).closest('form').submit();
            });
           
        });

        function exportData() {
            const params = new URLSearchParams(window.location.search);
            const exportUrl = '{{ route('food-court.reports.export-performance') }}?' + params.toString();
            window.location.href = exportUrl;
        }
        $(document).ready(function() {
            let searchInput = $('input[name="search"]');

            // Focus the input
            searchInput.focus();

            // Move cursor to end of text
            let val = searchInput.val();
            searchInput.val('').val(val);
        });
    </script>
@endpush