@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">

                <!-- Services 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('services') ?? 'SERVICES' }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="text-3xl font-bold text-gray-900 dark:text-white mb-3">{{ t('choose_services') }}
                                </h4>
                                <p class="text-gray-600 dark:text-gray-400">{{ t('choose_services_subtext') }}</p>
                            </div>
                            <a href="{{ route('package.build') }}"
                                class="inline-flex items-center gap-3 px-5 py-3 bg-gradient-to-r from-gold-500/10 to-gold-400/5 dark:from-gold-500/20 dark:to-gold-400/10 text-gold-600 dark:text-gold-400 hover:text-gold-700 dark:hover:text-gold-300 rounded-xl border border-gold-200 dark:border-gold-800 hover:border-gold-300 dark:hover:border-gold-700 transition-all duration-300 group">
                                <i
                                    class="fas fa-arrow-left text-sm group-hover:-translate-x-1 transition-transform duration-300"></i>
                                <span class="font-medium">{{ t('back_to_country') ?? 'Back to Countries' }}</span>
                            </a>
                        </div>
                    </div>

                    <div class="grid gap-6">
                        @foreach ($services as $service)
                            <div
                                class="group 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">
                                        <!-- Service Icon & 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">
                                                <i class="fas fa-shield-alt text-gold-500 text-xl"></i>
                                            </div>
                                            <div>
                                                <h5 class="text-xl font-bold text-gray-900 dark:text-white">
                                                    {{ $service->name }}</h5>
                                                @if (isset($selectedServices[$service->id]))
                                                    <span
                                                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-green-500/20 to-green-400/10 dark:from-green-500/30 dark:to-green-400/5 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-800 mt-2">
                                                        <i class="fas fa-check-circle mr-1.5 text-xs"></i>
                                                        {{ t('added') ?? 'ADDED' }}
                                                    </span>
                                                @endif
                                            </div>
                                        </div>

                                        <!-- Service Description -->
                                        <p class="text-gray-600 dark:text-gray-400 mb-6 line-clamp-2">
                                            {{ $service->description ?? t('default_service_description') }}
                                        </p>

                                        <!-- Price & Action -->
                                        <div
                                            class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-700">
                                            <div>

                                                <span class="text-2xl font-bold text-gold-500 dark:text-gold-400 ml-2">
                                                    {{ number_format($service->price, 2) }} SR
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Add/Remove Button -->
                                    <div class="ml-6">
                                        @if (isset($selectedServices[$service->id]))
                                            <form action="{{ route('package.remove-service') }}" method="POST"
                                                class="inline">
                                                @csrf
                                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                                <button type="submit"
                                                    class="w-14 h-14 flex items-center justify-center bg-gradient-to-br from-red-500/20 to-red-400/20 dark:from-red-500/30 dark:to-red-400/5 text-red-600 dark:text-red-400 rounded-xl hover:bg-red-500/30 dark:hover:bg-red-500/40 transition-all duration-300 hover:scale-110 group/remove">
                                                    <i class="fa-solid fa-minus text-lg group-hover/remove:text-white"></i>
                                                </button>
                                            </form>
                                        @else
                                            <form action="{{ route('package.add-service') }}" method="POST"
                                                class="inline">
                                                @csrf
                                                <input type="hidden" name="service_id" value="{{ $service->id }}">
                                                <button type="submit"
                                                    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 hover:bg-gold-500/30 dark:hover:bg-gold-500/40 transition-all duration-300 hover:scale-110 group/add">
                                                    <i class="fa-solid fa-plus text-lg group-hover/add:text-white"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @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));
        }
    </style>

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

                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });

            // Animate price numbers
            const prices = document.querySelectorAll('.text-gold-500.text-2xl');
            prices.forEach(price => {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const value = parseFloat(price.textContent.replace(/[^0-9.-]+/g,
                                ''));
                            let start = 0;
                            const end = value;
                            const duration = 1500;
                            const increment = end / (duration / 16);

                            const timer = setInterval(() => {
                                start += increment;
                                if (start >= end) {
                                    start = end;
                                    clearInterval(timer);
                                }
                                price.textContent = start.toFixed(2) + ' SR';
                            }, 16);

                            observer.unobserve(entry.target);
                        }
                    });
                }, {
                    threshold: 0.5
                });

                observer.observe(price);
            });
        });
    </script>
@endsection