{{-- resources/views/storefront/parcel.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.parcelDelivery').' - '.config('app.name', 'FreshMart'))

@section('body_class', 'sf-no-bottom-nav')

@section('content')
<style>
/* ==========================================
   FRESHMART PARCEL PAGE - v2 (PWA)
   ========================================== */
.fm-parcel-page {
    padding: 12px 0 20px;
}

/* Hero Section */
.fm-parcel-hero {
    background: linear-gradient(145deg, #f97316, #ea580c);
    border-radius: var(--fm-radius);
    padding: 24px 20px;
    color: white;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.25);
    position: relative;
    overflow: hidden;
}

.fm-parcel-hero::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -20px;
    width: 120px;
    height: 120px;
    opacity: 0.15;
    transform: rotate(10deg);
    background: url("{{ asset('assets/customer/services/parcel.svg') }}") center / contain no-repeat;
    pointer-events: none;
}

.fm-parcel-asset-inline {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    object-fit: contain;
    vertical-align: -.2em;
}

.fm-parcel-asset-empty {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto;
    object-fit: contain;
}

.fm-parcel-hero h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
}

.fm-parcel-hero p {
    font-size: 14px;
    opacity: 0.9;
    margin: 4px 0 0;
}

.fm-parcel-hero .fm-parcel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    padding: 6px 16px;
    border-radius: var(--fm-radius-full);
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Grid Layout */
.fm-parcel-grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 768px) {
    .fm-parcel-grid {
        grid-template-columns: 2fr 1fr;
        gap: 20px;
    }
}

/* Form Card */
.fm-parcel-form {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 20px 16px;
    box-shadow: var(--fm-shadow);
    border: 1px solid var(--fm-border);
}

.fm-parcel-form-header {
    margin-bottom: 16px;
}

.fm-parcel-form-header h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    color: var(--fm-text);
}

.fm-parcel-form-header p {
    font-size: 13px;
    color: var(--fm-text-secondary);
    margin: 2px 0 0;
}

/* Status / Error Alerts */
.fm-alert {
    padding: 12px 14px;
    border-radius: var(--fm-radius-sm);
    margin-bottom: 14px;
    font-weight: 600;
    font-size: 13px;
}

.fm-alert--success {
    background: var(--fm-primary-light);
    color: var(--fm-primary);
}

.fm-alert--error {
    background: #fee2e2;
    color: #991b1b;
}

.fm-alert--error ul {
    margin: 4px 0 0;
    padding-left: 20px;
    font-weight: 400;
}

/* Form Group */
.fm-parcel-form-group {
    display: grid;
    gap: 12px;
}

.fm-parcel-form-group label {
    display: block;
}

.fm-parcel-form-group label span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-text-secondary);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.fm-parcel-form-group input,
.fm-parcel-form-group select,
.fm-parcel-form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-family: inherit;
    font-size: 14px;
    transition: border-color var(--fm-transition), box-shadow var(--fm-transition);
    background: var(--fm-bg);
    color: var(--fm-text);
}

.fm-parcel-form-group input:focus,
.fm-parcel-form-group select:focus,
.fm-parcel-form-group textarea:focus {
    outline: none;
    border-color: var(--fm-primary);
    box-shadow: 0 0 0 3px rgba(45, 170, 55, 0.12);
    background: white;
}

.fm-parcel-form-group .fm-input-hint {
    font-size: 11px;
    color: var(--fm-text-light);
    margin-top: 3px;
}

/* Submit Button */
.fm-parcel-submit {
    padding: 14px 32px;
    border: none;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: background var(--fm-transition), transform var(--fm-transition), box-shadow var(--fm-transition);
    width: 100%;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fm-parcel-submit:hover {
    background: var(--fm-primary-dark);
    box-shadow: 0 4px 12px rgba(45, 170, 55, 0.3);
}

.fm-parcel-submit:active {
    transform: scale(0.97);
}

/* Sidebar */
.fm-parcel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fm-parcel-sidebar-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 18px 16px;
    box-shadow: var(--fm-shadow);
    border: 1px solid var(--fm-border);
}

.fm-parcel-sidebar-card h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--fm-text);
}

.fm-parcel-sidebar-card .fm-card-sub {
    font-size: 12px;
    color: var(--fm-text-secondary);
    margin: 0 0 12px;
}

