@extends('layout.layout')
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/datatable.custom.css') }}">
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="{{ asset('assets/css/add-resources-alert.css') }}">
<!-- DataTables Buttons CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">

<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="current-station-id" content="{{ session('station_id') }}">

<div class="m-3">

<div class="container-fluid py-0 mt-3">
    <div class="card my-2 mb-2 mt-4">
        <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
            <div class="shadow-dark border-radius-lg pt-3 pb-2" style="background-color: #0071bd">
                <h5 class="text-white text-capitalize ps-3">Approved Active Users</h5>
            </div>
        </div>
        <!-- Region to School Filters -->
        <div class="card-body">

            @if (session('authority_level')!= 5)
            <div class="row mb-4">

                <!-- Region -->
                <div class="col-md-3 mx-0 px-2">
                    <label class="form-label required">Regions</label>
                    <select id="region_print_select" name="region_print_select" class="form-select" required>
                        <option value="" selected disabled>Select a Region</option>
                    </select>
                </div>

                <!-- Division -->
                <div class="col-md-3 mx-0 px-2">
                    <label class="form-label required">Divisions</label>
                    <select id="division_print_select_central" name="division_print_select_central" class="form-select" required>
                        <option value="" selected disabled>Select a Division</option>
                    </select>
                </div>

                <!-- Districts -->
                <div class="col-md-3 mx-0 px-2">
                    <label class="form-label required">Districts</label>
                    <select id="district_print_select_central" name="district_print_select_central" class="form-select" required>
                        <option value="" selected disabled>Select a District</option>
                    </select>
                </div>


                <!-- Schools -->
                <div class="col-md-3 mx-0 px-2">
                    <label class="form-label required">Schools</label>
                    <select id="school_print_select_central" name="school_print_select_central" class="form-select" required>
                        <option value="" disabled selected >Select School</option>
                    </select>
                </div>

            </div>
            @endif

            <div class="row mb-3">
                <div class="col-md-12">
                    <button type="button" class="btn btn-success" id="bulk-approve-btn" style="display:none;">
                        <i class="fas fa-check-circle"></i> Approve Selected (<span id="selected-count">0</span>)
                    </button>
                    <span id="selection-info" class="ms-3" style="display:none; color: #0071bd;">
                        <i class="fas fa-info-circle"></i> <span id="selected-count-info">0</span> user(s) selected
                    </span>
                </div>
            </div>

            <div class="table-responsive">
                <table id="user-profile-table" class="table table-bordered nowrap hover" style="width: 100%;">
                <thead>
                    <tr>
                        <th style="width: 40px;"
                            @if(!in_array(session('shortcode'), ['CO-BLR','CO-SO','RLREPS', 'RL', 'RITO', 'RSO', 'LREPS', 'PDO', 'ITO','SDOL', 'DL', 'DPC', 'DICT', 'PSDS', 'SP', 'SICT']))
                                class="d-none"
                            @endif>
                            <input type="checkbox" id="select-all-checkbox" class="form-check-input" style="cursor: pointer;">
                        </th>
                        <!-- use this session if guid (session('authority_level') === #) -->
                        @if (session('authority_level') === 1)
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>User Type</th>
                        <th>Region</th>
                        <th>Actions</th>
                        @elseif (session('authority_level') === 2)
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>User Type</th>
                        <th>Division</th>
                        <th>Actions</th>
                        @elseif (session('authority_level') === 3)
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>User Type</th>
                        <th>School</th>
                        <th>District</th>
                        <th>Actions</th>
                        @elseif (session('authority_level') === 4)
                        <th>Full Name</th>
                        <th>Email</th>
                        <th>User Type</th>
                        <th>School</th>
                        <th>Actions</th>
                        @else
                            @if(session('shortcode')==='SP' || session('shortcode')==='SICT')
                                <th>Full Name</th>
                                <th>Email</th>
                                <th>User Type</th>
                                <th>Actions</th>
                            @else
                                <th>Full Name</th>
                                <th>Email</th>
                                <th>User Type</th>
                            @endif
                        @endif
                    </tr>
                </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Update User Profile Modal -->
<div class="modal fade" id="edit-user-profile" tabindex="-1" aria-labelledby="editUser" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg"> <!-- Added modal-lg for larger width -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateRegionModalLabel">User's Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mx-2">
                    <p class="" id="editdesc" style="text-align: left">Please edit the input values and submit to update the record.</p>
                    <form id="updateUserForm" class="card" action="">
                        @csrf

                        <input type="hidden" id="user_id_user" value="{{ $user->id ?? '' }}">

                        <div class="row mt-3 mx-3 mb-2">

                            <div class="col-md-6">
                                <label class="form-label required mb-0">First Name</label>
                                <div class="input-group input-group-outline">
                                    <input type="text" name="first_name_user" id="first_name_user" class="form-control mb-2" required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label required mb-0">Last Name</label>
                                <div class="input-group input-group-outline">
                                    <input type="text" name="last_name_user" id="last_name_user" class="form-control mb-2" required>
                                </div>
                            </div>

                        </div>

                        <div class="row mx-3 mb-2">
                            <div class="col-md-6">
                                <label class="form-label required mb-0">Username</label>
                                <div class="input-group input-group-outline">
                                    <input type="text" name="username_user" id="username_user" class="form-control mb-2" required>
                                </div>
                                <small id="username_error" class="text-danger mb-1" style="display: none;">This username is already taken.</small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label required mb-0">DepEd Email Address</label>
                                <div class="input-group input-group-outline">
                                    <input type="text" name="email_user" id="email_user" class="form-control mb-2" required>
                                </div>
                                <small id="email_error" class="text-danger mb-1" style="display: none;">Only @deped.gov.ph emails are allowed.</small>
                            </div>

                        </div>

                        <input type="hidden" name="updated_by_user" id="updated_by_user" maxlength="255" class="form-control">

                        <div class="text-center">
                            <button type="submit" class="editbtn mx-auto mt-3 mb-3" id="division_update_user" value="update" name="update">
                                <span class="material-icons" style="vertical-align: middle;">update</span> Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
{{-- Fetch station_type mapping for user type filtering --}}
@php
    use Illuminate\Support\Facades\DB;
    $stationTypes = DB::table('station_type')->select('id', 'authority_level')->get();
    $authorityLevelMap = [];
    foreach ($stationTypes as $st) {
        $authorityLevelMap[$st->id] = $st->authority_level;
    }
@endphp
const userLevelAuthorityMap = @json($authorityLevelMap);
const currentAuthorityLevel = {{ session('authority_level') }};

document.addEventListener("DOMContentLoaded", function() {
    $(document).ready(function() {
        // Function to enable/disable fields based on authority level
        function checkAuthorityLevelToEditUsers(authority_level){
            if  (authority_level == 1){
                $("#username_user").prop("disabled", false);
                $("#email_user").prop("disabled", false);
                $("#first_name_user").prop("disabled", false);
                $("#last_name_user").prop("disabled", false);
                $("#updateUserForm button[type='submit']").show();
                $("#updateRegionModalLabel").text("Update User's Record");
                $("#editdesc").show();


            }
            else{

                $("#username_user").prop("disabled", true);
                $("#email_user").prop("disabled", true);
                $("#first_name_user").prop("disabled", true);
                $("#last_name_user").prop("disabled", true);
                $("#updateUserForm button[type='submit']").hide();
                $("#updateRegionModalLabel").text("User's Record");
                $("#editdesc").hide();

            }
        }

        checkAuthorityLevelToEditUsers("{{ session('authority_level') }}");

        // Function to check username availability
        function checkUsername(username, userId) {
            if (!username) {
                $("#username_error").hide();
                $("#username_user")[0].setCustomValidity("");
                return;
            }

            $.ajax({
                url: "/check-username",
                method: "POST",
                data: {
                    username: username,
                    user_id: userId,
                    _token: $('meta[name="csrf-token"]').attr("content")
                },
                success: function(data) {
                    if (data.exists) {
                        $("#username_error").show();
                        $("#username_user")[0].setCustomValidity("This username is already taken.");
                    } else {
                        $("#username_error").hide();
                        $("#username_user")[0].setCustomValidity("");
                    }
                },
                error: function(error) {
                    console.error('Error checking username:', error);
                }
            });
        }

        // Function to check email validity
        function checkEmail(email, userId) {  // Added userId parameter
            if (!email) {
                $("#email_error").hide();
                $("#email_user")[0].setCustomValidity("");
                return;
            }

            // First check email format
            const emailPattern = /^[a-zA-Z0-9._%+-]+@deped\.gov\.ph$/;
            if (!emailPattern.test(email)) {
                $("#email_error").show();
                $("#email_error").text("Only @deped.gov.ph emails are allowed.");
                $("#email_user")[0].setCustomValidity("Only @deped.gov.ph emails are allowed.");
                return;  // Return early if format is invalid
            }

            // Then check if email exists
            $.ajax({
                url: "/check-email",
                method: "POST",
                data: {
                    email: email,  // Fixed: send email instead of username
                    user_id: userId,
                    _token: $('meta[name="csrf-token"]').attr("content")
                },
                success: function(data) {
                    if (data.exists) {
                        $("#email_error").show();
                        $("#email_error").text("This email is already taken.");
                        $("#email_user")[0].setCustomValidity("This email is already taken.");
                    } else {
                        $("#email_error").hide();
                        $("#email_user")[0].setCustomValidity("");
                    }
                },
                error: function(error) {
                    console.error('Error checking email:', error);
                }
            });
        }

        // Reset validation states when modal is about to show
        $("#edit-user-profile").on("show.bs.modal", function() {
            // Reset username validation
            $("#username_user")[0].setCustomValidity("");
            $("#username_error").hide();
            // $("#username_user").val(""); // Uncomment to clear field

            // Reset email validation
            $("#email_user")[0].setCustomValidity("");
            $("#email_error").hide();
            // $("#email_user").val(""); // Uncomment to clear field
        });

        // Handle edit button click
        $(document).on("click", "#edit-pending-user", function() {
            let userId = $(this).data("id");

            // Fetch user details and populate the modal
            $.ajax({
                url: "/get-user-details/" + userId,
                method: "GET",
                success: function(response) {
                    $("#user_id_user").val(response.user_id);
                    $("#first_name_user").val(response.first_name);
                    $("#last_name_user").val(response.last_name);
                    $("#username_user").val(response.username);
                    $("#email_user").val(response.email);

                    // Check username and email after populating
                    checkUsername(response.username, response.user_id);
                    checkEmail(response.email, response.user_id);

                    console.log("Modal fields populated with user data");
                },
                error: function(xhr) {
                    console.error("Error fetching user details:", xhr.responseText);
                },
            });

            $("#edit-user-profile").modal("show");
        });

        // Real-time username validation
        $("#username_user").on("input", function() {
            let username = $(this).val();
            let userId = $("#user_id_user").val();
            checkUsername(username, userId);
        });

        // Real-time email validation
        $("#email_user").on("input", function() {
            let email = $(this).val();
            let userId = $("#user_id_user").val(); // Get current userId
            checkEmail(email, userId); // <-- Now passing userId
        });

        // Handle form submission
        $("#updateUserForm").on("submit", function(e) {
            e.preventDefault();

            const data = {
                user_id_user: $("#user_id_user").val(),
                first_name_user: $("#first_name_user").val(),
                last_name_user: $("#last_name_user").val(),
                username_user: $("#username_user").val(),
                email_user: $("#email_user").val(),
            };

            if (!data.user_id_user || !data.first_name_user || !data.last_name_user || !data.username_user || !data.email_user) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please fill in all required fields.',
                });
                return;
            }

            Swal.fire({
                title: 'Are you sure?',
                text: "Are you sure you want to update this user's profile?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, update it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/update-user-profile",
                        method: "PUT",
                        data: data,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: 'User profile updated successfully!',
                                }).then(() => {
                                    $("#edit-user-profile").modal("hide");
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Failed to update user profile. Please try again.',
                                });
                            }
                        },
                        error: function(xhr) {
                            console.error("Error updating user profile:", xhr.responseText);
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'An error occurred. Please try again later.',
                            });
                        },
                    });
                }
            });
        });

    });
});

    // approve users
    $(document).on("click", "#approve-pending-user", function () {
        const userId = $(this).data("id");
        const $btn = $(this);

        Swal.fire({
            title: 'Do you want to mark this user as approved?',
            text: " ",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, approve it!'
        }).then((result) => {
            if (!result.isConfirmed) return;

            $btn.prop('disabled', true);

            fetch(`/update-approve-profile/${userId}`, {
                method: 'PATCH',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json',
                },
            })
            .then(async (res) => {
                const data = await res.json().catch(() => null);

                if (!res.ok) {
                    const message = data?.message
                        ?? (res.status === 403
                            ? "You're not authorized to approve this user."
                            : "An error occurred. Please try again later.");
                    throw new Error(message);
                }

                return data;
            })
            .then((response) => {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.message,
                }).then(() => location.reload());
            })
            .catch((err) => {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: err.message,
                });
            })
            .finally(() => {
                $btn.prop('disabled', false);
            });
        });
    });

    // delete users
    $(document).on("click", "#delete-pending-user", function() {
        let userId = $(this).data("id");

        Swal.fire({
            title: 'Are you sure?',
            text: "Are you sure you want to mark this user as deleted?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "/update-delete-profile/" + userId,
                    method: "PUT",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: "Failed to update user status: " + response.message,
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: "An error occurred. Please try again later.",
                        });
                    }
                });
            }
        });
    });

    $(document).ready(function() {
        var tableColumns;

        switch ("{{ session('authority_level') }}") {
            case "1":
                tableColumns = [
                    { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'full_name' },
                    { data: 'email' },
                    { data: 'user_type_name' },
                    { data: 'region_name' },
                    { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                ];
                break;
            case "2":
                tableColumns = [
                    { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'full_name' },
                    { data: 'email' },
                    { data: 'user_type_name' },
                    { data: 'division_name' },
                    { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                ];
                break;
            case "3":
                tableColumns = [
                    { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'full_name' },
                    { data: 'email' },
                    { data: 'user_type_name' },
                    { data: 'school_name' },
                    { data: 'district_name' },
                    { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                ];
                break;
            case "4":
                tableColumns = [
                    { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'full_name' },
                    { data: 'email' },
                    { data: 'user_type_name' },
                    { data: 'school_name' },
                    { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                ];
                break;
            default:
                switch("{{ session('shortcode') }}"){
                    case "SP":
                        tableColumns = [
                            { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                            { data: 'full_name' },
                            { data: 'email' },
                            { data: 'user_type_name' },
                            { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                        ];
                        break;
                    case "SICT":
                        tableColumns = [
                            { data: 'checkbox', orderable: false, searchable: false, className: 'text-center' },
                            { data: 'full_name' },
                            { data: 'email' },
                            { data: 'user_type_name' },
                            { data: 'actions', orderable: false, searchable: false, className: 'text-center' }
                        ];
                        break;
                    default:
                        tableColumns = [
                            { data: 'checkbox', orderable: false, searchable: false, className: 'd-none' },
                            { data: 'full_name' },
                            { data: 'email' },
                            { data: 'user_type_name' },
                        ];
                    break;
                }
        }

        var table = $('#user-profile-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('user-profile.data') }}",
                type: 'GET',
                data: function(d) {
                    d.region_id = $('#region_print_select').val();
                    d.division_id = $('#division_print_select_central').val();
                    d.district_id = $('#district_print_select_central').val();
                    d.school_id = $('#school_print_select_central').val();
                    d.user_type_shortcode = $('#user_type_filter').val();
                }
            },

            scrollX: true,
            columns: tableColumns,
            responsive: false,

            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            pageLength: 10,

            language: {
                emptyTable: "No data available in the table"
            },

            dom: 'lBfrtip',

            buttons: [
                {
                    text: '<i class="fas fa-file-excel" style="color: green;"></i> Export Excel',
                    action: function(e, dt, node, config) {
                        var filters = {
                            region_id: $('#region_print_select').val(),
                            division_id: $('#division_print_select_central').val(),
                            district_id: $('#district_print_select_central').val(),
                            school_id: $('#school_print_select_central').val(),
                            user_type_shortcode: $('#user_type_filter').val()
                        };
                        window.location.href = "{{ route('user-profile.export-excel') }}?" + $.param(filters);
                    }
                },
                {
                    text: '<i class="fas fa-file-pdf" style="color: red;"></i> Export PDF',
                    action: function(e, dt, node, config) {
                        var filters = {
                            region_id: $('#region_print_select').val(),
                            division_id: $('#division_print_select_central').val(),
                            district_id: $('#district_print_select_central').val(),
                            school_id: $('#school_print_select_central').val(),
                            user_type_shortcode: $('#user_type_filter').val()
                        };
                        window.open("{{ route('user-profile.export-pdf') }}?" + $.param(filters), '_blank');
                    }
                }
            ],

            initComplete: function() {
                console.log('🔄 DataTable initComplete - Creating dropdown');

                // ✅ FIX: Create dropdown element FIRST
                @if(in_array(session('authority_level'), [1, 2, 3, 4]))
                    const filterHtml = `
                        <div class="d-inline-block ms-3 mt-1">
                            <select id="user_type_filter" class="form-select form-select-sm" style="max-height: 32px; overflow-y: auto;">
                                <option value="" selected disabled>Loading user types...</option>
                            </select>
                        </div>
                    `;

                    $('#user-profile-table_wrapper .dataTables_length').after(filterHtml);
                    console.log('✅ Dropdown element created');

                    // ✅ FIX: NOW fetch and populate the dropdown
                    // This AJAX call runs AFTER the dropdown element exists
                    fetchAndPopulateUserTypes();
                @endif

                // Setup change listener
                $(document).on('change', '#user_type_filter', function () {
                    console.log('📊 User type changed:', $(this).val());
                    table.ajax.reload();
                });

                console.log('✅ initComplete finished');
            }
        });

        /**
         * Fetches user types from the server and populates the dropdown.
         */
        function fetchAndPopulateUserTypes() {
            console.log('🔍 Fetching user types...');

            const dropdown = $('#user_type_filter');

            // Safety check: ensure dropdown exists
            if (dropdown.length === 0) {
                console.error('❌ Dropdown element not found!');
                return;
            }

            $.ajax({
                url: '{{ route("get-user-types-userlist") }}',
                method: 'GET',
                success: function(response) {
                    console.log('✅ User types received:', response.length);

                    // Filter user types based on logged-in user's authority level
                    let filteredTypes = response;
                    if (currentAuthorityLevel === 1) {
                        // Central Office: Show all user types except Super Admin (authority_level 6)
                        filteredTypes = response.filter(ut => {
                            const authLevel = userLevelAuthorityMap[ut.user_level_id];
                            return authLevel && authLevel < 6;
                        });
                    } else if (currentAuthorityLevel === 2) {
                        // Regional Office: Show user types with authority_level >= 3 (SDO to School)
                        filteredTypes = response.filter(ut => {
                            const authLevel = userLevelAuthorityMap[ut.user_level_id];
                            return authLevel && authLevel >= 3 && authLevel < 6;
                        });
                        console.log('🔽 Filtered for Regional Office (level 2):', filteredTypes.length);
                    } else if (currentAuthorityLevel === 3) {
                        // SDO/Division: Show user types with authority_level >= 4 (District to School)
                        filteredTypes = response.filter(ut => {
                            const authLevel = userLevelAuthorityMap[ut.user_level_id];
                            return authLevel && authLevel >= 4 && authLevel < 6;
                        });
                        console.log('🔽 Filtered for Schools Division Office (level 3):', filteredTypes.length);
                    } else if (currentAuthorityLevel === 4) {
                        // District Office: Show only user types with authority_level >= 5 (School only)
                        filteredTypes = response.filter(ut => {
                            const authLevel = userLevelAuthorityMap[ut.user_level_id];
                            return authLevel && authLevel >= 5 && authLevel < 6;
                        });
                        console.log('🔽 Filtered for District Office (level 4):', filteredTypes.length);
                    }
                    // Level 1 (Central Office): No filter, show all

                    // Sort by authority level ascending (e.g., SDO first, then District, then School)
                    filteredTypes.sort((a, b) => {
                        const levelA = userLevelAuthorityMap[a.user_level_id] || 999;
                        const levelB = userLevelAuthorityMap[b.user_level_id] || 999;
                        return levelA - levelB;
                    });

                    dropdown.empty();
                    dropdown.append('<option value="" selected disabled>Filter User Type</option>');
                    dropdown.append('<option value="all">All User Types</option>');

                    filteredTypes.forEach(userType => {
                        dropdown.append(`<option value="${userType.shortcode}">${userType.name}</option>`);
                        console.log('  ✓ Added:', userType.name);
                    });

                    console.log('✅ Dropdown populated successfully');
                },
                error: function(xhr) {
                    console.error('❌ Failed to fetch user types:', xhr.responseText);
                    dropdown.empty();
                    dropdown.append('<option value="" disabled>Error loading types</option>');
                }
            });
        }

        const authorityLevel = "{{ session('authority_level') }}";
        const currentStationId = $('meta[name="current-station-id"]').attr('content') || '';

        function resetSelect(select, placeholder) {
            select.empty().append(`<option value="" selected disabled>${placeholder}</option>`).val('');
        }

        function loadDivisionsForRegion(regionId) {
            const divisionDropdown = $('#division_print_select_central');
            const districtDropdown = $('#district_print_select_central');
            const schoolDropdown = $('#school_print_select_central');

            resetSelect(divisionDropdown, 'Select a Division');
            resetSelect(districtDropdown, 'Select a District');
            resetSelect(schoolDropdown, 'Select a School');

            if (!regionId || regionId === 'AR') {
                table.ajax.reload();
                return;
            }

            divisionDropdown.append('<option value="AD">All Divisions</option>');

            $.ajax({
                url: '{{ route("get-central-divisions") }}',
                method: 'GET',
                data: { region_id: regionId },
                success: function(response) {
                    response.forEach(division => {
                        divisionDropdown.append(`<option value="${division.id}">${division.station_name}</option>`);
                    });

                    table.ajax.reload();
                },
                error: function(xhr) {}
            });
        }

        function loadDistrictsForDivision(divisionId) {
            const districtDropdown = $('#district_print_select_central');
            const schoolDropdown = $('#school_print_select_central');

            resetSelect(districtDropdown, 'Select a District');
            resetSelect(schoolDropdown, 'Select a School');

            if (!divisionId || divisionId === 'AD') {
                table.ajax.reload();
                return;
            }

            districtDropdown.append('<option value="AD">All Districts</option>');

            $.ajax({
                url: '{{ route("get-central-districts") }}',
                method: 'GET',
                data: { division_id: divisionId },
                success: function(response) {
                    response.forEach(district => {
                        districtDropdown.append(`<option value="${district.id}">${district.station_name}</option>`);
                    });

                    table.ajax.reload();
                },
                error: function(xhr) {}
            });
        }

        function loadSchoolsForDistrict(districtId) {
            const schoolDropdown = $('#school_print_select_central');

            resetSelect(schoolDropdown, 'Select a School');

            if (!districtId || districtId === 'AD') {
                table.ajax.reload();
                return;
            }

            schoolDropdown.append('<option value="AS">All Schools</option>');

            $.ajax({
                url: '{{ route("get-central-schools") }}',
                method: 'GET',
                data: { district_id: districtId },
                success: function(response) {
                    response.forEach(school => {
                        schoolDropdown.append(`<option value="${school.school_id}">${school.beis_id} - ${school.school_name}</option>`);
                    });

                    table.ajax.reload();
                },
                error: function(xhr) {}
            });
        }

        function initializeHierarchyFilters() {
            const regionDropdown = $('#region_print_select');
            const divisionDropdown = $('#division_print_select_central');
            const districtDropdown = $('#district_print_select_central');
            const schoolDropdown = $('#school_print_select_central');

            resetSelect(regionDropdown, 'Select a Region');
            resetSelect(divisionDropdown, 'Select a Division');
            resetSelect(districtDropdown, 'Select a District');
            resetSelect(schoolDropdown, 'Select a School');

            switch (authorityLevel) {
                case '1':
                    regionDropdown.append('<option value="AR">All Regions</option>');
                    regionDropdown.prop('disabled', false);
                    divisionDropdown.prop('disabled', false);
                    districtDropdown.prop('disabled', false);
                    schoolDropdown.prop('disabled', false);

                    $.ajax({
                        url: '{{ route("get-regions") }}',
                        method: 'GET',
                        success: function(response) {
                            response.forEach(region => {
                                regionDropdown.append(`<option value="${region.id}">${region.station_name}</option>`);
                            });
                            table.ajax.reload();
                        },
                        error: function(xhr) {}
                    });
                    break;

                case '2':
                    regionDropdown.prop('disabled', true);
                    divisionDropdown.prop('disabled', false);
                    districtDropdown.prop('disabled', false);
                    schoolDropdown.prop('disabled', false);

                    $.ajax({
                        url: '{{ route("get-regions") }}',
                        method: 'GET',
                        success: function(response) {
                            const currentRegion = response.find(region => region.id === currentStationId);
                            if (currentRegion) {
                                regionDropdown.append(`<option value="${currentRegion.id}" selected>${currentRegion.station_name}</option>`);
                            } else {
                                regionDropdown.append(`<option value="${currentStationId}" selected>Current Region</option>`);
                            }
                            loadDivisionsForRegion(currentStationId);
                        },
                        error: function(xhr) {}
                    });
                    break;

                case '3':
                    regionDropdown.prop('disabled', true);
                    divisionDropdown.prop('disabled', true);
                    districtDropdown.prop('disabled', false);
                    schoolDropdown.prop('disabled', false);

                    divisionDropdown.append(`<option value="${currentStationId}" selected>Current Division</option>`);
                    loadDistrictsForDivision(currentStationId);
                    break;

                case '4':
                    regionDropdown.prop('disabled', true);
                    divisionDropdown.prop('disabled', true);
                    districtDropdown.prop('disabled', true);
                    schoolDropdown.prop('disabled', false);

                    districtDropdown.append(`<option value="${currentStationId}" selected>Current District</option>`);
                    loadSchoolsForDistrict(currentStationId);
                    break;

                default:
                    regionDropdown.prop('disabled', true);
                    divisionDropdown.prop('disabled', true);
                    districtDropdown.prop('disabled', true);
                    schoolDropdown.prop('disabled', true);
                    table.ajax.reload();
                    break;
            }
        }

        initializeHierarchyFilters();

        $('#region_print_select').on('change', function() {
            loadDivisionsForRegion($(this).val());
        });

        $('#division_print_select_central').on('change', function() {
            loadDistrictsForDivision($(this).val());
        });

        $('#district_print_select_central').on('change', function() {
            loadSchoolsForDistrict($(this).val());
        });

        $('#school_print_select_central').on('change', function() {
            table.ajax.reload();
        });
    });

</script>

<!-- Change Password User Modal -->
<div class="modal fade" id="change-pass-profile" tabindex="-1" aria-labelledby="changePassUser" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg"> <!-- Added modal-lg and modal-dialog-centered -->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="changeRegionModalLabel">Change User's Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mx-2">
                    <p class="" style="text-align: left">Please change the input values and submit to change the password of user.</p>
                    <form id="changePassUserForm" class="card" action="">
                        @csrf

                        <input type="hidden" name="change_id_user" id="change_id_user">

                        <div class="row mt-3 mx-3 mb-2">

                            <div class="col-md-12 mb-2">
                                <label class="form-label mb-0">Username</label>
                                <div class="input-group input-group-outline">
                                    <input type="text" name="username_change" id="username_change" class="form-control" disabled readonly>
                                </div>
                            </div>

                            <div class="col-md-12 col-md-8 mb-2">
                                <label class="form-label required mb-0">New Password</label>
                                <div class="input-group input-group-outline">
                                    <input type="password" name="pass_user" id="pass_user" class="form-control" required>
                                    <i class="ri-eye-off-line login_eye  px-2  " style="top:10%" id="loginEyePassUserList"></i>

                                </div>
                                <small class="text-danger" id="password-error"></small>

                            </div>


                            <div class="col-md-12 mb-2">
                                <label class="form-label required mb-0">Confirm Password</label>
                                <div class="input-group input-group-outline">
                                    <input type="password" name="pass_user_confirmation" id="confirm_user" class="form-control" required>
                                    <i class="ri-eye-off-line login_eye  px-2  " style="top:10%" id="loginEyeConfirmUserList"></i>
                                </div>
                            </div>

                        </div>

                        <div class="text-center">
                            <button type="submit" class="editbtn mx-auto mt-3 mb-3" id="division_update_user" value="update" name="update">
                                <span class="material-icons" style="vertical-align: middle;">update</span> Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('assets/js/viewpass.js') }}"></script>

<script>

// Password show and hide function from viewpass.js
showHiddenPassUserList('pass_user', 'loginEyePassUserList');
showHiddenPassUserList('confirm_user', 'loginEyeConfirmUserList')

 // Password validation
    $('#pass_user').on('input', function () {
        const passwordInput = $(this);
        const passwordValue = passwordInput.val().trim();
        const passwordErrorElement = $('#password-error');
        const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*\W).{8,}$/;

        if (passwordValue.length === 0) {
            passwordInput.removeClass('is-invalid');
            passwordErrorElement.text('').hide();
        } else if (!passwordRegex.test(passwordValue)) {
            passwordInput.addClass('is-invalid');
            passwordErrorElement.text('Password must be at least 8 characters and contain letters, numbers, and symbols.').show();
        } else {
            passwordInput.removeClass('is-invalid');
            passwordErrorElement.text('').hide();
        }
    });
;

// Change Password User in ---- USER LIST ----
document.addEventListener("DOMContentLoaded", function() {
    $(document).ready(function() {
        // Password validation for Change Password modal
        function validatePasswordInput() {
            const passwordInput = $('#pass_user');
            const passwordValue = passwordInput.val().trim();
            const passwordErrorElement = $('#password-error');
            const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*\W).{8,}$/;

            if (passwordValue.length === 0) {
                passwordInput.removeClass('is-invalid');
                passwordErrorElement.text('').hide();
                return false;
            } else if (!passwordRegex.test(passwordValue)) {
                passwordInput.addClass('is-invalid');
                passwordErrorElement.text('Password must be at least 8 characters and contain letters, numbers, and symbols.').show();
                return false;
            } else {
                passwordInput.removeClass('is-invalid');
                passwordErrorElement.text('').hide();
                return true;
            }
        }

        // Attach validation on input
        $('#pass_user').on('input', function () {
            validatePasswordInput();
        });

        // Handle edit button click
        $(document).on("click", "#change-pending-user", function() {
            let userId = $(this).data("id");
            $("#change-pass-profile").modal("show");

            // Fetch user details and populate the modal
            $.ajax({
                url: "/get-user-details/" + userId,
                method: "GET",
                success: function(response) {
                    $("#change_id_user").val(response.user_id);
                    $("#username_change").val(response.username);
                },
                error: function(xhr) {
                    console.error("Error fetching user details:", xhr.responseText);
                },
            });
        });

        // Validate password match and password strength before form submission
        $("#changePassUserForm").on("submit", function(e) {
            e.preventDefault(); // Prevent default form submission

            let newPassword = $("#pass_user").val();
            let confirmPassword = $("#confirm_user").val();

            // Check password strength
            if (!validatePasswordInput()) {
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Password',
                    text: 'Password must be at least 8 characters and contain letters and numbers or symbols.',
                });
                return;
            }

            // Check if passwords match
            if (newPassword !== confirmPassword) {
                Swal.fire({
                    icon: 'error',
                    title: 'Password Mismatch',
                    text: 'New Password and Confirm Password must be the same.',
                });
                return; // Stop submission if passwords don't match
            }

            const data = {
                change_id_user: $("#change_id_user").val(),
                username_change: $("#username_change").val(),
                pass_user: newPassword,
            };

            // Optional: Ensure all required fields are filled
            if (!data.change_id_user || !data.username_change || !data.pass_user) {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please fill in all required fields.',
                });
                return;
            }

            // Show confirmation before updating
            Swal.fire({
                title: 'Are you sure?',
                text: "Are you sure you want to update this user's password?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, update it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const csrfToken = $('meta[name="csrf-token"]').attr("content");

                    $.ajax({
                        url: "/change-pass-profile",
                        method: "PUT",
                        data: data,
                        headers: {
                            "X-CSRF-TOKEN": csrfToken,
                        },
                        success: function(response) {
                            console.log(response.message);

                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success!',
                                    text: 'User password updated successfully!',
                                }).then(() => {
                                    $("#change-pass-profile").modal("hide");
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Failed to update user password. Please try again.',
                                });
                            }
                        },
                        error: function(xhr) {
                            console.error("Error updating password:", xhr.responseText);
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'An error occurred. Please try again later.',
                            });
                        },
                    });
                }
            });
        });
    });
});

var selectedUserIds = new Set();

// Handle bulk approve button click
$(document).on("click", "#bulk-approve-btn", function() {
    if (selectedUserIds.size === 0) {
        Swal.fire({
            icon: 'warning',
            title: 'No Selection',
            text: 'Please select at least one user to approve.',
        });
        return;
    }

    Swal.fire({
        title: 'Bulk Approve Users',
        text: "Approve " + selectedUserIds.size + " user(s)?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, approve all!'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "/bulk-approve-users",
                method: "PUT",
                data: {
                    user_ids: Array.from(selectedUserIds)
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                        }).then(() => {
                            selectedUserIds.clear();
                            updateSelectionUI();
                            $('#user-profile-table').DataTable().ajax.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message,
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Something went wrong',
                    });
                }
            });
        }
    });
});

// Handle individual checkbox
$(document).on("change", ".user-checkbox", function() {
    const userId = $(this).data("user-id");

    if ($(this).is(":checked")) {
        selectedUserIds.add(userId);
    } else {
        selectedUserIds.delete(userId);
        $("#select-all-checkbox").prop("checked", false);
    }

    updateSelectionUI();
});

// Handle select all
$(document).on("change", "#select-all-checkbox", function() {
    selectedUserIds.clear();

    if ($(this).is(":checked")) {
        $(".user-checkbox").each(function() {
            $(this).prop("checked", true);
            selectedUserIds.add($(this).data("user-id"));
        });
    } else {
        $(".user-checkbox").prop("checked", false);
    }

    updateSelectionUI();
});

