@extends('layouts.app')

@section('title', 'Register Personal Details')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{ asset('css/profile-create.css') }}">
@endpush


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="{{ asset('js/profile-create.js') }}"></script>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">

        {{-- Header --}}
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-800">Personal Details Registration</h1>
                    <p class="text-gray-600">Welcome, {{ auth()->user()->name }}</p>
                </div>
                <a href="{{ route('applicant.dashboard') }}" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700">
                    Back to Dashboard
                </a>
            </div>
        </div>

        {{-- Flash Messages --}}
        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                {{ session('error') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Registration Form --}}
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="mb-6">
                <h2 class="text-2xl font-bold text-gray-800">Step 1: Register Personal Details</h2>
                <p class="text-gray-600 mt-2">
                    Before applying for licenses to harvest and export reef fish, you must first complete your profile registration.
                </p>
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mt-4">
                    <p class="text-sm text-blue-700">
                        <strong>Note:</strong> All supporting documents must be certified true copies in PDF, JPG, or PNG format (max 5MB each).
                    </p>
                </div>
            </div>

            <form method="POST" action="{{ route('applicant.profile.store') }}" enctype="multipart/form-data" class="space-y-6">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    {{-- Full Name --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Full Name of Owner <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="full_name" value="{{ auth()->user()->name }}" readonly
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 bg-gray-100">
                    </div>

                    {{-- Date of Birth --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Date of Birth <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                            id="date_of_birth"
                            name="date_of_birth"
                            value="{{ old('date_of_birth') }}"
                            required
                            
                            placeholder="Select date (DD-MMM-YYYY)"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                    </div>

                    {{-- Gender --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Gender <span class="text-red-500">*</span>
                        </label>
                        <select name="gender" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select gender</option>
                            <option value="male"   {{ old('gender') == 'male'   ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other"  {{ old('gender') == 'other'  ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>

                    {{-- Nationality --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Nationality <span class="text-red-500">*</span>
                        </label>
                        <select name="nationality" id="nationality" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select nationality</option>
                            @php
                                $countries = [
                                    'Afghan', 'Albanian', 'Algerian', 'American', 'Andorran', 'Angolan', 'Antiguan', 'Argentine',
                                    'Armenian', 'Australian', 'Austrian', 'Azerbaijani', 'Bahamian', 'Bahraini', 'Bangladeshi',
                                    'Barbadian', 'Belarusian', 'Belgian', 'Belizean', 'Beninese', 'Bhutanese', 'Bolivian',
                                    'Bosnian', 'Botswanan', 'Brazilian', 'Bruneian', 'Bulgarian', 'Burkinabe', 'Burundian',
                                    'Cabo Verdean', 'Cambodian', 'Cameroonian', 'Canadian', 'Central African', 'Chadian',
                                    'Chilean', 'Chinese', 'Colombian', 'Comoran', 'Congolese', 'Costa Rican', 'Croatian',
                                    'Cuban', 'Cypriot', 'Czech', 'Danish', 'Djiboutian', 'Dominican', 'Dutch', 'Ecuadorian',
                                    'Egyptian', 'Emirati', 'Equatorial Guinean', 'Eritrean', 'Estonian', 'Eswatini', 'Ethiopian',
                                    'Fijian', 'Finnish', 'French', 'Gabonese', 'Gambian', 'Georgian', 'German', 'Ghanaian',
                                    'Greek', 'Grenadian', 'Guatemalan', 'Guinean', 'Guinea-Bissauan', 'Guyanese', 'Haitian',
                                    'Honduran', 'Hungarian', 'Icelandic', 'Indian', 'Indonesian', 'Iranian', 'Iraqi', 'Irish',
                                    'Israeli', 'Italian', 'Ivorian', 'Jamaican', 'Japanese', 'Jordanian', 'Kazakhstani',
                                    'Kenyan', 'Kiribati', 'Kuwaiti', 'Kyrgyz', 'Laotian', 'Latvian', 'Lebanese', 'Lesothan',
                                    'Liberian', 'Libyan', 'Liechtensteiner', 'Lithuanian', 'Luxembourgish', 'Malagasy',
                                    'Malawian', 'Malaysian', 'Maldivian', 'Malian', 'Maltese', 'Marshallese', 'Mauritanian',
                                    'Mauritian', 'Mexican', 'Micronesian', 'Moldovan', 'Monacan', 'Mongolian', 'Montenegrin',
                                    'Moroccan', 'Mozambican', 'Namibian', 'Nauruan', 'Nepali', 'New Zealander', 'Nicaraguan',
                                    'Nigerian', 'Nigerien', 'North Korean', 'North Macedonian', 'Norwegian', 'Omani',
                                    'Pakistani', 'Palauan', 'Panamanian', 'Papua New Guinean', 'Paraguayan', 'Peruvian',
                                    'Philippine', 'Polish', 'Portuguese', 'Qatari', 'Romanian', 'Russian', 'Rwandan',
                                    'Saint Kitts and Nevis', 'Saint Lucian', 'Saint Vincentian', 'Samoan', 'San Marinese',
                                    'Sao Tomean', 'Saudi', 'Senegalese', 'Serbian', 'Seychellois', 'Sierra Leonean',
                                    'Singaporean', 'Slovak', 'Slovenian', 'Solomon Islander', 'Somali', 'South African',
                                    'South Korean', 'South Sudanese', 'Spanish', 'Sri Lankan', 'Sudanese', 'Surinamese',
                                    'Swedish', 'Swiss', 'Syrian', 'Taiwanese', 'Tajik', 'Tanzanian', 'Thai', 'Timorese',
                                    'Togolese', 'Tongan', 'Trinidadian', 'Tunisian', 'Turkish', 'Turkmen', 'Tuvaluan',
                                    'Ugandan', 'Ukrainian', 'Uruguayan', 'Uzbek', 'Vanuatuan', 'Venezuelan', 'Vietnamese',
                                    'Yemeni', 'Zambian', 'Zimbabwean'
                                ];
                                sort($countries);
                            @endphp
                            @foreach($countries as $country)
                                <option value="{{ $country }}" {{ old('nationality') == $country ? 'selected' : '' }}>
                                    {{ $country }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Home Island (Kiribati only) --}}
                    <div id="home_island_wrapper" class="{{ old('nationality') == 'Kiribati' ? '' : 'hidden' }}">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Home Island</label>
                        <select name="home_island" id="home_island"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select home island</option>
                            @php
                                $islands = [
                                    'Abaiang', 'Abemama', 'Aranuka', 'Arorae', 'Banaba', 'Beru', 'Butaritari',
                                    'Kanton', 'Kiritimati', 'Kuria', 'Maiana', 'Makin', 'Marakei', 'Nikunau',
                                    'Nonouti', 'Onotoa', 'Tabiteuea North', 'Tabiteuea South', 'Tabuaeran',
                                    'Tamana', 'Tarawa North', 'Tarawa South', 'Teraina'
                                ];
                            @endphp
                            @foreach($islands as $island)
                                <option value="{{ $island }}" {{ old('home_island') == $island ? 'selected' : '' }}>
                                    {{ $island }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Phone Number --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Phone Number <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="phone_number" id="phone_number"
                            value="{{ old('phone_number') }}"
                            required
                            placeholder="Select nationality first"
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                        <p class="text-xs text-gray-500 mt-1" id="phone_hint">
                            Country code will be filled automatically based on nationality
                        </p>
                    </div>

                    {{-- Residential Address --}}
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Residential Address <span class="text-red-500">*</span>
                        </label>
                        <textarea name="residential_address" rows="2" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">{{ old('residential_address') }}</textarea>
                    </div>

                    {{-- Email --}}
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                        <input type="email" name="email" value="{{ auth()->user()->email }}" readonly
                            class="w-full px-4 py-2 border rounded-lg bg-gray-100">
                        <p class="text-xs text-gray-500 mt-1">Your registered email address</p>
                    </div>

                </div>

                {{-- Required Documents --}}
                <div class="border-t pt-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Required Documents</h3>
                    <p class="text-sm text-gray-600 mb-4">All documents must be certified true copies</p>

                    <div class="space-y-4">

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Police Clearance (PDF, JPG, PNG - Max 5MB) <span class="text-red-500">*</span>
                            </label>
                            <input type="file" name="police_clearance" required accept=".pdf,.jpg,.jpeg,.png"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload a certified true copy of your police clearance</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Passport Biodata or National ID (PDF, JPG, PNG - Max 5MB) <span class="text-red-500">*</span>
                            </label>
                            <input type="file" name="passport_biodata" required accept=".pdf,.jpg,.jpeg,.png"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">For foreigners: Passport biodata page | For locals: Recognized national ID</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Birth Certificate (PDF, JPG, PNG - Max 5MB) <span class="text-red-500">*</span>
                            </label>
                            <input type="file" name="birth_certificate" required accept=".pdf,.jpg,.jpeg,.png"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload a certified true copy of your birth certificate</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                National ID (PDF, JPG, PNG - Max 5MB)
                            </label>
                            <input type="file" name="national_id" accept=".pdf,.jpg,.jpeg,.png"
                                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500">
                            <p class="text-xs text-gray-500 mt-1">Upload a certified true copy of your national ID</p>
                        </div>

                    </div>
                </div>

                {{-- Declaration --}}
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p class="text-sm text-gray-700">
                        <strong>By submitting this form, I declare that:</strong>
                    </p>
                    <ul class="text-sm text-gray-600 mt-2 space-y-1 list-disc list-inside">
                        <li>All information provided is true and accurate</li>
                        <li>All submitted documents are certified true copies</li>
                        <li>I understand that providing false information may result in application rejection</li>
                    </ul>
                </div>

                <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 font-semibold text-lg">
                    Save & Continue to Company Details →
                </button>

            </form>
        </div>

    </div>
</div>



@endsection