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

@section('title', trans_key('storefront.pageTitles.trackOrder', ['order' => $order->order_number]).' - '.config('app.name', 'FreshMart'))

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

@push('styles')
<style>
.fm-tracking-page {
    padding: 12px 0 20px;
}

.fm-tracking-hero {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--fm-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fm-tracking-hero h1 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.fm-tracking-hero p {
    font-size: 13px;
    color: var(--fm-text-secondary);
    margin: 0;
}

.fm-tracking-hero .fm-tracking-status {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: var(--fm-radius-full);
    background: var(--fm-bg);
    color: var(--fm-text-secondary);
}

.fm-tracking-hero .fm-tracking-status--placed { background: #e0f2fe; color: #0369a1; }
.fm-tracking-hero .fm-tracking-status--confirmed { background: #dbeafe; color: #1d4ed8; }
.fm-tracking-hero .fm-tracking-status--preparing { background: #fef3c7; color: #b45309; }
.fm-tracking-hero .fm-tracking-status--out_for_delivery { background: #ede9fe; color: #6d28d9; }
.fm-tracking-hero .fm-tracking-status--delivered { background: #d1fae5; color: #065f46; }
.fm-tracking-hero .fm-tracking-status--completed { background: #d1fae5; color: #065f46; }
.fm-tracking-hero .fm-tracking-status--pending { background: #fef3c7; color: #b45309; }
.fm-tracking-hero .fm-tracking-status--accepted { background: #dbeafe; color: #1d4ed8; }
.fm-tracking-hero .fm-tracking-status--picked_up { background: #ede9fe; color: #6d28d9; }
.fm-tracking-hero .fm-tracking-status--cancelled,
.fm-tracking-hero .fm-tracking-status--canceled,
.fm-tracking-hero .fm-tracking-status--failed { background: #fee2e2; color: #991b1b; }

.fm-tracking-hero a {
    padding: 8px 20px;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary-light);
    color: var(--fm-primary);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: background var(--fm-transition);
}

.fm-tracking-hero a:hover {
    background: var(--fm-primary);
    color: white;
}

/* Map */
.fm-tracking-map-wrapper {
    position: relative;
    border-radius: var(--fm-radius);
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--fm-card-bg);
    box-shadow: var(--fm-shadow);
}

.fm-tracking-map {
    width: 100%;
    height: 280px;
    background: var(--fm-bg);
    position: relative;
}

.fm-tracking-map .fm-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--fm-text-light);
}

.fm-tracking-map .fm-map-placeholder .fm-map-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.fm-tracking-map .fm-map-placeholder p {
    font-size: 13px;
    margin: 0;
}

.fm-tracking-eta {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--fm-card-bg);
    padding: 10px 16px;
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow-lg);
    text-align: center;
    min-width: 100px;
}

.fm-tracking-eta span {
    display: block;
    font-size: 10px;
    color: var(--fm-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fm-tracking-eta strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--fm-text);
}

.fm-tracking-eta small {
    font-size: 12px;
    color: var(--fm-text-secondary);
}

/* Timeline */
.fm-tracking-timeline {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px 20px;
    box-shadow: var(--fm-shadow);
}

.fm-tracking-timeline h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.fm-timeline-step {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}

.fm-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--fm-border);
}

.fm-timeline-step .fm-step-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fm-border);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-timeline-step.is-done .fm-step-dot {
    background: var(--fm-primary);
    color: white;
}

.fm-timeline-step.is-done .fm-step-dot::after {
    content: '✓';
    font-size: 10px;
    font-weight: 700;
}

.fm-timeline-step.is-current .fm-step-dot {
    background: var(--fm-primary);
    color: white;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.fm-timeline-step .fm-step-content {
    flex: 1;
}

.fm-timeline-step .fm-step-content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fm-text);
}

.fm-timeline-step .fm-step-content p {
    font-size: 12px;
    color: var(--fm-text-secondary);
    margin: 0;
}

.fm-timeline-step.is-done .fm-step-content strong {
    color: var(--fm-text-secondary);
}

.fm-timeline-step.is-current .fm-step-content strong {
    color: var(--fm-primary);
}

/* Delivery details */
.fm-tracking-details {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px 20px;
    box-shadow: var(--fm-shadow);
    margin-top: 12px;
}

.fm-tracking-details h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.fm-tracking-details .fm-rider-card {
    padding: 12px;
    border-radius: var(--fm-radius-sm);
    background: var(--fm-bg);
    margin-bottom: 12px;
}

.fm-tracking-details .fm-rider-card strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.fm-tracking-details .fm-rider-card span {
    font-size: 13px;
    color: var(--fm-text-secondary);
}

.fm-tracking-details dl {
    margin: 0;
    display: grid;
    gap: 4px;
}

.fm-tracking-details dl > div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--fm-border);
}

