@extends('layouts.app')

@section('title', 'Order Report - ' . $outlet->outlet_name)
@section('page-title', 'Order Report')

@push('styles')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    /* Main Container */
    .report-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    /* Header Section */
    .report-header {
        padding: 24px;
        border-bottom: 1px solid #e5e7eb;
    }

    .page-title {
        font-size: 24px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }

    /* Filter Section */
    .filter-section {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 16px;
        align-items: end;
    }

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

    .filter-label {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
    }

    .filter-input {
        padding: 10px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        color: #111827;
        transition: all 0.2s;
    }

    .filter-input:focus {
        outline: none;
        border-color: #8b5cf6;
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

    .search-input {
        position: relative;
    }

    .search-input input {
        padding-left: 40px;
    }

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

    .date-input {
        position: relative;
        cursor: pointer;
    }

    .date-input input {
        padding-right: 40px;
        cursor: pointer;
    }

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

    .export-btn {
        padding: 10px 24px;
        background: #8b5cf6;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        text-decoration: none;
    }

    .export-btn:hover {
        background: #7c3aed;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    /* Table Section */
    .report-table {
        width: 100%;
        border-collapse: collapse;
    }

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

    .report-table th {
        padding: 16px 24px;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

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

    .report-table td {
        padding: 16px 24px;
        font-size: 14px;
        color: #374151;
    }

    .total-cell {
        font-weight: 600;
        color: #111827;
        font-size: 15px;
    }

    .cancelled-cell {
        font-weight: 600;
        color: #ef4444;
    }

    /* Empty State */
    .empty-state {
        padding: 80px 24px;
        text-align: center;
    }

    .empty-icon {
        font-size: 64px;
        color: #d1d5db;
        margin-bottom: 16px;
    }

    .empty-text {
        font-size: 16px;
        color: #9ca3af;
        margin-bottom: 8px;
    }

    .empty-subtext {
        font-size: 14px;
        color: #d1d5db;
    }

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

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

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

    .page-item {
        display: inline-block;
    }

    .page-link {
        padding: 8px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        color: #374151;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.2s;
        display: inline-block;
    }

    .page-link:hover {
        background-color: #f3f4f6;
        border-color: #d1d5db;
    }

    .page-item.active .page-link {
        background-color: #8b5cf6;
        border-color: #8b5cf6;
        color: white;
    }

    .page-item.disabled .page-link {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Summary Cards */
    .summary-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 24px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .summary-card {
        padding: 16px;
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }

    .summary-label {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .summary-value {
        font-size: 24px;
        font-weight: 700;
        color: #111827;
    }

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

        .summary-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .report-header {
            padding: 16px;
        }

        .report-table th,
        .report-table td {
            padding: 12px 16px;
            font-size: 13px;
        }

        .summary-cards {
            grid-template-columns: 1fr;
            padding: 16px;
        }

        .pagination-container {
            flex-direction: column;
            gap: 16px;
        }
    }
</style>
@endpush

@section('content')
<div class="report-container">
    <!-- Header -->
    <div class="report-header">
        <h1 class="page-title">Order Report</h1>
        <p style="color: #6b7280; margin: 8px 0 0 0;">{{ $outlet->outlet_name }}</p>
    </div>

    <!-- Summary Cards -->
    <div class="summary-cards">
        <div class="summary-card">
            <div class="summary-label">Total Orders</div>
            <div class="summary-value">{{ number_format($totalOrders) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Delivered</div>
            <div class="summary-value" style="color: #10b981;">{{ number_format($totalDelivered) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Cancelled</div>
            <div class="summary-value" style="color: #ef4444;">{{ number_format($totalCancelled) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Success Rate</div>
            <div class="summary-value" style="color: #8b5cf6;">
                @php
                    $successRate = $totalOrders > 0 ? round((($totalOrders - $totalCancelled) / $totalOrders) * 100, 1) : 0;
                @endphp
                {{ number_format($successRate, 1) }}%
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div style="padding: 24px; border-bottom: 1px solid #e5e7eb;">
        <form method="GET" action="{{ route('outlet-staff.reports.performance') }}" id="filterForm">
            <div class="filter-section">
                <!-- Search -->
                <div class="filter-group">
                    <label class="filter-label">Search</label>
                    <div class="search-input">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text"
                               name="search"
                               class="filter-input"
                               placeholder="Search by date..."
                               value="{{ $search }}"
                               style="padding-left: 40px;">
                    </div>
                </div>

                <!-- Date Range -->
                <div class="filter-group">
                    <label class="filter-label">Date</label>
                    <div class="date-input">
                        <input type="text"
                               id="daterange"
                               name="date_range"
                               class="filter-input"
                               value="{{ $startDate->format('d M Y') }} to {{ $endDate->format('d M Y') }}"
                               readonly>
                        <i class="far fa-calendar calendar-icon"></i>
                    </div>
                </div>

                <!-- Export Button -->
                <div class="filter-group">
                    <a href="{{ route('outlet-staff.reports.export', ['date_range' => request('date_range')]) }}"
                       class="export-btn">
                        <i class="fas fa-download"></i>
                        Export
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div style="overflow-x: auto;">
        <table class="report-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Total Orders</th>
                    <th>Cancelled</th>
                    <th>Delivered</th>
                    <th>Ready</th>
                    <th>Success Rate</th>
                </tr>
            </thead>
            <tbody>
                @forelse($orders as $order)
                    @php
                        $successfulOrders = $order->total_orders - $order->cancelled_orders;
                        $successRate = $order->total_orders > 0
                            ? round(($successfulOrders / $order->total_orders) * 100, 1)
                            : 0;
                    @endphp
                    <tr>
                        <td>{{ Carbon\Carbon::parse($order->order_date)->format('d M, Y') }}</td>
                        <td class="total-cell">{{ $order->total_orders }}</td>
                        <td class="cancelled-cell">{{ $order->cancelled_orders }}</td>
                        <td style="font-weight: 600; color: #10b981;">{{ $order->delivered_orders }}</td>
                        <td style="font-weight: 600; color: #f59e0b;">{{ $order->ready_orders }}</td>
                        <td>
                            <span style="
                                display: inline-block;
                                padding: 4px 12px;
                                border-radius: 12px;
                                font-size: 13px;
                                font-weight: 600;
                                background: {{ $successRate >= 80 ? '#d1fae5' : ($successRate >= 60 ? '#fef3c7' : '#fee2e2') }};
                                color: {{ $successRate >= 80 ? '#065f46' : ($successRate >= 60 ? '#92400e' : '#991b1b') }};
                            ">
                                {{ number_format($successRate, 1) }}%
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                <i class="fas fa-inbox empty-icon"></i>
                                <p class="empty-text">No order data found</p>
                                <p class="empty-subtext">Try adjusting your filters or date range</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($orders->hasPages())
        <div class="pagination-container">
            <div class="pagination-info">
                Showing {{ $orders->firstItem() }} to {{ $orders->lastItem() }} of {{ $orders->total() }} results
            </div>
            <nav>
                {{ $orders->links('pagination::bootstrap-4') }}
            </nav>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<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>
$(function() {
    // Initialize date range picker
    $('#daterange').daterangepicker({
        opens: 'left',
        startDate: moment('{{ $startDate->format('Y-m-d') }}'),
        endDate: moment('{{ $endDate->format('Y-m-d') }}'),
        locale: {
            format: 'DD MMM YYYY',
            separator: ' to '  // This ensures consistent separator
        },
        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')]
        }
    }, function(start, end, label) {
        // Auto-submit form when date range changes
        $('#filterForm').submit();
    });

    // Auto-submit form on search input (with debounce)
    let searchTimeout;
    $('input[name="search"]').on('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            $('#filterForm').submit();
        }, 500);
    });
});
</script>
@endpush