@extends('front.layouts.app-auth')

@push('page_css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<!-- Select2 CSS for sport multi-select -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
@endpush

@section('content')
<div class="profile-page">
    <!-- Breadcrumbs -->
    @include('front.components.breadcrumbs', ['currentPage' => 'Profile'])

    <!-- Profile Header -->
    <div class="profile-header">
        <h1 class="profile-title">My Profile</h1>
        <p class="profile-subtitle">Update your personal information and preferences.</p>
    </div>

    <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data" id="profileForm">
        @csrf

        <div class="profile-content">
            <!-- Left Column -->
            <div>
                <!-- Account Basic Section -->
                <div class="profile-section">
                    <div class="section-header">
                        <div class="section-icon green">
                            <i data-lucide="user"></i>
                        </div>
                        <div>
                            <h3 class="section-title">Account Basic</h3>
                            <p class="section-subtitle">Your basic account information.</p>
                        </div>
                    </div>

                    <div class="profile-picture-section">
                        <label class="form-label">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>
                                <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>
                        
                        {{-- Hidden input to mark avatar for deletion --}}
                        <input type="hidden" name="delete_files[]" id="delete_avatar" value="0">
                        
                        {{-- Existing Profile Image Display --}}
                        @if(isset($user->avatar['original']) && $user->profile_pic)
                        <div class="existing-profile-image-container" id="existing-profile-image-container">
                            <div class="existing-profile-image-wrapper">
                                <img src="{{ $user->avatar['original'] }}" alt="Current Profile Photo" class="existing-profile-image" id="existing-profile-image">
                                <button type="button" class="delete-profile-image-btn" id="delete-existing-profile-image" data-file_id="{{$user->avatar['id']}}" title="Remove profile photo">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg>
                                </button>
                            </div>
                            <p class="existing-image-label">Current Profile Photo</p>
                        </div>
                        @endif
                    </div>

                    <div class="form-group">
                        <label class="form-label">Full Name <span class="required">*</span></label>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                            <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $user->first_name) }}" required>
                            <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $user->last_name) }}" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Email Address <span class="required">*</span></label>
                        <input type="email" class="form-control" value="{{ $user->email }}" disabled>
                        <div class="field-note">Email cannot be changed</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Phone Number <span class="required">*</span></label>
                        <input type="text" class="form-control" value="{{ $user->phone ? '+' . $user->phone_code . $user->phone : '' }}" disabled>
                        <div class="field-note">Phone cannot be changed</div>
                    </div>
                </div>

                <!-- Profile Fields Section - Role-based visibility -->
                <div id="profile-fields-section">
                    <!-- Athlete Profile Section -->
                    <div id="athlete-fields" class="profile-section" style="margin-top: 30px;">
                        <div class="section-header">
                            <div class="section-icon orange">
                                <i data-lucide="users"></i>
                            </div>
                            <div>
                                <h3 class="section-title">Athlete Profile</h3>
                                <p class="section-subtitle">Details about your sports background.</p>
                            </div>
                        </div>

                    <div class="form-group">
                        <label class="form-label">Date of Birth</label>
                        <div class="date-input-wrapper">
                            <input type="text" name="date_of_birth" id="date_of_birth" class="form-control" 
                                   value="{{ old('date_of_birth', $athleteProfile && $athleteProfile->dob ? $athleteProfile->dob->format('m-d-Y') : '') }}" 
                                   placeholder="MM-DD-YYYY">
                            <div class="calendar-icon">
                                <i data-lucide="calendar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Gender</label>
                        <select name="gender" class="form-select">
                            <option value="">-- Select Gender --</option>
                            @foreach($genders as $id => $name)
                                <option value="{{ $id }}" {{ old('gender', $user->gender) == $id ? 'selected' : '' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Sport <small>(Max 2)</small></label>
                        <select name="master_sport_id[]" class="form-select athlete-sport-multiple" id="master_sport_id" multiple="multiple">
                            <option value="">-- Select Sport --</option>
                            @foreach($sports as $id => $title)
                                @php
                                    $selectedSports = old('master_sport_id', $userSports ?? []);
                                @endphp
                                <option value="{{ $id }}" {{ in_array($id, $selectedSports) ? 'selected' : '' }}>{{ $title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Position</label>
                        <select name="master_position_id" class="form-select" id="master_position_id">
                            <option value="">-- Select Position --</option>
                            @foreach($positions as $id => $title)
                                <option value="{{ $id }}" {{ old('master_position_id', $athleteProfile && $athleteProfile->master_athlete_position_id == $id ? 'selected' : '') }}>{{ $title }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">School / Club</label>
                        <input type="text" name="school_club_name" class="form-control" 
                               value="{{ old('school_club_name', $athleteProfile ? $athleteProfile->school_club_name : '') }}">
                    </div>

                    <div class="form-group">
                        <label class="form-label">Social Media Profile</label>
                        <input type="text" name="social_media_profile" class="form-control" 
                               value="{{ old('social_media_profile', (isset($socialLinks) && $socialLinks && is_object($socialLinks)) ? $socialLinks->social_link : '') }}" 
                               placeholder="@username">
                    </div>

                    {{-- Location Fields (hidden for Fan role) --}}
                    <div id="location-fields">
                        <div class="form-group">
                            <label class="form-label">Country</label>
                            <select name="master_country_id" id="master_country_id" class="form-select">
                                <option value="">-- Select Country --</option>
                                @foreach($countries as $id => $name)
                                    <option value="{{ $id }}" {{ old('master_country_id', $athleteProfile && $athleteProfile->master_country_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">State</label>
                            <select name="master_state_id" id="master_state_id" class="form-select">
                                <option value="">-- Select State --</option>
                                @foreach($states as $id => $name)
                                    <option value="{{ $id }}" {{ old('master_state_id', $athleteProfile && $athleteProfile->master_state_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label">City</label>
                            <select name="master_city_id" id="master_city_id" class="form-select">
                                <option value="">-- Select City --</option>
                                @foreach($cities as $id => $name)
                                    <option value="{{ $id }}" {{ old('master_city_id', $athleteProfile && $athleteProfile->master_city_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="4" 
                                  placeholder="Tell us about yourself...">{{ old('description', $athleteProfile ? $athleteProfile->athlete_bio : '') }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-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>
                        
                        {{-- Existing Document Display --}}
                        @php
                            $document = $user->document;
                            $hasDocument = $document && isset($document['original']) && $document['id'] > 0;
                            $isImage = $hasDocument && isset($document['file_mime']) && strpos($document['file_mime'], 'image/') === 0;
                        @endphp
                        
                        @if($hasDocument)
                        <div class="existing-document-container" id="existing-document-container" style="margin-top: 20px;">
                            <p class="existing-document-label">Current Document</p>
                            
                            @if($isImage)
                                {{-- Show image with download button --}}
                                <div class="existing-document-image-wrapper">
                                    <img src="{{ $document['original'] }}" alt="Document" class="existing-document-image" id="existing-document-image">
                                    <a href="{{ route('profile.document.download') }}" class="download-document-btn" title="Download document">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                            <polyline points="7 10 12 15 17 10"></polyline>
                                            <line x1="12" y1="15" x2="12" y2="3"></line>
                                        </svg>
                                        <span>Download</span>
                                    </a>
                                </div>
                            @else
                                {{-- Show download link for non-image files --}}
                                <div class="existing-document-file-wrapper">
                                    <div class="document-file-info">
                                        <div class="document-file-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16" fill="currentColor">
                                                <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="document-file-details">
                                            <span class="document-file-name">{{ $document['file_name'] ?? 'Document' }}</span>
                                            @if(isset($document['file_ext']))
                                                <span class="document-file-type">{{ strtoupper($document['file_ext']) }} File</span>
                                            @endif
                                        </div>
                                    </div>
                                    <a href="{{ route('profile.document.download') }}" class="download-document-link" title="Download document">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                            <polyline points="7 10 12 15 17 10"></polyline>
                                            <line x1="12" y1="15" x2="12" y2="3"></line>
                                        </svg>
                                        Download
                                    </a>
                                </div>
                            @endif
                        </div>
                        @endif
                    </div>
                    </div>

                    <!-- Team/Club Profile Section -->
                    <div id="team-fields" class="profile-section" style="margin-top: 30px; display: none;">
                        <div class="section-header">
                            <div class="section-icon orange">
                                <i data-lucide="users"></i>
                            </div>
                            <div>
                                <h3 class="section-title">Team/Club Profile</h3>
                                <p class="section-subtitle">Details about your team or club.</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Team / Club Name</label>
                            <input type="text" name="team_club_name" class="form-control" 
                                id="team_club_name" placeholder="e.g. Team /Club Name"
                                value="{{ old('team_club_name', $teamProfile ? $teamProfile->team_club_name : '') }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Sport / League</label>
                            <select name="team_master_sport_id" class="form-select" id="team_master_sport_id">
                                <option value="">-- Select Sport --</option>
                                @foreach($sports as $id => $title)
                                    <option value="{{ $id }}" {{ old('team_master_sport_id', $teamProfile && $teamProfile->master_sport_id == $id ? 'selected' : '') }}>{{ $title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label 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', $teamProfile ? $teamProfile->team_size : '') }}">
                        </div>

                        {{-- Location Fields for Team --}}
                        <div id="team-location-fields">
                            <div class="form-group">
                                <label class="form-label">Location</label>
                                <input type="text" name="team_location_name" class="form-control autocomplete_address"
                                    id="team_location_name" placeholder="e.g. Downtown Stadium, City Center"
                                    value="{{ old('team_location_name', $teamProfile ? $teamProfile->location_name : '') }}" 
                                    data-type="team_address" data-id="0">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Country</label>
                                <select name="team_master_country_id" id="team_master_country_id" class="form-select">
                                    <option value="">-- Select Country --</option>
                                    @foreach($countries as $id => $name)
                                        <option value="{{ $id }}" {{ old('team_master_country_id', $teamProfile && $teamProfile->master_country_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">State</label>
                                <select name="team_master_state_id" id="team_master_state_id" class="form-select">
                                    <option value="">-- Select State --</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ old('team_master_state_id', $teamProfile && $teamProfile->master_state_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">City</label>
                                <select name="team_master_city_id" id="team_master_city_id" class="form-select">
                                    <option value="">-- Select City --</option>
                                    @foreach($cities as $id => $name)
                                        <option value="{{ $id }}" {{ old('team_master_city_id', $teamProfile && $teamProfile->master_city_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label 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', $teamProfile ? $teamProfile->contact_person_name : '') }}">
                        </div>

                        <div class="form-group">
                            <label 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', $teamProfile ? $teamProfile->team_bio_tagline : '') }}</textarea>
                        </div>
                    </div>

                    <!-- Sponsor Profile Section -->
                    <div id="sponsor-fields" class="profile-section" style="margin-top: 30px; display: none;">
                        <div class="section-header">
                            <div class="section-icon orange">
                                <i data-lucide="users"></i>
                            </div>
                            <div>
                                <h3 class="section-title">Sponsor Profile</h3>
                                <p class="section-subtitle">Details about your sponsorship profile.</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <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', $sponsorProfile && $sponsorProfile->sponsorship_type == 1 ? '1' : '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', $sponsorProfile && $sponsorProfile->sponsorship_type == 2 ? '2' : '') == '2' ? 'checked' : '' }}
                                        id="sponsor_type_company">
                                    Company
                                </label>
                            </div>
                        </div>

                        <div class="form-group" id="company_name_row" style="display: {{ (old('sponsorship_type', $sponsorProfile && $sponsorProfile->sponsorship_type == 2 ? '2' : '1')) == '2' ? 'block' : 'none' }};">
                            <label 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', $sponsorProfile ? $sponsorProfile->company_name : '') }}">
                        </div>

                        {{-- Location Fields for Sponsor --}}
                        <div id="sponsor-location-fields">
                            <div class="form-group">
                                <label class="form-label">Location</label>
                                <input type="text" name="sponsor_location_name" class="form-control autocomplete_address"
                                    id="sponsor_location_name" placeholder="e.g. Corporate Headquarters, City"
                                    value="{{ old('sponsor_location_name', $sponsorProfile ? $sponsorProfile->location_name : '') }}" 
                                    data-type="sponsor_address" data-id="0">
                            </div>

                            <div class="form-group">
                                <label class="form-label">Country</label>
                                <select name="sponsor_master_country_id" id="sponsor_master_country_id" class="form-select">
                                    <option value="">-- Select Country --</option>
                                    @foreach($countries as $id => $name)
                                        <option value="{{ $id }}" {{ old('sponsor_master_country_id', $sponsorProfile && $sponsorProfile->master_country_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">State</label>
                                <select name="sponsor_master_state_id" id="sponsor_master_state_id" class="form-select">
                                    <option value="">-- Select State --</option>
                                    @foreach($states as $id => $name)
                                        <option value="{{ $id }}" {{ old('sponsor_master_state_id', $sponsorProfile && $sponsorProfile->master_state_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="form-label">City</label>
                                <select name="sponsor_master_city_id" id="sponsor_master_city_id" class="form-select">
                                    <option value="">-- Select City --</option>
                                    @foreach($cities as $id => $name)
                                        <option value="{{ $id }}" {{ old('sponsor_master_city_id', $sponsorProfile && $sponsorProfile->master_city_id == $id ? 'selected' : '') }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label 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', $sponsorProfile ? $sponsorProfile->industry_name : '') }}">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Budget Range</label>
                            <select name="master_sponsor_budget_id" class="form-select" 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', $sponsorProfile && $sponsorProfile->master_sponsor_budget_id == $id ? 'selected' : '') }}>{{ $title }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>

                    <!-- Fan Profile Section -->
                    <div id="fan-fields" class="profile-section" style="margin-top: 30px; display: none;">
                        <div class="section-header">
                            <div class="section-icon orange">
                                <i data-lucide="users"></i>
                            </div>
                            <div>
                                <h3 class="section-title">Fan Profile</h3>
                                <p class="section-subtitle">Details about your fan profile.</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Choose a user name <span class="text-danger">*</span></label>
                            <input type="text" name="fan_chose_username" class="form-control" 
                                id="fan_chose_username" placeholder="e.g. sportfan123" 
                                value="{{ old('fan_chose_username', $user->username) }}" 
                                autocomplete="off">
                            <div id="fan_username_feedback" class="invalid-feedback" style="display: none;"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Favorite Sport</label>
                            <select name="fan_master_sport_id" class="form-select" id="fan_master_sport_id">
                                <option value="">-- Select Sport --</option>
                                @foreach($sports as $id => $title)
                                    <option value="{{ $id }}" {{ old('fan_master_sport_id', $fanFavoriteSport == $id ? 'selected' : '') }}>{{ $title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label 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', $fanFollowedUser ? ($fanFollowedUser->followedUser ? trim($fanFollowedUser->followedUser->first_name . ' ' . $fanFollowedUser->followedUser->last_name) : '') : '') }}" 
                                    autocomplete="off">
                                <input type="hidden" name="fan_favorites_user_id[]" id="fan_favorites_team_id" 
                                    value="{{ old('fan_favorites_user_id.0', $fanFollowedUser ? $fanFollowedUser->followed_user_id : '') }}">
                                <div class="autocomplete-dropdown" id="fan-favorites-autocomplete-dropdown" style="display: none;">
                                    <!-- Autocomplete results will be populated here -->
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label 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', $fanProfile && $fanProfile->city ? $fanProfile->city->city_name : '') }}" 
                                    autocomplete="off">
                                <input type="hidden" name="fan_master_city_id" id="fan_master_city_id"
                                    value="{{ old('fan_master_city_id', $fanProfile ? $fanProfile->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>

            <!-- Right Column -->
            <div>
                <!-- Preferences & Agreements Section -->
                <div class="profile-section">
                    <div class="section-header">
                        <div class="section-icon blue">
                            <i data-lucide="bell"></i>
                        </div>
                        <div>
                            <h3 class="section-title">Preferences & Agreements</h3>
                            <p class="section-subtitle">Customize your notification settings.</p>
                        </div>
                    </div>

                    <div class="notification-item">
                        <span class="notification-label">Email</span>
                        <label class="toggle-switch">
                            @php
                                $emailChecked = old('email_notifications', (isset($notificationPrefs) && $notificationPrefs && $notificationPrefs->notify_email) ? '1' : '');
                            @endphp
                            <input type="checkbox" name="email_notifications" value="1" {{ ($emailChecked == '1' || $emailChecked === 1) ? 'checked' : '' }}>
                            <span class="slider round"></span>
                        </label>
                    </div>

                    <div class="notification-item">
                        <span class="notification-label">SMS</span>
                        <label class="toggle-switch">
                            @php
                                $smsChecked = old('sms_notifications', (isset($notificationPrefs) && $notificationPrefs && $notificationPrefs->notify_sms) ? '1' : '');
                            @endphp
                            <input type="checkbox" name="sms_notifications" value="1" {{ ($smsChecked == '1' || $smsChecked === 1) ? 'checked' : '' }}>
                            <span class="slider round"></span>
                        </label>
                    </div>

                    <div class="notification-item">
                        <span class="notification-label">Push Notifications</span>
                        <label class="toggle-switch">
                            @php
                                $pushChecked = old('push_notifications', (isset($notificationPrefs) && $notificationPrefs && $notificationPrefs->notify_push) ? '1' : '');
                            @endphp
                            <input type="checkbox" name="push_notifications" value="1" {{ ($pushChecked == '1' || $pushChecked === 1) ? 'checked' : '' }}>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <!-- Change Password Section -->
                <div class="profile-section" style="margin-top: 30px;">
                    <div class="section-header">
                        <div class="section-icon blue">
                            <i data-lucide="key"></i>
                        </div>
                        <div>
                            <h3 class="section-title">Change Password</h3>
                            <p class="section-subtitle">Update your account password.</p>
                        </div>
                    </div>

                    <div id="changePasswordSection">
                        <div class="form-group">
                            <label class="form-label">Current Password</label>
                            <input type="password" name="current_password" id="current_password" class="form-control" placeholder="Enter current password">
                        </div>

                        <div class="form-group">
                            <label class="form-label">New Password</label>
                            <input type="password" name="new_password" id="new_password" class="form-control" placeholder="Enter new password">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" placeholder="Confirm new password">
                        </div>

                        <button type="button" class="change-password-btn" id="changePasswordBtn">
                            <i data-lucide="lock"></i>
                            Change Password
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Save Profile Button -->
        <div style="margin-top: 30px;">
            <button type="submit" class="save-profile-btn" id="saveProfileBtn">
                <i data-lucide="save"></i>
                Save Profile
            </button>
        </div>
    </form>

    {{-- 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>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<!-- Select2 JS for sport multi-select -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // Role-based field visibility (similar to register page)
    const roleToFieldMap = {
        '3': 'athlete',  // Role ID 3 is for athletes
        '4': 'team',     // Role ID 4 is for teams  
        '5': 'sponsor',  // Role ID 5 is for sponsors
        '6': 'fan',      // Role ID 6 is for fans
        // Fallback for string values
        'athlete': 'athlete',
        'team': 'team',
        'sponsor': 'sponsor',
        'fan': 'fan'
    };

    // Get user role from PHP
    const userRoleId = '{{ $userRoleId ?? null }}';
    const userRoleSlug = '{{ $userRoleSlug ?? null }}';
    
    // Get all profile field containers
    const profileFieldsSection = document.getElementById('profile-fields-section');
    const allProfileFields = document.querySelectorAll('#athlete-fields, #team-fields, #sponsor-fields, #fan-fields');
    const locationFields = document.getElementById('location-fields');

    // Show/hide fields based on role
    if (profileFieldsSection && userRoleId) {
        // Hide all profile fields first
        allProfileFields.forEach(field => {
            field.style.display = 'none';
        });

        // Show relevant profile fields based on role ID
        const fieldType = roleToFieldMap[userRoleId] || roleToFieldMap[userRoleSlug];
        if (fieldType) {
            const targetField = document.getElementById(fieldType + '-fields');
            if (targetField) {
                targetField.style.display = 'block';
            }
        }

        // Handle location fields visibility - hide for Fan (role ID 6), show for others
        if (locationFields) {
            if (userRoleId === '6' || userRoleSlug === 'fan') {
                locationFields.style.display = 'none';
            } else {
                locationFields.style.display = 'block';
            }
        }
    }

    // Initialize Flatpickr for date of birth
    if (typeof flatpickr !== 'undefined') {
        flatpickr('#date_of_birth', {
            dateFormat: 'm-d-Y',
            altInput: false,
            allowInput: true,
        });
    }

    // Initialize Select2 for sport multi-select (max 2)
    if (typeof $ !== 'undefined' && $.fn.select2) {
        $('.athlete-sport-multiple').select2({
            maximumSelectionLength: 2,
            language: {
                maximumSelected: function (e) {
                    return "You can only select 2 sports maximum";
                }
            }
        });

        // Handle validation styling for Select2
        $('.athlete-sport-multiple').on('select2:select select2:unselect', function () {
            const $element = $(this);
            const $select2Container = $element.next('.select2-container');
            const $select2Selection = $select2Container.find('.select2-selection');

            // Remove any existing validation classes
            $select2Selection.removeClass('is-invalid');

            // Add validation class if the original select has it
            if ($element.hasClass('is-invalid')) {
                $select2Selection.addClass('is-invalid');
            }
        });

        // Apply validation styling on page load if errors exist
        $('.athlete-sport-multiple.is-invalid').each(function () {
            const $select2Selection = $(this).next('.select2-container').find('.select2-selection');
            $select2Selection.addClass('is-invalid');
        });

        // Prevent selecting more than 2 sports
        $('.athlete-sport-multiple').on('select2:selecting', function(e) {
            const currentSelections = $(this).val() || [];
            if (currentSelections.length >= 2) {
                e.preventDefault();
                return false;
            }
        });
    }

    // Handle country change for dynamic state/city loading (Athlete)
    const countrySelect = document.getElementById('master_country_id');
    const stateSelect = document.getElementById('master_state_id');
    const citySelect = document.getElementById('master_city_id');

    if (countrySelect) {
        countrySelect.addEventListener('change', function() {
            const countryId = this.value;
            
            // Reset state and city
            if (stateSelect) stateSelect.innerHTML = '<option value="">-- Select State --</option>';
            if (citySelect) citySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (countryId) {
                fetch(`/api/v1/states/${countryId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(state => {
                                const option = document.createElement('option');
                                option.value = state.id;
                                option.textContent = state.state_name || state.title;
                                if (stateSelect) stateSelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading states:', error));
            }
        });
    }

    // Handle state change for dynamic city loading (Athlete)
    if (stateSelect) {
        stateSelect.addEventListener('change', function() {
            const stateId = this.value;
            
            // Reset city
            if (citySelect) citySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (stateId) {
                fetch(`/api/v1/cities/${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(city => {
                                const option = document.createElement('option');
                                option.value = city.id;
                                option.textContent = city.city_name || city.title;
                                if (citySelect) citySelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading cities:', error));
            }
        });
    }

    // Handle sponsor type change (show/hide company name)
    const sponsorTypeRadios = document.querySelectorAll('input[name="sponsorship_type"]');
    const companyNameRow = document.getElementById('company_name_row');
    
    if (sponsorTypeRadios.length > 0) {
        sponsorTypeRadios.forEach(radio => {
            radio.addEventListener('change', function() {
                if (companyNameRow) {
                    companyNameRow.style.display = this.value === '2' ? 'block' : 'none';
                }
            });
        });
    }

    // Handle sponsor country change for dynamic state/city loading
    const sponsorCountrySelect = document.getElementById('sponsor_master_country_id');
    const sponsorStateSelect = document.getElementById('sponsor_master_state_id');
    const sponsorCitySelect = document.getElementById('sponsor_master_city_id');

    if (sponsorCountrySelect) {
        sponsorCountrySelect.addEventListener('change', function() {
            const countryId = this.value;
            
            // Reset state and city
            if (sponsorStateSelect) sponsorStateSelect.innerHTML = '<option value="">-- Select State --</option>';
            if (sponsorCitySelect) sponsorCitySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (countryId) {
                fetch(`/api/v1/states/${countryId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(state => {
                                const option = document.createElement('option');
                                option.value = state.id;
                                option.textContent = state.state_name || state.title;
                                if (sponsorStateSelect) sponsorStateSelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading states:', error));
            }
        });
    }

    // Handle sponsor state change for dynamic city loading
    if (sponsorStateSelect) {
        sponsorStateSelect.addEventListener('change', function() {
            const stateId = this.value;
            
            // Reset city
            if (sponsorCitySelect) sponsorCitySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (stateId) {
                fetch(`/api/v1/cities/${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(city => {
                                const option = document.createElement('option');
                                option.value = city.id;
                                option.textContent = city.city_name || city.title;
                                if (sponsorCitySelect) sponsorCitySelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading cities:', error));
            }
        });
    }

    // Handle team country change for dynamic state/city loading
    const teamCountrySelect = document.getElementById('team_master_country_id');
    const teamStateSelect = document.getElementById('team_master_state_id');
    const teamCitySelect = document.getElementById('team_master_city_id');

    if (teamCountrySelect) {
        teamCountrySelect.addEventListener('change', function() {
            const countryId = this.value;
            
            // Reset state and city
            if (teamStateSelect) teamStateSelect.innerHTML = '<option value="">-- Select State --</option>';
            if (teamCitySelect) teamCitySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (countryId) {
                fetch(`/api/v1/states/${countryId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(state => {
                                const option = document.createElement('option');
                                option.value = state.id;
                                option.textContent = state.state_name || state.title;
                                if (teamStateSelect) teamStateSelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading states:', error));
            }
        });
    }

    // Handle team state change for dynamic city loading
    if (teamStateSelect) {
        teamStateSelect.addEventListener('change', function() {
            const stateId = this.value;
            
            // Reset city
            if (teamCitySelect) teamCitySelect.innerHTML = '<option value="">-- Select City --</option>';

            if (stateId) {
                fetch(`/api/v1/cities/${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        if ((data.status === 200 || data.success) && data.data) {
                            data.data.forEach(city => {
                                const option = document.createElement('option');
                                option.value = city.id;
                                option.textContent = city.city_name || city.title;
                                if (teamCitySelect) teamCitySelect.appendChild(option);
                            });
                        }
                    })
                    .catch(error => console.error('Error loading cities:', error));
            }
        });
    }

    // Profile Photo Upload Functionality (same as register page)
    let cropper = null;
    let currentFileInput = null;
    let isProcessingFile = false;

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    const profilePhotoZone = document.getElementById('profile-photo-drop-zone');
    const profilePhotoInput = document.getElementById('profile-photo-input');

    if (profilePhotoZone && profilePhotoInput) {
        // Drag and drop handlers
        profilePhotoZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            profilePhotoZone.style.borderColor = '#007bff';
        });

        profilePhotoZone.addEventListener('dragleave', () => {
            profilePhotoZone.style.borderColor = '#ddd';
        });

        profilePhotoZone.addEventListener('drop', (e) => {
            e.preventDefault();
            profilePhotoZone.style.borderColor = '#ddd';
            if (profilePhotoInput && e.dataTransfer.files.length > 0) {
                profilePhotoInput.files = e.dataTransfer.files;
                handleFileSelection(profilePhotoInput);
            }
        });

        // File input change handler
        profilePhotoInput.addEventListener('change', function(e) {
            if (isProcessingFile) return;
            if (this.files && this.files.length > 0) {
                isProcessingFile = true;
                handleFileSelection(this);
                setTimeout(() => { isProcessingFile = false; }, 1000);
            }
        });
    }

    function handleFileSelection(input) {
        const file = input.files[0];
        console.log('handleFileSelection called:', file ? file.name : 'No file', 'Input name:', input.name);
        if (!file) return;

        if (file.size > 25 * 1024 * 1024) {
            alert('File size must be less than 25 MB');
            return;
        }

        // Open cropper for profile photo (images)
        if (input.name === 'avatar' && file.type.startsWith('image/')) {
            console.log('Opening image cropper for profile photo');
            openImageCropper(file, input);
        } else {
            console.log('Showing file preview for non-image or ID document');
            showFilePreview(file, input);
        }
    }

    function openImageCropper(file, input) {
        console.log('openImageCropper called with file:', file.name);
        currentFileInput = input;
        const reader = new FileReader();

        reader.onload = function(e) {
            console.log('Image loaded, looking for DOM elements');
            const cropperImage = document.getElementById('crop-image');
            const imageCropperModal = document.getElementById('imageCropperModal');

            console.log('cropperImage element:', cropperImage);
            console.log('imageCropperModal element:', imageCropperModal);

            if (!cropperImage || !imageCropperModal) {
                console.log('Cropper elements not found, showing file preview instead');
                showFilePreview(file, input);
                return;
            }

            console.log('Setting image source and showing modal');
            cropperImage.src = e.target.result;

            // Show the modal
            console.log('Creating Bootstrap modal instance');
            console.log('Bootstrap available:', typeof bootstrap !== 'undefined');

            if (typeof bootstrap === 'undefined') {
                console.error('Bootstrap is not loaded!');
                alert('Bootstrap is required for the modal to work');
                return;
            }

            // Remove any existing backdrop first
            const existingBackdrop = document.querySelector('.modal-backdrop');
            if (existingBackdrop) {
                existingBackdrop.remove();
            }

            const modal = new bootstrap.Modal(imageCropperModal, {
                backdrop: true,
                keyboard: true,
                focus: true
            });
            console.log('Modal instance created, calling show()');
            modal.show();
            console.log('Modal show() called');

            // Initialize cropper when modal is shown
            imageCropperModal.addEventListener('shown.bs.modal', function() {
                console.log('Modal shown event fired, initializing cropper');
                console.log('Cropper library available:', typeof Cropper !== 'undefined');
                
                if (typeof Cropper === 'undefined') {
                    console.error('Cropper.js library is not loaded!');
                    alert('Image cropper library failed to load. Please refresh the page.');
                    modal.hide();
                    return;
                }
                
                if (cropper) {
                    cropper.destroy();
                }

                console.log('Creating new Cropper instance');
                try {
                    cropper = new Cropper(cropperImage, {
                        aspectRatio: 1, // Square crop
                        viewMode: 2,
                        dragMode: 'move',
                        autoCropArea: 0.8,
                        restore: false,
                        guides: false,
                        center: false,
                        highlight: false,
                        cropBoxMovable: true,
                        cropBoxResizable: true,
                        toggleDragModeOnDblclick: false,
                    });
                    console.log('Cropper initialized successfully');
                } catch (error) {
                    console.error('Error initializing cropper:', error);
                    alert('Error initializing image cropper. Please try again.');
                }
            }, { once: true });
        };

        reader.readAsDataURL(file);
    }

    function showFilePreview(file, input) {
        const zone = input.closest('.upload-image-drop-zone');
        const uploadContent = zone.querySelector('.upload-content');
        const uploadPreview = zone.querySelector('.upload-preview');
        const previewImage = zone.querySelector('img[id*="preview"]');

        // Determine the prefix based on input name
        const isProfile = input.name === 'avatar';
        const prefix = isProfile ? 'profile-photo' : 'id-document';

        const fileInfo = document.getElementById(`${prefix}-info`);
        const fileName = document.getElementById(`${prefix}-name`);
        const fileSize = document.getElementById(`${prefix}-size`);
        const progressFill = document.getElementById(`${prefix}-progress`);
        const progressText = document.getElementById(`${prefix}-percent`);

        if (fileName) fileName.textContent = file.name;
        if (fileSize) fileSize.textContent = formatFileSize(file.size);

        // For profile photos, we don't hide upload content - it stays visible
        // For documents, show preview if it's an image
        if (previewImage && file.type.startsWith('image/') && !isProfile) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                if (uploadPreview) uploadPreview.style.display = 'block';
                if (uploadContent) uploadContent.style.display = 'none';
            };
            reader.readAsDataURL(file);
        } else if (!isProfile && uploadContent) {
            uploadContent.style.display = 'none';
        }

        if (fileInfo) fileInfo.style.display = 'block';
        if (progressFill) progressFill.style.width = '100%';
        if (progressText) progressText.textContent = '100%';
    }

    // Apply crop button
    const applyCropBtn = document.getElementById('apply-crop');
    if (applyCropBtn) {
        applyCropBtn.addEventListener('click', function() {
            if (cropper && currentFileInput) {
                cropper.getCroppedCanvas({
                    width: 400,
                    height: 400,
                    imageSmoothingEnabled: true,
                    imageSmoothingQuality: 'high',
                }).toBlob(function(blob) {
                    const file = new File([blob], 'profile-photo-cropped.jpg', { type: 'image/jpeg' });
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    currentFileInput.files = dataTransfer.files;

                    showFilePreview(file, currentFileInput);

                    const modal = bootstrap.Modal.getInstance(document.getElementById('imageCropperModal'));
                    if (modal) modal.hide();

                    if (cropper) {
                        cropper.destroy();
                        cropper = null;
                    }
                }, 'image/jpeg', 0.9);
            }
        });
    }

    // Cancel crop button
    const cancelCropBtn = document.getElementById('cancel-crop');
    if (cancelCropBtn) {
        cancelCropBtn.addEventListener('click', function() {
            if (currentFileInput) {
                currentFileInput.value = '';
            }
            if (cropper) {
                cropper.destroy();
                cropper = null;
            }
        });
    }

    // Delete profile photo button (for newly uploaded file)
    const profilePhotoDelete = document.getElementById('profile-photo-delete');
    if (profilePhotoDelete) {
        profilePhotoDelete.addEventListener('click', function(e) {
            e.stopPropagation();
            if (profilePhotoInput) {
                profilePhotoInput.value = '';
            }
            const fileInfo = document.getElementById('profile-photo-info');
            const uploadContent = profilePhotoZone.querySelector('.upload-content');
            const uploadPreview = profilePhotoZone.querySelector('.upload-preview, .profile-photo-preview-container');
            
            if (fileInfo) fileInfo.style.display = 'none';
            if (uploadPreview) uploadPreview.style.display = 'none';
            if (uploadContent) uploadContent.style.display = 'flex';
        });
    }

    // Delete existing profile image button
    const deleteExistingProfileImage = document.getElementById('delete-existing-profile-image');
    if (deleteExistingProfileImage) {
        deleteExistingProfileImage.addEventListener('click', function(e) {
            e.stopPropagation();
            e.preventDefault();
            const file_id =  this.getAttribute('data-file_id');
            console.log('file_id:', file_id);
            // Use SweetAlert2 directly instead of confirm() to avoid browser hang
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'question',
                    title: 'Remove Profile Photo?',
                    text: 'Are you sure you want to remove your profile photo?',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Remove',
                    cancelButtonText: 'Cancel',
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    allowOutsideClick: true,
                    allowEscapeKey: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        // Mark for deletion
                        const deleteInput = document.getElementById('delete_avatar');
                        if (deleteInput) {
                            deleteInput.value = file_id;
                        }
                        
                        // Hide the existing image container
                        const existingImageContainer = document.getElementById('existing-profile-image-container');
                        if (existingImageContainer) {
                            existingImageContainer.style.display = 'none';
                        }
                        
                        // Show success message
                        Swal.fire({
                            icon: 'success',
                            title: 'Profile Photo Removed',
                            text: 'Your profile photo will be removed when you save the profile.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                });
            } else {
                // Fallback to native confirm if SweetAlert2 is not available
                if (window.originalConfirm && window.originalConfirm('Are you sure you want to remove your profile photo?')) {
                    const deleteInput = document.getElementById('delete_avatar');
                    if (deleteInput) {
                        deleteInput.value = '1';
                    }
                    const existingImageContainer = document.getElementById('existing-profile-image-container');
                    if (existingImageContainer) {
                        existingImageContainer.style.display = 'none';
                    }
                }
            }
        });
    }

    // Document Upload Functionality (same as register page)
    const idDocumentZone = document.getElementById('id-document-drop-zone');
    const idDocumentInput = document.getElementById('id-document-input');

    if (idDocumentZone && idDocumentInput) {
        // Drag and drop handlers
        idDocumentZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            idDocumentZone.style.borderColor = '#007bff';
        });

        idDocumentZone.addEventListener('dragleave', () => {
            idDocumentZone.style.borderColor = '#ddd';
        });

        idDocumentZone.addEventListener('drop', (e) => {
            e.preventDefault();
            idDocumentZone.style.borderColor = '#ddd';
            if (idDocumentInput && e.dataTransfer.files.length > 0) {
                idDocumentInput.files = e.dataTransfer.files;
                handleFileSelection(idDocumentInput);
            }
        });

        // File input change handler
        idDocumentInput.addEventListener('change', function(e) {
            if (isProcessingFile) return;
            if (this.files && this.files.length > 0) {
                isProcessingFile = true;
                handleFileSelection(this);
                setTimeout(() => { isProcessingFile = false; }, 1000);
            }
        });
    }

    // Delete document button
    const idDocumentDelete = document.getElementById('id-document-delete');
    if (idDocumentDelete) {
        idDocumentDelete.addEventListener('click', function() {
            if (idDocumentInput) {
                idDocumentInput.value = '';
            }
            const fileInfo = document.getElementById('id-document-info');
            const uploadContent = idDocumentZone.querySelector('.upload-content');
            const uploadPreview = idDocumentZone.querySelector('.upload-preview');
            
            if (fileInfo) fileInfo.style.display = 'none';
            if (uploadPreview) uploadPreview.style.display = 'none';
            if (uploadContent) uploadContent.style.display = 'block';
        });
    }

    // Form submission - show loading state
    const profileForm = document.getElementById('profileForm');
    if (profileForm) {
        profileForm.addEventListener('submit', function(e) {
            const saveBtn = document.getElementById('saveProfileBtn');
            if (saveBtn) {
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i data-lucide="loader-2" class="animate-spin"></i> Saving...';
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            }
            // Form will submit normally - Laravel handles the submission
        });
    }

    // Handle password change separately
    const changePasswordBtn = document.getElementById('changePasswordBtn');
    if (changePasswordBtn) {
        changePasswordBtn.addEventListener('click', function() {
            const currentPassword = document.getElementById('current_password').value;
            const newPassword = document.getElementById('new_password').value;
            const confirmPassword = document.getElementById('new_password_confirmation').value;

            if (!currentPassword || !newPassword || !confirmPassword) {
                alert('Please fill in all password fields.');
                return;
            }

            if (newPassword !== confirmPassword) {
                alert('New password and confirm password do not match.');
                return;
            }

            // Create form data
            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('current_password', currentPassword);
            formData.append('new_password', newPassword);
            formData.append('new_password_confirmation', confirmPassword);

            // Disable button
            changePasswordBtn.disabled = true;
            changePasswordBtn.innerHTML = '<i data-lucide="loader-2" class="animate-spin"></i> Changing...';
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }

            // Submit via fetch
            fetch('{{ route("profile.change_password.submit") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                // Check if response is HTML (redirect) or JSON
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json().then(data => ({ data, isJson: true }));
                } else {
                    // If redirect or HTML response, check status
                    if (response.redirected || response.status === 302 || response.ok) {
                        return { success: true, message: 'Password changed successfully.' };
                    }
                    return response.text().then(text => ({ data: { message: text }, isJson: false }));
                }
            })
            .then(result => {
                if (result.success || (result.isJson && result.data.success)) {
                    alert('Password changed successfully.');
                    document.getElementById('current_password').value = '';
                    document.getElementById('new_password').value = '';
                    document.getElementById('new_password_confirmation').value = '';
                } else {
                    const message = result.isJson ? (result.data.message || 'Error changing password. Please try again.') : 'Error changing password. Please try again.';
                    alert(message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error changing password. Please try again.');
            })
            .finally(() => {
                changePasswordBtn.disabled = false;
                changePasswordBtn.innerHTML = '<i data-lucide="lock"></i> Change Password';
                if (typeof lucide !== 'undefined') {
                    lucide.createIcons();
                }
            });
        });
    }

    // Flag to prevent conflicts with existing event handlers
    window.isUpdatingFromGoogleMaps = false;

    /**
     * Update location dropdowns (country, state, city) based on Google Maps autocomplete selection
     * This function is called by google-map.js when a place is selected
     */
    window.updateLocationDropdowns = function(inputId, countryName, stateName, cityName) {
        // Determine which dropdown IDs to use based on input ID
        let countrySelectId, stateSelectId, citySelectId;
        
        if (inputId === 'team_location_name') {
            // Team profile
            countrySelectId = '#team_master_country_id';
            stateSelectId = '#team_master_state_id';
            citySelectId = '#team_master_city_id';
        } else if (inputId === 'sponsor_location_name') {
            // Sponsor profile
            countrySelectId = '#sponsor_master_country_id';
            stateSelectId = '#sponsor_master_state_id';
            citySelectId = '#sponsor_master_city_id';
        } else {
            console.log('Unknown location input ID:', inputId);
            return;
        }

        console.log('Updating location dropdowns for:', inputId);
        console.log('Country:', countryName, 'State:', stateName, 'City:', cityName);

        // Set flag to prevent conflicts
        window.isUpdatingFromGoogleMaps = true;

        // Step 1: Match and select country
        matchAndSelectCountry(countrySelectId, countryName, function(selectedCountryId) {
            if (!selectedCountryId) {
                console.log('Country not found:', countryName);
                window.isUpdatingFromGoogleMaps = false;
                return;
            }

            // Step 2: After country is selected, fetch and match state
            if (stateName) {
                fetchAndMatchState(countrySelectId, stateSelectId, stateName, function(selectedStateId) {
                    if (!selectedStateId) {
                        console.log('State not found:', stateName);
                        window.isUpdatingFromGoogleMaps = false;
                        return;
                    }

                    // Step 3: After state is selected, fetch cities and match if cityName provided
                    fetchAndMatchCity(stateSelectId, citySelectId, cityName || null, function() {
                        window.isUpdatingFromGoogleMaps = false;
                    });
                });
            } else {
                window.isUpdatingFromGoogleMaps = false;
            }
        });
    }

    /**
     * Match country by option text and select it
     */
    function matchAndSelectCountry(countrySelectId, countryName, callback) {
        const countrySelect = document.querySelector(countrySelectId);
        if (!countrySelect) {
            callback(null);
            return;
        }

        let matchedCountryId = null;

        // Find matching country by option text (case-insensitive)
        Array.from(countrySelect.options).forEach(option => {
            const optionText = option.text.trim();
            if (optionText.toLowerCase() === countryName.toLowerCase()) {
                matchedCountryId = option.value;
            }
        });

        if (matchedCountryId) {
            countrySelect.value = matchedCountryId;
            countrySelect.dispatchEvent(new Event('change'));
            console.log('Country matched and selected:', countryName, matchedCountryId);
            setTimeout(function() {
                callback(matchedCountryId);
            }, 100);
        } else {
            callback(null);
        }
    }

    /**
     * Fetch states for a country and match state by option text
     */
    function fetchAndMatchState(countrySelectId, stateSelectId, stateName, callback) {
        const countrySelect = document.querySelector(countrySelectId);
        const stateSelect = document.querySelector(stateSelectId);
        
        if (!countrySelect || !stateSelect) {
            callback(null);
            return;
        }

        const countryId = countrySelect.value;
        if (!countryId) {
            callback(null);
            return;
        }

        // Reset state dropdown
        stateSelect.innerHTML = '<option value="">-- Select State --</option>';

        // Fetch states
        fetch(`/api/v1/states/${countryId}`)
            .then(response => response.json())
            .then(data => {
                if ((data.status === 200 || data.success) && data.data) {
                    let matchedStateId = null;
                    
                    // Add states to dropdown and find match
                    data.data.forEach(state => {
                        const stateNameValue = state.state_name || state.title;
                        const option = document.createElement('option');
                        option.value = state.id;
                        option.textContent = stateNameValue;
                        stateSelect.appendChild(option);
                        
                        // Match by option text (case-insensitive)
                        if (stateNameValue.toLowerCase() === stateName.toLowerCase()) {
                            matchedStateId = state.id;
                        }
                    });

                    if (matchedStateId) {
                        stateSelect.value = matchedStateId;
                        stateSelect.dispatchEvent(new Event('change'));
                        console.log('State matched and selected:', stateName, matchedStateId);
                        setTimeout(function() {
                            callback(matchedStateId);
                        }, 100);
                    } else {
                        console.log('State not found in list:', stateName);
                        callback(null);
                    }
                } else {
                    callback(null);
                }
            })
            .catch(error => {
                console.error('Error loading states:', error);
                callback(null);
            });
    }

    /**
     * Fetch cities for a state and match city by option text (if cityName provided)
     */
    function fetchAndMatchCity(stateSelectId, citySelectId, cityName, callback) {
        const stateSelect = document.querySelector(stateSelectId);
        const citySelect = document.querySelector(citySelectId);
        
        if (!stateSelect || !citySelect) {
            if (callback) callback();
            return;
        }

        const stateId = stateSelect.value;
        if (!stateId) {
            if (callback) callback();
            return;
        }

        // Reset city dropdown
        citySelect.innerHTML = '<option value="">-- Select City --</option>';

        // Fetch cities
        fetch(`/api/v1/cities/${stateId}`)
            .then(response => response.json())
            .then(data => {
                if ((data.status === 200 || data.success) && data.data) {
                    let matchedCityId = null;
                    
                    // Add cities to dropdown and find match (if cityName is provided)
                    data.data.forEach(city => {
                        const cityNameValue = city.city_name || city.title;
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = cityNameValue;
                        citySelect.appendChild(option);
                        
                        // Match by option text (case-insensitive) if cityName is provided
                        if (cityName && cityNameValue.toLowerCase() === cityName.toLowerCase()) {
                            matchedCityId = city.id;
                        }
                    });

                    if (matchedCityId && cityName) {
                        citySelect.value = matchedCityId;
                        citySelect.dispatchEvent(new Event('change'));
                        console.log('City matched and selected:', cityName, matchedCityId);
                    } else {
                        console.log('City not found or not provided:', cityName);
                    }
                }
                if (callback) callback();
            })
            .catch(error => {
                console.error('Error loading cities:', error);
                if (callback) callback();
            });
    }
});
</script>

<!-- Google Maps API for location autocomplete -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ \Config::get('settings.google_map_key') }}&libraries=places&callback=initAutocomplete" defer></script>
<script src="{{ asset('admin-form-plugins/google-map.js') }}"></script>

<!-- Fan Profile Autocomplete and Validation -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fan Username Validation
    const fanUsernameInput = document.getElementById('fan_chose_username');
    const fanUsernameFeedback = document.getElementById('fan_username_feedback');
    let usernameTimeout = null;

    if (fanUsernameInput) {
        fanUsernameInput.addEventListener('input', function() {
            const username = this.value.trim();
            const originalUsername = '{{ $user->username }}';

            // Clear previous timeout
            clearTimeout(usernameTimeout);

            // Remove validation classes
            this.classList.remove('is-invalid', 'is-valid');
            fanUsernameFeedback.style.display = 'none';

            if (username.length < 3) {
                return;
            }

            // If username hasn't changed, no need to check
            if (username === originalUsername) {
                return;
            }

            // Debounce the validation request
            usernameTimeout = setTimeout(() => {
                checkFanUsername(username);
            }, 500);
        });
    }

    function checkFanUsername(username) {
        const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                     document.querySelector('[name="_token"]')?.value;

        fetch('/api/v1/fan/username-check', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': token
            },
            body: JSON.stringify({ fan_chose_username: username })
        })
        .then(response => response.json())
        .then(data => {
            if (data === true || data === false) {
                // Old API format (boolean)
                if (data) {
                    fanUsernameInput.classList.remove('is-invalid');
                    fanUsernameInput.classList.add('is-valid');
                    fanUsernameFeedback.style.display = 'none';
                } else {
                    fanUsernameInput.classList.remove('is-valid');
                    fanUsernameInput.classList.add('is-invalid');
                    fanUsernameFeedback.textContent = 'This username is already taken.';
                    fanUsernameFeedback.style.display = 'block';
                }
            } else {
                // New API format (JSON response)
                if (data.success || data.available) {
                    fanUsernameInput.classList.remove('is-invalid');
                    fanUsernameInput.classList.add('is-valid');
                    fanUsernameFeedback.style.display = 'none';
                } else {
                    fanUsernameInput.classList.remove('is-valid');
                    fanUsernameInput.classList.add('is-invalid');
                    fanUsernameFeedback.textContent = data.message || 'This username is already taken.';
                    fanUsernameFeedback.style.display = 'block';
                }
            }
        })
        .catch(error => {
            console.error('Error checking username:', error);
        });
    }

    // Fan Favorites Autocomplete
    const fanFavoritesInput = document.getElementById('fan_favorites_team');
    const fanFavoritesDropdown = document.getElementById('fan-favorites-autocomplete-dropdown');
    const hiddenFanFavoritesId = document.getElementById('fan_favorites_team_id');
    let fanFavoritesTimeout = null;
    let currentFanFavoritesHighlightIndex = -1;

    if (fanFavoritesInput && fanFavoritesDropdown) {
        fanFavoritesInput.addEventListener('input', function() {
            const query = this.value.trim();
            clearTimeout(fanFavoritesTimeout);

            if (query.length < 2) {
                hideFanFavoritesAutocompleteDropdown();
                return;
            }

            showFanFavoritesLoadingState();
            fanFavoritesTimeout = setTimeout(() => {
                searchFanFavorites(query);
            }, 300);
        });

        fanFavoritesInput.addEventListener('keydown', function(e) {
            const items = fanFavoritesDropdown.querySelectorAll('.autocomplete-item');
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                currentFanFavoritesHighlightIndex = Math.min(currentFanFavoritesHighlightIndex + 1, items.length - 1);
                updateFanFavoritesHighlight(items);
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                currentFanFavoritesHighlightIndex = Math.max(currentFanFavoritesHighlightIndex - 1, -1);
                updateFanFavoritesHighlight(items);
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (currentFanFavoritesHighlightIndex >= 0 && items[currentFanFavoritesHighlightIndex]) {
                    selectFanFavorite(items[currentFanFavoritesHighlightIndex]);
                }
            } else if (e.key === 'Escape') {
                hideFanFavoritesAutocompleteDropdown();
            }
        });

        document.addEventListener('click', function(e) {
            if (!fanFavoritesInput.contains(e.target) && !fanFavoritesDropdown.contains(e.target)) {
                hideFanFavoritesAutocompleteDropdown();
            }
        });
    }

    function searchFanFavorites(query) {
        fetch(`/api/v1/users/search?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data) {
                    displayFanFavoritesResults(data.data);
                } else {
                    showFanFavoritesNoResults();
                }
            })
            .catch(error => {
                console.error('Error searching fan favorites:', error);
                showFanFavoritesErrorState();
            });
    }

    function displayFanFavoritesResults(users) {
        let html = '';
        if (users.length === 0) {
            html = '<div class="no-results">No athletes or teams found</div>';
        } else {
            users.forEach(user => {
                html += `
                    <div class="autocomplete-item" data-user-id="${user.id}" data-user-name="${user.name}">
                        <div class="user-info">
                            <div class="user-avatar">
                                ${user.avatar ? `<img src="${user.avatar}" alt="${user.name}" class="avatar-img">` : `<div class="avatar-placeholder">${user.name.charAt(0)}</div>`}
                            </div>
                            <div class="user-details">
                                <div class="user-name">${user.name}</div>
                                <div class="user-role">${user.role}</div>
                            </div>
                        </div>
                    </div>
                `;
            });
        }
        fanFavoritesDropdown.innerHTML = html;
        showFanFavoritesAutocompleteDropdown();
        currentFanFavoritesHighlightIndex = -1;
        fanFavoritesDropdown.querySelectorAll('.autocomplete-item').forEach(item => {
            item.addEventListener('click', () => selectFanFavorite(item));
        });
    }

    function showFanFavoritesLoadingState() {
        fanFavoritesDropdown.innerHTML = '<div class="loading-state">Searching...</div>';
        showFanFavoritesAutocompleteDropdown();
    }

    function showFanFavoritesNoResults() {
        fanFavoritesDropdown.innerHTML = '<div class="no-results">No athletes or teams found</div>';
        showFanFavoritesAutocompleteDropdown();
    }

    function showFanFavoritesErrorState() {
        fanFavoritesDropdown.innerHTML = '<div class="error-state">Error searching. Please try again.</div>';
        showFanFavoritesAutocompleteDropdown();
    }

    function showFanFavoritesAutocompleteDropdown() {
        fanFavoritesDropdown.style.display = 'block';
        fanFavoritesDropdown.classList.add('show');
    }

    function hideFanFavoritesAutocompleteDropdown() {
        fanFavoritesDropdown.style.display = 'none';
        fanFavoritesDropdown.classList.remove('show');
        currentFanFavoritesHighlightIndex = -1;
    }

    function updateFanFavoritesHighlight(items) {
        items.forEach((item, index) => {
            if (index === currentFanFavoritesHighlightIndex) {
                item.classList.add('highlighted');
            } else {
                item.classList.remove('highlighted');
            }
        });
    }

    function selectFanFavorite(item) {
        const userId = item.getAttribute('data-user-id');
        const userName = item.getAttribute('data-user-name');
        fanFavoritesInput.value = userName;
        hiddenFanFavoritesId.value = userId;
        hideFanFavoritesAutocompleteDropdown();
    }

    // City Autocomplete
    const cityAutocompleteInput = document.getElementById('fan_city_name');
    const cityAutocompleteDropdown = document.getElementById('city-autocomplete-dropdown');
    const hiddenCityId = document.getElementById('fan_master_city_id');
    let cityAutocompleteTimeout = null;
    let currentCityHighlightIndex = -1;

    if (cityAutocompleteInput && cityAutocompleteDropdown) {
        cityAutocompleteInput.addEventListener('input', function() {
            const query = this.value.trim();
            clearTimeout(cityAutocompleteTimeout);

            if (query.length < 2) {
                hideCityAutocompleteDropdown();
                return;
            }

            showCityLoadingState();
            cityAutocompleteTimeout = setTimeout(() => {
                searchCities(query);
            }, 300);
        });

        cityAutocompleteInput.addEventListener('keydown', function(e) {
            const items = cityAutocompleteDropdown.querySelectorAll('.autocomplete-item');
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                currentCityHighlightIndex = Math.min(currentCityHighlightIndex + 1, items.length - 1);
                updateCityHighlight(items);
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                currentCityHighlightIndex = Math.max(currentCityHighlightIndex - 1, -1);
                updateCityHighlight(items);
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (currentCityHighlightIndex >= 0 && items[currentCityHighlightIndex]) {
                    selectCity(items[currentCityHighlightIndex]);
                }
            } else if (e.key === 'Escape') {
                hideCityAutocompleteDropdown();
            }
        });

        document.addEventListener('click', function(e) {
            if (!cityAutocompleteInput.contains(e.target) && !cityAutocompleteDropdown.contains(e.target)) {
                hideCityAutocompleteDropdown();
            }
        });
    }

    function searchCities(query) {
        fetch(`/api/v1/cities/search?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if ((data.success || data.status === 200) && data.data) {
                    displayCityResults(data.data);
                } else {
                    showCityNoResults();
                }
            })
            .catch(error => {
                console.error('Error searching cities:', error);
                showCityErrorState();
            });
    }

    function displayCityResults(cities) {
        let html = '';
        if (cities.length === 0) {
            html = '<div class="no-results">No cities found</div>';
        } else {
            cities.forEach(city => {
                html += `
                    <div class="autocomplete-item" data-city-id="${city.id}" data-city-name="${city.city_name}">
                        <div class="city-info">
                            <div class="city-name">${city.city_name}</div>
                            <div class="city-location">${city.state_name || 'Unknown State'}, ${city.country_name || 'Unknown Country'}</div>
                        </div>
                    </div>
                `;
            });
        }
        cityAutocompleteDropdown.innerHTML = html;
        showCityAutocompleteDropdown();
        currentCityHighlightIndex = -1;
        cityAutocompleteDropdown.querySelectorAll('.autocomplete-item').forEach(item => {
            item.addEventListener('click', () => selectCity(item));
        });
    }

    function showCityLoadingState() {
        cityAutocompleteDropdown.innerHTML = '<div class="loading-state">Searching...</div>';
        showCityAutocompleteDropdown();
    }

    function showCityNoResults() {
        cityAutocompleteDropdown.innerHTML = '<div class="no-results">No cities found</div>';
        showCityAutocompleteDropdown();
    }

    function showCityErrorState() {
        cityAutocompleteDropdown.innerHTML = '<div class="error-state">Error searching. Please try again.</div>';
        showCityAutocompleteDropdown();
    }

    function showCityAutocompleteDropdown() {
        cityAutocompleteDropdown.style.display = 'block';
        cityAutocompleteDropdown.classList.add('show');
    }

    function hideCityAutocompleteDropdown() {
        cityAutocompleteDropdown.style.display = 'none';
        cityAutocompleteDropdown.classList.remove('show');
        currentCityHighlightIndex = -1;
    }

    function updateCityHighlight(items) {
        items.forEach((item, index) => {
            if (index === currentCityHighlightIndex) {
                item.classList.add('highlighted');
            } else {
                item.classList.remove('highlighted');
            }
        });
    }

    function selectCity(item) {
        const cityId = item.getAttribute('data-city-id');
        const cityName = item.getAttribute('data-city-name');
        cityAutocompleteInput.value = cityName;
        hiddenCityId.value = cityId;
        hideCityAutocompleteDropdown();
    }
});
</script>
@endpush