@extends('admin.layouts.app')

@section('title', 'Sales Report')
@section('page-title', 'Sales Report')

@section('content')
<!-- Search & Filter Form -->
<div class="mb-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-soft dark:border-slate-800 dark:bg-slate-950">
    <form method="GET" action="{{ route('admin.reports.sales') }}" class="flex flex-col md:flex-row items-end justify-between gap-4">
        <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Start Date</label>
                <input type="date" name="date_from" value="{{ $dateFrom }}"
                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">End Date</label>
                <input type="date" name="date_to" value="{{ $dateTo }}"
                       class="w-full py-2.5 px-4 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
            </div>
        </div>
        <div class="flex items-center gap-3 w-full md:w-auto">
            <button type="submit" class="btn-primary w-full md:w-auto">
                <i class="bi bi-arrow-repeat mr-2 text-xs"></i> Update Report
            </button>
            <button type="button" onclick="window.print()" class="btn-secondary w-full md:w-auto">
                <i class="bi bi-printer mr-2 text-xs"></i> Print Report
            </button>
        </div>
    </form>
</div>

<!-- Sales Metrics KPI Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Total Revenue -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Total Revenue</span>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">${{ number_format($summary->revenue_sum ?? 0, 2) }}</h3>
    </div>

    <!-- Total Orders -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Total Orders</span>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">{{ $summary->total_orders ?? 0 }}</h3>
    </div>

    <!-- AOV -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Average Order Value (AOV)</span>
        <h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">${{ number_format($aov, 2) }}</h3>
    </div>

    <!-- Discounts Granted -->
    <div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-5">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider block mb-1">Discounts Granted</span>
        <h3 class="text-2xl font-extrabold text-rose-600 dark:text-rose-400">${{ number_format($summary->discount_sum ?? 0, 2) }}</h3>
    </div>
</div>

<!-- Daily Sales Breakdown Table -->
<div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between">
        <h3 class="text-base font-bold text-gray-900 dark:text-white">Daily Breakdown List</h3>
    </div>
    
    <div class="p-6">
        <div class="overflow-visible">
            <table id="salesReportTable" class="dataTable">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Orders</th>
                        <th>Gross Items Subtotal</th>
                        <th>Discounts</th>
                        <th>Shipping Fees</th>
                        <th>Net Revenue</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($dailyReports as $report)
                        <tr>
                            <td class="font-semibold text-gray-900 dark:text-white">
                                {{ date('M d, Y', strtotime($report->date)) }}
                            </td>
                            <td class="text-gray-500 dark:text-gray-400 font-medium">
                                {{ $report->order_count }}
                            </td>
                            <td>
                                ${{ number_format($report->daily_subtotal, 2) }}
                            </td>
                            <td class="text-rose-600 dark:text-rose-400 font-medium">
                                -${{ number_format($report->daily_discount, 2) }}
                            </td>
                            <td>
                                ${{ number_format($report->daily_shipping, 2) }}
                            </td>
                            <td class="font-bold text-gray-900 dark:text-white">
                                ${{ number_format($report->daily_revenue, 2) }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- jQuery and DataTables JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

@include('admin.partials.datatables-styles')
<script>
$(document).ready(function() {
    $('#salesReportTable').DataTable({
        responsive: true,
        pageLength: 25,
        order: [[0, 'desc']],
        dom: '<"flex justify-between items-center mb-4"<"flex items-center gap-2"l><"flex items-center gap-2"f>>rt<"flex justify-between items-center mt-4"<"text-sm text-gray-600 dark:text-gray-400"i><"flex items-center gap-1"p>>'
    });
});
</script>
@endsection