@extends('layout.mainlayout')
@section('content')

    <div class="page-wrapper cardhead">
        <div class="content container-fluid">

            @component('components.breadcrumb')
                @slot('title')
                    {{ $mode === 'edit' ? 'Edit Passport / Visa' : 'Add Passport / Visa' }}
                @endslot
            @endcomponent

            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">
                                {{ $mode === 'edit' ? 'Edit Passport / Visa Details' : 'Add Passport / Visa Details' }}
                            </h5>
                        </div>

                        <div class="card-body mb-4 mt-2 ms-3 me-3">

                            @if ($mode === 'create')
                                <form method="POST" action="{{ route('passport-visa.store') }}">
                                @else
                                    <form method="POST" action="{{ route('passport-visa.update', $user->id) }}">
                                        @method('PUT')
                            @endif
                            @csrf

                            {{-- User selector / display --}}
                            <div class="row mb-4">
                                <label class="col-lg-3 col-form-label">Employee <span class="text-danger">*</span></label>
                                <div class="col-lg-9">
                                    @if ($mode === 'create')
                                        <select name="user_id" class="form-control select2" required>
                                            <option value="">-- Select Employee --</option>
                                            @foreach ($users as $u)
                                                <option value="{{ $u->id }}"
                                                    {{ old('user_id') == $u->id ? 'selected' : '' }}>
                                                    {{ $u->name }} ({{ $u->email }}) —
                                                    @if ((int) $u->employee_type === 2)
                                                        OVERSEAS
                                                    @else
                                                        DOMESTIC
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                    @else
                                        <input type="text" class="form-control"
                                            value="{{ $user->name }} ({{ $user->email }})" disabled>
                                    @endif
                                </div>
                            </div>

                            @php
                                $pv = $data ?? [];
                            @endphp

                            {{-- Passport section --}}
                            <h6 class="mb-3">Passport Details</h6>

                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Passport Number</label>
                                <div class="col-lg-9">
                                    <input type="text" name="passport_no" class="form-control"
                                        value="{{ old('passport_no', $pv['passport_no'] ?? '') }}"
                                        placeholder="Enter passport number">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Passport Validity</label>
                                <div class="col-lg-9">
                                    <input type="date" name="passport_validity" class="form-control"
                                        value="{{ old('passport_validity', $pv['passport_validity'] ?? '') }}">
                                </div>
                            </div>

                            <div class="row mb-4">
                                <label class="col-lg-3 col-form-label">Passport Issue Place</label>
                                <div class="col-lg-9">
                                    <input type="text" name="passport_issue_place" class="form-control"
                                        value="{{ old('passport_issue_place', $pv['passport_issue_place'] ?? '') }}"
                                        placeholder="Enter issue place">
                                </div>
                            </div>

                            {{-- Visa section --}}
                            <h6 class="mb-3">Visa Details</h6>

                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Visa Status</label>
                                <div class="col-lg-9">
                                    <select name="visa_status" class="form-control" id="visaStatusSelect">
                                        <option value="">Do you have Visa?</option>
                                        <option value="Yes"
                                            {{ old('visa_status', $data['visa_status'] ?? '') == 'Yes' ? 'selected' : '' }}>
                                            Yes</option>
                                        <option value="No"
                                            {{ old('visa_status', $data['visa_status'] ?? '') == 'No' ? 'selected' : '' }}>
                                            No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mb-3 visa-field">
                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Visa Expiry Date</label>
                                <div class="col-lg-9">
                                    <input type="date" name="visa_expiry_date" class="form-control"
                                        value="{{ old('visa_expiry_date', $pv['visa_expiry_date'] ?? '') }}">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Visa Type</label>
                                <div class="col-lg-9">
                                    <select name="visa_type" class="form-control">
                                        <option value="">Select Visa Type</option>
                                        <option value="ETA"
                                            {{ old('visa_type', $data['visa_type'] ?? '') == 'ETA' ? 'selected' : '' }}>ETA
                                        </option>
                                        <option value="Internship"
                                            {{ old('visa_type', $data['visa_type'] ?? '') == 'Internship' ? 'selected' : '' }}>
                                            Internship
                                        </option>
                                        <option value="Multiple"
                                            {{ old('visa_type', $data['visa_type'] ?? '') == 'Multiple' ? 'selected' : '' }}>
                                            Multiple
                                        </option>

                                        <option value="Single"
                                            {{ old('visa_type', $data['visa_type'] ?? '') == 'Single' ? 'selected' : '' }}>
                                            Single
                                        </option>

                                        <option value="Work Permit"
                                            {{ old('visa_type', $data['visa_type'] ?? '') == 'Work Permit' ? 'selected' : '' }}>
                                            Work
                                            Permit</option>

                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-lg-3 col-form-label">Visa Country</label>
                                <div class="col-lg-9">
                                    <select name="visa_country" class="form-control select2">
                                        <option value="">Select Country</option>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                {{ old('visa_country', $data['visa_country'] ?? null) == $country->id ? 'selected' : '' }}>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="row mb-4">
                                <label class="col-lg-3 col-form-label">Visa Comments</label>
                                <div class="col-lg-9">
                                    <textarea name="visa_comments" class="form-control" rows="3" placeholder="Any additional comments about visa">{{ old('visa_comments', $pv['visa_comments'] ?? '') }}</textarea>
                                </div>
                            </div>
                            </div>



                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">
                                    {{ $mode === 'edit' ? 'Update' : 'Save' }}
                                </button>
                                <a href="{{ route('passport-visa.index') }}" class="btn btn-secondary ms-2">Cancel</a>
                            </div>

                            </form>

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

        </div>
    </div>
@push('scripts')
       <script>
        document.addEventListener('DOMContentLoaded', function() {
            const visaStatusSelect = document.getElementById('visaStatusSelect');
            const visaFieldWrappers = document.querySelectorAll('.visa-field');

            function toggleVisaFields() {
                const hasVisa = visaStatusSelect.value === 'Yes';

                visaFieldWrappers.forEach(wrapper => {
                    // Show/hide the whole field
                    wrapper.style.display = hasVisa ? '' : 'none';

                    // Enable/disable all inputs & selects inside this field
                    wrapper.querySelectorAll('input, select, textarea').forEach(el => {
                        el.disabled = !hasVisa;
                    });
                });
            }

            visaStatusSelect.addEventListener('change', toggleVisaFields);
            toggleVisaFields(); // Initial on page load
        });
    </script>
@endpush
@endsection