<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Track Your Cargo — Salihiya World Cargo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --navy: #2c2860;
            --navy-deep: #1e1b47;
            --gold: #f4b65a;
            --gold-light: #e9ce9f;
            --gold-dark: #d4952f;
            --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--navy-deep);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 32px 20px;
            position: relative;

            overflow-x: hidden;
            overflow-y: auto;
        }

        /* Background decorations */
        body::before {
            content: '';
            position: absolute;
            top: -120px; right: -120px;
            width: 400px; height: 400px;
            border-radius: 50%;
            background: rgba(244,182,90,0.06);
            pointer-events: none;
        }

        body::after {
            content: '';
            position: absolute;
            bottom: -80px; left: -80px;
            width: 300px; height: 300px;
            border-radius: 50%;
            background: rgba(244,182,90,0.04);
            pointer-events: none;
        }

        .hero {
            text-align: center;
            margin-bottom: 40px;
            animation: fadeDown 400ms var(--ease-out) forwards;
            opacity: 0;
        }

        @keyframes fadeDown {
            from { opacity: 0; transform: translateY(-10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .hero img {
            height: 56px;
            width: auto;
            margin-bottom: 28px;
        }

        .hero h1 {
            font-family: 'Syne', sans-serif;
            font-size: 40px;
            font-weight: 800;
            color: #fff;
            line-height: 1.1;
            margin-bottom: 10px;
        }

        .hero h1 span { color: var(--gold); }

        .hero p {
            font-size: 15px;
            color: rgba(233,206,159,0.55);
        }

        .search-card {
            background: #fff;
            border-radius: 20px;
            padding: 36px 40px;
            width: 100%;
            max-width: 480px;
            position: relative;
            z-index: 1;
            animation: fadeUp 450ms var(--ease-out) 100ms forwards;
            opacity: 0;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .field-label {
            display: block;
            font-size: 11px;
            font-weight: 700;
            color: var(--navy);
            letter-spacing: 0.8px;
            text-transform: uppercase;
            margin-bottom: 7px;
        }

        .field-input {
            width: 100%;
            border: 1.5px solid #e4e1f0;
            border-radius: 12px;
            padding: 13px 16px;
            font-size: 15px;
            font-family: 'DM Sans', sans-serif;
            color: var(--navy);
            background: #faf9fd;
            transition: border-color 150ms var(--ease-out),
                        box-shadow 150ms var(--ease-out);
            outline: none;
        }

        .field-input:focus {
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(44,40,96,0.08);
            background: #fff;
        }

        .field-input.error { border-color: #f87171; }

        .field-group { margin-bottom: 20px; }

        .field-error {
            font-size: 12px;
            color: #ef4444;
            margin-top: 5px;
        }

        .btn-track {
            width: 100%;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 15px;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Syne', sans-serif;
            cursor: pointer;
            letter-spacing: 0.5px;
            transition: background 150ms var(--ease-out),
                        transform 100ms var(--ease-out);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 4px;
        }

        .btn-track:hover { background: var(--navy-deep); }
        .btn-track:active { transform: scale(0.98); }

        .divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 24px 0;
            color: #c4c0d8;
            font-size: 12px;
        }

        .divider::before, .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #ebe9f4;
        }

        .auth-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .auth-btn {
            display: block;
            text-align: center;
            padding: 11px;
            border-radius: 10px;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            transition: all 150ms var(--ease-out);
        }

        .auth-btn.outline {
            border: 1.5px solid #e4e1f0;
            color: var(--navy);
            background: transparent;
        }

        .auth-btn.outline:hover {
            border-color: var(--navy);
            background: #faf9fd;
        }

        .auth-btn.filled {
            background: rgba(44,40,96,0.06);
            color: var(--navy);
        }

        .auth-btn.filled:hover { background: rgba(44,40,96,0.1); }

        @media (prefers-reduced-motion: reduce) {
            .hero, .search-card { animation: none; opacity: 1; transform: none; }
        }
    </style>
</head>
<body>

<div class="hero">
    <img src="/images/logo.webp" alt="Salihiya World Cargo">
    <h1>Track your <span>cargo</span></h1>
    <p>Enter your shipment reference and phone number</p>
</div>

<div class="search-card">

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
        <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;
                    padding:12px 14px;margin-bottom:20px;">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::openLoop(); ?><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::startLoopIteration(); ?><?php endif; ?>
                <p style="color:#dc2626;font-size:13px;"><?php echo e($error); ?></p>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::endLoop(); ?><?php endif; ?><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::closeLoop(); ?><?php endif; ?>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <form method="POST" action="<?php echo e(route('track.search')); ?>">
        <?php echo csrf_field(); ?>

        <div class="field-group">
            <label class="field-label">AWB / Container Number</label>
            <input type="text" name="reference" value="<?php echo e(old('reference')); ?>"
                class="field-input <?php echo e($errors->has('reference') ? 'error' : ''); ?>"
                placeholder="e.g. FFAU2724179 or 176-12345678"
                autofocus>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['reference'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><p class="field-error"><?php echo e($message); ?></p><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>

        <div class="field-group">
            <label class="field-label">Your Phone Number</label>
            <input type="tel" name="phone" value="<?php echo e(old('phone')); ?>"
                class="field-input <?php echo e($errors->has('phone') ? 'error' : ''); ?>"
                placeholder="0722123456">
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?><p class="field-error"><?php echo e($message); ?></p><?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </div>

        <button type="submit" class="btn-track">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            Track Shipment
        </button>
    </form>

    <div class="divider">or</div>

    <div class="auth-links">
        <a href="<?php echo e(route('login')); ?>" class="auth-btn outline">Sign In</a>
        <a href="<?php echo e(route('register')); ?>" class="auth-btn filled">Create Account</a>
    </div>
</div>

</body>
</html><?php /**PATH C:\Users\Mo\Desktop\cargo-portal\resources\views/tracking/search.blade.php ENDPATH**/ ?>