@extends('front.master')
@section('content')
    <style>
        .hero-image__single {
            background-image: linear-gradient(rgba(0, 0, 0, 0.712), rgba(0, 0, 0, 0.5)), url("https://unsplash.com/photos/8Nubk9J1aIg/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MzJ8fHRvdXJ8ZW58MHx8fHwxNjU1OTc1NDkw&force=true&w=1920");
            max-height: 300px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            padding: 150px 140px !important;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .hero_text {
            max-width: 100%;
        }

        .hero__title {
            color: #fff;
            font-size: 40px;
            font-weight: 700;
            text-transform: capitalize;
            text-align: center;
        }
    </style>
    <div class="container-fluid px-0" id="hero">
        <div class="hero-image__single">
            <div class="hero_text">
                <h2 class=" lg:text-4xl md:text-xl text-base p-3 text-center  text-white font-bold ">Get Your Travel Document
                    for {{ $to_Country->name }}</h2>
            </div>
        </div>
    </div>
    <div class=" bg-gray-50">
        <div class="container mx-auto py-20">
            <div class="row">
                <div class="col-md-12 mx-auto">
                    <div class="card mt-3 mb-3">
                        <div class="card-body">
                            <div class=" flex items-start justify-between gap-6 flex-col md:flex-row">
                                <div x-data="multistepForm()" class="w-full md:w-[70%] bg-white rounded-lg shadow-sm p-5">
                                    <div class="w-full mb-6 bg-blue-100 p-2 flex items-center rounded-md shadow-md">
                                        <div class="flex justify-between items-center flex-1">
                                            <!-- Step Indicators -->
                                            <template x-for="(label, index) in stepLabels" :key="index">
                                                <div class="flex items-center justify-center gap-2 md:flex-row flex-col">
                                                    <div :class="{
                                                        'bg-indigo-600 text-white': currentStep > index,
                                                        'bg-gray-300 text-gray-800': currentStep <= index
                                                    }"
                                                        class="w-8 h-8 flex items-center justify-center rounded-full font-semibold">
                                                        <span x-text="index + 1"></span>
                                                    </div>
                                                    <span x-text="label" class=" text-center text-[12px] font-bold"></span>
                                                    <!-- Line between steps -->
                                                    <div x-show="index < label.length - 1" class="flex-1 h-1 mx-2"
                                                        :class="{
                                                            'bg-indigo-600': currentStep > index + 1,
                                                            'bg-gray-300': currentStep <= index + 1
                                                        }">
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>

                                    <form id="msform" action="{{ route('response.save') }}" method="post"
                                        enctype="multipart/form-data" class="space-y-8">
                                        @csrf
                                        <input type="text" name="from_country" class=" hidden" id="from_country"
                                            value="BD">
                                        <!-- Step 1: Start Your Application -->
                                        <fieldset x-show="currentStep === 1" x-transition class="space-y-6">
                                            <div class="">
                                                <h2 class="text-2xl font-bold text-gray-800 mb-4">Start Your Application
                                                </h2>

                                                <div class=" flex flex-col md:flex-row items-center justify-between gap-3">
                                                    <!-- Country of Origin -->
                                                    <div class="mb-4 w-full md:w-1/2">
                                                        <label for="to_country"
                                                            class="block text-base mb-2 font-medium text-gray-700 text-left">Destination
                                                            Country</label>
                                                        <select name="to_country" id="to_country"
                                                            class="mt-2 text-left block py-4 w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            @foreach ($allCountry as $item)
                                                                <option value="{{ $item->id }}"
                                                                    {{ $item->id == $to_Country->id ? 'selected' : '' }}>
                                                                    {{ $item->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('to_country')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror

                                                    </div>

                                                    <!-- Visa Application -->
                                                    <div class="mb-4 w-full md:w-1/2">
                                                        <label for="visa_id"
                                                            class="block text-base mb-2 font-medium text-gray-700 text-left">Applying
                                                            for</label>
                                                        <select name="visa_id" id="visa_id"
                                                            class="mt-2 p-3 block w-full rounded-md border-[1px] border-gray-400 focus:ring-indigo-500 focus:border-indigo-500">
                                                            <option value="{{ $allVisa->id }}"
                                                                {{ $allVisa->id == $visa->id ? 'selected' : '' }}>
                                                                {{ $allVisa->name }} - {{ $allVisa->exp }},
                                                                @if ($allVisa->entry_type == 'single_entry')
                                                                    Single entry
                                                                @elseif($allVisa->entry_type == 'multi_entry')
                                                                    Multi entry
                                                                @elseif($allVisa->entry_type == 'double_entry')
                                                                    Double entry
                                                                @else
                                                                    Triple entry
                                                                @endif
                                                            </option>
                                                        </select>
                                                        @error('visa_id')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex justify-end">
                                                <button @click="nextStep" type="button" name="next"
                                                    class="next bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-indigo-700">
                                                    Next Step
                                                </button>
                                            </div>
                                        </fieldset>

                                        <!-- Step 2: General Information -->
                                        <fieldset x-show="currentStep === 2" x-transition class="space-y-6">
                                            <div class="">
                                                <h2 class="text-2xl font-bold text-gray-800 mb-4">General Information
                                                </h2>

                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                                    <!-- Start of Trip -->
                                                    <div class="">
                                                        <label for="start_trip"
                                                            class="block text-base mb-2 font-medium text-gray-700">Estimated
                                                            Start of
                                                            Trip</label>
                                                        <div class=" relative">
                                                            <input type="text" placeholder="Select a date"
                                                                name="start_trip" id="start_trip"
                                                                class="datepicker mt-2 p-3 block w-full rounded-md border-[1px] border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <!-- Calendar Icon -->
                                                            <span
                                                                class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
                                                                <i class="fas fa-calendar-alt text-gray-500"></i>
                                                            </span>

                                                        </div>
                                                        @error('start_trip')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- End of Trip -->
                                                    <div class="">
                                                        <label for="end_trip"
                                                            class="block text-base mb-2 font-medium text-gray-700">Estimated
                                                            End
                                                            of
                                                            Trip</label>
                                                        <div class=" relative">
                                                            <input type="text" placeholder="Select a date"
                                                                name="end_trip" id="end_trip"
                                                                class=" datepicker mt-2 p-3 block w-full rounded-md border-[1px] border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <!-- Calendar Icon -->
                                                            <span
                                                                class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
                                                                <i class="fas fa-calendar-alt text-gray-500"></i>
                                                            </span>
                                                        </div>
                                                        @error('end_trip')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Email -->
                                                    <div class="">
                                                        <label for="email"
                                                            class="block text-base mb-2 font-medium text-gray-700">Email
                                                            Address</label>
                                                        <input type="email" name="email"
                                                            placeholder=" Your valid email address" id="email"
                                                            class="mt-2 block w-full p-3 border-[1px] rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                        @error('email')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex justify-between">
                                                <button @click="prevStep" type="button" name="previous"
                                                    class="previous bg-gray-300 text-gray-800 px-4 py-2 rounded-lg shadow-md hover:bg-gray-400">
                                                    Previous
                                                </button>
                                                <button @click="nextStep" type="button" name="next"
                                                    class="next bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-indigo-700">
                                                    Next Step
                                                </button>
                                            </div>
                                        </fieldset>

                                        <!-- Step 3: Applicant Information -->
                                        <fieldset x-show="currentStep === 3" x-transition class="space-y-6">
                                            <div class="">
                                                <h2 class="text-2xl font-bold text-gray-800 mb-4">Applicant(s)
                                                    Information</h2>

                                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                                    <!-- Nationality -->
                                                    <div>
                                                        <label for="nationality"
                                                            class="block text-base mb-2 font-medium text-gray-700">Nationality</label>
                                                        <select name="nationality" id="nationality"
                                                            class="mt-2 p-3 border-[1px] block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            @foreach ($countryList as $val)
                                                                <option value="{{ $val->iso }}"
                                                                    {{ $val->iso == $nationality_id ? 'selected' : '' }}>
                                                                    {{ $val->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('nationality')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- First and Middle Name -->
                                                    <div>
                                                        <label for="first_name"
                                                            class="block text-base mb-2 font-medium text-gray-700">First
                                                            and
                                                            Middle
                                                            Name</label>
                                                        <input type="text" placeholder=" First and middle name"
                                                            name="first_name" id="first_name"
                                                            class="mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                        @error('first_name')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Last Name -->
                                                    <div>
                                                        <label for="last_name"
                                                            class="block text-base mb-2 font-medium text-gray-700">Last
                                                            Name</label>
                                                        <input type="text" placeholder=" Last name" name="last_name"
                                                            id="last_name"
                                                            class="mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                        @error('last_name')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Gender -->
                                                    <div>
                                                        <label for="gender"
                                                            class="block text-base mb-2 font-medium text-gray-700">Gender</label>
                                                        <select name="gender" id="gender"
                                                            class="mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <option value="">Please select</option>
                                                            <option value="male">Male</option>
                                                            <option value="female">Female</option>
                                                        </select>
                                                        @error('gender')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Birthday -->
                                                    <div>
                                                        <label for="b_day"
                                                            class="block text-base mb-2 font-medium text-gray-700">Birthday</label>
                                                        <div class="relative">
                                                            <input type="text" placeholder=" Select date"
                                                                name="b_day" id="b_day"
                                                                class=" datepicker mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <!-- Calendar Icon -->
                                                            <span
                                                                class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
                                                                <i class="fas fa-calendar-alt text-gray-500"></i>
                                                            </span>
                                                        </div>
                                                        @error('b_day')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Country Of Birth -->
                                                    <div>
                                                        <label for="country_birth"
                                                            class="block text-base mb-2 font-medium text-gray-700">Country
                                                            of
                                                            Birth</label>
                                                        <select name="country_birth" id="country_birth"
                                                            class=" mt-2 p-3 border-[1px] block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            @foreach ($countryList as $item)
                                                                <option value="{{ $item->iso }}"
                                                                    {{ $item->iso == $nationality_id ? 'selected' : '' }}>
                                                                    {{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('country_birth')
                                                            <span class=" text-sm text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <!-- Country Of Residence -->
                                                    <div>
                                                        <label for="country_residence"
                                                            class="block text-base mb-2 font-medium text-gray-700">Country
                                                            of
                                                            Residence</label>
                                                        <select name="country_residence" id="country_residence"
                                                            class=" mt-2 p-3 border-[1px] block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            @foreach ($countryList as $item)
                                                                <option value="{{ $item->iso }}"
                                                                    {{ $item->iso == $nationality_id ? 'selected' : '' }}>
                                                                    {{ $item->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('country_residence')
                                                            <span class=" text-sm text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <!-- Passport Number -->
                                                    <div>
                                                        <label for="passport_nmbr"
                                                            class="block text-base mb-2 font-medium text-gray-700">Passport
                                                            Number</label>
                                                        <input type="text" placeholder="Passport number"
                                                            name="passport_nmbr" id="passport_nmbr"
                                                            class="mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                        @error('passport_nmbr')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <!-- Passport Issue Date -->
                                                    <div>
                                                        <label for="passport_issue"
                                                            class="block text-base mb-2 font-medium text-gray-700">Passport
                                                            Issue Date</label>
                                                        <div class="relative">
                                                            <input type="text" placeholder="Select date"
                                                                name="passport_issue" id="passport_issue"
                                                                class="datepicker mt-2 block p-3 border-[1px] w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <!-- Calendar Icon -->
                                                            <span
                                                                class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
                                                                <i class="fas fa-calendar-alt text-gray-500"></i>
                                                            </span>
                                                        </div>

                                                        @error('passport_issue')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                    <!-- Passport Expiration -->
                                                    <div>
                                                        <label for="passport_exp"
                                                            class="block text-base mb-2 font-medium text-gray-700">Passport
                                                            Expiration</label>
                                                        <div class="relative">
                                                            <input type="text" placeholder="Select date"
                                                                name="passport_exp" id="passport_exp"
                                                                class="datepicker mt-2 p-3 border-[1px] block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                            <!-- Calendar Icon -->
                                                            <span
                                                                class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none">
                                                                <i class="fas fa-calendar-alt text-gray-500"></i>
                                                            </span>
                                                        </div>

                                                        @error('passport_exp')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Applicant Photo Upload -->
                                                    <div class="mb-4">
                                                        <label for="applicant_photo"
                                                            class="block text-sm font-semibold text-gray-700">Applicant
                                                            Photo</label>
                                                        <div x-data="{ preview: null }" class="relative mt-2">
                                                            <input type="file" name="applicant_photo"
                                                                id="applicant_photo" accept="image/*"
                                                                @change="let file = $event.target.files[0]; preview = file ? URL.createObjectURL(file) : null"
                                                                class="hidden">

                                                            <label for="applicant_photo"
                                                                class="w-full flex items-center justify-center border border-dashed border-gray-300 rounded-md p-3 cursor-pointer hover:border-indigo-500 transition">
                                                                <template x-if="preview">
                                                                    <img :src="preview"
                                                                        class="h-20 w-20 object-cover rounded-md">
                                                                </template>
                                                                <template x-if="!preview">
                                                                    <span class="text-sm text-gray-500">Click to upload an
                                                                        image</span>
                                                                </template>
                                                            </label>
                                                        </div>

                                                        @error('applicant_photo')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Passport Image Upload -->
                                                    <div class="mb-4">
                                                        <label for="passport_image"
                                                            class="block text-sm font-semibold text-gray-700">Passport
                                                            Image</label>
                                                        <div x-data="{ preview: null }" class="relative mt-2">
                                                            <input type="file" name="passport_image"
                                                                id="passport_image" accept="image/*"
                                                                @change="let file = $event.target.files[0]; preview = file ? URL.createObjectURL(file) : null"
                                                                class="hidden">

                                                            <label for="passport_image"
                                                                class="w-full flex items-center justify-center border border-dashed border-gray-300 rounded-md p-3 cursor-pointer hover:border-indigo-500 transition">
                                                                <template x-if="preview">
                                                                    <img :src="preview"
                                                                        class="h-20 w-20 object-cover rounded-md">
                                                                </template>
                                                                <template x-if="!preview">
                                                                    <span class="text-sm text-gray-500">Upload a passport
                                                                        image</span>
                                                                </template>
                                                            </label>
                                                        </div>

                                                        @error('passport_image')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    <!-- Multiple Image Upload with Remove Button -->
                                                    <div class="mb-4">
                                                        <label for="other_images"
                                                            class="block text-sm font-semibold text-gray-700">Other
                                                            Documents</label>
                                                        <div x-data="{ previews: [] }" class="relative mt-2">
                                                            <input type="file" name="other_images[]" id="other_images"
                                                                multiple
                                                                @change="Array.from($event.target.files).forEach(file => previews.push({ url: URL.createObjectURL(file), file, name: file.name, type: file.type }))"
                                                                class="hidden">

                                                            <label for="other_images"
                                                                class="w-full flex items-center justify-center border border-dashed border-gray-300 rounded-md p-3 cursor-pointer hover:border-indigo-500 transition">
                                                                <span class="text-sm text-gray-500"
                                                                    x-show="previews.length === 0">Upload multiple
                                                                    files</span>
                                                            </label>

                                                            <!-- Preview images or file names with icons -->
                                                            <div class="mt-2 flex gap-2 flex-wrap">
                                                                <template x-for="(file, index) in previews"
                                                                    :key="index">
                                                                    <div class="relative">
                                                                        <!-- Image Preview -->
                                                                        <template x-if="file.type.startsWith('image/')">
                                                                            <div class="relative">
                                                                                <img :src="file.url"
                                                                                    class="h-16 w-16 object-cover rounded-md border">
                                                                                <button type="button"
                                                                                    @click="previews.splice(index, 1)"
                                                                                    class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold shadow">
                                                                                    &times;
                                                                                </button>
                                                                            </div>
                                                                        </template>

                                                                        <!-- PDF Preview -->
                                                                        <template x-if="file.type === 'application/pdf'">
                                                                            <div
                                                                                class="relative flex items-center space-x-2">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    class="h-10 w-10 text-red-600"
                                                                                    fill="none" viewBox="0 0 24 24"
                                                                                    stroke="currentColor">
                                                                                    <path stroke-linecap="round"
                                                                                        stroke-linejoin="round"
                                                                                        stroke-width="2"
                                                                                        d="M10 12h6M10 16h6M10 8h6M6 3v18m6-6v-3a3 3 0 1 1 6 0v3">
                                                                                    </path>
                                                                                </svg>
                                                                                <span class="text-sm text-gray-700"
                                                                                    x-text="file.name"></span>
                                                                                <button type="button"
                                                                                    @click="previews.splice(index, 1)"
                                                                                    class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold shadow">
                                                                                    &times;
                                                                                </button>
                                                                            </div>
                                                                        </template>

                                                                        <!-- For other document types (e.g., Word, Excel) -->
                                                                        <template
                                                                            x-if="!file.type.startsWith('image/') && file.type !== 'application/pdf'">
                                                                            <div
                                                                                class="relative flex items-center space-x-2">
                                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    class="h-10 w-10 text-blue-600"
                                                                                    fill="none" viewBox="0 0 24 24"
                                                                                    stroke="currentColor">
                                                                                    <path stroke-linecap="round"
                                                                                        stroke-linejoin="round"
                                                                                        stroke-width="2"
                                                                                        d="M7 4v16h14V4H7zm0 0l7 7 7-7">
                                                                                    </path>
                                                                                </svg>
                                                                                <span class="text-sm text-gray-700"
                                                                                    x-text="file.name"></span>
                                                                                <button type="button"
                                                                                    @click="previews.splice(index, 1)"
                                                                                    class="absolute -top-2 -right-2 bg-red-600 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold shadow">
                                                                                    &times;
                                                                                </button>
                                                                            </div>
                                                                        </template>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        </div>

                                                        @error('other_images')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="flex justify-between">
                                                <button @click="prevStep" type="button" name="previous"
                                                    class="previous bg-gray-300 text-gray-800 px-4 py-2 rounded-lg shadow-md hover:bg-gray-400">
                                                    Previous
                                                </button>
                                                <button @click="nextStep" type="button" name="next"
                                                    class="next bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-indigo-700">
                                                    Next Step
                                                </button>
                                            </div>
                                        </fieldset>
                                        <!-- Step 4: Estimated Processing Time and E-Visa Fee -->
                                        <fieldset x-show="currentStep === 4" x-transition class="space-y-6">
                                            <div class="">
                                                <h2 class="text-lg font-semibold text-gray-800 mb-4">Estimated Processing
                                                    Time and E-Visa Fee</h2>

                                                <div class="grid grid-cols-1 sm:grid-cols-1 gap-6 items-center">
                                                    @if (sizeof($estimate) > 0)
                                                        <div>
                                                            <label for="estimate_id"
                                                                class="block text-base mb-2 font-medium text-gray-700">Estimate</label>
                                                            <select name="estimate_id" id="estimate_id"
                                                                class="mt-2 p-3 border-[1px] block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                                                <option value="">Please select</option>
                                                                @foreach ($estimate as $item)
                                                                    <option value="{{ $item->id }}">
                                                                        {{ $item->estimate->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('estimate_id')
                                                                <span class="text-sm text-red-600">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <div class=" flex items-center mt-2">
                                                            <input type="hidden" name="estimate_price"
                                                                id="estimate_price">
                                                            <input type="checkbox" name = 'policy' class=" form-check">
                                                            <label for="policy"
                                                                style="margin-bottom: 0;margin-left:4px">I agree
                                                                with your <a target="__blank"
                                                                    href="/terms-condition">terms and
                                                                    condition</a></label>
                                                        </div>
                                                        @error('policy')
                                                            <span class="text-sm text-red-600">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex justify-between">
                                                <button @click="prevStep" type="button" name="previous"
                                                    class="previous bg-gray-300 text-gray-800 px-4 py-2 rounded-lg shadow-md hover:bg-gray-400">
                                                    Previous
                                                </button>
                                                <button @click="finalStep" type="button" name="next"
                                                    class="next bg-indigo-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-indigo-700">
                                                    Submit
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>
                                <div class="w-full md:w-[30%]">
                                    <div class="card bg-white rounded-lg shadow-sm">
                                        <div class="card-header p-2 rounded-sm mb-3 bg-gray-100">
                                            <h5 class="text-lg font-medium text-black text-center">Travel Document
                                                Application
                                            </h5>
                                        </div>
                                        <div class="card-body p-5">
                                            <div
                                                class="flex items-center justify-between border-b-[1px] py-2 border-slate-300">
                                                <div class="col-md-8 col-xs-6">
                                                    <p class="m-0 text-base font-semibold">Price
                                                    </p>
                                                </div>
                                                <div class="text-right text-base font-bold">
                                                    <span class="gov_fee">
                                                        {{ $visa->amount }}Tk</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between py-2">
                                                <div class="col-md-8 col-xs-6">
                                                    <p class="estimate__name m-0">
                                                        {{ $estimate[0]->estimate->name }}</p>
                                                </div>
                                                <div class="col-md-4 col-xs-6 text-right">
                                                    <span class="esti_price ">To Be
                                                        Determine</span>
                                                </div>
                                            </div>
                                            <div class="esti_total">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('custom_script')
    <script>
        function multistepForm() {
            return {
                currentStep: 1,
                steps: [1, 2, 3, 4], // Number of steps
                stepLabels: ['Start', 'Information', 'Review', 'Processing Time'], // Labels for steps
                fields: {
                    1: ['to_country', 'visa_id'],
                    2: ['start_trip', 'end_trip', 'email'],
                    3: ['nationality', 'first_name', 'last_name', 'gender', 'b_day', 'country_birth', 'country_residence',
                        'passport_nmbr', 'passport_issue', 'passport_exp', 'other_images', 'passport_image',
                        'applicant_photo'
                    ],
                    4: ['estimate_id', 'policy']
                },
                errors: {},

                validateStep(step) {
                    this.errors = {}; // Clear previous errors
                    const fieldsToValidate = this.fields[step];

                    fieldsToValidate.forEach(field => {
                        const fieldElement = document.querySelector(`[name="${field}"]`);
                        if (fieldElement) {
                            const value = fieldElement.type === 'checkbox' ? fieldElement.checked : fieldElement
                                .value.trim();
                            if (!value) {
                                this.errors[field] = `${field.replace('_', ' ')} is required.`;
                            }
                        }
                    });

                    return Object.keys(this.errors).length === 0; // Return true if no errors
                },

                nextStep() {
                    if (this.validateStep(this.currentStep)) {
                        if (this.currentStep < this.steps.length) this.currentStep++;
                    } else {
                        alert('Please fill all required fields before proceeding.');
                    }
                },

                prevStep() {
                    if (this.currentStep > 1) this.currentStep--;
                },

                finalStep() {
                    if (this.validateStep(this.currentStep)) {
                        document.getElementById("msform").submit();
                    } else {
                        alert('Please fill all required fields before submitting.');
                    }
                }
            };
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Apply AirDatepicker to all elements with the 'datepicker' class
            const datepickers = document.querySelectorAll('.datepicker');
            datepickers.forEach(function(datepicker) {
                new AirDatepicker(datepicker, {
                    autoClose: true,
                    dateFormat: 'yyyy-MM-dd', // Matches your back-end format
                    placeholder: 'Select a date', // Set placeholder text
                    locale: { // Ensure it's in English
                        days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
                            'Saturday'
                        ],
                        daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                        daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                        months: [
                            'January', 'February', 'March', 'April', 'May', 'June',
                            'July', 'August', 'September', 'October', 'November', 'December'
                        ],
                        monthsShort: [
                            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                        ],
                        today: 'Today',
                        clear: 'Clear',
                        dateFormat: 'yyyy-MM-dd',
                        timeFormat: 'hh:mm aa',
                        firstDay: 0 // Week starts with Sunday
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#to_country").select2();
            $("#nationality").select2();
            $("#country_birth").select2();
            $("#country_residence").select2();
        });
    </script>
    <script>
        $('#estimate_id').change(function() {
            var val = $(this).val();
            var gov_fee = $('.gov_fee').html();
            $.get("find_estimate/" + val, function(data) {
                $('.esti_price').html(data['price'] + 'Tk');
                $('.estimate__name').html(data['esti_name']['name']);
                var total = parseInt(gov_fee) + parseInt(data['price']);
                $('#estimate_price').val(total);
                $('.esti_total').html(`<hr><div class="row">
                                            <div class="col-md-8">
                                                <p>Total fee</p>
                                            </div>
                                            <div class="col-md-4 text-right">
                                                <span>${total}Tk</span>
                                            </div>
                                        </div>`)
            });
        });
    </script>
@endsection