@extends('layouts.admin')

@section('title', 'My Profile')

@section('content')
<div class="page-header mb-4">
    <h1 class="page-title">Super Admin Profile</h1>
    <p class="page-subtitle">Manage your profile details and account password.</p>
</div>

<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <p class="fw-semibold mb-0 fs-4">Profile Details</p>
                <span class="badge rounded-pill bg-primary-subtle text-primary"><i class="ti ti-crown me-1"></i>Super Admin</span>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.profile.update') }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Mobile No.</label>
                            <input type="text" name="mobile_no" class="form-control" value="{{ old('mobile_no', $user->mobile_no) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">WhatsApp No.</label>
                            <input type="text" name="whatsapp_no" class="form-control" value="{{ old('whatsapp_no', $user->whatsapp_no) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Date of Birth</label>
                            <input type="date" name="dob" class="form-control" value="{{ old('dob', optional($user->dob)->format('Y-m-d')) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Role</label>
                            <input type="text" class="form-control" value="Super Admin" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Address Line 01</label>
                            <input type="text" name="address_line_1" class="form-control" value="{{ old('address_line_1', $user->address_line_1 ?: $user->full_address) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Address Line 02</label>
                            <input type="text" name="address_line_2" class="form-control" value="{{ old('address_line_2', $user->address_line_2) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">State</label>
                            <select name="state" id="state" class="form-select" required>
                                <option value="">-- Select State --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">City</label>
                            <select name="city" id="city" class="form-select" required>
                                <option value="">-- Select City --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Pincode</label>
                            <input type="text" name="pincode" class="form-control" value="{{ old('pincode', $user->pincode) }}" pattern="[0-9]{6}" maxlength="6" required>
                        </div>
                    </div>
                    <div class="mt-3 d-flex gap-2">
                        <button class="btn btn-primary" type="submit"><i class="ti ti-device-floppy me-1"></i>Update Profile</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2"><i class="ti ti-lock text-primary"></i><strong>Change Password</strong></div>
            <div class="card-body">
                <form action="{{ route('admin.profile.password') }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-3"><label class="form-label">Current Password</label><input type="password" name="current_password" class="form-control" required></div>
                    <div class="mb-3"><label class="form-label">New Password</label><input type="password" name="password" class="form-control" required></div>
                    <div class="mb-3"><label class="form-label">Confirm New Password</label><input type="password" name="password_confirmation" class="form-control" required></div>
                    <button class="btn btn-outline-primary" type="submit"><i class="ti ti-key me-1"></i>Change Password</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    (function () {
        const STATES_API = @json(route('meta.states'));
        const CITIES_API = @json(route('meta.cities'));
        const stateSelect = document.getElementById('state');
        const citySelect = document.getElementById('city');

        const selectedState = @json(old('state', $user->state));
        const selectedCity = @json(old('city', $user->city));

        function setFallbackSelectedOption(selectEl, value, label) {
            if (!value) return;
            const option = document.createElement('option');
            option.value = value;
            option.textContent = label || value;
            option.selected = true;
            selectEl.appendChild(option);
        }

        function populateStates(states) {
            stateSelect.innerHTML = '<option value="">-- Select State --</option>';
            states.forEach(state => {
                const option = document.createElement('option');
                option.value = state;
                option.textContent = state;
                if (selectedState && state.toLowerCase() === String(selectedState).toLowerCase()) {
                    option.selected = true;
                }
                stateSelect.appendChild(option);
            });

            if (selectedState && !states.some(s => s.toLowerCase() === String(selectedState).toLowerCase())) {
                setFallbackSelectedOption(stateSelect, selectedState, selectedState + ' (custom)');
            }
        }

        function populateCities(cities, preferredCity = null) {
            citySelect.innerHTML = '<option value="">-- Select City --</option>';
            if (!Array.isArray(cities) || cities.length === 0) return;

            cities.forEach(city => {
                const option = document.createElement('option');
                option.value = city;
                option.textContent = city;
                if (preferredCity && city.toLowerCase() === String(preferredCity).toLowerCase()) {
                    option.selected = true;
                }
                citySelect.appendChild(option);
            });

            if (preferredCity && !cities.some(c => c.toLowerCase() === String(preferredCity).toLowerCase())) {
                setFallbackSelectedOption(citySelect, preferredCity, preferredCity + ' (custom)');
            }
        }

        function fetchCities(stateValue, preferredCity = null) {
            if (!stateValue) {
                populateCities([], preferredCity);
                return Promise.resolve();
            }

            return fetch(CITIES_API + '?state=' + encodeURIComponent(stateValue))
                .then(response => response.json())
                .then(payload => {
                    const cities = Array.isArray(payload.data) ? payload.data : [];
                    populateCities(cities, preferredCity);
                });
        }

        stateSelect.addEventListener('change', function () {
            fetchCities(this.value, null).catch(() => {
                citySelect.innerHTML = '<option value="">-- Select City --</option>';
            });
        });

        fetch(STATES_API)
            .then(response => response.json())
            .then(payload => {
                const states = Array.isArray(payload.data) ? payload.data : [];
                populateStates(states);
                return fetchCities(stateSelect.value || selectedState, selectedCity);
            })
            .catch(() => {
                setFallbackSelectedOption(stateSelect, selectedState, selectedState);
                setFallbackSelectedOption(citySelect, selectedCity, selectedCity);
            });
    })();
</script>
@endsection