@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-extrabold text-gray-900">Cost Summary Report (Exports)</h1>
            <p class="mt-2 text-gray-500">View cost and weight details filtered by request date.</p>
        </div>
        <a href="{{ route('export_reports.index') }}" class="text-indigo-600 hover:text-indigo-900 font-medium">
            &larr; Back to Reports
        </a>
    </div>

    {{-- Filter Form --}}
    <div class="bg-white rounded-lg shadow p-6 mb-8">
        <form action="{{ route('export_reports.cost_summary') }}" method="GET" class="flex flex-col md:flex-row items-end gap-4">
            <div class="w-full md:w-1/3">
                <label for="from_date" class="block text-sm font-medium text-gray-700 mb-1">From Date</label>
                <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" required>
            </div>
            <div class="w-full md:w-1/3">
                <label for="to_date" class="block text-sm font-medium text-gray-700 mb-1">To Date</label>
                <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2 border" required>
            </div>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition shadow-sm h-10 w-full md:w-auto">
                Generate Report
            </button>
        </form>
    </div>

    {{-- Results Table --}}
    @if(request('from_date') && request('to_date'))
        <div class="bg-white rounded shadow p-4">
            <h2 class="text-lg font-semibold text-gray-800 mb-4">Results ({{ $exportRequests->count() }}) - {{ request('from_date') }} to {{ request('to_date') }}</h2>
            
            @if($exportRequests->count() > 0)
                <div class="overflow-x-auto">
                    <table id="costSummaryTable" class="min-w-full border whitespace-nowrap display">
                        <thead>
                            <tr class="bg-gray-100 border-b">
                                <th class="px-6 py-4 text-left">Date</th>
                                <th class="px-6 py-4 text-left">AWB No.</th>
                                <th class="px-6 py-4 text-left">Contact Name</th>
                                <th class="px-6 py-4 text-left">Company</th>
                                <th class="px-6 py-4 text-left">Courier Service</th>
                                <th class="px-6 py-4 text-left">Actual Weight</th>
                                <th class="px-6 py-4 text-left">Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($exportRequests as $request)
                            <tr class="border-b hover:bg-gray-50">
                                <td class="px-6 py-4">{{ $request->created_at->format('Y-m-d') }}</td>
                                <td class="px-6 py-4">{{ $request->awb_no ?? '-' }}</td>
                                <td class="px-6 py-4">{{ $request->shipToAddress->contact_name ?? '-' }}</td>
                                <td class="px-6 py-4">{{ $request->shipToAddress->company_name ?? '-' }}</td>
                                <td class="px-6 py-4">{{ $request->courier_service ?? '-' }}</td>
                                <td class="px-6 py-4">{{ $request->actual_weight ?? '-' }}</td>
                                <td class="px-6 py-4">{{ $request->cost !== null ? number_format($request->cost, 2) : '-' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center py-8 text-gray-500 bg-gray-50 rounded-lg border border-dashed border-gray-300">
                    <p>No export requests found for this date range.</p>
                </div>
            @endif
        </div>
    @endif

</div>
@endsection

@section('scripts')
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<!-- DataTables Buttons JS -->
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>

<style>
    /* Styling for the DT Buttons */
    .dt-buttons .dt-button {
        background-color: #f97316 !important; /* Tailwind orange-500 */
        color: white !important;
        border: none !important;
        border-radius: 0.375rem !important; /* Tailwind rounded-md */
        padding: 0.5rem 1rem !important;
        font-weight: 500 !important;
        margin-bottom: 1rem !important;
        margin-right: 0.5rem !important;
    }
    .dt-buttons .dt-button:hover {
        background-color: #ea580c !important; /* Tailwind orange-600 */
    }
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 1rem;
    }
</style>

<script>
    $(document).ready(function() {
        if ($('#costSummaryTable').length > 0) {
            $('#costSummaryTable').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel mr-2"></i> Export to Excel',
                        title: 'Cost Summary Report (Exports)',
                        className: 'btn btn-success'
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf mr-2"></i> Export to PDF',
                        title: 'Cost Summary Report (Exports)',
                        className: 'btn btn-danger',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    }
                ],
                pageLength: 25,
                order: [[0, 'desc']] // Order by Date descending
            });
        }
    });
</script>
@endsection