<?php $__env->startSection('content'); ?>
<?php
    $newShipmentUrl = \Illuminate\Support\Facades\Route::has('admin.shipments.create') ? route('admin.shipments.create') : url('admin/shipments/create');
?>

<div class="shipments-page">
    <!-- Header -->
    <div class="shipments-hero mb-4">
        <div class="shipments-hero-content">
            <span class="shipments-badge">
                <i class="fa fa-shipping-fast"></i>
                Shipment Management
            </span>

            <h4 class="fw-bold mb-1">
                Shipments
            </h4>

            <p class="mb-0">
                Manage deliveries, tracking records, shipment status, and customer delivery information from one place.
            </p>
        </div>

        <div class="shipments-hero-actions">
            <button id="darkToggle" type="button" class="btn theme-toggle-btn">
                <i class="fa fa-moon"></i>
            </button>

            <a href="<?php echo e($newShipmentUrl); ?>"
               class="btn new-shipment-btn">
                <i class="fa fa-plus-circle"></i>
                New Shipment
            </a>
        </div>
    </div>

    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.danger-alert','data' => []]); ?>
<?php $component->withName('danger-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.success-alert','data' => []]); ?>
<?php $component->withName('success-alert'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>

    <!-- List -->
    <div class="shipment-list">
        <?php $__empty_1 = true; $__currentLoopData = $shipments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $shipment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>

            <?php
                $statusClass = \App\Support\ShipmentStatus::bootstrapClass($shipment->status);
            ?>

            <div class="shipment-card <?php echo e($statusClass); ?>">
                <div class="status-bar"></div>

                <div class="shipment-body">
                    <div class="shipment-top">
                        <div class="shipment-title-area">
                            <div class="tracking-icon">
                                <i class="fa fa-box"></i>
                            </div>

                            <div>
                                <a href="<?php echo e(route('admin.shipments.view', $shipment->id)); ?>"
                                   class="tracking">
                                    <?php echo e($shipment->trackingnumber); ?>

                                </a>

                                <div class="shipment-date">
                                    <i class="fa fa-calendar-alt"></i>
                                    <?php echo e($shipment->created_at->format('M d, Y • H:i')); ?>

                                </div>
                            </div>
                        </div>

                        <span class="status-pill <?php echo e($statusClass); ?>">
                            <i class="fa fa-circle"></i>
                            <?php echo e($shipment->status); ?>

                        </span>
                    </div>

                    <div class="shipment-middle">
                        <div class="receiver-name">
                            <?php echo e($shipment->name); ?>

                        </div>

                        <div class="receiver-contact">
                            <span>
                                <i class="fa fa-envelope"></i>
                                <?php echo e($shipment->email); ?>

                            </span>

                            <span>
                                <i class="fa fa-phone"></i>
                                <?php echo e($shipment->phone); ?>

                            </span>
                        </div>

                        <div class="shipment-route">
                            <span class="route-point route-from">
                                <i class="fa fa-map-marker-alt"></i>
                                <?php echo e($shipment->take_off_point); ?>

                            </span>

                            <span class="route-arrow">
                                <i class="fa fa-arrow-right"></i>
                            </span>

                            <span class="route-point route-to">
                                <i class="fa fa-flag-checkered"></i>
                                <?php echo e($shipment->final_destination); ?>

                            </span>
                        </div>

                        <div class="sender-info">
                            <i class="fa fa-user"></i>
                            Sender: <?php echo e($shipment->sname); ?>

                        </div>
                    </div>

                    <div class="actions">
                        <a href="<?php echo e(route('admin.shipments.view', $shipment->id)); ?>" title="View">
                            <i class="fa fa-eye"></i>
                        </a>

                        <a href="<?php echo e(route('admin.shipments.update-status-form', $shipment->id)); ?>" title="Update">
                            <i class="fa fa-truck"></i>
                        </a>

                        <a href="<?php echo e(route('admin.shipments.print', $shipment->id)); ?>" target="_blank" title="Print">
                            <i class="fa fa-print"></i>
                        </a>

                        <form action="<?php echo e(route('admin.shipments.delete', $shipment->id)); ?>" method="POST">
                            <?php echo csrf_field(); ?>
                            <?php echo method_field('DELETE'); ?>
                            <button type="submit" title="Delete" onclick="return confirm('Are you sure you want to delete this shipment?')">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="empty-shipments">
                <i class="fa fa-inbox"></i>
                <h5>No shipments found</h5>
                <p>No shipment records are available at the moment.</p>
            </div>
        <?php endif; ?>
    </div>
</div>

<style>
    .shipments-page {
        --sp-bg: #eef3fb;
        --sp-card: rgba(255, 255, 255, 0.94);
        --sp-border: rgba(148, 163, 184, 0.24);
        --sp-text: #0f172a;
        --sp-muted: #64748b;
        --sp-blue: #2563eb;
        --sp-indigo: #4f46e5;
        --sp-purple: #7c3aed;
        --sp-green: #059669;
        --sp-orange: #d97706;
        --sp-red: #dc2626;
        --sp-info: #0284c7;
        --sp-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --sp-shadow-soft: 0 8px 25px rgba(15, 23, 42, 0.06);

        margin: -0.5rem -1rem 0;
        padding: 1.5rem 1.25rem 2rem;
        min-height: calc(100vh - 8rem);
        color: var(--sp-text);
        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .15), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .18), transparent 30%),
            radial-gradient(circle at 50% 100%, rgba(5, 150, 105, .10), transparent 35%),
            linear-gradient(135deg, #f8fbff 0%, var(--sp-bg) 100%);
        position: relative;
        overflow-x: hidden;
    }

    .shipments-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 78%);
        pointer-events: none;
    }

    .shipments-page > * {
        position: relative;
        z-index: 2;
    }

    .shipments-hero {
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.92)),
            radial-gradient(circle at 88% 10%, rgba(250, 204, 21, .28), transparent 28%);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 26px;
        padding: 1.75rem;
        box-shadow: var(--sp-shadow);
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .shipments-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -90px;
        top: -110px;
        background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
        pointer-events: none;
    }

    .shipments-hero-content,
    .shipments-hero-actions {
        position: relative;
        z-index: 2;
    }

    .shipments-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #bfdbfe;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        padding: .42rem .8rem;
        margin-bottom: .85rem;
    }

    .shipments-hero h4 {
        color: #fff;
        font-size: clamp(1.45rem, 2vw, 2rem);
        letter-spacing: -.04em;
    }

    .shipments-hero p {
        color: rgba(226, 232, 240, .92);
        max-width: 48rem;
        line-height: 1.6;
    }

    .shipments-hero-actions {
        display: flex;
        align-items: center;
        gap: .75rem;
        flex-wrap: wrap;
    }

    .theme-toggle-btn {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        background: rgba(255,255,255,.14);
        color: #fff;
        border: 1px solid rgba(255,255,255,.2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .theme-toggle-btn:hover {
        background: rgba(255,255,255,.22);
        color: #fff;
    }

    .new-shipment-btn {
        background: linear-gradient(135deg, #facc15 0%, #f97316 100%);
        color: #111827 !important;
        border: none;
        border-radius: 14px;
        font-weight: 800;
        padding: .72rem 1.1rem;
        box-shadow: 0 14px 28px rgba(249, 115, 22, .28);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .new-shipment-btn:hover {
        color: #111827 !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(249, 115, 22, .34);
    }

    .shipment-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .shipment-card {
        display: flex;
        border-radius: 22px;
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow-soft);
        overflow: hidden;
        backdrop-filter: blur(14px);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .shipment-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sp-shadow);
        border-color: rgba(37, 99, 235, .22);
    }

    .status-bar {
        width: 6px;
        flex-shrink: 0;
    }

    .shipment-card.success .status-bar {
        background: linear-gradient(180deg, #22c55e, #059669);
    }

    .shipment-card.warning .status-bar {
        background: linear-gradient(180deg, #facc15, #d97706);
    }

    .shipment-card.info .status-bar {
        background: linear-gradient(180deg, #38bdf8, #2563eb);
    }

    .shipment-body {
        padding: 1.15rem 1.25rem;
        flex: 1;
    }

    .shipment-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .shipment-title-area {
        display: flex;
        align-items: center;
        gap: .85rem;
    }

    .tracking-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        background: #eff6ff;
        color: var(--sp-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
    }

    .tracking {
        font-weight: 900;
        font-size: .98rem;
        color: var(--sp-blue);
        text-decoration: none;
        letter-spacing: -.01em;
    }

    .tracking:hover {
        color: var(--sp-indigo);
        text-decoration: none;
    }

    .shipment-date {
        color: var(--sp-muted);
        font-size: .78rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: .35rem;
        margin-top: .2rem;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .74rem;
        padding: .48rem .75rem;
        border-radius: 999px;
        font-weight: 900;
        white-space: nowrap;
    }

    .status-pill i {
        font-size: .45rem;
    }

    .status-pill.success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }

    .status-pill.warning {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .status-pill.info {
        background: #e0f2fe;
        color: #075985;
        border: 1px solid #bae6fd;
    }

    .shipment-middle {
        margin-top: 1rem;
        padding-left: 3.7rem;
    }

    .receiver-name {
        color: var(--sp-text);
        font-weight: 900;
        font-size: .96rem;
        margin-bottom: .35rem;
    }

    .receiver-contact {
        color: var(--sp-muted);
        font-size: .8rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .receiver-contact span {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
    }

    .shipment-route {
        margin-top: .9rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .route-point {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border-radius: 999px;
        padding: .45rem .75rem;
        font-size: .78rem;
        font-weight: 800;
    }

    .route-from {
        background: #eff6ff;
        color: #1d4ed8;
        border: 1px solid #dbeafe;
    }

    .route-to {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #bbf7d0;
    }

    .route-arrow {
        width: 30px;
        height: 30px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid rgba(148, 163, 184, .22);
        color: #64748b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sender-info {
        color: var(--sp-muted);
        font-size: .8rem;
        font-weight: 700;
        margin-top: .75rem;
        display: flex;
        align-items: center;
        gap: .4rem;
    }

    .actions {
        display: flex;
        gap: .55rem;
        margin-top: 1rem;
        padding-left: 3.7rem;
        flex-wrap: wrap;
    }

    .actions form {
        margin: 0;
    }

    .actions a,
    .actions button {
        border: 1px solid rgba(148, 163, 184, .24);
        background: #f8fafc;
        color: #334155;
        width: 38px;
        height: 38px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .18s ease;
        cursor: pointer;
    }

    .actions a:hover {
        background: var(--sp-blue);
        color: #fff;
        border-color: var(--sp-blue);
        transform: translateY(-2px);
    }

    .actions button:hover {
        background: var(--sp-red);
        color: #fff;
        border-color: var(--sp-red);
        transform: translateY(-2px);
    }

    .empty-shipments {
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        border-radius: 22px;
        padding: 3rem 1rem;
        text-align: center;
        color: var(--sp-muted);
        box-shadow: var(--sp-shadow-soft);
    }

    .empty-shipments i {
        font-size: 2.4rem;
        margin-bottom: 1rem;
        color: #94a3b8;
    }

    .empty-shipments h5 {
        color: var(--sp-text);
        font-weight: 900;
        margin-bottom: .35rem;
    }

    body.dark-mode {
        background: #020617;
        color: #e2e8f0;
    }

    body.dark-mode .shipments-page {
        --sp-bg: #020617;
        --sp-card: rgba(15, 23, 42, 0.92);
        --sp-border: rgba(71, 85, 105, 0.55);
        --sp-text: #f8fafc;
        --sp-muted: #94a3b8;

        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .18), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .12), transparent 30%),
            linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    body.dark-mode .shipment-card,
    body.dark-mode .empty-shipments {
        background: rgba(15, 23, 42, .9);
        border-color: rgba(71, 85, 105, .7);
    }

    body.dark-mode .tracking-icon,
    body.dark-mode .route-arrow,
    body.dark-mode .actions a,
    body.dark-mode .actions button {
        background: #1e293b;
        border-color: #334155;
        color: #e2e8f0;
    }

    body.dark-mode .route-from {
        background: rgba(37, 99, 235, .18);
        border-color: rgba(59, 130, 246, .28);
        color: #bfdbfe;
    }

    body.dark-mode .route-to {
        background: rgba(5, 150, 105, .18);
        border-color: rgba(16, 185, 129, .28);
        color: #bbf7d0;
    }

    body.dark-mode .text-muted {
        color: #94a3b8 !important;
    }

    @media (max-width: 768px) {
        .shipments-page {
            padding: 1rem .85rem 1.5rem;
            margin-left: -.75rem;
            margin-right: -.75rem;
        }

        .shipments-hero {
            flex-direction: column;
            align-items: flex-start;
            padding: 1.35rem;
        }

        .shipments-hero-actions {
            width: 100%;
        }

        .theme-toggle-btn {
            flex: 0 0 44px;
        }

        .new-shipment-btn {
            flex: 1;
            justify-content: center;
        }

        .shipment-middle,
        .actions {
            padding-left: 0;
        }

        .shipment-title-area {
            align-items: flex-start;
        }
    }

    @media (max-width: 480px) {
        .shipment-top {
            flex-direction: column;
        }

        .status-pill {
            align-self: flex-start;
        }

        .shipment-route {
            align-items: flex-start;
            flex-direction: column;
        }

        .route-arrow {
            transform: rotate(90deg);
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const btn = document.getElementById('darkToggle');

        if (!btn) {
            return;
        }

        function setThemeIcon() {
            const dark = document.body.classList.contains('dark-mode');
            btn.innerHTML = dark ? '<i class="fa fa-sun"></i>' : '<i class="fa fa-moon"></i>';
        }

        const savedTheme = localStorage.getItem('admin_theme_mode') || localStorage.getItem('theme') || 'light';
        if (window.applyGlobalAdminTheme) {
            window.applyGlobalAdminTheme(savedTheme === 'dark' ? 'dark' : 'light');
        } else {
            document.documentElement.classList.toggle('admin-dark-mode', savedTheme === 'dark');
            document.body.classList.toggle('dark-mode', savedTheme === 'dark');
            document.body.setAttribute('data-admin-theme', savedTheme === 'dark' ? 'dark' : 'light');
        }

        setThemeIcon();

        btn.onclick = function () {
            const dark = !document.body.classList.contains('dark-mode');
            const mode = dark ? 'dark' : 'light';
            localStorage.setItem('admin_theme_mode', mode);
            localStorage.setItem('theme', mode);
            if (window.applyGlobalAdminTheme) {
                window.applyGlobalAdminTheme(mode);
            } else {
                document.documentElement.classList.toggle('admin-dark-mode', dark);
                document.body.classList.toggle('dark-mode', dark);
                document.body.setAttribute('data-admin-theme', mode);
            }
            setThemeIcon();
        };
    });
</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/purecarg/public_html/resources/views/admin/shipments.blade.php ENDPATH**/ ?>