@extends('frontend.layout')

@section('title', 'Inve Security - ' . t('custom_package_page_title'))
@section('description', t('custom_package_page_description'))

@section('content')
 
    <!-- Success Message -->
    @if(session('success'))
        <div class="max-w-6xl mx-auto px-6 mt-8 animate-fade-in">
            <div class="bg-gradient-to-r from-green-500/10 to-green-400/10 dark:from-green-500/20 dark:to-green-400/5 border border-green-200 dark:border-green-800 rounded-2xl p-6">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-check-circle text-green-500 text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-green-600 dark:text-green-400">{{ t('success') ?? 'Success!' }}</h3>
                        <p class="text-green-600 dark:text-green-400">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- PREMIUM PACKAGE BUILDER -->
    <section class="py-16 bg-gradient-to-b from-transparent via-gold-50/20 to-transparent dark:from-transparent dark:via-gold-900/5 dark:to-transparent">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col lg:flex-row gap-8">

                <!-- Countries Selection Panel -->
                <div class="lg:w-2/3">
                    <div class="mb-10 animate-slide-up">
                        <div class="inline-flex items-center gap-2 mb-4">
                            <div class="w-2 h-2 bg-gradient-to-r from-gold-500 to-gold-300 rounded-full animate-pulse"></div>
                            <span class="text-sm font-semibold text-gold-600 dark:text-gold-400 uppercase tracking-wider">{{ t('countries') ?? 'COUNTRIES' }}</span>
                        </div>
                        <h4 class="text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ t('choose_country') ?? 'Choose Country' }}</h4>
                        <p class="text-gray-600 dark:text-gray-400">{{ t('choose_country_subtext') ?? 'Select a country to view available security services' }}</p>
                    </div>

                    <div class="grid gap-6">
                        @foreach ($countris as $country)
                            <a href="{{ route('package.build.country', $country->id) }}" class="block group">
                                <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-100 dark:border-gray-700 p-6 hover:shadow-2xl hover:shadow-gold-500/10 transition-all duration-300 hover:-translate-y-1 animate-slide-up animation-delay-{{ $loop->index * 100 }} hover:border-gold-500/30 dark:hover:border-gold-500/40">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <!-- Country Flag & Title -->
                                            <div class="flex items-center gap-4 mb-4">
                                                <div class="w-14 h-14 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 overflow-hidden">
                                                    @if($country->image)
                                                        <img 
                                                            src="{{ asset('storage/' . $country->image) }}" 
                                                            alt="{{ $country->name }} flag"
                                                            class="w-full h-full object-cover"
                                                        >
                                                    @else
                                                        <i class="fas fa-flag text-gold-500 text-xl"></i>
                                                    @endif
                                                </div>
                                                <div>
                                                    <h5 class="text-xl font-bold text-gray-900 dark:text-white">{{ $country->name }}</h5>
                                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-500/20 to-blue-400/10 dark:from-blue-500/30 dark:to-blue-400/5 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800 mt-2">
                                                        {{ $country->code }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Arrow Button -->
                                        <div class="ml-6">
                                            <div class="w-14 h-14 flex items-center justify-center bg-gradient-to-br from-gold-500/20 to-gold-300/30 dark:from-gold-500/30 dark:to-gold-300/10 text-gold-600 dark:text-gold-400 rounded-xl group-hover:bg-gold-500/30 dark:group-hover:bg-gold-500/40 transition-all duration-300 group-hover:scale-110 group-hover:text-white">
                                                <i class="fa-solid fa-arrow-right text-lg"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>

                <!-- Package Summary Panel -->
                <div class="lg:w-1/3">
                    <div class="sticky top-24">
                        <!-- Summary Card -->
                        <div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 shadow-2xl overflow-hidden animate-slide-up animation-delay-200">
                            <!-- Header -->
                            <div class="p-8 border-b border-gray-100 dark:border-gray-700 bg-gradient-to-r from-gold-500/5 to-transparent">
                                <div class="flex items-center gap-4 mb-3">
                                    <div class="w-12 h-12 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-box text-gold-500 text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('your_package') }}</h4>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ t('your_package_subtext') }}</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Selected Services -->
                            <div class="p-6 max-h-80 overflow-y-auto">
                                @if(count($selectedServices) > 0)
                                    <div class="space-y-3">
                                        @foreach($selectedServices as $service)
                                            <div class="group relative bg-white dark:bg-gray-700/30 rounded-xl p-4 border border-gray-100 dark:border-gray-700 hover:border-gold-500/30 dark:hover:border-gold-500/40 transition-all duration-300">
                                                <div class="flex justify-between items-center">
                                                    <div class="flex-1">
                                                        <h6 class="font-semibold text-gray-900 dark:text-white">{{ $service['name'] }}</h6>
                                                        <p class="text-sm text-gold-500 dark:text-gold-400 mt-1">{{ number_format($service['price'], 2) }} SR</p>
                                                    </div>
                                                    <form action="{{ route('package.remove-service') }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="service_id" value="{{ $service['id'] }}">
                                                        <button type="submit" class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center py-8">
                                        <div class="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-700 dark:to-gray-800 flex items-center justify-center">
                                            <i class="fas fa-box-open text-gray-400 text-2xl"></i>
                                        </div>
                                        <p class="text-gray-500 dark:text-gray-400 font-medium">{{ t('no_service_selected') }}</p>
                                        <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">{{ t('add_service_prompt') }}</p>
                                    </div>
                                @endif
                            </div>

                            <!-- Pricing Summary -->
                            @if(count($selectedServices) > 0)
                                <div class="p-6 bg-gradient-to-b from-gray-50 to-transparent dark:from-gray-700/50 dark:to-transparent border-t border-gray-100 dark:border-gray-700">
                                    <div class="space-y-4">
                                        <div class="flex justify-between items-center pb-3 border-b border-gray-200 dark:border-gray-600">
                                            <span class="text-gray-600 dark:text-gray-400">{{ t('subtotal') }}</span>
                                            <span class="font-semibold text-gray-900 dark:text-white">{{ number_format($totalPrice, 2) }} SR</span>
                                        </div>

                                        <div class="flex justify-between items-center text-xl pt-3">
                                            <span class="font-bold text-gray-900 dark:text-white">{{ t('total') }}</span>
                                            <span class="text-2xl font-bold bg-gradient-to-r from-gold-500 to-gold-400 bg-clip-text text-transparent">
                                                {{ number_format($totalPrice, 2) }} SR
                                            </span>
                                        </div>
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="mt-8 space-y-3">
                                        @if(count($selectedServices) > 0)
                                            <a href="{{ route('request.services.contact') }}" 
                                               class="w-full btn-gold px-8 py-4 bg-gradient-to-r from-gold-500 to-gold-600 text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-gold-500/30 transition-all duration-300 gap-3 flex items-center justify-center">
                                                <i class="fas fa-arrow-right mr-2"></i>
                                                {{ t('continue_button') }}
                                            </a>
                                        @endif

                                        <form action="{{ route('package.clear') }}" method="POST">
                                            @csrf
                                            <button type="submit" 
                                                    class="w-full bg-gray-200/50 dark:bg-gray-700/50 hover:bg-gray-300/50 dark:hover:bg-gray-600/50 text-gray-800 dark:text-gray-200 font-semibold py-3 px-4 rounded-xl transition-all duration-300 flex items-center justify-center border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500">
                                                <i class="fas fa-trash mr-2"></i>
                                                {{ t('clear_package') }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Benefits Card -->
                        <div class="mt-6 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-3xl border border-gray-100 dark:border-gray-700 p-6 animate-slide-up animation-delay-300">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 bg-gradient-to-br from-gold-500/20 to-gold-300/30 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-star text-gold-500"></i>
                                </div>
                                <h5 class="font-bold text-gray-900 dark:text-white">{{ t('why_custom_package') ?? 'Why Choose Custom Package?' }}</h5>
                            </div>

                            <ul class="space-y-4">
                                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-check-circle text-green-500 mt-1 flex-shrink-0"></i>
                                    <span>{{ t('why_1') ?? 'Tailored to your specific security needs' }}</span>
                                </li>
                                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-check-circle text-green-500 mt-1 flex-shrink-0"></i>
                                    <span>{{ t('why_2') ?? 'Cost-effective solutions without compromise' }}</span>
                                </li>
                                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-check-circle text-green-500 mt-1 flex-shrink-0"></i>
                                    <span>{{ t('why_3') ?? 'Flexible scaling as your needs grow' }}</span>
                                </li>
                                <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-check-circle text-green-500 mt-1 flex-shrink-0"></i>
                                    <span>{{ t('why_4') ?? 'Premium support and consultation included' }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <style>
        /* Reuse animations from contact page */
        @keyframes pulse-gold {
            0%, 100% {
                opacity: 0.7;
            }
            50% {
                opacity: 0.4;
            }
        }

        @keyframes gradient-x {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        .animate-pulse-gold {
            animation: pulse-gold 3s ease-in-out infinite;
        }

        .animate-gradient-x {
            background-size: 200% auto;
            animation: gradient-x 3s ease infinite;
        }

        .animate-slide-up {
            animation: slideUp 0.6s ease-out forwards;
            opacity: 0;
        }

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

        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .animation-delay-100 {
            animation-delay: 100ms;
        }

        .animation-delay-200 {
            animation-delay: 200ms;
        }

        .animation-delay-300 {
            animation-delay: 300ms;
        }

        .animation-delay-400 {
            animation-delay: 400ms;
        }

        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
            background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }

        /* Scrollbar Styling */
        .overflow-y-auto::-webkit-scrollbar {
            width: 6px;
        }

        .overflow-y-auto::-webkit-scrollbar-track {
            background: transparent;
        }

        .overflow-y-auto::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, rgba(250, 204, 21, 0.3), rgba(234, 179, 8, 0.3));
            border-radius: 3px;
        }

        .overflow-y-auto::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, rgba(250, 204, 21, 0.5), rgba(234, 179, 8, 0.5));
        }

        /* Country Flag Image Styles */
        .country-flag {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .group:hover .country-flag {
            transform: scale(1.1);
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Add hover effects to country cards
            const countryCards = document.querySelectorAll('.group');
            countryCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-4px)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>
@endsection