@extends('frontend.layout')

@section('title', 'Visa Requirements')
@section('body_class', 'visa-req')

@section('content')
<section class="visa-hero">
    <div class="visa-wrap">
        {{-- Left side photo slider --}}
        <div class="visa-left">
            <div class="visa-slider" data-autoplay="4500">
                @php($sliderImages = ($slides ?? collect())->pluck('image_path')->filter()->values())
                @if($sliderImages->count() === 0)
                    @php($sliderImages = collect(['/images/bg-traveler-girls.jpg']))
                @endif

                @foreach($sliderImages as $i => $img)
                    @php($src = str_starts_with($img, '/') ? $img : asset(ltrim(preg_replace('/^public\//','',$img), '/')))
                    <div class="visa-slide {{ $i === 0 ? 'is-active' : '' }}">
                        <img src="{{ $src }}" alt="Slide {{ $i+1 }}" loading="{{ $i === 0 ? 'eager' : 'lazy' }}" fetchpriority="{{ $i === 0 ? 'high' : 'auto' }}" decoding="async">
                    </div>
                @endforeach
                <div class="visa-slider-dots"></div>
            </div>
        </div>

        {{-- Right form panel --}}
        <div class="visa-panel">
            <div class="visa-panel-top">
                <div>
                    <h3>Check requirements</h3>
                    <p>Fill the form — admin will see it instantly.</p>
                </div>
                <div class="visa-priority">Priority support</div>
            </div>

            <form class="visa-form" action="{{ route('visa.inquiry.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="visa-grid2">
                    <div class="visa-field">
                        <label for="citizenship_country">For citizens of</label>
                        <select id="citizenship_country" name="citizenship_country" required>
                            <option value="">Select country</option>
                            @foreach(($countries ?? []) as $country)
                                <option value="{{ $country }}" @selected(old('citizenship_country') === $country)>{{ $country }}</option>
                            @endforeach
                        </select>
                        @error('citizenship_country')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="destination_country">Traveling to</label>
                        <select id="destination_country" name="destination_country" required>
                            <option value="">Select destination</option>
                            @foreach(($countries ?? []) as $country)
                                <option value="{{ $country }}" @selected(old('destination_country') === $country)>{{ $country }}</option>
                            @endforeach
                        </select>
                        @error('destination_country')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="name">Your name</label>
                        <input id="name" name="name" value="{{ old('name') }}" placeholder="Full name" required />
                        @error('name')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="phone">Phone</label>
                        <input id="phone" name="phone" value="{{ old('phone') }}" placeholder="WhatsApp/phone" />
                        @error('phone')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="date_of_birth">Date of birth (optional)</label>
                        <input id="date_of_birth" type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" />
                        @error('date_of_birth')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="passport_number">Passport number (optional)</label>
                        <input id="passport_number" name="passport_number" value="{{ old('passport_number') }}" placeholder="e.g. AB0123456" />
                        @error('passport_number')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="visa-file-row">
                    <div class="visa-file-box">
                        <label for="applicant_image">Applicant photo (optional)</label>
                        <div class="visa-file-btn">
                            <input id="applicant_image" name="applicant_image" type="file" accept="image/png,image/jpeg,image/webp" />
                        </div>
                        <div class="visa-file-hint">Max 1MB (JPG/PNG/WebP)</div>
                        @error('applicant_image')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-file-box">
                        <label for="passport_file">Passport copy (optional)</label>
                        <div class="visa-file-btn">
                            <input id="passport_file" name="passport_file" type="file" accept="application/pdf,image/png,image/jpeg,image/webp" />
                        </div>
                        <div class="visa-file-hint">Max 2MB (PDF/JPG/PNG/WebP)</div>
                        @error('passport_file')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="visa-grid2 visa-mt12">
                    <div class="visa-field">
                        <label for="email">Email (optional)</label>
                        <input id="email" type="email" name="email" value="{{ old('email') }}" placeholder="you@example.com" />
                        @error('email')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>

                    <div class="visa-field">
                        <label for="travel_date">Travel date (optional)</label>
                        <input id="travel_date" type="date" name="travel_date" value="{{ old('travel_date') }}" />
                        @error('travel_date')<div class="visa-error">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="visa-field visa-mt12">
                    <label for="message">Message (optional)</label>
                    <textarea id="message" name="message" placeholder="Write your question (visa type, purpose, etc.)">{{ old('message') }}</textarea>
                    @error('message')<div class="visa-error">{{ $message }}</div>@enderror
                </div>

                <button class="visa-submit" type="submit">Submit inquiry</button>

                <div class="visa-quick">
                    <small>Quick contact</small>
                    <div class="visa-quick-btns">
                        <a class="visa-qbtn" href="{{ route('contact') }}">Live chat</a>
                        <a class="visa-qbtn" target="_blank" href="https://wa.me/{{ preg_replace('/\D+/', '', config('company.whatsapp')) }}">WhatsApp</a>
                        <a class="visa-qbtn visa-qbtn-navy" href="tel:{{ config('company.phone') }}">Click to call</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection