@extends('front.layouts.app')

@section('content')
    <section class="create-account-section">
        <div class="create-account-title">
            <h1>Create Your Account</h1>
            <p>Join our sports community and connect with athletes, teams, and sponsors</p>
        </div>
        <div class="container">
            <div class="account-form-panel">
                @include('admin.components.messages')

                <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="account-form-title">
                        <h2>Account Basic</h2>
                    </div>
                    <div class="account-form-panel-inner">
                        <div class="row account-form-row">
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label for="full_name" class="form-label">Full Name <sup>*</sup></label>
                                    <input type="text" name="full_name"
                                        class="form-control{{ $errors->has('full_name') ? ' is-invalid' : '' }}"
                                        id="full_name" placeholder="e.g. John Smith" value="{{ old('full_name') }}">

                                    @if ($errors->has('full_name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('full_name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email Address <sup>*</sup></label>
                                    <div class="account-email-fld">
                                        <input type="email" name="email"
                                            class="form-control email-input{{ $errors->has('email') ? ' is-invalid' : '' }}"
                                            id="email" placeholder="e.g. johnsmith@yopmail.com">
                                        <button type="button" class="verify-email-btn" data-status="unverified">
                                            <span class="btn-text">Verify</span>
                                            <span class="btn-icon"></span>
                                        </button>
                                    </div>
                                    @if ($errors->has('email'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone Number <sup>*</sup></label>
                                    <input type="tel" name="phone"
                                        class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}" id="phone"
                                        placeholder="e.g. (245) 457 45875" value="{{ old('phone') }}">
                                    <input type="hidden" name="phone_country_code" id="phone_country_code">
                                    @if ($errors->has('phone'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('phone') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                        </div>

                        <div class="row account-form-row">

                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">Password <sup>*</sup></label>
                                    <input type="password" name="password"
                                        class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
                                        id="password" placeholder="Create Password">
                                    @if ($errors->has('password'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">Confirm Password
                                        <sup>*</sup></label>
                                    <input type="password" name="password_confirmation" class="form-control"
                                        id="password_confirmation" placeholder="Confirm your password">
                                </div>
                            </div>
                        </div>

                        <div class="form-group signing-radio-group">
                            <label>I am signing up as:</label>
                            <div class="radio-group">
                                {{-- Dynamic role selection loaded from Role module --}}
                                {{-- Icons are mapped in RegisterController->showRegistrationForm() --}}
                                {{-- To add new roles: Create role in admin, add icon mapping in controller --}}
                                @if (isset($registrationRoles) && $registrationRoles->count() > 0)
                                    @foreach ($registrationRoles as $index => $role)
                                        <label class="radio-label">
                                            <input type="radio" name="user_type" value="{{ $role['id'] }}"
                                                {{ $index === 0 ? 'checked=""' : '' }}>
                                            <i class="radio-check"></i>
                                            <div class="radio-card">
                                                <img src="{{ asset('front/assets/images/gifs/' . $role['icon']) }}" />
                                                <span>{{ $role['title'] }}</span>
                                            </div>
                                        </label>
                                    @endforeach
                                @else
                                    {{-- Fallback in case no roles are loaded --}}
                                    <label class="radio-label">
                                        <input type="radio" name="user_type" value="athlete" checked="">
                                        <i class="radio-check"></i>
                                        <div class="radio-card">
                                            <img src="{{ asset('front/assets/images/gifs/account-radio-icon-1.svg') }}" />
                                            <span>Athlete</span>
                                        </div>
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" name="user_type" value="team">
                                        <i class="radio-check"></i>
                                        <div class="radio-card">
                                            <img src="{{ asset('front/assets/images/gifs/account-radio-icon-2.svg') }}" />
                                            <span>Team/Club</span>
                                        </div>
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" name="user_type" value="sponsor">
                                        <i class="radio-check"></i>
                                        <div class="radio-card">
                                            <img src="{{ asset('front/assets/images/gifs/account-radio-icon-3.svg') }}" />
                                            <span>Sponsor</span>
                                        </div>
                                    </label>
                                    <label class="radio-label">
                                        <input type="radio" name="user_type" value="fan">
                                        <i class="radio-check"></i>
                                        <div class="radio-card">
                                            <img src="{{ asset('front/assets/images/gifs/account-radio-icon-4.svg') }}" />
                                            <span>Fan</span>
                                        </div>
                                    </label>
                                @endif
                            </div>
                        </div>

                        {{-- Dynamic Profile Fields Section --}}
                        <div id="profile-fields-section" style="display: none;">
                            {{-- Athlete Profile Fields --}}
                            <div id="athlete-fields" class="profile-type-fields">
                                <div class="account-sub-title">
                                    <h3>Athlete Profile</h3>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="date_of_birth" class="form-label">Date of Birth</label>
                                            <div class="date-input-wrapper">
                                                <input type="text" name="date_of_birth"
                                                    class="form-control date-picker-input" id="date_of_birth"
                                                    placeholder="e.g. mm/dd/yyyy" readonly>
                                                <span class="calendar-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                                        viewBox="0 0 18 18" fill="none">
                                                        <path
                                                            d="M14.25 3H13.5V2.25C13.5 2.05109 13.421 1.86032 13.2803 1.71967C13.1397 1.57902 12.9489 1.5 12.75 1.5C12.5511 1.5 12.3603 1.57902 12.2197 1.71967C12.079 1.86032 12 2.05109 12 2.25V3H6V2.25C6 2.05109 5.92098 1.86032 5.78033 1.71967C5.63968 1.57902 5.44891 1.5 5.25 1.5C5.05109 1.5 4.86032 1.57902 4.71967 1.71967C4.57902 1.86032 4.5 2.05109 4.5 2.25V3H3.75C3.15326 3 2.58097 3.23705 2.15901 3.65901C1.73705 4.08097 1.5 4.65326 1.5 5.25V14.25C1.5 14.8467 1.73705 15.419 2.15901 15.841C2.58097 16.2629 3.15326 16.5 3.75 16.5H14.25C14.8467 16.5 15.419 16.2629 15.841 15.841C16.2629 15.419 16.5 14.8467 16.5 14.25V5.25C16.5 4.65326 16.2629 4.08097 15.841 3.65901C15.419 3.23705 14.8467 3 14.25 3ZM15 14.25C15 14.4489 14.921 14.6397 14.7803 14.7803C14.6397 14.921 14.4489 15 14.25 15H3.75C3.55109 15 3.36032 14.921 3.21967 14.7803C3.07902 14.6397 3 14.4489 3 14.25V8.25H15V14.25ZM15 6.75H3V5.25C3 5.05109 3.07902 4.86032 3.21967 4.71967C3.36032 4.57902 3.55109 4.5 3.75 4.5H4.5V5.25C4.5 5.44891 4.57902 5.63968 4.71967 5.78033C4.86032 5.92098 5.05109 6 5.25 6C5.44891 6 5.63968 5.92098 5.78033 5.78033C5.92098 5.63968 6 5.44891 6 5.25V4.5H12V5.25C12 5.44891 12.079 5.63968 12.2197 5.78033C12.3603 5.92098 12.5511 6 12.75 6C12.9489 6 13.1397 5.92098 13.2803 5.78033C13.421 5.63968 13.5 5.44891 13.5 5.25V4.5H14.25C14.4489 4.5 14.6397 4.57902 14.7803 4.71967C14.921 4.86032 15 5.05109 15 5.25V6.75Z"
                                                            fill="#2063E4" />
                                                    </svg>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="gender" class="form-label">Gender</label>
                                            <select name="gender" class="form-select gender-select2" id="gender">
                                                <option value="">-- Select Gender --</option>
                                                @if (isset($genders))
                                                    @foreach ($genders as $id => $name)
                                                        <option value="{{ $id }}">
                                                            {{ $name }}
                                                        </option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="master_sport_id" class="form-label">Sport <small>(Max
                                                    2)</small></label>
                                            <select name="master_sport_id[]"
                                                class="form-select athlete-sport-multiple{{ $errors->has('master_sport_id') ? ' is-invalid' : '' }}"
                                                id="master_sport_id" multiple="multiple">
                                                <option value="">-- Select Sport --</option>
                                                @if (isset($sports))
                                                    @foreach ($sports as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ in_array($id, old('master_sport_id', [])) ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            @if ($errors->has('master_sport_id'))
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('master_sport_id') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="master_position_id" class="form-label">Position</label>
                                            <select name="master_position_id" class="form-select position-select2"
                                                id="master_position_id">
                                                <option value="">Select Position</option>
                                                @if (isset($positions))
                                                    @foreach ($positions as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_position_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="school_club_name" class="form-label">School / Club</label>
                                            <input type="text" name="school_club_name" class="form-control" placeholder="e.g. School or Club Affiliation"
                                                id="school_club_name" value="{{ old('school_club_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="social_media_link" class="form-label">Social Media Profile</label>
                                            <input type="url" name="social_media_link" class="form-control"
                                                id="social_media_link" placeholder="e.g. Paste YouTube or Instagram link"
                                                value="{{ old('social_media_link') }}">
                                        </div>
                                    </div>
                                </div>

                                {{-- Location Fields (For Athlete, Team, Sponsor profiles only) --}}
                                <div id="location-fields" class="row account-form-row">
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="master_country_id" class="form-label">Country</label>
                                            <select name="master_country_id" class="form-select location-select2"
                                                id="master_country_id">
                                                <option value="">Select Country</option>
                                                @if (isset($countries))
                                                    @foreach ($countries as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_country_id', 231) == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="master_state_id" class="form-label">State</label>
                                            <select name="master_state_id" class="form-select location-select2"
                                                id="master_state_id">
                                                <option value="">Select State</option>
                                                @if (isset($states))
                                                    @foreach ($states as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_state_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="master_city_id" class="form-label">City</label>
                                            <select name="master_city_id" class="form-select location-select2"
                                                id="master_city_id">
                                                <option value="">Select City</option>
                                                @if (isset($cities))
                                                    @foreach ($cities as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_city_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>


                                <div class="row account-form-row">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label for="athlete_bio_description" class="form-label">Description</label>
                                            <textarea name="bio_description" class="form-control" id="athlete_bio_description" rows="5"
                                                placeholder="Tell us about yourself...">{{ old('bio_description') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Team/Club Profile Fields --}}
                            <div id="team-fields" class="profile-type-fields" style="display: none;">
                                <div class="account-sub-title">
                                    <h3>Team/Club Profile</h3>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="team_club_name" class="form-label">Team / Club Name</label>
                                            <input type="text" name="team_club_name" class="form-control" placeholder="e.g. Team /Club Name"
                                                id="team_club_name" value="{{ old('team_club_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="team_master_sport_id" class="form-label">Sport / League</label>
                                            <select name="team_master_sport_id" class="form-select sport-select2"
                                                id="team_master_sport_id">
                                                <option value="">Select Sport</option>
                                                @if (isset($sports))
                                                    @foreach ($sports as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('team_master_sport_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="mb-3">
                                            <label for="team_size" class="form-label">Team Size</label>
                                            <input type="number" name="team_size" class="form-control" id="team_size" placeholder="Number of Athletes"
                                                min="1" value="{{ old('team_size') }}">
                                        </div>
                                    </div>
                                </div>
                                <div id="location-fields1" class="row account-form-row">
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="location_name" class="form-label">Location</label>
                                            <input type="text" name="team_location_name" class="form-control"
                                                id="location_name" placeholder="e.g. Downtown Stadium, City Center"
                                                value="{{ old('team_location_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_country_id" class="form-label">Country</label>
                                            <select name="team_master_country_id" class="form-select location-select2"
                                                id="master_country_id1">
                                                <option value="">Select Country</option>
                                                @if (isset($countries))
                                                    @foreach ($countries as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_country_id', 231) == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_state_id" class="form-label">State</label>
                                            <select name="team_master_state_id" class="form-select location-select2"
                                                id="master_state_id1">
                                                <option value="">Select State</option>
                                                @if (isset($states))
                                                    @foreach ($states as $id => $title)
                                                        <option value="{{ $id }}">
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_city_id" class="form-label">City</label>
                                            <select name="team_master_city_id" class="form-select location-select2"
                                                id="master_city_id1">
                                                <option value="">Select City</option>
                                                @if (isset($cities))
                                                    @foreach ($cities as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_city_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label for="contact_person_name" class="form-label">Contact Person</label>
                                            <input type="text" name="contact_person_name" class="form-control"
                                                id="contact_person_name" placeholder="e.g. Contact Person Name"
                                                value="{{ old('contact_person_name') }}">
                                        </div>
                                    </div>
                                </div>


                                <div class="row account-form-row">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label for="team_bio_description" class="form-label">About Us</label>
                                            <textarea name="team_bio_description" class="form-control" id="team_bio_description" rows="5"
                                                placeholder="Tell us about your team...">{{ old('team_bio_description') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Sponsor Profile Fields --}}
                            <div id="sponsor-fields" class="profile-type-fields" style="display: none;">
                                <div class="account-sub-title">
                                    <h3>Sponsor Profile</h3>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label class="form-label">Sponsor Type</label>
                                            <div class="d-flex gap-4">
                                                <label class="form-check-label d-flex align-items-center">
                                                    <input type="radio" name="sponsorship_type" value="1"
                                                        class="form-check-input me-2"
                                                        {{ old('sponsorship_type', '1') == '1' ? 'checked' : '' }}
                                                        id="sponsor_type_individual">
                                                    Individual
                                                </label>
                                                <label class="form-check-label d-flex align-items-center">
                                                    <input type="radio" name="sponsorship_type" value="2"
                                                        class="form-check-input me-2"
                                                        {{ old('sponsorship_type') == '2' ? 'checked' : '' }}
                                                        id="sponsor_type_company">
                                                    Company
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row account-form-row" id="company_name_row" style="display: none;">
                                    <div class="col-sm-12">
                                        <div class="mb-3">
                                            <label for="company_name" class="form-label">Company Name</label>
                                            <input type="text" name="company_name" class="form-control"
                                                id="company_name" placeholder="Enter company name"
                                                value="{{ old('company_name') }}">
                                        </div>
                                    </div>
                                </div>

                                <div id="location-fields2" class="row account-form-row">
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="sponsor_location_name" class="form-label">Location</label>
                                            <input type="text" name="sponsor_location_name" class="form-control"
                                                id="sponsor_location_name" placeholder="e.g. Corporate Headquarters, City"
                                                value="{{ old('sponsor_location_name') }}">
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_country_id" class="form-label">Country</label>
                                            <select name="sponsor_master_country_id" class="form-select location-select2"
                                                id="master_country_id2">
                                                <option value="">Select Country</option>
                                                @if (isset($countries))
                                                    @foreach ($countries as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_country_id', 231) == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_state_id" class="form-label">State</label>
                                            <select name="sponsor_master_state_id" class="form-select location-select2"
                                                id="master_state_id2">
                                                <option value="">Select State</option>
                                                @if (isset($states))
                                                    @foreach ($states as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_state_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="master_city_id" class="form-label">City</label>
                                            <select name="sponsor_master_city_id" class="form-select location-select2"
                                                id="master_city_id2">
                                                <option value="">Select City</option>
                                                @if (isset($cities))
                                                    @foreach ($cities as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_city_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row account-form-row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label for="industry_name" class="form-label">Industry / Sector</label>
                                            <input type="text" name="industry_name" class="form-control"
                                                id="industry_name" placeholder="e.g. Technology, Finance, Healthcare"
                                                value="{{ old('industry_name') }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label for="master_sponsor_budget_id" class="form-label">Budget Range</label>
                                            <select name="master_sponsor_budget_id" class="form-select budget-select2"
                                                id="master_sponsor_budget_id">
                                                <option value="">Select Budget</option>
                                                @if (isset($budgets))
                                                    @foreach ($budgets as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('master_sponsor_budget_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Fan Profile Fields --}}
                            <div id="fan-fields" class="profile-type-fields" style="display: none;">
                                <div class="account-sub-title">
                                    <h3>Fan Profile</h3>
                                </div>
                                <div class="row account-form-row">
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="fan_chose_username" class="form-label">Choose a user name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="fan_chose_username"
                                                class="form-control{{ $errors->has('fan_chose_username') ? ' is-invalid' : '' }}"
                                                id="fan_chose_username" value="{{ old('fan_chose_username') }}"
                                                placeholder="e.g. sportfan123" required autocomplete="off">

                                            @if ($errors->has('fan_chose_username'))
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('fan_chose_username') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="fan_master_sport_id" class="form-label">Favorite Sport</label>
                                            <select name="fan_master_sport_id" class="form-select sport-select2"
                                                id="fan_master_sport_id">
                                                <option value="">Select Sport</option>
                                                @if (isset($sports))
                                                    @foreach ($sports as $id => $title)
                                                        <option value="{{ $id }}"
                                                            {{ old('fan_master_sport_id') == $id ? 'selected' : '' }}>
                                                            {{ $title }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="fan_favorites_team" class="form-label">Follow your favorites team
                                                or athlete</label>
                                            <div class="autocomplete-container">
                                                <input type="text" name="fan_favorites_team"
                                                    class="form-control favorites-autocomplete" id="fan_favorites_team"
                                                    placeholder="Search athletes or teams..."
                                                    value="{{ old('fan_favorites_team') }}" autocomplete="off">
                                                @if (old('fan_favorites_user_id.0'))
                                                    <input type="hidden" name="fan_favorites_user_id[]"
                                                        id="fan_favorites_team_id"
                                                        value="{{ old('fan_favorites_user_id.0') }}">
                                                @else
                                                    <input type="hidden" name="fan_favorites_user_id[]"
                                                        id="fan_favorites_team_id" value="">
                                                @endif
                                                <div class="autocomplete-dropdown"
                                                    id="fan-favorites-autocomplete-dropdown" style="display: none;">
                                                    <!-- Autocomplete results will be populated here -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3">
                                        <div class="mb-3">
                                            <label for="fan_city_name" class="form-label">City</label>
                                            <div class="autocomplete-container">
                                                <input type="text" name="fan_city_name"
                                                    class="form-control city-autocomplete" id="fan_city_name"
                                                    placeholder="Enter your city" value="{{ old('fan_city_name') }}"
                                                    autocomplete="off">
                                                <input type="hidden" name="fan_master_city_id" id="fan_master_city_id"
                                                    value="{{ old('fan_master_city_id') }}">
                                                <div class="autocomplete-dropdown" id="city-autocomplete-dropdown"
                                                    style="display: none;">
                                                    <!-- Autocomplete results will be populated here -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                {{-- <div class="row account-form-row">
                                    <div class="col-sm-6">
                                        <div class="mb-3">
                                            <label for="fan_city_name" class="form-label">City</label>
                                            <div class="autocomplete-container">
                                                <input type="text" name="fan_city_name"
                                                    class="form-control city-autocomplete" id="fan_city_name"
                                                    placeholder="Enter your city" value="{{ old('fan_city_name') }}"
                                                    autocomplete="off">
                                                <input type="hidden" name="fan_master_city_id" id="fan_master_city_id"
                                                    value="{{ old('fan_master_city_id') }}">
                                                <div class="autocomplete-dropdown" id="city-autocomplete-dropdown"
                                                    style="display: none;">
                                                  
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>



                            {{-- File Upload Section --}}
                            <div class="row upload-profile-panel-row">
                                <div class="col-sm-6">
                                    <label>Upload Profile Photo</label>
                                    <div class="upload-image-panel">
                                        <div class="upload-image-drop-zone" id="profile-photo-drop-zone">
                                            <div class="upload-content">
                                                <div class="upload-image-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                        viewBox="0 0 20 20" fill="none">
                                                        <path
                                                            d="M9.75 0.75V12.75M9.75 0.75L14.75 5.75M9.75 0.75L4.75 5.75M18.75 12.75V16.75C18.75 17.2804 18.5393 17.7891 18.1642 18.1642C17.7891 18.5393 17.2804 18.75 16.75 18.75H2.75C2.21957 18.75 1.71086 18.5393 1.33579 18.1642C0.960714 17.7891 0.75 17.2804 0.75 16.75V12.75"
                                                            stroke="#555555" stroke-width="1.5" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                </div>
                                                <h6><a href="#" class="upload-link">Click to Upload</a> or drag and
                                                    drop</h6>
                                                <p>(Max, File size: 25 MB)</p>
                                            </div>
                                            <div class="upload-preview" style="display: none;">
                                                <img id="profile-photo-preview" src="" alt="Profile Preview"
                                                    style="max-width: 100%; max-height: 200px; object-fit: contain;">
                                            </div>
                                            <input type="file" name="avatar" id="profile-photo-input"
                                                accept="image/*"
                                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1;" />
                                        </div>
                                        <div class="upload-file-info" id="profile-photo-info" style="display: none;">
                                            <div class="file-item">
                                                <div class="file-details">
                                                    <div class="file-icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" viewBox="0 0 16 16">
                                                            <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
                                                            <path
                                                                d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z" />
                                                        </svg>
                                                    </div>
                                                    <div class="file-info">
                                                        <span class="file-name" id="profile-photo-name">Profile
                                                            Photo.jpg</span>
                                                        <span class="file-size" id="profile-photo-size">200 KB</span>
                                                    </div>
                                                </div>

                                                <button type="button" class="file-delete-btn" id="profile-photo-delete">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" viewBox="0 0 16 16">
                                                        <path
                                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                        <path fill-rule="evenodd"
                                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                    </svg>
                                                </button>
                                            </div>
                                            <div class="file-progress">
                                                <div class="progress-bar">
                                                    <div class="progress-fill" id="profile-photo-progress"
                                                        style="width: 0%"></div>
                                                </div>
                                                <span class="progress-text" id="profile-photo-percent">0%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <label>Upload National ID or Passport</label>
                                    <div class="upload-image-panel">
                                        <div class="upload-image-drop-zone" id="id-document-drop-zone">
                                            <div class="upload-content">
                                                <div class="upload-image-icon">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                                        viewBox="0 0 20 20" fill="none">
                                                        <path
                                                            d="M9.75 0.75V12.75M9.75 0.75L14.75 5.75M9.75 0.75L4.75 5.75M18.75 12.75V16.75C18.75 17.2804 18.5393 17.7891 18.1642 18.1642C17.7891 18.5393 17.2804 18.75 16.75 18.75H2.75C2.21957 18.75 1.71086 18.5393 1.33579 18.1642C0.960714 17.7891 0.75 17.2804 0.75 16.75V12.75"
                                                            stroke="#555555" stroke-width="1.5" stroke-linecap="round"
                                                            stroke-linejoin="round" />
                                                    </svg>
                                                </div>
                                                <h6><a href="#" class="upload-link">Click to Upload</a> or drag and
                                                    drop</h6>
                                                <p>(Max, File size: 25 MB)</p>
                                            </div>
                                            <div class="upload-preview" style="display: none;">
                                                <img id="id-document-preview" src="" alt="Document Preview"
                                                    style="max-width: 100%; max-height: 200px; object-fit: contain;">
                                            </div>
                                            <input type="file" name="id_document" id="id-document-input"
                                                accept="image/*,application/pdf"
                                                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1;" />
                                        </div>
                                        <div class="upload-file-info" id="id-document-info" style="display: none;">
                                            <div class="file-item">
                                                <div class="file-details">
                                                    <div class="file-icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16"
                                                            height="16" fill="currentColor" viewBox="0 0 16 16">
                                                            <path
                                                                d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
                                                        </svg>
                                                    </div>
                                                    <div class="file-info">
                                                        <span class="file-name" id="id-document-name">Passport.jpg</span>
                                                        <span class="file-size" id="id-document-size">200 KB</span>
                                                    </div>
                                                </div>

                                                <button type="button" class="file-delete-btn" id="id-document-delete">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                        fill="currentColor" viewBox="0 0 16 16">
                                                        <path
                                                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                                                        <path fill-rule="evenodd"
                                                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                                                    </svg>
                                                </button>
                                            </div>
                                            <div class="file-progress">
                                                <div class="progress-bar">
                                                    <div class="progress-fill" id="id-document-progress"
                                                        style="width: 0%"></div>
                                                </div>
                                                <span class="progress-text" id="id-document-percent">0%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Image Cropper Modal for Profile Photo --}}
                            <div class="modal fade" id="imageCropperModal" tabindex="-1"
                                aria-labelledby="imageCropperModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="imageCropperModalLabel">Crop Profile Photo</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="crop-container">
                                                <img id="crop-image" src="" alt="Crop Image"
                                                    style="max-width: 100%;">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                id="cancel-crop">Cancel</button>
                                            <button type="button" class="btn btn-primary" id="apply-crop">Apply
                                                Crop</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Preferences & Agreements Section --}}
                    <div class="account-form-title">
                        <h2>Preferences & Agreements</h2>
                        <h5>Customize your notification settings and review our agreements</h5>
                    </div>

                    <div class="preferences-agreements-panel">
                        <div class="d-flex gap-3 align-items-center">
                            <span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="20"
                                    viewBox="0 0 18 20" fill="none">
                                    <path
                                        d="M17.7927 14.2444C17.2724 13.3481 16.4989 10.8122 16.4989 7.5C16.4989 5.51088 15.7087 3.60322 14.3022 2.1967C12.8957 0.790176 10.988 0 8.99891 0C7.00979 0 5.10214 0.790176 3.69561 2.1967C2.28909 3.60322 1.49891 5.51088 1.49891 7.5C1.49891 10.8131 0.724538 13.3481 0.204226 14.2444C0.0713545 14.4722 0.000914339 14.7311 8.84153e-06 14.9949C-0.000896656 15.2586 0.0677647 15.518 0.199068 15.7467C0.330372 15.9755 0.519675 16.1656 0.747887 16.2978C0.976099 16.4301 1.23515 16.4998 1.49891 16.5H5.32485C5.49789 17.3467 5.95806 18.1077 6.62754 18.6542C7.29702 19.2007 8.1347 19.4992 8.99891 19.4992C9.86312 19.4992 10.7008 19.2007 11.3703 18.6542C12.0398 18.1077 12.4999 17.3467 12.673 16.5H16.4989C16.7626 16.4996 17.0215 16.4298 17.2496 16.2975C17.4777 16.1651 17.6669 15.975 17.7981 15.7463C17.9292 15.5176 17.9978 15.2583 17.9969 14.9946C17.9959 14.7309 17.9255 14.4722 17.7927 14.2444ZM8.99891 18C8.53374 17.9999 8.08005 17.8555 7.70029 17.5869C7.32052 17.3183 7.03335 16.9386 6.87829 16.5H11.1195C10.9645 16.9386 10.6773 17.3183 10.2975 17.5869C9.91777 17.8555 9.46408 17.9999 8.99891 18Z"
                                        fill="#2063E4" />
                                </svg></span>
                            <h3>Receive updates via</h3>
                        </div>
                        <div class="w-100">
                            <div class="email-update-container">
                                <div class="email-info">
                                    <span class="email-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="15"
                                            viewBox="0 0 20 15" fill="none">
                                            <path
                                                d="M18.75 0H0.75C0.551088 0 0.360322 0.0790178 0.21967 0.21967C0.0790176 0.360322 0 0.551088 0 0.75V13.5C0 13.8978 0.158035 14.2794 0.43934 14.5607C0.720644 14.842 1.10218 15 1.5 15H18C18.3978 15 18.7794 14.842 19.0607 14.5607C19.342 14.2794 19.5 13.8978 19.5 13.5V0.75C19.5 0.551088 19.421 0.360322 19.2803 0.21967C19.1397 0.0790178 18.9489 0 18.75 0ZM7.00406 7.5L1.5 12.5447V2.45531L7.00406 7.5ZM8.11406 8.51719L9.23906 9.55312C9.37743 9.68014 9.55842 9.75062 9.74625 9.75062C9.93408 9.75062 10.1151 9.68014 10.2534 9.55312L11.3784 8.51719L16.8159 13.5H2.67844L8.11406 8.51719ZM12.4959 7.5L18 2.45438V12.5456L12.4959 7.5Z"
                                                fill="#2063E4" />
                                        </svg>
                                    </span>
                                    <div class="email-text">
                                        <div class="email-title">Email</div>
                                        <div class="email-description">Get updates in your inbox</div>
                                    </div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="email_notifications" value="1" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div class="email-update-container">
                                <div class="email-info">
                                    <span class="email-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19"
                                            viewBox="0 0 19 19" fill="none">
                                            <path
                                                d="M18.75 9.375C18.7473 11.8606 17.7587 14.2435 16.0011 16.0011C14.2435 17.7587 11.8606 18.7473 9.375 18.75H1.5C1.10218 18.75 0.720644 18.592 0.43934 18.3107C0.158035 18.0294 0 17.6478 0 17.25V9.375C3.70503e-08 6.8886 0.98772 4.50403 2.74587 2.74587C4.50403 0.98772 6.8886 0 9.375 0C11.8614 0 14.246 0.98772 16.0041 2.74587C17.7623 4.50403 18.75 6.8886 18.75 9.375Z"
                                                fill="#00A354" />
                                        </svg>
                                    </span>
                                    <div class="email-text">
                                        <div class="email-title">SMS</div>
                                        <div class="email-description">Receive text messages</div>
                                    </div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="sms_notifications" value="1" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                            <div class="email-update-container">
                                <div class="email-info">
                                    <span class="email-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="21"
                                            viewBox="0 0 14 21" fill="none">
                                            <path
                                                d="M11.25 0H2.25C1.65326 0 1.08097 0.237053 0.65901 0.65901C0.237053 1.08097 0 1.65326 0 2.25V18.75C0 19.3467 0.237053 19.919 0.65901 20.341C1.08097 20.7629 1.65326 21 2.25 21H11.25C11.8467 21 12.419 20.7629 12.841 20.341C13.2629 19.919 13.5 19.3467 13.5 18.75V2.25C13.5 1.65326 13.2629 1.08097 12.841 0.65901C12.419 0.237053 11.8467 0 11.25 0ZM9.75 4.5H3.75C3.55109 4.5 3.36032 4.42098 3.21967 4.28033C3.07902 4.13968 3 3.94891 3 3.75C3 3.55109 3.07902 3.36032 3.21967 3.21967C3.36032 3.07902 3.55109 3 3.75 3H9.75C9.94891 3 10.1397 3.07902 10.2803 3.21967C10.421 3.36032 10.5 3.55109 10.5 3.75C10.5 3.94891 10.421 4.13968 10.2803 4.28033C10.1397 4.42098 9.94891 4.5 9.75 4.5Z"
                                                fill="#9832E3" />
                                        </svg>
                                    </span>
                                    <div class="email-text">
                                        <div class="email-title">Push Notifications</div>
                                        <div class="email-description">Get instant notifications on your device</div>
                                    </div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="push_notifications" value="1" checked>
                                    <span class="slider round"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="legal-agreements-panel">
                        <div class="account-form-title border-0">
                            <div class="d-flex align-items-center gap-3 pb-3">
                                <span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                        viewBox="0 0 18 18" fill="none">
                                        <path
                                            d="M16.5 0H1.5C1.10218 0 0.720644 0.158035 0.43934 0.43934C0.158035 0.720644 0 1.10218 0 1.5V16.5C0 16.8978 0.158035 17.2794 0.43934 17.5607C0.720644 17.842 1.10218 18 1.5 18H11.6897C11.8867 18.0003 12.0818 17.9616 12.2638 17.8862C12.4458 17.8107 12.611 17.7 12.75 17.5603L17.5603 12.75C17.7 12.611 17.8107 12.4458 17.8862 12.2638C17.9616 12.0818 18.0003 11.8867 18 11.6897V1.5C18 1.10218 17.842 0.720644 17.5607 0.43934C17.2794 0.158035 16.8978 0 16.5 0ZM6 5.25H12C12.1989 5.25 12.3897 5.32902 12.5303 5.46967C12.671 5.61032 12.75 5.80109 12.75 6C12.75 6.19891 12.671 6.38968 12.5303 6.53033C12.3897 6.67098 12.1989 6.75 12 6.75H6C5.80109 6.75 5.61032 6.67098 5.46967 6.53033C5.32902 6.38968 5.25 6.19891 5.25 6C5.25 5.80109 5.32902 5.61032 5.46967 5.46967C5.61032 5.32902 5.80109 5.25 6 5.25ZM9 12.75H6C5.80109 12.75 5.61032 12.671 5.46967 12.5303C5.32902 12.3897 5.25 12.1989 5.25 12C5.25 11.8011 5.32902 11.6103 5.46967 11.4697C5.61032 11.329 5.80109 11.25 6 11.25H9C9.19891 11.25 9.38968 11.329 9.53033 11.4697C9.67098 11.6103 9.75 11.8011 9.75 12C9.75 12.1989 9.67098 12.3897 9.53033 12.5303C9.38968 12.671 9.19891 12.75 9 12.75ZM6 9.75C5.80109 9.75 5.61032 9.67098 5.46967 9.53033C5.32902 9.38968 5.25 9.19891 5.25 9C5.25 8.80109 5.32902 8.61032 5.46967 8.46967C5.61032 8.32902 5.80109 8.25 6 8.25H12C12.1989 8.25 12.3897 8.32902 12.5303 8.46967C12.671 8.61032 12.75 8.80109 12.75 9C12.75 9.19891 12.671 9.38968 12.5303 9.53033C12.3897 9.67098 12.1989 9.75 12 9.75H6ZM12 16.1897V12H16.1906L12 16.1897Z"
                                            fill="#2063E4" />
                                    </svg>
                                </span>
                                <h2 class="mb-0">Legal Agreements</h2>
                            </div>
                        </div>
                        <div class="form-container">
                            <div class="checkbox-box required-box">
                                <label class="checkbox-label terms-label-style">
                                    <input type="checkbox" name="terms_accepted" value="1"
                                        class="{{ $errors->has('terms_accepted') ? 'is-invalid' : '' }}">
                                    <div>
                                        <h5 class="main-text">I agree to the Terms & Conditions and Privacy Policy *</h5>
                                        <h6 class="sub-text">By checking this box, you acknowledge that you have read and
                                            agree to our Terms & Conditions and Privacy Policy</h6>
                                    </div>
                                </label>
                                @if ($errors->has('terms_accepted'))
                                    <span class="invalid-feedback d-block" role="alert"
                                        style="margin-left: 30px; margin-top: 5px;">
                                        <strong>{{ $errors->first('terms_accepted') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="checkbox-box optional-box">
                                <label class="checkbox-label">
                                    <input type="checkbox" name="is_receive_promo_notifications" value="1">
                                    <div>
                                        <h5 class="main-text">Yes, I want to receive promotional emails (Optional)</h5>
                                        <h6 class="sub-text">Get the latest updates, special offers, and exclusive content
                                            delivered to your inbox. You can unsubscribe at any time.</h6>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Captcha Section --}}
                    @if (config('captcha.enabled', false))
                        <div class="captcha mb-4">
                            {!! captcha_img() !!}
                            <input type="text" name="captcha" class="form-control mt-2" placeholder="Enter Captcha"
                                required>
                        </div>
                    @endif

                    <button type="submit" class="yellow-btn">Create Account</button>

                    {{-- <div class="text-center mt-3">
                        <p>Already have an account? <a href="{{ route('login') }}" class="signin-nav-link">Sign In</a>
                        </p>
                    </div> --}}

                </form>
            </div>
        </div>
    </section>

    {{-- JavaScript moved to external file: /public/front/assets/js/register.js --}}
@endsection

@push('scripts')
    <!-- Email validation is handled in register.js -->
@endpush
@push('page_css')
    <!-- Select2 CSS for location dropdowns -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    <!-- Cropper.js CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
    <!-- International Telephone Input CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css">
    <!-- Flatpickr CSS for date picker -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        /* Remove the broken CSS and add this instead */
        .iti__selected-flag {
            position: relative;
        }

        .iti__flag {
            /* Keep default dimensions - DON'T override! */
            /* Let intl-tel-input handle the sprite positioning */

            height: 11px;
            background-position: -5263px 0px;
            border-radius: 3px;
        }

        /* Add circular background behind flag */
        .iti__selected-flag::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: #f0f0f0;
            border-radius: 50%;
            z-index: -1;
        }

        /* Ensure phone input aligns properly - increase padding to prevent overlap */
        #phone {
            padding-left: 95px !important;
        }

        .iti {
            width: 100% !important;
        }

        .iti__country-list {
            max-height: 200px !important;
        }

        /* Ensure dial code doesn't overlap with input */
        .iti__selected-dial-code {
            margin-right: 5px;
        }

        .progress-bar {
            background: #ddd !important;
            height: 10px !important;
            border: 2px solid #999 !important;
        }

        .progress-fill {
            background: #fd7e14 !important;
            /* Red for testing */
            height: 100% !important;
        }

        .progress-text {
            font-size: 14px !important;
            font-weight: bold !important;
            color: #fd7e14 !important;
        }
    </style>
@endpush
@push('page_script')
    <!-- Select2 JS for location dropdowns -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <!-- jQuery Validation Plugin for Registration Form -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>
    <!-- Cropper.js CSS and JS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
    <!-- External register.js file handles all functionality -->
    <script src="{{ asset('front/assets/js/register.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js"></script>

    <!-- International Telephone Input JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>

    <!-- Flatpickr JS for date picker -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <script>
        // Make PHP data available globally for register.js
        window.registrationData = {
            phoneCodes: {
                countryCodes: [
                    @if (isset($phoneCodes) && count($phoneCodes) > 0)
                        @foreach ($phoneCodes as $phoneCode)
                            "{{ strtolower($phoneCode['code']) }}"
                            {{ !$loop->last ? ',' : '' }}
                        @endforeach
                    @else
                        "us",
                        "gb",
                        "ca"
                    @endif
                ],
                phoneCodeMap: {
                    @if (isset($phoneCodes) && count($phoneCodes) > 0)
                        @foreach ($phoneCodes as $phoneCode)
                            "{{ strtolower($phoneCode['code']) }}": "{{ $phoneCode['phone_code'] }}"
                            {{ !$loop->last ? ',' : '' }}
                        @endforeach
                    @endif
                },
                countryNames: {
                    @if (isset($phoneCodes) && count($phoneCodes) > 0)
                        @foreach ($phoneCodes as $phoneCode)
                            "{{ strtolower($phoneCode['code']) }}": "{{ $phoneCode['name'] }}"
                            {{ !$loop->last ? ',' : '' }}
                        @endforeach
                    @endif
                }
            },
            oldValues: {
                phone: "{{ old('phone') }}",
                phoneCountryCode: "{{ old('phone_country_code') }}",
                dateOfBirth: "{{ old('date_of_birth') }}"
            }
        };
    </script>
@endpush