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

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

@section('content')
@php
    $zoneQuery = $selectedZone?->slug ? ['zone' => $selectedZone->slug] : [];
    $storefrontQuery = array_filter([
        'zone' => $selectedZone?->slug,
        'service' => $selectedService ?? null,
    ]);
    $homeBranding = ($settings ?? collect())->get('branding', collect());
    $homeBrandLogo = \App\Support\StorefrontPresenter::mediaUrl(
        ($frontendBranding ?? collect())->get('brand_logo')
        ?? $homeBranding->get('logo')
        ?? $homeBranding->get('dark_logo')
    );
    $homeBrandName = trim((string) ($homeBranding->get('app_name') ?: config('app.name', 'FreshMart')));
    
    $services = collect([
        [
            'key' => 'grocery',
            'name' => 'InstaKart',
            'short_name' => 'Grocery',
            'description' => 'Daily essentials delivered to your doorstep in minutes',
            'icon' => asset('assets/customer/services/hyperlocal.svg'),
            'color' => '#2daa37',
            'bg_color' => '#e8f5e9',
            'badge' => 'Popular',
            'eta' => '10-15 mins',
        ],
        [
            'key' => 'food',
            'name' => 'Food Delivery',
            'short_name' => 'Foods',
            'description' => 'Delicious meals from your favourite restaurants',
            'icon' => asset('assets/customer/services/restaurant.svg'),
            'color' => '#6D28D9',
            'bg_color' => '#E9D5FF',
            'badge' => 'New',
            'eta' => '25-35 mins',
        ],
        [
            'key' => 'pharmacy',
            'name' => 'Pharmacy',
            'short_name' => 'Pharmacy',
            'description' => 'Medicines and wellness products delivered safely',
            'icon' => asset('assets/customer/services/pharmacy.svg'),
            'color' => '#2563EB',
            'bg_color' => '#DBEAFE',
            'badge' => 'Trusted',
            'eta' => '15-20 mins',
        ],
        [
            'key' => 'parcel',
            'name' => 'Parcel Delivery',
            'short_name' => 'Parcel',
            'description' => 'Send anything anywhere with real-time tracking',
            'icon' => asset('assets/customer/services/parcel.svg'),
            'color' => '#F97316',
            'bg_color' => '#FFEDD5',
            'badge' => 'Fast',
            'eta' => 'Variable',
        ],
    ]);
@endphp

<style>
/* ==========================================
   SERVICE SELECTOR - FreshMart Style
   ========================================== */
:root {
    --fm-primary: #2daa37;
    --fm-primary-dark: #1e8a2a;
    --fm-primary-light: #e8f5e9;
    --fm-secondary: #ff6b00;
    --fm-accent: #ffc107;
    --fm-bg: #f5f7f8;
    --fm-card-bg: #ffffff;
    --fm-text: #1a1a2e;
    --fm-text-secondary: #6b7280;
    --fm-text-light: #9ca3af;
    --fm-border: #e5e7eb;
    --fm-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --fm-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --fm-radius: 14px;
    --fm-radius-sm: 8px;
    --fm-radius-full: 9999px;
    --fm-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --fm-safe-top: env(safe-area-inset-top, 0px);
    --fm-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.fm-service-selector {
    min-height: 100vh;
    background: var(--fm-bg);
    padding: 20px 16px calc(80px + var(--fm-safe-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== Header ===== */
.fm-service-header {
    text-align: center;
    margin-bottom: 28px;
    padding-top: 10px;
}

.fm-service-header .fm-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 8px;
}

.fm-service-header .fm-brand img {
    height: 40px;
    width: auto;
}

.fm-service-header .fm-brand strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--fm-primary);
    letter-spacing: -0.5px;
}

.fm-service-header .fm-brand strong span {
    font-weight: 300;
    color: var(--fm-text-secondary);
}

.fm-service-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 8px 0 4px;
}

.fm-service-header p {
    font-size: 14px;
    color: var(--fm-text-secondary);
    margin: 0;
}

/* ===== Location Bar ===== */
.fm-service-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--fm-card-bg);
    padding: 10px 16px;
    border-radius: var(--fm-radius-full);
    box-shadow: var(--fm-shadow);
    margin-bottom: 24px;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--fm-transition), box-shadow var(--fm-transition);
}

.fm-service-location:hover {
    border-color: var(--fm-primary);
    box-shadow: var(--fm-shadow-lg);
}

