@extends('layouts.guest')

@section('wide', true) {{-- ✅ Use full width layout (75%) --}}

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            <div class="card shadow border-0">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Create Account</h5>
                </div>
                <div class="card-body">
                    <h6 class="text-primary mb-4">Personal Details</h6>

                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">First Name *</label>
                                <input type="text" name="first_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Middle Name</label>
                                <input type="text" name="middle_name" class="form-control">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Last Name *</label>
                                <input type="text" name="last_name" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Date of Birth *</label>
                                <input type="date" name="dob" class="form-control" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">National ID *</label>
                                <input type="text" name="national_id" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Gender *</label>
                                <select name="gender" class="form-select" required>
                                    <option value="">Select Gender</option>
                                    <option>Male</option>
                                    <option>Female</option>
                                    <option>Other</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Email Address *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Password *</label>
                                <input type="password" name="password" class="form-control" required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Physical Address *</label>
                                <input type="text" name="address" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Marital Status *</label>
                                <select name="marital_status" class="form-select" required>
                                    <option value="">Select Marital Status</option>
                                    <option>Single</option>
                                    <option>Married</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Phone Number *</label>
                                <input type="text" name="phone" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Place of Birth (City) *</label>
                                <div id="city-container">
                                    <select name="place_of_birth" id="city" class="form-select" required>
                                        <option value="">Select City</option>
                                        <option>Harare</option>
                                        <option>Bulawayo</option>
                                        <option>Mutare</option>
                                        <option>Gweru</option>
                                        <option>Kwekwe</option>
                                        <option>Masvingo</option>
                                        <option>Chinhoyi</option>
                                        <option>Bindura</option>
                                        <option>Chegutu</option>
                                        <option>Chiredzi</option>
                                        <option>Victoria Falls</option>
                                        <option>Zvishavane</option>
                                        <option>Kariba</option>
                                        <option>Beitbridge</option>
                                        <option>Marondera</option>
                                        <option>Rusape</option>
                                        <option>Redcliff</option>
                                        <option>Chipinge</option>
                                        <option>Hwange</option>
                                        <option>Gokwe</option>
                                        <option>Chitungwiza</option>
                                        <option>Epworth</option>
                                        <option>Shurugwi</option>
                                        <option>Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Citizenship *</label>
                                <select name="citizenship" class="form-select" required>
                                    <option value="">Select Citizenship</option>
                                    @foreach([
                                        'Zimbabwe', 'South Africa', 'Zambia', 'Botswana', 'Namibia',
                                        'Mozambique', 'Malawi', 'Kenya', 'Nigeria', 'United Kingdom',
                                        'United States', 'India', 'China', 'Canada', 'Australia'
                                    ] as $citizen)
                                        <option value="{{ $citizen }}">{{ $citizen }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Country *</label>
                                <select name="country" id="country" class="form-select" required onchange="toggleCityField()">
                                    <option value="">Select Country</option>
                                    @foreach([
                                        'Afghanistan', 'Albania', 'Algeria', 'Angola', 'Argentina', 'Australia', 'Austria',
                                        'Bangladesh', 'Belgium', 'Botswana', 'Brazil', 'Cameroon', 'Canada', 'China',
                                        'Congo', 'Denmark', 'Egypt', 'Ethiopia', 'Finland', 'France', 'Germany', 'Ghana',
                                        'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan',
                                        'Kenya', 'Lesotho', 'Liberia', 'Malawi', 'Malaysia', 'Mexico', 'Morocco',
                                        'Mozambique', 'Namibia', 'Netherlands', 'New Zealand', 'Nigeria', 'Norway',
                                        'Pakistan', 'Philippines', 'Poland', 'Portugal', 'Russia', 'Rwanda',
                                        'Saudi Arabia', 'Senegal', 'Singapore', 'South Africa', 'South Sudan', 'Spain',
                                        'Sri Lanka', 'Sudan', 'Sweden', 'Switzerland', 'Tanzania', 'Thailand', 'Tunisia',
                                        'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States',
                                        'Uruguay', 'Venezuela', 'Vietnam', 'Zambia', 'Zimbabwe'
                                    ] as $country)
                                        <option value="{{ $country }}">{{ $country }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="text-end">
                            <button type="submit" class="btn btn-primary px-5">Create Account</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ✅ JavaScript to toggle city field --}}
<script>
    function toggleCityField() {
        const country = document.getElementById('country').value;
        const cityContainer = document.getElementById('city-container');

        if (country === 'Zimbabwe') {
            cityContainer.innerHTML = `
                <select name="place_of_birth" id="city" class="form-select" required>
                    <option value="">Select City</option>
                    <option>Harare</option>
                    <option>Bulawayo</option>
                    <option>Mutare</option>
                    <option>Gweru</option>
                    <option>Kwekwe</option>
                    <option>Masvingo</option>
                    <option>Chinhoyi</option>
                    <option>Bindura</option>
                    <option>Chegutu</option>
                    <option>Chiredzi</option>
                    <option>Victoria Falls</option>
                    <option>Zvishavane</option>
                    <option>Kariba</option>
                    <option>Beitbridge</option>
                    <option>Marondera</option>
                    <option>Rusape</option>
                    <option>Redcliff</option>
                    <option>Chipinge</option>
                    <option>Hwange</option>
                    <option>Gokwe</option>
                    <option>Chitungwiza</option>
                    <option>Epworth</option>
                    <option>Shurugwi</option>
                    <option>Other</option>
                </select>`;
        } else {
            cityContainer.innerHTML = `<input type="text" name="place_of_birth" class="form-control" placeholder="Enter City" required>`;
        }
    }
</script>
@endsection