/* Recent Orders List */
.fm-parcel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--fm-border);
}

.fm-parcel-item:last-child {
    border-bottom: none;
}

.fm-parcel-item .fm-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fm-parcel-item .fm-item-left strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--fm-text);
}

.fm-parcel-item .fm-item-left small {
    font-size: 11px;
    color: var(--fm-text-light);
}

.fm-parcel-item .fm-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.fm-parcel-status {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--fm-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fm-parcel-status--pending { background: #fef3c7; color: #b45309; }
.fm-parcel-status--assigned { background: #dbeafe; color: #1d4ed8; }
.fm-parcel-status--picked_up { background: #ede9fe; color: #6d28d9; }
.fm-parcel-status--in_transit { background: #e0f2fe; color: #0369a1; }
.fm-parcel-status--delivered { background: #d1fae5; color: #065f46; }
.fm-parcel-status--cancelled { background: #fee2e2; color: #991b1b; }

.fm-parcel-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--fm-text);
}

/* Empty State */
.fm-parcel-empty {
    text-align: center;
    padding: 20px 12px;
    color: var(--fm-text-secondary);
}

.fm-parcel-empty .fm-parcel-empty-icon {
    font-size: 40px;
    margin-bottom: 4px;
}

.fm-parcel-empty h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0;
}

.fm-parcel-empty p {
    font-size: 12px;
    margin: 2px 0 0;
}

/* How it works - list */
.fm-how-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-how-list li {
    padding: 6px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--fm-text-secondary);
    border-bottom: 1px solid var(--fm-border);
}

.fm-how-list li:last-child {
    border-bottom: none;
}

.fm-how-list li .fm-how-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

/* Quick Quote / Estimate Banner */
.fm-quote-banner {
    background: linear-gradient(135deg, #fef3c7, #ffedd5);
    border-radius: var(--fm-radius-sm);
    padding: 12px 14px;
    margin: 12px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #fcd34d;
}

.fm-quote-banner .fm-quote-label {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
}

.fm-quote-banner .fm-quote-value {
    font-size: 18px;
    font-weight: 900;
    color: #ea580c;
}

/* Responsive */
@media (max-width: 480px) {
    .fm-parcel-hero h1 {
        font-size: 24px;
    }
    .fm-parcel-hero::after {
        font-size: 60px;
        right: -5px;
        bottom: -10px;
    }
    .fm-parcel-grid {
        grid-template-columns: 1fr;
    }
    .fm-parcel-form {
        padding: 16px 12px;
    }
    .fm-parcel-form-group label span {
        font-size: 11px;
    }
    .fm-parcel-form-group input,
    .fm-parcel-form-group select {
        font-size: 13px;
        padding: 10px 12px;
    }
    .fm-parcel-submit {
        font-size: 14px;
        padding: 12px 24px;
    }
    .fm-parcel-item .fm-item-left strong {
        font-size: 13px;
    }
}

/* Dark mode friendly */
@media (prefers-color-scheme: dark) {
    .fm-parcel-form {
        background: #1f2937;
        border-color: #374151;
    }
    .fm-parcel-sidebar-card {
        background: #1f2937;
        border-color: #374151;
    }
    .fm-parcel-form-group input,
    .fm-parcel-form-group select {
        background: #111827;
        color: #f3f4f6;
        border-color: #374151;
    }
    .fm-parcel-form-group input:focus,
    .fm-parcel-form-group select:focus {
        background: #1f2937;
    }
    .fm-parcel-item {
        border-color: #374151;
    }
    .fm-quote-banner {
        background: #1f2937;
        border-color: #f97316;
    }
    .fm-quote-banner .fm-quote-label {
        color: #fcd34d;
    }
    .fm-quote-banner .fm-quote-value {
        color: #f97316;
    }
}
</style>

<div class="fm-parcel-page">
    <div class="fm-container">
        {{-- Hero --}}
        <div class="fm-parcel-hero">
            <h1><img class="fm-parcel-asset-inline" src="{{ asset('assets/customer/services/parcel.svg') }}" alt=""> Parcel Delivery</h1>
            <p>Pickup to doorstep — reliable hyperlocal parcel delivery in minutes.</p>
            <span class="fm-parcel-badge">⚡ Fast &amp; reliable · Real-time tracking</span>
        </div>

        <div class="fm-parcel-grid">
            {{-- Parcel Form --}}
            <div class="fm-parcel-form" id="parcel-form">
                <div class="fm-parcel-form-header">
                    <h2>Parcel details</h2>
                    <p>Quote and order through the existing parcel API.</p>
                </div>

                @if(session('parcel_status'))
                    <div class="fm-alert fm-alert--success">
                        ✅ {{ session('parcel_status') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="fm-alert fm-alert--error">
                        <strong>Please fix the following:</strong>
                        <ul>
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('storefront.parcel.store') }}" class="fm-parcel-form-group">
                    @csrf
                    {{-- Pickup --}}
                    <label>
                        <span>📍 Pickup address</span>
                        <input name="pickup_address" value="{{ old('pickup_address') }}" placeholder="Enter pickup address" required>
                    </label>
                    {{-- Delivery --}}
                    <label>
                        <span>🏠 Delivery address</span>
                        <input name="delivery_address" value="{{ old('delivery_address') }}" placeholder="Enter delivery address" required>
                    </label>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                        <label>
                            <span>Sender name</span>
                            <input name="sender_name" value="{{ old('sender_name', auth()->user()?->name) }}" required>
                        </label>
                        <label>
                            <span>Receiver name</span>
                            <input name="receiver_name" value="{{ old('receiver_name') }}" required>
                        </label>
                    </div>

                    <label>
                        <span>📦 Parcel type</span>
                        <input name="parcel_type" value="{{ old('parcel_type', 'Package') }}" placeholder="e.g. Package, Documents" required>
                    </label>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                        <label>
                            <span>Weight (kg)</span>
                            <input type="number" step="0.01" min="0.01" name="weight_kg" value="{{ old('weight_kg', 1) }}" required>
                        </label>
                        <label>
                            <span>Delivery type</span>
                            <select name="delivery_type">
                                <option value="instant" {{ old('delivery_type') === 'instant' ? 'selected' : '' }}>⚡ Instant</option>
                                <option value="same_day" {{ old('delivery_type') === 'same_day' ? 'selected' : '' }}>📅 Same day</option>
                                <option value="intercity" {{ old('delivery_type') === 'intercity' ? 'selected' : '' }}>🚆 Intercity</option>
                            </select>
                        </label>
                    </div>

                    <label>
                        <span>💳 Payment method</span>
                        <select name="payment_method">
                            <option value="cod" {{ old('payment_method') === 'cod' ? 'selected' : '' }}>Cash on delivery</option>
                            <option value="wallet" {{ old('payment_method') === 'wallet' ? 'selected' : '' }}>💰 Wallet</option>
                        </select>
                    </label>

                    {{-- Quick quote banner (live estimate) --}}
                    <div class="fm-quote-banner" id="quoteBanner">
                        <span class="fm-quote-label">💰 Estimated fare</span>
                        <span class="fm-quote-value" id="quoteValue">—</span>
                    </div>

                    <button type="submit" class="fm-parcel-submit">
                        <span>📮</span> Book parcel
                    </button>
                </form>
            </div>

            {{-- Sidebar --}}
            <div class="fm-parcel-sidebar">
                {{-- Recent orders --}}
                <div class="fm-parcel-sidebar-card">
                    <h3>Recent parcel orders</h3>
                    <p class="fm-card-sub">{{ ($recentParcelOrders ?? collect())->count() }} recent</p>
                    @if(($recentParcelOrders ?? collect())->count())
                        @foreach($recentParcelOrders as $parcelOrder)
                            <div class="fm-parcel-item">
                                <div class="fm-item-left">
                                    <strong>{{ $parcelOrder->parcel_number }}</strong>
                                    <small>{{ $parcelOrder->created_at->diffForHumans() }}</small>
                                </div>
                                <div class="fm-item-right">
                                    <span class="fm-parcel-status fm-parcel-status--{{ $parcelOrder->status }}">
                                        {{ \Illuminate\Support\Str::headline($parcelOrder->status) }}
                                    </span>
                                    <span class="fm-parcel-amount">{{ \App\Support\StorefrontPresenter::money($parcelOrder->grand_total) }}</span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="fm-parcel-empty">
                            <div class="fm-parcel-empty-icon">
                                <img class="fm-parcel-asset-empty" src="{{ asset('assets/customer/services/parcel.svg') }}" alt="">
                            </div>
                            <h4>No parcel orders yet</h4>
                            <p>Your parcel bookings will appear here.</p>
                        </div>
                    @endif
                </div>

                {{-- How it works --}}
                <div class="fm-parcel-sidebar-card" style="background:var(--fm-primary-light);border-color:var(--fm-primary-light);">
                    <h3 style="color:var(--fm-primary);">How it works</h3>
                    <ul class="fm-how-list">
                        <li><span class="fm-how-icon">📍</span> Enter pickup &amp; delivery addresses</li>
                        <li><span class="fm-how-icon">📦</span> Provide parcel details and weight</li>
                        <li><span class="fm-how-icon">🚀</span> Get instant quote and book</li>
                        <li><span class="fm-how-icon">📡</span> Track in real-time</li>
                    </ul>
                </div>

                {{-- Support / Trust --}}
                <div class="fm-parcel-sidebar-card" style="background:#f0fdf4;border-color:#bbf7d0;">
                    <h3 style="color:#065f46;">✅ Trusted delivery</h3>
                    <p style="font-size:13px;color:#065f46;margin:0;">
                        <strong>100%</strong> insured · <strong>24/7</strong> support · <strong>Live</strong> tracking
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Live fare estimation (client-side) --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
    const quoteValue = document.getElementById('quoteValue');
    const pickupInput = document.querySelector('input[name="pickup_address"]');
    const deliveryInput = document.querySelector('input[name="delivery_address"]');
    const weightInput = document.querySelector('input[name="weight_kg"]');
    const deliveryTypeSelect = document.querySelector('select[name="delivery_type"]');
    let quoteTimer = null;

    // Format money
    const money = (value) => {
        const amount = Number(value || 0);
        const symbol = '{{ \App\Support\StorefrontPresenter::currencySymbol() }}';
        const digits = {{ \App\Support\StorefrontPresenter::decimalDigits() }};
        return symbol + amount.toFixed(digits);
    };

    // Fetch live quote
    const fetchQuote = () => {
        const pickup = pickupInput?.value?.trim() || '';
        const delivery = deliveryInput?.value?.trim() || '';
        const weight = parseFloat(weightInput?.value) || 0;
        const deliveryType = deliveryTypeSelect?.value || 'instant';

        // Need at least pickup and delivery to estimate
        if (!pickup || !delivery || weight <= 0) {
            if (quoteValue) quoteValue.textContent = '—';
            return;
        }

        // Show loading briefly
        if (quoteValue) quoteValue.textContent = '⏳ estimating...';

        // Abort previous timer
        if (quoteTimer) clearTimeout(quoteTimer);
        quoteTimer = setTimeout(() => {
            fetch('{{ route('storefront.parcel.estimate') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    pickup_address: pickup,
                    delivery_address: delivery,
                    weight_kg: weight,
                    delivery_type: deliveryType,
                }),
                credentials: 'same-origin'
            })
            .then(response => response.ok ? response.json() : Promise.reject())
            .then(data => {
                if (data && typeof data.estimated_fare !== 'undefined') {
                    if (quoteValue) quoteValue.textContent = money(data.estimated_fare);
                } else {
                    if (quoteValue) quoteValue.textContent = '—';
                }
            })
            .catch(() => {
                if (quoteValue) quoteValue.textContent = '—';
            });
        }, 400);
    };

    // Attach events
    if (pickupInput) pickupInput.addEventListener('input', fetchQuote);
    if (deliveryInput) deliveryInput.addEventListener('input', fetchQuote);
    if (weightInput) weightInput.addEventListener('input', fetchQuote);
    if (deliveryTypeSelect) deliveryTypeSelect.addEventListener('change', fetchQuote);

    // Initial quote if prefilled
    if (pickupInput?.value && deliveryInput?.value && weightInput?.value) {
        fetchQuote();
    }

    // Also trigger when page loads with old values
    window.addEventListener('load', function() {
        if (pickupInput?.value && deliveryInput?.value && weightInput?.value) {
            fetchQuote();
        }
    });

});
</script>
@endsection