@extends('layouts.admin')

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

@section('content')
<div class="page-header mb-4">
    <h1 class="page-title">Center Owner Profile</h1>
    <p class="page-subtitle">Manage profile details, password and KYC documents.</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>
                @if($center && $center->is_verified)
                    <span class="badge rounded-pill bg-success-subtle text-success"><i class="ti ti-shield-check me-1"></i>Verified</span>
                @else
                    <span class="badge rounded-pill bg-warning-subtle text-warning"><i class="ti ti-clock me-1"></i>Verification Pending</span>
                @endif
            </div>
            <div class="card-body">
                <form action="{{ route('center.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">Mail ID</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) }}" required></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">DoB</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">Center Code</label><input type="text" class="form-control" value="{{ $center?->code }}" readonly></div>
                        <div class="col-md-4"><label class="form-label">Center Location</label><input type="text" name="location" class="form-control" value="{{ old('location', $center?->location) }}" required></div>
                        <div class="col-md-4"><label class="form-label">Center Mail ID</label><input type="email" name="center_email" class="form-control" value="{{ old('center_email', $center?->email) }}" required></div>
                        <div class="col-md-4"><label class="form-label">Center Mobile No.</label><input type="text" name="center_mobile_no" class="form-control" value="{{ old('center_mobile_no', $center?->mobile_no) }}" required></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 class="col-md-6"><label class="form-label">Center Full Address</label><input type="text" name="center_full_address" class="form-control" value="{{ old('center_full_address', $center?->full_address) }}" 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('center.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 class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center gap-2"><i class="ti ti-file-certificate text-success"></i><strong>KYC Details & Documents</strong></div>
            <div class="card-body">
                <form action="{{ route('center.profile.upload') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6"><label class="form-label">Aadhaar No.</label><input type="text" name="aadhaar_no" class="form-control" value="{{ old('aadhaar_no', $user->aadhaar_no) }}"></div>
                        <div class="col-md-6"><label class="form-label">Ration Card No.</label><input type="text" name="ration_card_no" class="form-control" value="{{ old('ration_card_no', $user->ration_card_no) }}"></div>
                        <div class="col-md-6"><label class="form-label">Voter ID No.</label><input type="text" name="voter_id_no" class="form-control" value="{{ old('voter_id_no', $user->voter_id_no) }}"></div>
                        <div class="col-md-6"><label class="form-label">Income Certificate No.</label><input type="text" name="income_certificate_no" class="form-control" value="{{ old('income_certificate_no', $user->income_certificate_no) }}"></div>

                        <div class="col-md-6"><label class="form-label">Aadhaar Document</label><input type="file" class="form-control" name="aadhaar"></div>
                        <div class="col-md-6"><label class="form-label">Ration Card Document</label><input type="file" class="form-control" name="ration_card"></div>
                        <div class="col-md-6"><label class="form-label">Voter ID Document</label><input type="file" class="form-control" name="voter_id"></div>
                        <div class="col-md-6"><label class="form-label">Income Certificate Document</label><input type="file" class="form-control" name="income_certificate"></div>
                    </div>
                    <div class="mt-3 d-flex gap-2">
                        <button class="btn btn-success" type="submit"><i class="ti ti-upload me-1"></i>Submit KYC for Verification</button>
                    </div>
                </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');
        if (!stateSelect || !citySelect) return;

        const selectedState = @json(old('state', $user->state));
        const selectedCity = @json(old('city', $user->city));
        function setFallbackSelectedOption(selectEl, value) {
            if (!value) return;
            const option = document.createElement('option');
            option.value = value;
            option.textContent = 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);
            }
        }

        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);
            }
        }

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

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

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

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