@extends('layout.super-admin-two')

@section('title', 'User Impersonation')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-7">
            <div class="card shadow-sm border-0">
                <div class="card-header d-flex justify-content-between align-items-center">                    
                    <div>
                        <i class="bi bi-person-lines-fill me-2 text-primary"></i>User Impersonation 
                    </div>                   
                    {{-- Loading State --}}
                    <div id="loadingSpinner" class="spinner-border spinner-border-sm text-primary d-none me-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
                <div class="card-body">
                    <form id="impersonateForm">
                        @csrf
                        
                        {{-- Station Type Dropdown --}}
                        <div class="mb-3">
                            <label for="stationType" class="form-label">
                                Station Type  
                            </label>
                            <select id="stationType" class="form-select" required>
                                <option value="">Select Station Type</option>
                            </select>
                            <small class="text-muted d-block mt-1">Select the station type first</small>
                        </div>

                        {{-- Region Dropdown --}}
                        <div class="mb-3">
                            <label for="region" class="form-label">
                                Region  
                            </label>
                            <select id="region" class="form-select">
                                <option value="">Select Region</option>
                            </select>
                            <small class="text-muted d-block mt-1">Select a region</small>
                        </div>

                        {{-- Division Dropdown --}}
                        <div class="mb-3">
                            <label for="division" class="form-label">
                                Division  
                            </label>
                            <select id="division" class="form-select" disabled>
                                <option value="">Select Division</option>
                            </select>
                            <small class="text-muted d-block mt-1">Division will load based on selected region</small>
                        </div>

                        {{-- District Dropdown --}}
                        <div class="mb-3">
                            <label for="district" class="form-label">
                                District  
                            </label>
                            <select id="district" class="form-select" disabled>
                                <option value="">Select District</option>
                            </select>
                            <small class="text-muted d-block mt-1">District will load based on selected division</small>
                        </div>

                        {{-- School Dropdown --}}
                        <div class="mb-3">
                            <label for="school" class="form-label">
                                School  
                            </label>
                            <select id="school" class="form-select" disabled>
                                <option value="">Select School</option>
                            </select>
                            <small class="text-muted d-block mt-1">School will load based on selected district</small>
                        </div>

                        {{-- User Type Dropdown --}}
                        <div class="mb-3">
                            <label for="userType" class="form-label">
                                User Type  
                            </label>
                            <select id="userType" class="form-select" required>
                                <option value="">Select User Type</option>
                            </select>
                            <small class="text-muted d-block mt-1">Select the user type to impersonate</small>
                        </div>


                        {{-- Action Buttons --}}
                        <div class="d-grid gap-2 d-sm-flex justify-content-sm-end mt-4">
                            <button type="reset" class="btn btn-outline-secondary">
                                <i class="fas fa-redo"></i> Clear
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-sign-in-alt"></i> Impersonate User
                            </button>
                        </div>
                    </form>

                    {{-- Alert Messages --}}
                    <div id="alertContainer" class="mt-3"></div>
                </div>
            </div>

            {{-- Info Box --}}
            <div class="alert alert-info mt-3" role="alert">
                <small>
                    <strong>Note:</strong> This action will create a session impersonating the selected user configuration. You will be redirected to the dashboard with the selected context.
                </small>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Authority Level Constants
            const AUTHORITY_LEVELS = {
                CENTRAL_OFFICE: 1,
                REGIONAL_OFFICE: 2,
                DIVISION_OFFICE: 3,
                DISTRICT_OFFICE: 4,
                SCHOOL: 5
            };

            // Get all form elements
            const stationTypeSelect = document.getElementById('stationType');
            const regionSelect = document.getElementById('region');
            const divisionSelect = document.getElementById('division');
            const districtSelect = document.getElementById('district');
            const schoolSelect = document.getElementById('school');
            const userTypeSelect = document.getElementById('userType');
            const impersonateForm = document.getElementById('impersonateForm');            
            const loadingSpinner = document.getElementById('loadingSpinner');
            const alertContainer = document.getElementById('alertContainer');

            // Store authority level with each station type option
            let stationTypesData = [];
            let userTypeData = [];

            // Initialize on page load
            fetchStationTypes();
            fetchUserTypes();
            fetchRegions();

            // Event listeners
            stationTypeSelect.addEventListener('change', handleStationTypeChange);
            regionSelect.addEventListener('change', handleRegionChange);
            divisionSelect.addEventListener('change', handleDivisionChange);
            districtSelect.addEventListener('change', handleDistrictChange);
            impersonateForm.addEventListener('submit', submitImpersonation);

            // Reset form on reset button
            impersonateForm.addEventListener('reset', function () {
                setTimeout(() => {
                    resetForm();
                }, 0);
            });

            /**
             * Fetch Station Types
             */
            function fetchStationTypes() {
                showLoading(true);
                
                fetch('{{ route("admin.api.station-types") }}', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    stationTypesData = data;
                    populateDropdown(stationTypeSelect, data, 'id', 'name');
                    showLoading(false);
                })
                .catch(error => {
                    showAlert('Error loading station types: ' + error.message, 'danger');
                    showLoading(false);
                });
            }

            /**
             * Fetch User Types (all)
             */
            function fetchUserTypes() {
                fetch('{{ route("admin.api.user-types") }}', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    userTypeData = data;
                    populateDropdown(userTypeSelect, data, 'id', 'name');
                })
                .catch(error => {
                    showAlert('Error loading user types: ' + error.message, 'danger');
                });
            }

            /**
             * Fetch User Types by Station Type
             */
            function fetchUserTypesByStation(stationTypeId) {
                const url = new URL('{{ route("admin.api.user-types-by-station") }}', window.location.origin);
                url.searchParams.append('station_type_id', stationTypeId);
                
                fetch(url.toString(), {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    populateDropdown(userTypeSelect, data, 'id', 'name');
                })
                .catch(error => {
                    showAlert('Error loading user types: ' + error.message, 'danger');
                });
            }

            /**
             * Fetch Regions
             */
            function fetchRegions() {
                showLoading(true);
                
                fetch('{{ route("admin.api.regions") }}', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    populateDropdown(regionSelect, data, 'id', 'region_name');
                    showLoading(false);
                })
                .catch(error => {
                    showAlert('Error loading regions: ' + error.message, 'danger');
                    showLoading(false);
                });
            }

            /**
             * Handle Station Type Change - Show/Hide fields based on authority_level
             */
            function handleStationTypeChange() {
                const stationTypeId = this.value;
                
                if (!stationTypeId) {
                    hideAllFields();
                    resetForm();
                    return;
                }

                // Get the selected station type data
                const selectedStationType = stationTypesData.find(st => st.id == stationTypeId);
                const authorityLevel = selectedStationType ? selectedStationType.authority_level : null;

                // Show/Hide fields based on authority level
                showFieldsByAuthorityLevel(authorityLevel);

                // Fetch user types specific to this station type
                fetchUserTypesByStation(stationTypeId);

                // Reset cascading fields
                resetCascadingDropdowns();
            }

            /**
             * Show fields based on authority level
             */
            function showFieldsByAuthorityLevel(authorityLevel) {
                // Hide all fields first
                hideAllFields();

                // Station Type is always visible
                showField('stationType');

                switch(authorityLevel) {
                    case AUTHORITY_LEVELS.CENTRAL_OFFICE:
                        // Central Office: Only Station Type + User Type
                        showField('userType');
                        break;

                    case AUTHORITY_LEVELS.REGIONAL_OFFICE:
                        // Regional Office: Station Type + Region + User Type
                        showField('region');
                        showField('userType');
                        break;

                    case AUTHORITY_LEVELS.DIVISION_OFFICE:
                        // Division Office: Station Type + Region + Division + User Type
                        showField('region');
                        showField('division');
                        showField('userType');
                        break;

                    case AUTHORITY_LEVELS.DISTRICT_OFFICE:
                        // District Office: Station Type + Region + Division + District + User Type
                        showField('region');
                        showField('division');
                        showField('district');
                        showField('userType');
                        break;

                    case AUTHORITY_LEVELS.SCHOOL:
                        // School: All fields
                        showField('region');
                        showField('division');
                        showField('district');
                        showField('school');
                        showField('userType');
                        break;
                }
            }

            /**
             * Show field (make visible)
             */
            function showField(fieldId) {
                const field = document.getElementById(fieldId);
                const parent = field.closest('.mb-3');
                if (parent) {
                    parent.classList.remove('d-none');
                }
            }

            /**
             * Hide all fields except station type
             */
            function hideAllFields() {
                const fields = ['region', 'division', 'district', 'school', 'userType'];
                fields.forEach(fieldId => {
                    const field = document.getElementById(fieldId);
                    const parent = field.closest('.mb-3');
                    if (parent) {
                        parent.classList.add('d-none');
                    }
                });
            }

            /**
             * Handle Region Change
             */
            function handleRegionChange() {
                const regionId = this.value;
                
                if (regionId) {
                    divisionSelect.disabled = false;
                    fetchDivisions(regionId);
                    // Reset dependent dropdowns
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    districtSelect.disabled = true;
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    schoolSelect.disabled = true;
                } else {
                    divisionSelect.disabled = true;
                    divisionSelect.innerHTML = '<option value="">Select Division</option>';
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    districtSelect.disabled = true;
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    schoolSelect.disabled = true;
                }
            }

            /**
             * Handle Division Change
             */
            function handleDivisionChange() {
                const divisionId = this.value;
                const regionId = regionSelect.value;
                
                if (divisionId) {
                    districtSelect.disabled = false;
                    fetchDistricts(divisionId, regionId);
                    // Reset dependent dropdown
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    schoolSelect.disabled = true;
                } else {
                    districtSelect.disabled = true;
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    schoolSelect.disabled = true;
                }
            }

            /**
             * Handle District Change
             */
            function handleDistrictChange() {
                const districtId = this.value;
                const divisionId = divisionSelect.value;
                const regionId = regionSelect.value;
                
                if (districtId) {
                    schoolSelect.disabled = false;
                    fetchSchools(districtId, divisionId, regionId);
                } else {
                    schoolSelect.disabled = true;
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                }
            }

            /**
             * Fetch Divisions
             */
            function fetchDivisions(regionId) {
                showLoading(true);
                
                const url = new URL('{{ route("admin.api.divisions") }}', window.location.origin);
                url.searchParams.append('region_id', regionId);
                
                fetch(url.toString(), {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    populateDropdown(divisionSelect, data, 'division_id', 'division_name');
                    showLoading(false);
                })
                .catch(error => {
                    showAlert('Error loading divisions: ' + error.message, 'danger');
                    showLoading(false);
                });
            }

            /**
             * Fetch Districts
             */
            function fetchDistricts(divisionId, regionId) {
                showLoading(true);
                
                const url = new URL('{{ route("admin.api.districts") }}', window.location.origin);
                url.searchParams.append('division_id', divisionId);
                if (regionId) {
                    url.searchParams.append('region_id', regionId);
                }
                
                fetch(url.toString(), {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    populateDropdown(districtSelect, data, 'district_id', 'district_name');
                    showLoading(false);
                })
                .catch(error => {
                    showAlert('Error loading districts: ' + error.message, 'danger');
                    showLoading(false);
                });
            }

            /**
             * Fetch Schools
             */
            function fetchSchools(districtId, divisionId, regionId) {
                showLoading(true);
                
                const url = new URL('{{ route("admin.api.schools") }}', window.location.origin);
                url.searchParams.append('district_id', districtId);
                if (divisionId) {
                    url.searchParams.append('division_id', divisionId);
                }
                if (regionId) {
                    url.searchParams.append('region_id', regionId);
                }
                
                fetch(url.toString(), {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    populateDropdown(schoolSelect, data, 'school_id', 'school_name');
                    showLoading(false);
                })
                .catch(error => {
                    showAlert('Error loading schools: ' + error.message, 'danger');
                    showLoading(false);
                });
            }

            /**
             * Populate dropdown helper
             */
            function populateDropdown(selectElement, data, valueKey, labelKey) {
                const placeholder = selectElement.options[0].textContent;
                selectElement.innerHTML = `<option value="">${placeholder}</option>`;
                
                if (Array.isArray(data) && data.length > 0) {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item[valueKey];
                        option.textContent = item[labelKey];
                        selectElement.appendChild(option);
                    });
                }
            }

            /**
             * Reset cascading dropdowns
             */
            function resetCascadingDropdowns() {
                divisionSelect.innerHTML = '<option value="">Select Division</option>';
                divisionSelect.disabled = true;
                
                districtSelect.innerHTML = '<option value="">Select District</option>';
                districtSelect.disabled = true;
                
                schoolSelect.innerHTML = '<option value="">Select School</option>';
                schoolSelect.disabled = true;
            }

            /**
             * Reset entire form
             */
            function resetForm() {
                stationTypeSelect.value = '';
                regionSelect.value = '';
                userTypeSelect.value = '';
                resetCascadingDropdowns();
                hideAllFields();
                showField('stationType');                
            }

            /**
             * Submit Impersonation
             */
            function submitImpersonation(e) {
                e.preventDefault();

                const selectedStationType = stationTypesData.find(st => st.id == stationTypeSelect.value);
                const selectedUserType = userTypeData.find(ut => ut.id == stationTypeSelect.value);
                
                const authorityLevel = selectedStationType ? selectedStationType.authority_level : null;
                
                const selectedData = {
                    region_id: regionSelect.value,
                    division_id: divisionSelect.value,
                    district_id: districtSelect.value,
                    school_id: schoolSelect.value,
                    usertype_id: userTypeSelect.value,
                    stationtype_id: stationTypeSelect.value,
                    authority_level: selectedStationType.authority_level 

                };

                // Validation based on visible fields
                if (!stationTypeSelect.value) {
                    showAlert('Please select Station Type', 'warning');
                    return;
                }

                if ((authorityLevel === AUTHORITY_LEVELS.REGIONAL_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.DIVISION_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.DISTRICT_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.SCHOOL) && 
                    !regionSelect.value) {
                    showAlert('Please select Region', 'warning');
                    return;
                }

                if ((authorityLevel === AUTHORITY_LEVELS.DIVISION_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.DISTRICT_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.SCHOOL) && 
                    !divisionSelect.value) {
                    showAlert('Please select Division', 'warning');
                    return;
                }

                if ((authorityLevel === AUTHORITY_LEVELS.DISTRICT_OFFICE || 
                    authorityLevel === AUTHORITY_LEVELS.SCHOOL) && 
                    !districtSelect.value) {
                    showAlert('Please select District', 'warning');
                    return;
                }

                if (authorityLevel === AUTHORITY_LEVELS.SCHOOL && !schoolSelect.value) {
                    showAlert('Please select School', 'warning');
                    return;
                }

                if (!userTypeSelect.value) {
                    showAlert('Please select User Type', 'warning');
                    return;
                }
                
                showLoading(true);                

                // Send to server
                fetch('{{ route("admin.impersonate.submit") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify(selectedData)
                })                
                .then(response => response.json())
                .then(data => {
                    showLoading(false);
                    
                    if (data.success) {
                        showAlert('Impersonation successful! Redirecting...', 'success');
                        console.log('this is debug_session ', data.debug_session);
                        setTimeout(() => {
                            window.location.href = data.redirect_url;
                        }, 1000);
                    } else {
                        showAlert(data.message || 'An error occurred', 'danger');
                    }
                })
                .catch(error => {
                    showLoading(false);
                    showAlert('Error: ' + error.message, 'danger');
                });
            }

            /**
             * Show/hide loading spinner
             */
            function showLoading(show) {
                if (show) {
                    loadingSpinner.classList.remove('d-none');
                } else {
                    loadingSpinner.classList.add('d-none');
                }
            }

            /**
             * Show alerts
             */
            function showAlert(message, type = 'info') {
                const alertHTML = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
                
                alertContainer.innerHTML = alertHTML;
                
                if (type === 'success') {
                    setTimeout(() => {
                        const alert = alertContainer.querySelector('.alert');
                        if (alert) {
                            const bsAlert = new bootstrap.Alert(alert);
                            bsAlert.close();
                        }
                    }, 3000);
                }
            }
        });
    </script>
@endsection