@extends('layouts.frontend')

@section('title', 'Home')

@section('content')
    <!-- Hero Section -->
    <div class="relative bg-gray-900 overflow-hidden" x-data="{ 
        activeSlide: 0, 
        slides: @json($settings->slider_images),
        init() {
            if (this.slides.length > 1) {
                setInterval(() => {
                    this.activeSlide = (this.activeSlide + 1) % this.slides.length;
                }, 5000);
            }
        }
    }" x-cloak>
        <!-- Slider Images -->
        <template x-for="(slide, index) in slides" :key="index">
            <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out"
                 :class="{ 'opacity-100': activeSlide === index, 'opacity-0': activeSlide !== index }">
                <img :src="slide" alt="Cargo Truck" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gray-900 opacity-60"></div>
            </div>
        </template>
        
        <div class="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
            <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl text-center mb-6 drop-shadow-lg">
                Domestic & International <br class="hidden sm:block">
                <span class="text-indigo-400">Cargo Services</span>
            </h1>
            <p class="mt-6 text-xl text-gray-200 text-center max-w-3xl mx-auto drop-shadow-md">
                Connecting Pakistan to the world. Reliable logistics solutions for all your domestic and international shipping needs.
            </p>

            <!-- Tracking Box -->
            <div class="mt-10 max-w-xl mx-auto bg-white/95 backdrop-blur-sm rounded-xl shadow-2xl p-6 sm:p-8 transform transition-all hover:scale-105 duration-300">
                <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Track Your Shipment</h2>
                <form action="{{ route('frontend.track') }}" method="GET" class="space-y-4">
                    <div>
                        <label for="cntr_no" class="sr-only">Tracking Number</label>
                        <div class="relative rounded-md shadow-sm">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                            <input type="text" name="cntr_no" id="cntr_no" 
                                class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-lg py-3" 
                                placeholder="Enter CNTR Number (e.g. CNTR-2024-001)" required>
                        </div>
                    </div>
                    <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                        Track Now
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Features / Services Section -->
    <div id="services" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h2 class="text-base font-semibold text-indigo-600 tracking-wide uppercase">Our Services</h2>
                <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    Why Choose Us?
                </p>
                <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                    We provide end-to-end cargo solutions tailored to your needs.
                </p>
            </div>

            <div class="mt-12 grid gap-8 grid-cols-1 md:grid-cols-3">
                <!-- Feature 1 -->
                <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition-shadow duration-300 text-center group">
                    <div class="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full text-indigo-600 mb-5 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                        <i class="fas fa-shipping-fast text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Fast Delivery</h3>
                    <p class="text-gray-500">
                        We ensure your packages reach their destination on time, every time, with our optimized route planning.
                    </p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition-shadow duration-300 text-center group">
                    <div class="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full text-indigo-600 mb-5 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Secure Handling</h3>
                    <p class="text-gray-500">
                        Your cargo is safe with us. We follow strict safety protocols to prevent any damage or loss during transit.
                    </p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition-shadow duration-300 text-center group">
                    <div class="inline-flex items-center justify-center p-3 bg-indigo-100 rounded-full text-indigo-600 mb-5 group-hover:bg-indigo-600 group-hover:text-white transition-colors duration-300">
                        <i class="fas fa-headset text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">24/7 Support</h3>
                    <p class="text-gray-500">
                        Our customer support team is always available to answer your queries and help you track your shipments.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing Section -->
    <div class="py-20 bg-gray-50" x-data="{ 
        activeType: 'domestic', 
        activeCountry: '', 
        countries: [...new Set(@json($rates->where('type', 'international')->pluck('country')->filter()->values()))]
    }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Transparent Pricing</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Calculate your shipping costs instantly. No hidden charges.</p>
                
                <!-- Type Filter -->
                <div class="mt-8 inline-flex bg-white rounded-lg p-1 border border-gray-200 shadow-sm">
                    <button @click="activeType = 'domestic'" 
                        :class="{ 'bg-purple-600 text-white shadow-sm': activeType === 'domestic', 'text-gray-600 hover:text-gray-900': activeType !== 'domestic' }"
                        class="px-6 py-2 rounded-md text-sm font-medium transition-all">
                        Domestic
                    </button>
                    <button @click="activeType = 'international'" 
                        :class="{ 'bg-purple-600 text-white shadow-sm': activeType === 'international', 'text-gray-600 hover:text-gray-900': activeType !== 'international' }"
                        class="px-6 py-2 rounded-md text-sm font-medium transition-all">
                        International
                    </button>
                </div>

                <!-- Country Filter (International only) -->
                <div x-show="activeType === 'international'" class="mt-6" style="display: none;">
                    <select x-model="activeCountry" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
                        <option value="">Select Country</option>
                        <template x-for="country in countries" :key="country">
                            <option :value="country" x-text="country"></option>
                        </template>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($rates as $rate)
                <div x-show="activeType === '{{ $rate->type }}' && (activeType === 'domestic' || activeCountry === '{{ $rate->country }}')"
                     class="bg-white rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition duration-300 transform hover:-translate-y-1 border border-gray-100">
                    <div class="p-8">
                        <div class="text-sm font-semibold text-purple-600 tracking-wide uppercase mb-2">{{ $rate->cargo_type }}</div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">{{ $rate->service_type }}</h3>
                        <div class="flex items-baseline mb-6">
                            <span class="text-4xl font-extrabold text-gray-900">{{ $settings->currency_symbol }}{{ number_format($rate->base_rate, 0) }}</span>
                            <span class="ml-2 text-gray-500">/ {{ $rate->rate_type }}</span>
                        </div>
                        <ul class="space-y-4 mb-8">
                            <li class="flex items-center text-gray-600">
                                <i class="fas fa-check text-green-500 mr-3"></i>
                                Door to Door Delivery
                            </li>
                            <li class="flex items-center text-gray-600">
                                <i class="fas fa-check text-green-500 mr-3"></i>
                                Real-time Tracking
                            </li>
                            <li class="flex items-center text-gray-600">
                                <i class="fas fa-check text-green-500 mr-3"></i>
                                Insurance Included
                            </li>
                            @if($rate->type === 'international')
                            <li class="flex items-center text-purple-600 font-medium">
                                <i class="fas fa-globe mr-3"></i>
                                {{ $rate->country }}
                            </li>
                            @endif
                        </ul>
                        <a href="#track-shipment" class="block w-full bg-gray-50 text-purple-600 text-center font-semibold py-3 rounded-xl hover:bg-purple-50 transition border border-gray-200">
                            Book Now
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Shipping Calculator Section -->
    <div class="py-16 bg-white border-t border-gray-100" x-data="shippingCalculator()">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-indigo-600 rounded-2xl shadow-xl overflow-hidden">
                <div class="p-8 sm:p-12">
                    <div class="text-center mb-8">
                        <h2 class="text-3xl font-extrabold text-white">Shipping Calculator</h2>
                        <p class="mt-2 text-indigo-100">Estimate your shipping costs instantly</p>
                    </div>

                    <div class="bg-white rounded-xl p-6 sm:p-8 shadow-inner">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Service Type -->
                            <div class="col-span-1 md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Service Type</label>
                                <div class="flex space-x-4">
                                    <label class="inline-flex items-center">
                                        <input type="radio" x-model="type" value="domestic" class="form-radio text-indigo-600 focus:ring-indigo-500 h-4 w-4">
                                        <span class="ml-2 text-gray-700">Domestic</span>
                                    </label>
                                    <label class="inline-flex items-center">
                                        <input type="radio" x-model="type" value="international" class="form-radio text-indigo-600 focus:ring-indigo-500 h-4 w-4">
                                        <span class="ml-2 text-gray-700">International</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Country Selection (International Only) -->
                            <div class="col-span-1 md:col-span-2" x-show="type === 'international'" x-transition>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Destination Country</label>
                                <select x-model="country" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                    <option value="">Select Country</option>
                                    <template x-for="c in availableCountries" :key="c">
                                        <option :value="c" x-text="c"></option>
                                    </template>
                                </select>
                            </div>

                            <!-- Rate Selection -->
                            <div class="col-span-1 md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Cargo Type</label>
                                <select x-model="selectedRateId" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                                    <option value="">Select Cargo Type</option>
                                    <template x-for="rate in availableRates" :key="rate.id">
                                        <option :value="rate.id" x-text="rate.cargo_type + ' - ' + rate.service_type + ' (' + rate.rate_type + ')'"></option>
                                    </template>
                                </select>
                                <p x-show="selectedRate" class="mt-1 text-xs text-gray-500">
                                    Rate: <span class="font-semibold text-indigo-600">{{ $settings->currency_symbol }}<span x-text="selectedRate?.base_rate"></span></span> / <span x-text="selectedRate?.rate_type"></span>
                                </p>
                            </div>

                            <!-- Quantity Input -->
                            <div class="col-span-1">
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    <span x-text="quantityLabel">Quantity</span>
                                </label>
                                <div class="relative rounded-md shadow-sm">
                                    <input type="number" x-model="quantity" min="0" step="0.01" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-3 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00">
                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                        <span class="text-gray-500 sm:text-sm" x-text="unitLabel"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Total Cost Display -->
                            <div class="col-span-1 bg-gray-50 rounded-lg p-4 flex flex-col justify-center items-center border border-gray-200">
                                <span class="text-sm font-medium text-gray-500 uppercase tracking-wider">Estimated Cost</span>
                                <span class="text-3xl font-extrabold text-indigo-600 mt-1">
                                    {{ $settings->currency_symbol }}<span x-text="totalCost">0</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function shippingCalculator() {
            return {
                rates: @json($rates),
                type: 'domestic',
                country: '',
                selectedRateId: '',
                quantity: '',
                
                get availableCountries() {
                    return [...new Set(this.rates.filter(r => r.type === 'international' && r.country).map(r => r.country))];
                },
                
                get availableRates() {
                    return this.rates.filter(r => {
                        if (this.type === 'domestic') {
                            return r.type === 'domestic';
                        } else {
                            return r.type === 'international' && r.country === this.country;
                        }
                    });
                },
                
                get selectedRate() {
                    return this.rates.find(r => r.id == this.selectedRateId);
                },
                
                get quantityLabel() {
                    if (!this.selectedRate) return 'Quantity';
                    const type = this.selectedRate.rate_type.toLowerCase();
                    if (type.includes('kg')) return 'Weight (KG)';
                    if (type.includes('cbm')) return 'Volume (CBM)';
                    if (type.includes('carton')) return 'No. of Cartons';
                    return 'Quantity';
                },
                
                get unitLabel() {
                    if (!this.selectedRate) return '';
                    return this.selectedRate.rate_type;
                },
                
                get totalCost() {
                    if (!this.selectedRate || !this.quantity) return '0';
                    const cost = parseFloat(this.selectedRate.base_rate) * parseFloat(this.quantity);
                    return new Intl.NumberFormat().format(cost.toFixed(2));
                }
            }
        }
    </script>

    <!-- About Section -->
    <div id="about" class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
                <div class="mb-10 lg:mb-0">
                    <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl mb-6">
                        About CargoFlow
                    </h2>
                    <p class="text-lg text-gray-500 mb-6">
                        Established with a vision to revolutionize the logistics industry, CargoFlow has grown to become a trusted name in cargo services. We combine technology with human expertise to deliver excellence.
                    </p>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Nationwide network coverage</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Real-time tracking system</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span class="text-gray-600">Competitive pricing without compromising quality</span>
                        </li>
                    </ul>
                </div>
                <div class="relative">
                    <div class="absolute inset-0 bg-indigo-600 transform translate-x-3 translate-y-3 rounded-2xl"></div>
                    <img class="relative rounded-2xl shadow-xl w-full object-cover h-64 sm:h-80 lg:h-full" src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cargo Warehouse">
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="bg-indigo-700">
        <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
            <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
                <span class="block">Ready to ship?</span>
                <span class="block text-indigo-200">Get started with us today.</span>
            </h2>
            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                <div class="inline-flex rounded-md shadow">
                    <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50">
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div id="contact" class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-extrabold text-gray-900">Get in Touch</h2>
                <p class="mt-4 text-lg text-gray-500">Have questions? We're here to help.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Phone -->
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 text-indigo-600">
                        <i class="fas fa-phone-alt text-xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Call Us</h3>
                    <p class="text-gray-500">{{ $settings->company_phone }}</p>
                    <p class="text-gray-500 text-sm mt-1">Mon-Sat, 9am - 6pm</p>
                </div>

                <!-- Email -->
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 text-indigo-600">
                        <i class="fas fa-envelope text-xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Email Us</h3>
                    <p class="text-gray-500">{{ $settings->company_email }}</p>
                    <p class="text-gray-500 text-sm mt-1">We reply within 24 hours</p>
                </div>

                <!-- Location -->
                <div class="text-center p-6 bg-gray-50 rounded-lg">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4 text-indigo-600">
                        <i class="fas fa-map-marker-alt text-xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">Visit Us</h3>
                    <p class="text-gray-500 max-w-xs mx-auto">{{ $settings->company_address }}</p>
                </div>
            </div>
        </div>
    </div>
@endsection