{{> header}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<title>Sub Admins</title>
<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2" style="border-left: 2px solid #083c30;">
            <div class="card-header" style="background-color:#083c30; color:white;">
                <h4><b>Sub Admins</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="float-sm-right">
                                <button data-bs-toggle="modal" data-bs-target="#addSubAdminModal"
                                    style="background-color: #083c30; color:white; border:none; border-radius:5px; width: 180px; height: 40px;">
                                    <i class="fas fa-user-shield me-2"></i> Add New Sub-Admin
                                </button>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="card-body p-2">
                    <div id="example1_wrapper">
                        <div class="row">
                            <div class="col-sm-12 table-responsive">
                                <!-- Removed table-responsive to allow wrapping instead of scrolling -->
                                <table id="example2" class="table table-bordered datatable" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>S.No</th>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone Number</th>
                                            <th>Roles Managing</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each subadmins}}
                                        <tr>
                                            <td>{{inc @index}}</td>
                                            <td style="word-break: break-word; white-space: normal;">{{this.name}}</td>
                                            <td style="word-break: break-word; white-space: normal;">{{this.email}}</td>
                                            <td style="word-break: break-word; white-space: normal;">
                                                {{this.phoneNumber}}</td>
                                            <td style="word-break: break-word; white-space: normal;">
                                                {{this.permissions}}</td>
                                            <td>{{#if (eq this.status "unfreeze")}}Active{{else}}Inactive{{/if}}</td>
                                            <td>
                                                <button class="btn btn-warning btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#editSubAdminModal" data-id="{{this._id}}"
                                                    data-name="{{this.name}}" data-email="{{this.email}}"
                                                    data-phone="{{this.phoneNumber}}" data-password="{{this.password}}"
                                                    data-permissions="{{this.permissions}}"
                                                    data-status="{{this.status}}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#deleteSubAdminModal" data-id="{{this._id}}"
                                                    data-name="{{this.name}}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addSubAdminModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Sub Admin</h5>
                <button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="/admin/add-sub-admin" id="addSubAdminForm" method="POST" enctype="multipart/form-data">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" id="name" minlength="3" maxlength="30" class="form-control" name="name" required>
                        <p id="nameP" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Email</label>
                        <input type="text" class="form-control" name="email" required>
                        <p id="emailP" style="color:red !important;"></p>

                    </div>
                    <div class="form-group">
                        <label class="text-dark">Phone Number</label>
                        <input type="text" class="form-control" maxlength="10" id="phone" name="phoneNumber" required>
                        <p id="phoneP" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Password</label>
                        <input type="text" class="form-control" name="password" required>
                        <p id="passwordP" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Permissions</label>
                        <select id="permissions" name="permissions" class="form-control" multiple>
                            {{#each allPermissions}}
                            {{#unless (eq this "ManageDashboard")}}
                            <option value="{{this}}">{{this}}</option>
                            {{/unless}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Status</label>
                        <select name="status" class="form-control" required>
                            <option value="">Select Status</option>
                            <option value="freeze">Inactive</option>
                            <option value="unfreeze">Active</option>
                        </select>
                    </div>
                    <button type="submit" id="addsubmitBtn" class="btn btn-success">Add Sub
                        Admin</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editSubAdminModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-dark">Update Sub Admin</h5>
                <button type="button" class="close text-dark" data-bs-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="/admin/update-sub-admin/{{this._id}}" id="editSubAdminForm" method="POST"
                    enctype="multipart/form-data">
                    <div class="form-group">
                        <label class="text-dark">Name</label>
                        <input type="text" class="form-control" minlength="3" maxlength="30" name="name" id="nameEdit"
                            required>
                        <p id="namePedit" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Email</label>
                        <input type="text" class="form-control" name="email" id="emailEdit" required>
                        <p id="emailPedit" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Phone Number</label>
                        <input type="text" class="form-control" maxlength="10" name="phoneNumber" id="phoneEdit"
                            required>
                        <p id="phonePedit" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Password</label>
                        <input type="text" class="form-control" name="password" id="passwordEdit" required>
                        <p id="passwordPedit" style="color:red !important;"></p>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">All Permissions</label>
                        <select name="permissions" class="form-control permission-select" multiple
                            id="edit-permissions">
                            {{#each allPermissions}}
                            {{!-- {{#unless (eq this "ManageDashboard")}} --}}
                            <option value="{{this}}">{{this}}</option>
                            {{!-- {{/unless}} --}}
                            {{/each}}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="text-dark">Status</label>
                        <select name="status" class="form-control" id="edit-status">
                            <option value="freeze">Inactive</option>
                            <option value="unfreeze">Active</option>
                        </select>
                    </div>
                    <button type="submit" id="editsubmitBtn" class="btn btn-success">Update</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteSubAdminModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this sub-admin?
            </div>
            <div class="modal-footer">
                <form action="/admin/delete-sub-admin/{{this._id}}" method="POST" id="delete-form">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="deleteBtn" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

{{> footer}}

<script>
    // ==== Add Modal Validation ====
    const addForm = document.getElementById('addSubAdminForm');
    const addSubmitBtn = document.getElementById('addsubmitBtn');

    const addFields = {
        name: addForm.elements.name,
        email: addForm.elements.email,
        password: addForm.elements.password,
        phone: addForm.elements.phone,
    };

    const addErrors = {
        name: document.getElementById('nameP'),
        email: document.getElementById('emailP'),
        password: document.getElementById('passwordP'),
        phone: document.getElementById('phoneP'),
    };

    let isNameValid = false, isEmailValid = false, isPasswordValid = false, isPhoneValid = false;

    // Validation functions for each field
    const validateAdd = {
        name() {
            let val = addFields.name.value;

            // Remove special characters & numbers
            val = val.replace(/[^a-zA-Z\s]/g, '');

            // Replace multiple spaces with a single space
            val = val.replace(/\s+/g, ' ');

            addFields.name.value = val;

            const original = val;        // Keep as-is for trailing space check
            const trimmed = val.trim();  // Cleaned for regex & length

            // Check for:
            // - valid format: only letters with single spaces between
            // - no leading/trailing spaces in original input
            // - length 3 to 30
            const isValidFormat = /^[A-Za-z]+( [A-Za-z]+)*$/.test(trimmed);
            const hasNoLeadingOrTrailingSpace = original === trimmed;
            const lengthValid = trimmed.length >= 3 && trimmed.length <= 30;

            const valid = isValidFormat && hasNoLeadingOrTrailingSpace && lengthValid;

            addErrors.name.textContent = valid
                ? ""
                : "Name must be 3–30 letters, no special characters, and no leading/trailing/multiple spaces.";

            isNameValid = valid;
            return valid;
        },
        email() {
            const val = addFields.email.value.trim();
            const basicValid = /^[a-z0-9]+([._%+-]?[a-z0-9]+)*@[a-z0-9-]+\.[a-z]{2,}(\.[a-z]{2,})?$/.test(val);
            addErrors.email.textContent = basicValid ? "" : "Please enter a valid email with only lower case letters.";
            isEmailValid = basicValid;
            if (basicValid) addFields.email.value = val;
            return basicValid;
        },
        password() {
            addFields.password.value = addFields.password.value.trim();
            const val = addFields.password.value.trim();
            const valid = val.length >= 8 && val.length < 15 &&
                /[A-Z]/.test(val) &&
                /[a-z]/.test(val) &&
                /\d/.test(val) &&
                /[!@#$%^&*(),.?":{}|<>]/.test(val) &&
                !/\s/.test(val); // No spaces

            addErrors.password.textContent = valid ? "" : "Password must be 8–14 characters, include A-Z, a-z, 0-9, a special character, and no spaces.";
            isPasswordValid = valid;
            if (valid) addFields.password.value = val;
            return valid;
        },
        phone() {
            const val = addFields.phone.value;
            const valid = /^(\+91[\-\s]?)?[6-9]\d{9}$/.test(val);
            addErrors.phone.textContent = valid ? "" : "Incorrect Phone Number Format";
            isPhoneValid = valid;
            return valid;
        }
    };

    // Event listeners for all fields
    Object.keys(addFields).forEach((key) => {
        addFields[key].addEventListener('input', () => {
            validateAdd[key](); // validate only current field being edited
            const allValid = isNameValid && isEmailValid && isPasswordValid && isPhoneValid;
            addSubmitBtn.disabled = !allValid; // disable submit if any field is invalid
        });
    });



    addForm.addEventListener('submit', () => {
        addSubmitBtn.disabled = true; // prevent double submission
    });


    // ==== Edit Modal Validation (All Errors at Once) ====
    const editForm = document.getElementById('editSubAdminForm');
    const editSubmitBtn = document.getElementById('editsubmitBtn');

    const editFields = {
        name: editForm.elements.nameEdit,
        email: editForm.elements.emailEdit,
        password: editForm.elements.passwordEdit,
        phone: editForm.elements.phoneEdit,
    };

    const editErrors = {
        name: document.getElementById('namePedit'),
        email: document.getElementById('emailPedit'),
        password: document.getElementById('passwordPedit'),
        phone: document.getElementById('phonePedit'),
    };

    const validateEdit = {
        name() {
            let val = editFields.name.value;
            val = val.replace(/[^a-zA-Z\s]/g, '');
            val = val.replace(/\s+/g, ' ');
            editFields.name.value = val;

            const original = val;
            const trimmed = val.trim();
            const isValidFormat = /^[A-Za-z]+( [A-Za-z]+)*$/.test(trimmed);
            const hasNoLeadingOrTrailingSpace = original === trimmed;
            const lengthValid = trimmed.length >= 3 && trimmed.length <= 30;
            const valid = isValidFormat && hasNoLeadingOrTrailingSpace && lengthValid;

            editErrors.name.textContent = valid
                ? ""
                : "Name must be 3–30 letters, no special characters, and no leading/trailing/multiple spaces.";
            return valid;
        },

        email() {
            const val = editFields.email.value.trim();
            const basicValid = /^[a-z0-9]+([._%+-]?[a-z0-9]+)*@[a-z0-9-]+\.[a-z]{2,}(\.[a-z]{2,})?$/.test(val);
            editErrors.email.textContent = basicValid ? "" : "Please enter a valid email with only lowercase letters.";
            return basicValid;
        },
        password() {
            editFields.password.value = editFields.password.value.trim();
            const val = editFields.password.value.trim();
            const valid = val.length >= 8 && val.length < 15 &&
                /[A-Z]/.test(val) &&
                /[a-z]/.test(val) &&
                /\d/.test(val) &&
                /[!@#$%^&*(),.?":{}|<>]/.test(val) &&
                !/\s/.test(val);
            editErrors.password.textContent = valid
                ? ""
                : "Password must be 8–14 characters, include A-Z, a-z, 0-9, a special character, and no spaces.";
            return valid;
        },

        phone() {
            const val = editFields.phone.value;
            const valid = /^(\+91[\-\s]?)?[6-9]\d{9}$/.test(val);
            editErrors.phone.textContent = valid ? "" : "Incorrect Phone Number Format";
            return valid;
        }
    };


    editForm.addEventListener('submit', (e) => {
        let allValid = true;
        Object.entries(validateEdit).forEach(([key, fn]) => {
            if (!fn()) allValid = false;
        });

        if (!allValid) {
            e.preventDefault(); // stop form
            editSubmitBtn.disabled = false;
        } else {
            editSubmitBtn.disabled = true;
        }
    });

</script>

<script>
    $('#addSubAdminModal').on('hidden.bs.modal', function () {
        $('#addSubAdminForm')[0].reset(); // Reset form

        // Clear all error messages
        $('#nameP, #emailP, #phoneP, #passwordP').text('');

        // Disable the submit button
        $('#addsubmitBtn').prop('disabled', true);
    });

</script>





<script>
    let editPermissionsChoices = null;

    document.addEventListener('DOMContentLoaded', function () {
        // Initialize general permissions select
        const staticElement = document.getElementById('permissions');
        if (staticElement) {
            new Choices(staticElement, {
                removeItemButton: true,
                placeholderValue: 'Select permissions',
                searchEnabled: true,
            });
        }

        // Initialize all .permission-select except the edit-permissions one
        document.querySelectorAll('.permission-select').forEach((el) => {
            if (el.id !== 'edit-permissions') {
                new Choices(el, {
                    removeItemButton: true,
                    placeholderValue: 'Select permissions',
                    searchEnabled: true,
                    shouldSort: false,
                });
            }
        });

        // Initialize edit-permissions only once
        const editSelect = document.getElementById('edit-permissions');
        if (editSelect && !editSelect.classList.contains('choices-initialized')) {
            editPermissionsChoices = new Choices(editSelect, {
                removeItemButton: true,
                placeholderValue: 'Select permissions',
                searchEnabled: true,
                shouldSort: false,
            });
            editSelect.classList.add('choices-initialized');
        }
    });

    // For edit modal
    $('#editSubAdminModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const id = button.data('id');
        const name = button.data('name');
        const email = button.data('email');
        const phone = button.data('phone');
        const password = button.data('password');
        const permissions = button.data('permissions'); // e.g., "ManageDashboard,ManageUsers"
        const status = button.data('status');

        const modal = $(this);
        modal.find('#nameEdit').val(name);
        modal.find('#emailEdit').val(email);
        modal.find('#phoneEdit').val(phone);
        modal.find('#passwordEdit').val('');
        modal.find('#edit-status').val(status);
        modal.find('form').attr('action', '/admin/update-sub-admin/' + id);

        // Handle permission selection
        if (editPermissionsChoices) {
            editPermissionsChoices.removeActiveItems();

            if (permissions && permissions.trim() !== '') {
                const permsArray = permissions.split(',').map(p => p.trim());
                permsArray.forEach(p => {
                    editPermissionsChoices.setChoiceByValue(p);
                });
            }
        }
    });

    // For delete modal
    $('#deleteSubAdminModal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const id = button.data('id');
        const name = button.data('name');

        const modal = $(this);
        modal.find('.modal-body').text('Are you sure you want to delete ' + name + '?');
        modal.find('form').attr('action', '/admin/delete-sub-admin/' + id);

        // Re-enable the button in case it was disabled before
        modal.find('button[type="submit"]').prop('disabled', false);
    });

    // Disable the delete button after form submission
    $('#deleteSubAdminModal form').on('submit', function () {
        $(this).find('button[type="submit"]').prop('disabled', true);
    });

</script>