@extends('layouts.app')

@section('title', 'Transportation')

@section('content')
    <div class="container-fluid py-4 module-page module-transportation">
        <div class="row g-4">
            <div class="col-12">
                <section class="card border-0 shadow-sm overflow-hidden">
                    <div class="card-header border-0 text-white module-hero">
                        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                            <div>
                                <div class="small text-uppercase opacity-75 fw-semibold mb-2">Replacement module</div>
                                <h1 class="h2 fw-bold mb-2">Transportation</h1>
                                <p class="mb-0 opacity-75">Manage truck closure, freight terms, trailers, and transport operations.</p>
                            </div>

                            <div class="module-hero-icon" aria-hidden="true">
                                <i class="bi bi-map"></i>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">01</div>
                                <h3 class="h6 mb-2">Pending Truck Closure</h3>
                                <p class="small text-muted mb-0">Placeholder area for pending truck closure.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">02</div>
                                <h3 class="h6 mb-2">Trailer Activity</h3>
                                <p class="small text-muted mb-0">Placeholder area for trailer activity.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">03</div>
                                <h3 class="h6 mb-2">Freight Terms</h3>
                                <p class="small text-muted mb-0">Placeholder area for freight terms.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">04</div>
                                <h3 class="h6 mb-2">Transport Exceptions</h3>
                                <p class="small text-muted mb-0">Placeholder area for transport exceptions.</p>
                            </div>
                        </div>
                    </div>

            <div class="col-12">
                <section class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                            <div>
                                <h2 class="h5 mb-1">Transportation workbench</h2>
                                <p class="small text-muted mb-0">Sample table layout ready to wire into controllers, queries, DataTables, or Livewire.</p>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm">Export</button>
                                <button type="button" class="btn btn-primary btn-sm">Create</button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Trailer</th>
                                        <th>Carrier</th>
                                        <th>Close Status</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Pending Truck Closure</td>
                                        <td>Sample 1</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Trailer Activity</td>
                                        <td>Sample 2</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Freight Terms</td>
                                        <td>Sample 3</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Transport Exceptions</td>
                                        <td>Sample 4</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection