@extends('front.master')

@section('header')
    <style>
        .hero-image__single {
            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/storage/{{ $country->country_image ? $country->country_image : '' }}");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            padding: 110px 0px !important;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .hero_text {
            max-width: 100%;
        }

        .hero__title {
            color: #fff;
            font-size: 30px;
            font-weight: 700;
            text-transform: capitalize;
            padding: 10px 0;
        }

        .process__title h2 {
            color: rgb(0, 0, 0);
            font-size: 22px;
            font-weight: 700;
            text-align: center
        }

        .bottom_line {
            max-width: 150px;
            height: 3px;
            background: rgb(7, 0, 132);
            border-radius: 5px;
            margin: 2px auto
        }

        .explore_btn {
            margin: 0 20px 20px;
            background: rgb(7, 0, 132);
            color: white;
            text-transform: capitalize;
            font-size: 13px
        }

        .explore_btn:hover {
            background: rgb(11, 3, 179);
            color: white;
        }

        .top__section {
            padding: 10px 0;
        }

        .top__section h1 {
            font-size: 18px;
            font-weight: 700;
            color: rgb(7, 0, 132);
            text-transform: capitalize;
            text-align: center;
        }

        .top__section h2 {
            font-size: 14px;
            font-weight: 700;
            color: rgb(0, 0, 0);
            text-transform: capitalize;
            text-align: center;
        }

        .top__section h4 {
            font-size: 10px;
            font-weight: 400;
            color: rgb(7, 0, 132);
            text-transform: capitalize;
            text-align: center;
        }

        .middle__section {
            padding: 15px 0;
        }

        .middle__section table th,
        .middle__section table td {
            font-size: 12px;
        }

        .middle__section table td {
            font-weight: 500;
        }

        .middle__section table th {
            font-weight: 700;
            text-align: right;
        }
    </style>
    <style>
        .custom__tab {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 0;
        }

        .custom__tab li a {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin: 0 15px;
            font-size: 15px;
            font-weight: normal;
            color: #000;
            text-decoration: none;
        }

        .custom__tab li a:hover,
        .custom__tab li a.active {
            color: blue
        }

        .custom__tab li a span {
            font-size: 20px;
        }
    </style>
    <script>
        function tabs() {
            return {
                activeTab: 'Tourist',
                setActiveTab(tab) {
                    this.activeTab = tab;
                },
                isActive(tab) {
                    return this.activeTab === tab;
                }
            };
        }
    </script>

    <div class="container-fluid px-0" id="hero">
        <div class="hero-image__single ">
            <div class="container max-w-[1400px] mx-auto">
                <div class="hero_text">
                    <img src="/storage/{{ $country->country_flag ? $country->country_flag : '' }}" alt=""
                        width="100">
                    <h1 class="hero__title">{{ $country->name }}</h1>
                    <p class=" text-white lg:min-w-[70%] min-w-full">
                        {{ $country->description ? $country->description : '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-20 mx-auto">
        <div class="row">
            <div class="col-md-12">
                <div class="visa_process">
                    <div class="process__title">
                        <h2>{{ $country->name }} Visa Plan</h2>
                        <div class="bottom_line"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row my-5">
            <div class="bg-gray-50 container mx-auto py-6" x-data="tabs()">
                <!-- Tabs Navigation -->
                <ul class="flex justify-center border-b border-gray-200" role="tablist">
                    <li class="mr-2">
                        <button @click="setActiveTab('Tourist')"
                            :class="isActive('Tourist') ? 'text-blue-500 border-blue-500' : 'text-gray-500 hover:text-blue-500'"
                            class="inline-block py-2 px-4 font-medium border-b-2">
                            <i class="fas fa-motorcycle"></i> Tourist
                        </button>
                    </li>
                    <li class="mr-2">
                        <button @click="setActiveTab('Business')"
                            :class="isActive('Business') ? 'text-blue-500 border-blue-500' : 'text-gray-500 hover:text-blue-500'"
                            class="inline-block py-2 px-4 font-medium border-b-2">
                            <i class="fas fa-user-tie"></i> Business
                        </button>
                    </li>
                    <li>
                        <button @click="setActiveTab('Transit')"
                            :class="isActive('Transit') ? 'text-blue-500 border-blue-500' : 'text-gray-500 hover:text-blue-500'"
                            class="inline-block py-2 px-4 font-medium border-b-2">
                            <i class="fas fa-anchor"></i> Transit
                        </button>
                    </li>
                </ul>

                <!-- Tabs Content -->
                <div class="mt-6 px-4">
                    <!-- Tourist Tab -->
                    <div x-show="isActive('Tourist')" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @if (count($visa) > 0)
                            @foreach ($visa as $item)
                                <div
                                    class=" bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                                    <div class="relative">
                                        <!-- Decorative background pattern -->
                                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10">
                                        </div>

                                        <!-- Main content -->
                                        <div class="p-6 relative">
                                            <!-- Header section -->
                                            <div class="flex items-start justify-between mb-6">
                                                <div>
                                                    <h1 class="text-2xl font-bold text-gray-800">{{ $item->name }}</h1>
                                                    <p class="text-sm text-gray-500 mt-1">{{ $item->exp }}</p>
                                                </div>
                                                <span
                                                    class="px-3 py-1 text-sm font-medium rounded-full
                                                    {{ $item->entry_type == 'single_entry'
                                                        ? 'bg-blue-100 text-blue-700'
                                                        : ($item->entry_type == 'double_entry'
                                                            ? 'bg-purple-100 text-purple-700'
                                                            : ($item->entry_type == 'multi_entry'
                                                                ? 'bg-green-100 text-green-700'
                                                                : 'bg-orange-100 text-orange-700')) }}">
                                                    {{ str_replace('_', ' ', ucfirst($item->entry_type)) }}
                                                </span>
                                            </div>

                                            <!-- Price tag -->
                                            <div class="flex items-baseline mb-6">
                                                <span
                                                    class="text-3xl font-bold text-blue-600">${{ $item->amount ? $item->amount : 'N/A' }}</span>
                                                <span class="ml-2 text-gray-500">USD</span>
                                            </div>

                                            <!-- Info grid -->
                                            <div class="grid grid-cols-2 gap-4 mb-6">
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Processing Time</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->est_time ? $item->est_time : 'N/A' }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Validity</p>
                                                    <p class="font-semibold text-gray-800">{{ $item->exp }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Stay Duration</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->stay_time ? $item->stay_time : 'N/A' }} Days</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Health Insurance</p>
                                                    <p
                                                        class="font-semibold {{ $item->country->health_insurance == 'required' ? 'text-red-600' : 'text-green-600' }}">
                                                        {{ $item->country->health_insurance == 'required' ? 'Required' : 'Not Required' }}
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Features list -->
                                            <div class="space-y-2 mb-6">
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    Fast Processing
                                                </div>
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    24/7 Support
                                                </div>
                                            </div>

                                            <!-- Application form -->
                                            <form action="{{ route('start.reg') }}" method="get" class="mt-4">
                                                <input type="hidden" name="to_country" value="{{ $country->id }}">
                                                <input type="hidden" name="from_country" value="{{ $country->id }}">
                                                <input type="hidden" name="nationality" value="BD">
                                                <input type="hidden" name="visa" value="{{ $item->id }}">
                                                <button type="submit"
                                                    class="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold
                        hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                        transform transition-all duration-300 hover:scale-[1.02]">
                                                    Continue Application
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-span-full text-center py-10">
                                <h2 class="text-xl font-semibold text-gray-600">No Visa Found!</h2>
                            </div>
                        @endif
                    </div>
                    <div x-show="isActive('Business')" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @if (count($Business) > 0)
                            @foreach ($Business as $item)
                                <div
                                    class=" bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                                    <div class="relative">
                                        <!-- Decorative background pattern -->
                                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10">
                                        </div>

                                        <!-- Main content -->
                                        <div class="p-6 relative">
                                            <!-- Header section -->
                                            <div class="flex items-start justify-between mb-6">
                                                <div>
                                                    <h1 class="text-2xl font-bold text-gray-800">{{ $item->name }}</h1>
                                                    <p class="text-sm text-gray-500 mt-1">{{ $item->exp }}</p>
                                                </div>
                                                <span
                                                    class="px-3 py-1 text-sm font-medium rounded-full
                                                    {{ $item->entry_type == 'single_entry'
                                                        ? 'bg-blue-100 text-blue-700'
                                                        : ($item->entry_type == 'double_entry'
                                                            ? 'bg-purple-100 text-purple-700'
                                                            : ($item->entry_type == 'multi_entry'
                                                                ? 'bg-green-100 text-green-700'
                                                                : 'bg-orange-100 text-orange-700')) }}">
                                                    {{ str_replace('_', ' ', ucfirst($item->entry_type)) }}
                                                </span>
                                            </div>

                                            <!-- Price tag -->
                                            <div class="flex items-baseline mb-6">
                                                <span
                                                    class="text-3xl font-bold text-blue-600">${{ $item->amount ? $item->amount : 'N/A' }}</span>
                                                <span class="ml-2 text-gray-500">USD</span>
                                            </div>

                                            <!-- Info grid -->
                                            <div class="grid grid-cols-2 gap-4 mb-6">
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Processing Time</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->est_time ? $item->est_time : 'N/A' }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Validity</p>
                                                    <p class="font-semibold text-gray-800">{{ $item->exp }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Stay Duration</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->stay_time ? $item->stay_time : 'N/A' }} Days</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Health Insurance</p>
                                                    <p
                                                        class="font-semibold {{ $item->country->health_insurance == 'required' ? 'text-red-600' : 'text-green-600' }}">
                                                        {{ $item->country->health_insurance == 'required' ? 'Required' : 'Not Required' }}
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Features list -->
                                            <div class="space-y-2 mb-6">
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    Fast Processing
                                                </div>
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    24/7 Support
                                                </div>
                                            </div>

                                            <!-- Application form -->
                                            <form action="{{ route('start.reg') }}" method="get" class="mt-4">
                                                <input type="hidden" name="to_country" value="{{ $country->id }}">
                                                <input type="hidden" name="from_country" value="{{ $country->id }}">
                                                <input type="hidden" name="nationality" value="BD">
                                                <input type="hidden" name="visa" value="{{ $item->id }}">
                                                <button type="submit"
                                                    class="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold
                        hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                        transform transition-all duration-300 hover:scale-[1.02]">
                                                    Continue Application
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-span-full text-center py-10">
                                <h2 class="text-xl font-semibold text-gray-600">No Visa Found!</h2>
                            </div>
                        @endif
                    </div>
                    <div x-show="isActive('Transit')" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        @if (count($Transit) > 0)
                            @foreach ($Transit as $item)
                                {{-- <div class="bg-white border rounded-lg shadow-sm overflow-hidden">
                                    <div class="p-4">
                                        <div class="mb-4">
                                            <h1 class="text-lg font-semibold">{{ $item->name }}</h1>
                                            <h2 class="text-sm text-gray-500">{{ $item->exp }}</h2>
                                            <h4 class="text-gray-700">
                                                @if ($item->entry_type == 'single_entry')
                                                    Single Entry
                                                @elseif($item->entry_type == 'double_entry')
                                                    Double Entry
                                                @elseif($item->entry_type == 'multi_entry')
                                                    Multi Entry
                                                @else
                                                    Triple Entry
                                                @endif
                                            </h4>
                                            <h2 class="text-blue-600 text-lg font-bold">$
                                                {{ $item->amount ? $item->amount : 'N/A' }}</h2>
                                        </div>
                                        <table class="w-full text-sm text-left text-gray-500">
                                            <tbody>
                                                <tr>
                                                    <td class="py-2">Processing Time:</td>
                                                    <th class="py-2 text-gray-900">
                                                        {{ $item->est_time ? $item->est_time : 'N/A' }}</th>
                                                </tr>
                                                <tr>
                                                    <td class="py-2">Validity:</td>
                                                    <th class="py-2 text-gray-900">{{ $item->exp }}</th>
                                                </tr>
                                                <tr>
                                                    <td class="py-2">Stay:</td>
                                                    <th class="py-2 text-gray-900">
                                                        {{ $item->stay_time ? $item->stay_time : 'N/A' }} Days</th>
                                                </tr>
                                                <tr>
                                                    <td class="py-2">Health Insurance:</td>
                                                    <th class="py-2 text-gray-900">
                                                        {{ $item->country->health_insurance == 'required' ? 'Required' : 'Not Required' }}
                                                    </th>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="p-4">
                                        <form action="{{ route('start.reg') }}" method="get">
                                            <input type="hidden" name="to_country" value="{{ $country->id }}">
                                            <input type="hidden" name="from_country" value="{{ $country->id }}">
                                            <input type="hidden" name="nationality" value="BD">
                                            <input type="hidden" name="visa" value="{{ $item->id }}">
                                            <button type="submit"
                                                class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600">Continue</button>
                                        </form>
                                    </div>
                                </div> --}}
                                <div
                                    class=" bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
                                    <div class="relative">
                                        <!-- Decorative background pattern -->
                                        <div class="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10">
                                        </div>

                                        <!-- Main content -->
                                        <div class="p-6 relative">
                                            <!-- Header section -->
                                            <div class="flex items-start justify-between mb-6">
                                                <div>
                                                    <h1 class="text-2xl font-bold text-gray-800">{{ $item->name }}</h1>
                                                    <p class="text-sm text-gray-500 mt-1">{{ $item->exp }}</p>
                                                </div>
                                                <span
                                                    class="px-3 py-1 text-sm font-medium rounded-full
                                                    {{ $item->entry_type == 'single_entry'
                                                        ? 'bg-blue-100 text-blue-700'
                                                        : ($item->entry_type == 'double_entry'
                                                            ? 'bg-purple-100 text-purple-700'
                                                            : ($item->entry_type == 'multi_entry'
                                                                ? 'bg-green-100 text-green-700'
                                                                : 'bg-orange-100 text-orange-700')) }}">
                                                    {{ str_replace('_', ' ', ucfirst($item->entry_type)) }}
                                                </span>
                                            </div>

                                            <!-- Price tag -->
                                            <div class="flex items-baseline mb-6">
                                                <span
                                                    class="text-3xl font-bold text-blue-600">${{ $item->amount ? $item->amount : 'N/A' }}</span>
                                                <span class="ml-2 text-gray-500">USD</span>
                                            </div>

                                            <!-- Info grid -->
                                            <div class="grid grid-cols-2 gap-4 mb-6">
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Processing Time</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->est_time ? $item->est_time : 'N/A' }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Validity</p>
                                                    <p class="font-semibold text-gray-800">{{ $item->exp }}</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Stay Duration</p>
                                                    <p class="font-semibold text-gray-800">
                                                        {{ $item->stay_time ? $item->stay_time : 'N/A' }} Days</p>
                                                </div>
                                                <div class="space-y-1">
                                                    <p class="text-sm text-gray-500">Health Insurance</p>
                                                    <p
                                                        class="font-semibold {{ $item->country->health_insurance == 'required' ? 'text-red-600' : 'text-green-600' }}">
                                                        {{ $item->country->health_insurance == 'required' ? 'Required' : 'Not Required' }}
                                                    </p>
                                                </div>
                                            </div>

                                            <!-- Features list -->
                                            <div class="space-y-2 mb-6">
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    Fast Processing
                                                </div>
                                                <div class="flex items-center text-sm text-gray-600">
                                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor"
                                                        viewBox="0 0 20 20">
                                                        <path
                                                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
                                                    </svg>
                                                    24/7 Support
                                                </div>
                                            </div>

                                            <!-- Application form -->
                                            <form action="{{ route('start.reg') }}" method="get" class="mt-4">
                                                <input type="hidden" name="to_country" value="{{ $country->id }}">
                                                <input type="hidden" name="from_country" value="{{ $country->id }}">
                                                <input type="hidden" name="nationality" value="BD">
                                                <input type="hidden" name="visa" value="{{ $item->id }}">
                                                <button type="submit"
                                                    class="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold
                        hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
                        transform transition-all duration-300 hover:scale-[1.02]">
                                                    Continue Application
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="col-span-full text-center py-10">
                                <h2 class="text-xl font-semibold text-gray-600">No Visa Found!</h2>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
@endsection

@section('custom_script')
    @if (session()->has('message'))
        <script>
            toastr.success('{{ session('message') }}');
        </script>
    @endif
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.from_country').select2();
            $('.to_country').select2();
        });
    </script>
@endsection