@extends('layouts.app')

@section('breadcrumb')
Ecompk Connector / Bulk Booking / Booked Orders
@endsection

@section('content')
<style>
    .bulk-orders-modern .page-hero {
        background: linear-gradient(135deg, #1550ff, #2bc4d9);
        border-radius: 1rem;
        padding: 2rem;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem;
    }
    .bulk-orders-modern .page-hero h2 {
        font-weight: 600;
        margin-bottom: .35rem;
    }
    .bulk-orders-modern .page-hero p {
        opacity: .9;
        margin-bottom: 0;
    }
    .bulk-orders-modern .hero-actions {
        text-align: right;
        margin-left: auto;
    }
    .bulk-orders-modern .hero-actions small {
        display: block;
        margin-top: .35rem;
        opacity: .8;
    }
    .bulk-orders-modern .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 1rem;
    }
    .bulk-orders-modern .stat-card {
        background: #f8f9fb;
        border-radius: .85rem;
        padding: 1.25rem 1.5rem;
        border: 1px solid #eef0f5;
    }
    .bulk-orders-modern .stat-card .label {
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #6b7280;
    }
    .bulk-orders-modern .stat-card .value {
        font-size: 1.85rem;
        font-weight: 600;
        margin: .35rem 0 .15rem;
        color: #111827;
    }
    .bulk-orders-modern .stat-card .meta {
        font-size: .85rem;
        color: #6b7280;
    }
    .bulk-orders-modern .toolbar {
        border: 1px solid #eef0f5;
        border-radius: .85rem;
        padding: 1rem 1.25rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        background: #fff;
    }
    .bulk-orders-modern .toolbar .form-group {
        margin-bottom: 0;
        flex: 1 1 200px;
    }
    .bulk-orders-modern .toolbar label {
        font-size: .8rem;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .05em;
        color: #6b7280;
    }
    .bulk-orders-modern .status-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
    }
    .bulk-orders-modern .status-chip {
        border-radius: 999px;
        background: #eef2ff;
        color: #1f3bb3;
        font-weight: 500;
        padding: .35rem .85rem;
        font-size: .85rem;
    }
    .bulk-orders-modern .status-chip span {
        font-weight: 600;
        margin-left: .35rem;
    }
    .bulk-orders-modern .table-card {
        border-radius: 1rem;
        border: 1px solid #eef0f5;
        overflow: hidden;
    }
    .bulk-orders-modern table {
        margin-bottom: 0;
    }
    .bulk-orders-modern thead {
        background: #f9fafc;
        text-transform: uppercase;
        font-size: .75rem;
        letter-spacing: .08em;
        color: #6b7280;
    }
    .bulk-orders-modern tbody tr {
        transition: background-color .15s ease, box-shadow .15s ease;
    }
    .bulk-orders-modern tbody tr:hover {
        background: #f5f9ff;
    }
    .bulk-orders-modern .badge-status {
        font-size: .8rem;
        padding: .4rem .8rem;
    }
    .bulk-orders-modern .empty-state {
        border: 2px dashed #c7d2fe;
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
    }
    @media (max-width: 768px) {
        .bulk-orders-modern .hero-actions {
            text-align: left;
            width: 100%;
            margin-left: 0;
        }
        .bulk-orders-modern .page-hero {
            padding: 1.5rem;
        }
        .bulk-orders-modern thead {
            font-size: .65rem;
        }
    }
</style>
<form action="{{ URL::to('bulk-booking/booked-orders/awb-bulk') }}" method="post" data-loader="true">
    @csrf
    <div class="bulk-orders-modern card card-body border-0 shadow-sm">
        <div class="page-hero">
            <div>
                <p class="mb-1 text-uppercase small font-weight-bold">Bulk Booking</p>
                <h2 class="mb-2">Booked Orders</h2>
                <p class="mb-0">Review booked airway bills, refine the grid with live filters, and download multiple AWBs at once.</p>
            </div>
            <div class="hero-actions">
                <button type="submit" id="bulk-download" class="btn btn-light btn-lg font-weight-bold" disabled>
                    Download Selected
                </button>
                <small id="bulk-download-hint">Select at least one booking to enable</small>
            </div>
        </div>
        <div class="py-3"></div>
        @if(session()->has('message'))
            <div class="alert alert-success mb-4">