@extends('admin.layouts.app')

@section('page-title', 'Shipping Report List')

@section('content')

<style>
    .report-container {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }

    .report-header {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .report-subtitle {
        font-size: 13px;
        color: #777;
        margin-bottom: 20px;
    }

    .filter-row {
        display: flex;
        gap: 12px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .filter-row input,
    .filter-row select {
        padding: 8px 12px;
        border-radius: 6px;
        border: 1px solid #ccc;
        min-width: 200px;
    }

    table.report-table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 15px;
    }

    table.report-table thead tr {
        background: #ffe9b3;
    }

    table.report-table th,
    table.report-table td {
        padding: 10px 12px;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        white-space: nowrap;
    }

    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        color: white;
    }

    .status-paid { background: #27ae60; }
    .status-pending { background: #f39c12; }
    .status-overdue { background: #e74c3c; }

    .ship-pending { background:#f39c12; }
    .ship-in_transit { background:#3498db; }
    .ship-dispatched { background:#9b59b6; }
    .ship-delivered { background:#27ae60; }
</style>


<div class="report-container">

    <div class="report-header">Shipping Report List</div>
    <div class="report-subtitle">Overview of last month</div>

    <!-- FILTER BAR -->
    <div class="filter-row">
        <input type="date">
        <input type="date">

        <select>
            <option selected>--Select Customer--</option>
        </select>

        <select>
            <option selected>--Select shipping status--</option>
        </select>
    </div>

    <!-- REPORT TABLE -->
    <table class="report-table">
        <thead>
            <tr>
                <th>Order ID</th>
                <th>Shipment ID</th>
                <th>Company Name</th>
                <th>User Name</th>
                <th>Origin</th>
                <th>Destination</th>
                <th>Date</th>
                <th>Invoice ID</th>
                <th>Invoice Date</th>
                <th>Invoice Amount</th>
                <th>Invoice Status</th>
                <th>Shipment Status</th>
            </tr>
        </thead>
        <tbody>

            @forelse ($reports as $r)
                <tr>
                    <td>{{ $r->order_id }}</td>
                    <td>{{ $r->shipment_id }}</td>

                    <td>{{ $r->company_name ?? '-' }}</td>
                    <td>{{ $r->customer_name ?? '-' }}</td>

                    <td>{{ $r->origin }}</td>
                    <td>{{ $r->destination }}</td>

                    <td>{{ \Carbon\Carbon::parse($r->shipment_date)->format('d/m/Y') }}</td>

                    <td>{{ $r->invoice_number }}</td>
                    <td>{{ \Carbon\Carbon::parse($r->invoice_date)->format('d/m/Y') }}</td>

                    <td>{{ number_format($r->final_amount) }}₹</td>

                    <!-- Invoice Status -->
                    <td>
                        @php 
                            $ist = strtolower($r->invoice_status); 
                        @endphp

                        <span class="status-badge 
                            {{ $ist === 'paid' ? 'status-paid' : '' }}
                            {{ $ist === 'pending' ? 'status-pending' : '' }}
                            {{ $ist === 'overdue' ? 'status-overdue' : '' }}">
                            {{ ucfirst($ist) }}
                        </span>
                    </td>

                    <!-- Shipment Status -->
                    <td>
                        <span class="status-badge ship-{{ $r->shipment_status }}">
                            {{ ucfirst(str_replace('_',' ', $r->shipment_status)) }}
                        </span>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="12" class="text-center text-muted p-3">
                        No report data available.
                    </td>
                </tr>
            @endforelse

        </tbody>
    </table>

</div>

@endsection