.fm-service-location svg {
    width: 20px;
    height: 20px;
    color: var(--fm-primary);
    flex-shrink: 0;
}

.fm-service-location-info {
    flex: 1;
    text-align: left;
}

.fm-service-location-info small {
    font-size: 10px;
    color: var(--fm-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

.fm-service-location-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--fm-text);
    display: flex;
    align-items: center;
    gap: 4px;
}

.fm-service-location-info strong b {
    font-weight: 400;
    color: var(--fm-text-light);
}

.fm-service-location-arrow {
    color: var(--fm-text-light);
}

/* ===== Service Grid ===== */
.fm-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

/* ===== Service Card ===== */
.fm-service-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px;
    text-decoration: none;
    color: var(--fm-text);
    box-shadow: var(--fm-shadow);
    transition: transform var(--fm-transition), box-shadow var(--fm-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid transparent;
    position: relative;
    min-height: 160px;
}

.fm-service-card:active {
    transform: scale(0.96);
}

.fm-service-card:hover {
    box-shadow: var(--fm-shadow-lg);
    transform: translateY(-2px);
}

.fm-service-card .fm-service-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--fm-secondary);
    color: white;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--fm-radius-sm);
}

.fm-service-card .fm-service-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.fm-service-card .fm-service-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.fm-service-card .fm-service-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--fm-text);
    margin: 0 0 2px;
}

.fm-service-card .fm-service-short-name {
    font-size: 11px;
    color: var(--fm-text-light);
    font-weight: 500;
    display: none;
}

.fm-service-card .fm-service-description {
    font-size: 11px;
    color: var(--fm-text-secondary);
    margin: 4px 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fm-service-card .fm-service-eta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--fm-primary);
    background: var(--fm-primary-light);
    padding: 2px 10px;
    border-radius: var(--fm-radius-full);
}

.fm-service-card .fm-service-eta svg {
    width: 12px;
    height: 12px;
}

/* ===== Service Card Variants ===== */
.fm-service-card.is-grocery .fm-service-icon {
    background: #e8f5e9;
}
.fm-service-card.is-grocery:hover {
    border-color: #2daa37;
}

.fm-service-card.is-food .fm-service-icon {
    background: #E9D5FF;
}
.fm-service-card.is-food:hover {
    border-color: #6D28D9;
}

.fm-service-card.is-pharmacy .fm-service-icon {
    background: #DBEAFE;
}
.fm-service-card.is-pharmacy:hover {
    border-color: #2563EB;
}

.fm-service-card.is-parcel .fm-service-icon {
    background: #FFEDD5;
}
.fm-service-card.is-parcel:hover {
    border-color: #F97316;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 380px) {
    .fm-service-grid {
        gap: 8px;
    }
    .fm-service-card {
        padding: 12px;
        min-height: 140px;
    }
    .fm-service-card .fm-service-icon {
        width: 44px;
        height: 44px;
    }
    .fm-service-card .fm-service-icon img {
        width: 22px;
        height: 22px;
    }
    .fm-service-card .fm-service-name {
        font-size: 13px;
    }
    .fm-service-card .fm-service-description {
        font-size: 10px;
    }
    .fm-service-header h1 {
        font-size: 18px;
    }
}

@media (min-width: 481px) {
    .fm-service-grid {
        max-width: 500px;
        gap: 16px;
    }
    .fm-service-card {
        min-height: 180px;
        padding: 20px;
    }
    .fm-service-card .fm-service-icon {
        width: 64px;
        height: 64px;
    }
    .fm-service-card .fm-service-icon img {
        width: 32px;
        height: 32px;
    }
}