// Update UI
function updateSelectionUI() {
    const count = selectedUserIds.size;

    if (count > 0) {
        $("#bulk-approve-btn").show();
        $("#selection-info").show();
        $("#selected-count").text(count);
        $("#selected-count-info").text(count);
    } else {
        $("#bulk-approve-btn").hide();
        $("#selection-info").hide();
        $("#selected-count").text(0);
        $("#selected-count-info").text(0);
    }
}

// Clear on reload
$('#user-profile-table').on('draw.dt', function() {
    $("#select-all-checkbox").prop("checked", false);
    updateSelectionUI();
});
</script>

<!-- Station datatable style -->
<style>
    /* Fix: prevent user_type_filter dropdown list from overflowing */
    #user_type_filter{
        max-height: 32px;
        overflow-y: auto;
    }

    #user_type_filter option{
        white-space: nowrap;
    }

    #edit-user-profile .modal-dialog {
        max-width: 800px;
    }

    #edit-user-profile .modal-content {
        min-height: 400px;
    }
    #change-pass-profile .modal-dialog {
        max-width: 500px;
    }
    #change-pass-profile .modal-content {
        min-height: 350px;
    }

    .highlighted-column {
        background-color: #e3f8ff !important; /* Light yellow */
    }

    table td .btn {
        display: inline-block;
        margin: 0 -10px;
    }

    .btn-group .btn {
        padding: 0 1px !important;
        margin: 0 1px;
    }

    .dataTables_wrapper table.dataTable td {
        padding: 0 5px !important;
        text-align: left;
    }

    .card {
        width: 100% !important;
        margin: 0 auto;
        /* Centers the card within the container */
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        /* Ensure the container doesn't restrict the card width */
        padding: 0;
        /* Remove default container padding if necessary */
    }

    input:disabled {
        background-color: #f0f0f0 !important;
    }

    button:disabled {
        background-color: #f0f0f0 !important;
        opacity: 0.6;
    }
</style>

</div>
<!-- DataTables Buttons JS dependencies -->
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <!-- For Excel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <!-- For PDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> <!-- For PDF -->

@endsection