.fm-tracking-details dl > div:last-child {
    border-bottom: none;
}

.fm-tracking-details dl > div dt {
    color: var(--fm-text-secondary);
}

.fm-tracking-details dl > div dd {
    font-weight: 600;
    margin: 0;
}

/* Two column layout */
@media (min-width: 768px) {
    .fm-tracking-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .fm-tracking-hero {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .fm-tracking-hero .fm-tracking-status {
        display: inline-block;
        align-self: center;
    }
    .fm-tracking-hero a {
        text-align: center;
    }
    .fm-tracking-eta {
        bottom: 8px;
        right: 8px;
        padding: 6px 12px;
        min-width: 80px;
    }
    .fm-tracking-eta strong {
        font-size: 18px;
    }
}
</style>
@endpush

@section('content')
@php
    $steps = ['placed' => 'Placed', 'confirmed' => 'Confirmed', 'preparing' => 'Preparing', 'out_for_delivery' => 'On the way', 'delivered' => 'Delivered'];
    $currentIndex = max(0, array_search($order->status, array_keys($steps), true) ?: 0);
    $latest = data_get($tracking, 'latest');
    $driver = data_get($tracking, 'delivery_boy');
    $eta = data_get($tracking, 'current_eta') ?: data_get($tracking, 'delivery_travel_eta_minutes');
        $storeAddress = collect([$order->store?->address, $order->store?->address_line_1, $order->store?->address_line_2, $order->store?->city, $order->store?->state, $order->store?->postal_code, $order->store?->pincode])->filter()->unique()->join(', ');
    $mapPayload = [
        'driver' => $latest ? [
            'lat' => (float) data_get($latest, 'latitude'),
            'lng' => (float) data_get($latest, 'longitude'),
            'heading' => data_get($latest, 'heading'),
        ] : null,
        'store' => $order->store?->latitude && $order->store?->longitude ? [
            'lat' => (float) $order->store->latitude,
            'lng' => (float) $order->store->longitude,
        ] : null,
        'points' => collect(data_get($tracking, 'points', []))->map(fn ($point) => [
            'lat' => (float) data_get($point, 'latitude'),
            'lng' => (float) data_get($point, 'longitude'),
        ])->filter(fn ($point) => $point['lat'] && $point['lng'])->values(),
    ];
    $money = fn ($value) => \App\Support\StorefrontPresenter::money($value);
@endphp

<div class="fm-tracking-page">
    <div class="fm-container">
        {{-- Header --}}
        <div class="fm-tracking-hero">
            <div>
                <h1>#{{ $order->order_number }}</h1>
                <p>{{ $order->store?->name ?? 'Store' }} · {{ optional($order->placed_at ?? $order->created_at)->format('d M Y, h:i A') }}</p>
            </div>
            <span class="fm-tracking-status fm-tracking-status--{{ $order->status }}">
                {{ \Illuminate\Support\Str::headline($order->status) }}
            </span>
            <a href="{{ route('storefront.orders.show', $order) }}">Order details →</a>
        </div>

        {{-- Map --}}
        <div class="fm-tracking-map-wrapper">
            <div class="fm-tracking-map" id="orderTrackingMap" data-tracking-map='@json($mapPayload)'>
                <div class="fm-map-placeholder">
                    <div class="fm-map-icon">📍</div>
                    <p>Loading map...</p>
                </div>
            </div>
            @if($eta)
                <div class="fm-tracking-eta">
                    <span>ETA</span>
                    <strong>{{ $eta }}</strong>
                    <small>min</small>
                </div>
            @endif
        </div>

        {{-- Two column layout --}}
        <div class="fm-tracking-grid">
            {{-- Timeline --}}
            <div class="fm-tracking-timeline">
                <h2>Order progress</h2>
                @foreach($steps as $key => $label)
                    @php
                        $stepIndex = array_search($key, array_keys($steps), true);
                        $isDone = $stepIndex <= $currentIndex;
                        $isCurrent = $key === $order->status;
                    @endphp
                    <div class="fm-timeline-step {{ $isDone ? 'is-done' : '' }} {{ $isCurrent ? 'is-current' : '' }}">
                        <div class="fm-step-dot"></div>
                        <div class="fm-step-content">
                            <strong>{{ $label }}</strong>
                            <p>{{ $isCurrent ? 'Current status' : 'Order milestone' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Delivery Details --}}
            <div class="fm-tracking-details">
                <h2>Delivery details</h2>
                <p style="font-size:12px;color:var(--fm-text-secondary);margin:-4px 0 12px;">
                    {{ $storeAddress ?: 'Store address unavailable' }}
                </p>

                @if($driver?->user)
                    <div class="fm-rider-card">
                        <strong>{{ $driver->user->name }}</strong>
                        <span>{{ $driver->user->phone }}</span>
                    </div>
                @else
                    <div class="fm-rider-card" style="background:#fef3c7;">
                        <strong style="color:#b45309;">Driver assignment pending</strong>
                        <span>We will update this screen automatically.</span>
                    </div>
                @endif

                <dl>
                    <div>
                        <dt>Preparation</dt>
                        <dd>{{ data_get($tracking, 'preparation_eta_minutes') ?: 'Live' }} min</dd>
                    </div>
                    <div>
                        <dt>Travel</dt>
                        <dd>{{ data_get($tracking, 'delivery_travel_eta_minutes') ?: 'Live' }} min</dd>
                    </div>
                    <div>
                        <dt>Updated</dt>
                        <dd>{{ data_get($tracking, 'eta_updated_at') ? \Illuminate\Support\Carbon::parse(data_get($tracking, 'eta_updated_at'))->diffForHumans() : 'Awaiting signal' }}</dd>
                    </div>
                </dl>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mapNode = document.getElementById('orderTrackingMap');
    if (!mapNode) return;

    const payload = JSON.parse(mapNode.dataset.trackingMap || '{}');

    const drawMap = () => {
        if (!window.google?.maps) {
            // Try again after a delay
            setTimeout(drawMap, 500);
            return;
        }

        const points = [payload.store, ...(payload.points || []), payload.driver].filter(Boolean);
        if (!points.length) {
            mapNode.innerHTML = `
                <div class="fm-map-placeholder">
                    <div class="fm-map-icon">📍</div>
                    <p>Location data unavailable</p>
                </div>
            `;
            return;
        }

        const map = new google.maps.Map(mapNode, {
            center: points[points.length - 1],
            zoom: 14,
            mapTypeControl: false,
            streetViewControl: false,
            fullscreenControl: false,
            zoomControl: true,
            styles: [
                { featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] }
            ]
        });

        const bounds = new google.maps.LatLngBounds();

        // Store marker
        if (payload.store) {
            bounds.extend(payload.store);
            new google.maps.Marker({
                map,
                position: payload.store,
                label: { text: 'S', color: 'white', fontWeight: 'bold' },
                icon: {
                    url: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#2daa37" stroke="white" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3" fill="white"/></svg>'),
                    scaledSize: new google.maps.Size(32, 32),
                    anchor: new google.maps.Point(16, 32)
                },
                title: 'Store'
            });
        }

        // Driver marker
        if (payload.driver) {
            bounds.extend(payload.driver);
            const heading = payload.driver.heading || 0;
            new google.maps.Marker({
                map,
                position: payload.driver,
                label: { text: '🚗', fontSize: '16px' },
                icon: {
                    url: 'data:image/svg+xml;base64,' + btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#6d28d9" stroke="white" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3" fill="white"/></svg>'),
                    scaledSize: new google.maps.Size(32, 32),
                    anchor: new google.maps.Point(16, 32),
                    rotation: heading
                },
                title: 'Driver'
            });
        }

        // Route line
        if ((payload.points || []).length > 1) {
            new google.maps.Polyline({
                map,
                path: payload.points,
                strokeColor: '#2daa37',
                strokeWeight: 4,
                strokeOpacity: 0.85
            });
        }

        if (points.length > 1) {
            map.fitBounds(bounds, 64);
        }

        // Update map placeholder
        mapNode.querySelector('.fm-map-placeholder')?.remove();
    };

    // Initial draw attempt
    if (window.google?.maps) {
        drawMap();
    } else {
        // Wait for Google Maps to load
        const checkMaps = setInterval(() => {
            if (window.google?.maps) {
                clearInterval(checkMaps);
                drawMap();
            }
        }, 300);

        // Timeout after 10 seconds
        setTimeout(() => {
            clearInterval(checkMaps);
            if (!mapNode.querySelector('.fm-map-placeholder')) {
                mapNode.innerHTML = `
                    <div class="fm-map-placeholder">
                        <div class="fm-map-icon">📍</div>
                        <p>Map loading... Please refresh</p>
                    </div>
                `;
            }
        }, 10000);
    }
});
</script>
@endpush