/* ===== Animation ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fm-service-card {
    animation: fadeInUp 0.5s ease forwards;
}

.fm-service-card:nth-child(1) { animation-delay: 0.05s; }
.fm-service-card:nth-child(2) { animation-delay: 0.10s; }
.fm-service-card:nth-child(3) { animation-delay: 0.15s; }
.fm-service-card:nth-child(4) { animation-delay: 0.20s; }
</style>

<div class="fm-service-selector">
    {{-- Header --}}
    <div class="fm-service-header">
        <a href="{{ route('storefront.home') }}" class="fm-brand" aria-label="{{ $homeBrandName }}">
            @if($homeBrandLogo)
                <img src="{{ $homeBrandLogo }}" alt="{{ $homeBrandName }}" width="120" height="40">
            @else
                <strong>Fresh<span>Mart</span></strong>
            @endif
        </a>
        <h1>What would you like?</h1>
        <p>Choose a service to get started</p>
    </div>

    {{-- Location Bar --}}
    <button type="button" class="fm-service-location" id="serviceLocationTrigger" aria-label="Change delivery location">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <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"/>
        </svg>
        <span class="fm-service-location-info">
            <small>Delivering to</small>
            <strong id="serviceLocationDisplay">
                {{ session('delivery_location', 'Select Location') }}
                <b>▾</b>
            </strong>
        </span>
        <span class="fm-service-location-arrow">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
                <polyline points="6 9 12 15 18 9"/>
            </svg>
        </span>
    </button>

    {{-- Service Grid --}}
    <div class="fm-service-grid">
        @foreach($services as $service)
            @php
                $serviceKey = $service['key'];
                $serviceClass = match($serviceKey) {
                    'grocery' => 'is-grocery',
                    'food' => 'is-food',
                    'pharmacy' => 'is-pharmacy',
                    'parcel' => 'is-parcel',
                    default => ''
                };
                $serviceUrl = route('storefront.services.show', ['service' => $serviceKey] + array_filter([
                    'zone' => $selectedZone?->slug,
                ]));
            @endphp
            <a href="{{ $serviceUrl }}" class="fm-service-card {{ $serviceClass }}">
                @if($service['badge'] ?? false)
                    <span class="fm-service-badge">{{ $service['badge'] }}</span>
                @endif
                <div class="fm-service-icon">
                    <img src="{{ $service['icon'] }}" alt="{{ $service['name'] }}" loading="lazy" width="28" height="28">
                </div>
                <div class="fm-service-name">{{ $service['name'] }}</div>
                <div class="fm-service-description">{{ $service['description'] }}</div>
                <div class="fm-service-eta">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                    {{ $service['eta'] }}
                </div>
            </a>
        @endforeach
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    // ==========================================
    // LOCATION TRIGGER
    // ==========================================
    const serviceLocationTrigger = document.getElementById('serviceLocationTrigger');
    
    if (serviceLocationTrigger) {
        serviceLocationTrigger.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Try to find and trigger the main location modal
            const locationTrigger = document.getElementById('locationTrigger');
            if (locationTrigger) {
                locationTrigger.click();
            } else {
                // Fallback: Try to find any location trigger
                const anyLocationTrigger = document.querySelector('[data-reference-location-trigger]');
                if (anyLocationTrigger) {
                    anyLocationTrigger.click();
                } else {
                    // Create a custom location prompt
                    showLocationPrompt();
                }
            }
        });
    }

    // ==========================================
    // FALLBACK LOCATION PROMPT
    // ==========================================
    function showLocationPrompt() {
        const location = prompt('Enter your delivery location:', '{{ session('delivery_location', '') }}');
        if (location && location.trim()) {
            const display = document.getElementById('serviceLocationDisplay');
            if (display) {
                display.innerHTML = location.trim() + ' <b>▾</b>';
            }
            // Update session via AJAX
            fetch('{{ route('storefront.location.update') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ location: location.trim() })
            }).catch(() => {});
        }
    }

    // ==========================================
    // UPDATE LOCATION DISPLAY
    // ==========================================
    function updateServiceLocationDisplay(location) {
        const display = document.getElementById('serviceLocationDisplay');
        if (display) {
            display.innerHTML = location + ' <b>▾</b>';
        }
    }

    // Listen for location updates from the main modal
    document.addEventListener('storefront:location-updated', function(e) {
        if (e.detail && e.detail.location) {
            updateServiceLocationDisplay(e.detail.location);
        }
    });

    // Also listen for the location trigger from the main layout
    const locationTrigger = document.getElementById('locationTrigger');
    if (locationTrigger) {
        locationTrigger.addEventListener('click', function() {
            // The main modal will handle the location update
        });
    }

    // ==========================================
    // SERVICE CARD CLICK TRACKING
    // ==========================================
    document.querySelectorAll('.fm-service-card').forEach((card) => {
        card.addEventListener('click', function(e) {
            const serviceName = this.querySelector('.fm-service-name')?.textContent || 'Unknown';
            
            // Track service selection
            if (window.gtag) {
                gtag('event', 'select_service', {
                    'service_name': serviceName,
                    'service_type': this.classList.contains('is-grocery') ? 'grocery' :
                                   this.classList.contains('is-food') ? 'food' :
                                   this.classList.contains('is-pharmacy') ? 'pharmacy' : 'parcel'
                });
            }
        });
    });

});
</script>
@endsection