@extends('admin.layouts.home.main')

@section('styles')
    <style>
        body {
            background: #f6f8fa !important;
        }

        .shipment-details-wrapper {
            min-height: 100vh;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 2vw 0 4vw 0;
            background: #f6f8fa;
        }

        .shipment-details-card {
            width: 100%;
            max-width: 820px;
            background: #fff;
            border-radius: 1.4rem;
            box-shadow: 0 4px 32px 0 rgba(50, 70, 120, 0.10);
            padding: 2.5rem 2.2rem 2.5rem 2.2rem;
            position: relative;
            animation: fadeInUp 0.7s;
            margin: auto;
        }

        @media (max-width: 576px) {
            .shipment-details-card {
                padding: 1.1rem 0.7rem;
                border-radius: 0.8rem;
            }

            .shipment-title {
                font-size: 1.37rem !important;
            }
        }

        @media print {

            .btn,
            .shipment-back-link,
            .action-row {
                display: none !important;
            }

            .shipment-details-card {
                box-shadow: none !important;
                border: none !important;
            }

            body {
                background: #fff !important;
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .shipment-title {
            color: #ffbe36;
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 0.3rem;
            line-height: 1.13;
        }

        .badge-status {
            font-size: 1rem;
            font-weight: 700;
            border-radius: 0.9rem;
            padding: 0.33rem 1.5rem;
            border: 2px solid #f2994a;
            color: #f2994a;
            background: #fff8e5;
            display: inline-block;
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
        }

        .badge-status.active {
            color: #219653;
            border-color: #219653;
            background: #E8F9F1;
        }

        .badge-status.canceled {
            color: #EB5757;
            border-color: #EB5757;
            background: #FFEAEA;
        }

        .badge-status.ready {
            color: #2F80ED;
            border-color: #2F80ED;
            background: #EAF2FF;
        }

        .badge-status.loading {
            color: #F2994A;
            border-color: #F2994A;
            background: #FFF8E5;
        }

        .badge-status.pending {
            color: #F2994A;
            border-color: #F2994A;
            background: #FFF8E5;
        }

        .shipment-back-link {
            margin-bottom: 1.4rem;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: #ffbe36;
            font-size: 1.07rem;
            background: #fff;
            border-radius: 9px;
            border: 1.5px solid #ffe5a2;
            padding: 7px 22px 7px 14px;
            text-decoration: none;
            transition: all .17s;
        }

        .shipment-back-link:hover {
            background: #ffbe36;
            color: #fff;
        }

        .action-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.7rem;
            margin-bottom: 1.2rem;
            flex-wrap: wrap;
        }

        .shipment-details-divider {
            height: 2px;
            background: #ffe5a2;
            border: none;
            border-radius: 2px;
            margin: 0.8rem 0 2rem 0;
        }

        .shipment-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px 40px;
        }

        @media (max-width: 900px) {
            .shipment-details-grid {
                grid-template-columns: 1fr;
                gap: 22px 0;
            }
        }

        .shipment-field-label {
            color: #6c757d;
            font-size: 1.06rem;
            font-weight: 600;
            margin-bottom: 0.18rem;
        }

        .shipment-field-value {
            font-size: 1.18rem;
            font-weight: 500;
            color: #222;
            word-break: break-word;
            line-height: 1.19;
        }

        .shipment-field-meta {
            color: #888;
            font-size: 0.99rem;
        }

        .shipment-actions .btn {
            min-width: 100px;
            border-radius: 8px;
            padding: 6px 1.2rem;
            font-size: 1.03rem;
        }

        .shipment-actions .btn-warning {
            background: #ffbe36 !important;
            color: #fff !important;
            border: none !important;
        }

        .shipment-actions .btn-danger {
            background: #EB5757 !important;
            color: #fff !important;
            border: none !important;
        }

        .shipment-actions .btn-print {
            background: #2F80ED !important;
            color: #fff !important;
            border: none !important;
        }
    </style>
@endsection

@section('main')
    <div class="shipment-details-wrapper">
        <div class="w-100">
            <a href="{{ route('admin.shipment.index') }}" class="shipment-back-link">
                <i class="bi bi-arrow-left-short" style="font-size:1.45em;"></i> Back to All Shipments
            </a>
            <div class="shipment-details-card">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
                    <div>
                        <div class="shipment-title mb-1">Shipment Details</div>
                        @php
                            $badgeClass = match ($shipment->status) {
                                'active' => 'active',
                                'canceled' => 'canceled',
                                'pending' => 'pending',
                                'loading delayed', 'unloading delayed' => 'loading',
                                'ready to load', 'ready to unload' => 'ready',
                                default => '',
                            };
                        @endphp
                        <span class="badge-status {{ $badgeClass }}">{{ ucwords($shipment->status) }}</span>
                    </div>
                    <div class="action-row mt-3 mt-md-0">
                        <div class="shipment-actions d-flex gap-2">
                            <a href="{{ route('admin.shipment.edit', $shipment->admin_shipment_id) }}"
                                class="btn btn-warning">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                            <form action="{{ route('admin.shipment.destroy', $shipment->admin_shipment_id) }}"
                                method="POST" class="d-inline-block" onsubmit="return confirm('Delete this shipment?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger" type="submit">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </form>
                            <button onclick="window.print()" class="btn btn-print d-print-none">
                                <i class="bi bi-printer"></i> Print
                            </button>
                        </div>
                    </div>
                </div>
                <hr class="shipment-details-divider">
                <div class="shipment-details-grid">
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-hash"></i> Shipment ID</div>
                        <div class="shipment-field-value">#{{ $shipment->admin_shipment_id }}</div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-person"></i> Admin Name</div>
                        <div class="shipment-field-value">
                            {{ optional($shipment->admin)->name ?? '—' }}
                            <div class="shipment-field-meta">{{ optional($shipment->admin)->email }}</div>
                        </div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-truck-front"></i> Vehicle</div>
                        <div class="shipment-field-value">
                            @if ($shipment->vehicle)
                                {{ $shipment->vehicle->license_plate }}
                                <div class="shipment-field-meta">Type: {{ $shipment->vehicle->type ?? '-' }}</div>
                            @else
                                —
                            @endif
                        </div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-geo-alt"></i> Destination</div>
                        <div class="shipment-field-value">{{ $shipment->destination }}</div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-calendar"></i> Start Date</div>
                        <div class="shipment-field-value">
                            {{ \Carbon\Carbon::parse($shipment->start_date)->format('Y-m-d') }}
                        </div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-info-circle"></i> Info</div>
                        <div class="shipment-field-value">{{ $shipment->basic_info ?? '-' }}</div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-clock-history"></i> Created At</div>
                        <div class="shipment-field-value">
                            {{ $shipment->created_at ? $shipment->created_at->format('Y-m-d H:i') : '—' }}</div>
                    </div>
                    <div>
                        <div class="shipment-field-label"><i class="bi bi-clock"></i> Updated At</div>
                        <div class="shipment-field-value">
                            {{ $shipment->updated_at ? $shipment->updated_at->format('Y-m-d H:i') : '—' }}</div>
                    </div>
                    {{-- Add more fields here as needed --}}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- jQuery (required for toastr) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Toastr CSS & JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        $(function() {
            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif
            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif
            @if (session('warning'))
                toastr.warning("{{ session('warning') }}");
            @endif
            @if (session('info'))
                toastr.info("{{ session('info') }}");
            @endif
        });
    </script>
@endpush