{% extends 'admin-dashboard.html' %}
{% block content %}

<!---------------------- Modal for Adding new Institution -------------------->
<div class="modal fade" id="institutionModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content rounded-4 shadow-lg border-0">

            <div class="modal-header border-bottom px-4 pt-4 pb-3">
                <h5 class="modal-title fw-bolder text-dark" id="exampleModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="home"></i> Add New Institution
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" id="add-institution-form">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Institution Details</h6>

                    <div class="row g-3">
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="inst_name" placeholder="Enter Institution name" name="inst_name" required>
                                <label for="inst_name">Institution Name</label>
                                <span class="text-danger small mt-1 d-block" id="inst_name-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="tel" class="form-control rounded-3" id="inst_phn" placeholder="Enter Institution phone number" name="inst_phn" required>
                                <label for="inst_phn">Phone Number</label>
                                <span class="text-danger small mt-1 d-block" id="inst_phn-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="email" class="form-control rounded-3" id="inst_email" placeholder="Enter Institution email" name="inst_email" required>
                                <label for="inst_email">Email Address</label>
                                <span class="text-danger small mt-1 d-block" id="inst_email-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="inst_email_pwd" placeholder="Enter email app password" name="inst_app_pwd" required>
                                <label for="inst_email_pwd">Email App Password</label>
                                <span class="text-danger small mt-1 d-block" id="inst_email_pwd-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <textarea class="form-control rounded-3" placeholder="Enter Address" id="inst_address" name="inst_address" style="height: 100px;" required></textarea>
                                <label for="inst_address">Address</label>
                                <span class="text-danger small mt-1 d-block" id="inst_address-error"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="reset" class="btn btn-outline-danger fw-semibold rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="align-middle me-1" data-feather="x"></i> Close
                    </button>
                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4">
                        <i class="align-middle me-1" data-feather="user-plus"></i> Register
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!---------------------- Modal for Updating Institution -------------------->
<div class="modal fade" id="institutionViewModal" tabindex="-1" aria-labelledby="institutionViewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content rounded-4 shadow-lg border-0">

            <div class="modal-header border-bottom px-4 pt-4 pb-3">
                <h5 class="modal-title fw-bolder text-dark" id="institutionViewModalLabel">
                    <i class="align-middle me-2 text-primary" data-feather="settings"></i> Manage Institution Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" id="update-institution-form" action="">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Institution Information</h6>

                    <div class="row g-3">
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="inst_name_update" placeholder="Enter Institution name" name="inst_name" required disabled>
                                <label for="inst_name_update">Institution Name</label>
                                <span class="text-danger small mt-1 d-block" id="inst_name_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="email" class="form-control rounded-3" id="inst_email_update" placeholder="Enter Institution email" name="inst_email" required disabled>
                                <label for="inst_email_update">Institution Email</label>
                                <span class="text-danger small mt-1 d-block" id="inst_email_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12" id="app_password_field" hidden>
                            <div class="form-floating">
                                <input type="password" class="form-control rounded-3" id="inst_app_pwd_update" placeholder="Enter new App Password" name="inst_app_pwd">
                                <label for="inst_app_pwd_update">Email App Password (Optional)</label>
                                <span class="text-danger small mt-1 d-block" id="inst_app_pwd_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <input type="tel" class="form-control rounded-3" id="inst_phn_update" placeholder="Enter Institution phone number" name="inst_phn" required disabled>
                                <label for="inst_phn_update">Phone Number</label>
                                <span class="text-danger small mt-1 d-block" id="inst_phn_update-error"></span>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-floating">
                                <textarea class="form-control rounded-3" placeholder="Enter Address" id="inst_address_update" name="inst_address" style="height: 100px;" required disabled></textarea>
                                <label for="inst_address_update">Address</label>
                                <span class="text-danger small mt-1 d-block" id="inst_address_update-error"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer d-flex justify-content-between border-top p-4">
                    <button type="button" class="btn btn-outline-secondary fw-semibold rounded-pill px-4" data-bs-dismiss="modal">
                        <i class="align-middle me-1" data-feather="x"></i> Close
                    </button>

                    <button type="button" class="btn btn-warning fw-semibold rounded-pill px-4" id="edit-button">
                        <i class="align-middle me-1" data-feather="edit"></i> Edit Details
                    </button>

                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4" id="update-button" hidden>
                        <i class="align-middle me-1" data-feather="save"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!---------------------- All Institution Table Details -------------------->
<div class="row">
    <div class="col-12 ">
        <h1 class="mb-4 fw-bold">Institutional Details</h1>

        <div class="card border-0 shadow-lg rounded-4 flex-fill">

            <div class="card-header bg-white rounded-top-4 border-0 d-flex justify-content-end align-items-center p-4">
                <button type="button" class="btn btn-info fw-semibold rounded-pill py-2 px-3 me-2" data-bs-toggle="modal" data-bs-target="#institutionModal" data-action-type="add">
                    <i class="align-middle me-1" data-feather="plus"></i> Register New Institution
                </button>
                <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2 px-3"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasInstFilter"
                    aria-controls="offcanvasInstFilter">
                    <i class="align-middle me-1" data-feather="filter"></i> Advanced Filter
                </button>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasInstFilter" aria-labelledby="offcanvasInstFilterLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasInstFilterLabel">
                        <i class="align-middle me-2" data-feather="filter"></i> Filter Options
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <form method="get" class="row g-3 align-items-end">

                        <div class="col-12">
                            <h6 class="mt-0 mb-3 fw-bold text-dark">Search Criteria</h6>
                        </div>

                        <div class="col-md-12">
                            <label for="institution_name" class="form-label small text-muted mb-1">Institution Name</label>
                            <input type="text" class="form-control" id="institution_name" name="institution_name" placeholder="Enter Institution Name">
                        </div>
                        <div class="col-md-12">
                            <label for="email_filter" class="form-label small text-muted mb-1">Email Address</label>
                            <input type="text" class="form-control" id="email_filter" name="email_filter" placeholder="Enter Email Address">
                        </div>
                        <div class="col-md-12">
                            <label for="phone_filter" class="form-label small text-muted mb-1">Phone Number</label>
                            <input type="text" class="form-control" id="phone_filter" name="phone_filter" placeholder="Enter Phone number">
                        </div>

                        <div class="col-12 mt-4">
                            <h6 class="mb-3 fw-bold text-dark">Sorting & Status</h6>
                        </div>

                        <div class="col-md-6">
                            <label for="status_filter" class="form-label small text-muted mb-1">Status</label>
                            <select id="status_filter" name="status_filter" class="form-select">
                                <option value="">All</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="order_by_name" class="form-label small text-muted mb-1">Order by Name</label>
                            <select id="order_by_name" name="name_order" class="form-select">
                                <option value="">None</option>
                                <option value="asc">Ascending</option>
                                <option value="desc">Descending</option>
                            </select>
                        </div>

                        <div class="col-12 text-end mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-primary fw-semibold rounded-pill py-2 px-3 w-100 mb-2">
                                <i class="align-middle me-1" data-feather="check"></i> Apply Filters
                            </button>
                            <a href="." class="btn btn-outline-secondary fw-semibold rounded-pill py-2 px-3 w-100">
                                <i class="align-middle me-1" data-feather="x"></i> Clear Filters
                            </a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th class="text-white small fw-bold text-uppercase ps-4">#</th>
                                <th class="text-white small fw-bold text-uppercase">Institution Name</th>
                                <th class="text-white small fw-bold text-uppercase">Email Address</th>
                                <th class="text-white small fw-bold text-uppercase">Contact Number</th>
                                <th class="text-white small fw-bold text-uppercase">Address</th>
                                <th class="text-center text-white small fw-bold text-uppercase">Status</th>
                                <th class="text-center text-white small fw-bold text-uppercase pe-4">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for i in institutions %}
                        <tr>
                            <td class="ps-4">{{forloop.counter}}</td>
                            <td class="fw-semibold text-dark">{{i.institution_name}}</td>
                            <td>{{i.email}}</td>
                            <td>{{i.phn}}</td>
                            <td>{{i.address}}</td>
                            <td class="text-center">
                                {% if i.table_status %}
                                    <span class="badge bg-success bg-opacity-10 text-success fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="check-circle"></i> Active
                                    </span>
                                {% else %}
                                    <span class="badge bg-danger bg-opacity-10 text-danger fw-bold rounded-pill p-2">
                                        <i class="align-middle me-1" data-feather="x-circle"></i> Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-center pe-4 text-nowrap">
                                <div class="d-flex align-items-center justify-content-center gap-2">
                                    <a class="btn btn-sm btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#institutionViewModal" data-action-type="view"
                                       data-inst-id="{{ i.id }}" data-inst-name="{{ i.institution_name }}" data-inst-email="{{ i.email }}"
                                       data-inst-phn="{{ i.phn }}" data-inst-address="{{ i.address }}" title="Edit Details">
                                        <i class="align-middle" data-feather="edit"></i>
                                    </a>

                                    {% if i.table_status %}
                                    <a class="btn btn-sm btn-warning rounded-pill px-3" href="/administrator/change-institution-status/{{i.id}}/" title="Set Inactive">
                                        <i class="align-middle" data-feather="toggle-right"></i>
                                    </a>
                                    {% else %}
                                    <a class="btn btn-sm btn-success rounded-pill px-3" href="/administrator/change-institution-status/{{i.id}}/" title="Set Active">
                                        <i class="align-middle" data-feather="toggle-left"></i>
                                    </a>
                                    {% endif %}

                                    <a href="/administrator/delete-institution/{{i.id}}/" class="btn btn-sm btn-danger rounded-pill px-3"
                                    onclick="return confirm('Are you sure you want to permanently delete this institute?');">
                                        <i class="align-middle" data-feather="trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center p-5">
                                <div class="alert alert-warning m-0 rounded-3" role="alert">
                                    No institution details found matching the criteria.
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // --- Modal Elements ---
        const permanentDeleteModal = document.getElementById('permanentDeleteModal');
        const institutionModal = document.getElementById('institutionModal');
        const updateModal = document.getElementById('institutionViewModal');

        // --- Form Elements ---
        const addForm = document.getElementById('add-institution-form');
        const updateForm = document.getElementById('update-institution-form');

        // --- Form-specific Buttons & Inputs (for the Update modal) ---
        const formInputs = updateForm ? updateForm.querySelectorAll('input, textarea') : [];
        const editButton = document.getElementById('edit-button');
        const updateButton = document.getElementById('update-button');
        const appPasswordField = document.getElementById('app_password_field');
        const passwordInput = document.getElementById('inst_app_pwd_update');

        // --- Regex patterns for validation ---
        const phoneRegex = /^\d{10}$/;
        const emailRegex = /^\S+@\S+\.\S+$/;

        // --- Validation Utility Functions ---
        function updateValidationStatus(inputElement, isValid, errorMessage = "") {
            const errorSpan = document.getElementById(`${inputElement.id}-error`);
            if (isValid) {
                inputElement.classList.remove('is-invalid');
                inputElement.classList.add('is-valid');
                if (errorSpan) errorSpan.textContent = "";
            } else {
                inputElement.classList.remove('is-valid');
                inputElement.classList.add('is-invalid');
                if (errorSpan) errorSpan.textContent = errorMessage;
            }
        }

        function resetValidationStatus(form) {
            if (!form) return;
            form.querySelectorAll('.is-valid, .is-invalid').forEach(el => {
                el.classList.remove('is-valid', 'is-invalid');
            });
            form.querySelectorAll('.small-text').forEach(el => {
                el.textContent = '';
            });
        }

        function validateForm(form) {
            let formIsValid = true;
            resetValidationStatus(form); // Clear previous errors

            // Get the specific input IDs for this form
            const nameInput = form.querySelector('[name="inst_name"]');
            const emailInput = form.querySelector('[name="inst_email"]');
            const phoneInput = form.querySelector('[name="inst_phn"]');
            const addressInput = form.querySelector('[name="inst_address"]');
            const passwordInput = form.querySelector('[name="inst_app_pwd"]');

            // --- Validate each field ---
            if (!nameInput.value.trim()) {
                updateValidationStatus(nameInput, false, "Institution name is required.");
                formIsValid = false;
            } else {
                updateValidationStatus(nameInput, true);
            }

            if (!emailInput.value.trim() || !emailRegex.test(emailInput.value)) {
                updateValidationStatus(emailInput, false, "Please enter a valid email address.");
                formIsValid = false;
            } else {
                updateValidationStatus(emailInput, true);
            }

            if (!phoneInput.value.trim() || !phoneRegex.test(phoneInput.value)) {
                updateValidationStatus(phoneInput, false, "Please enter a valid 10-digit phone number.");
                formIsValid = false;
            } else {
                updateValidationStatus(phoneInput, true);
            }

            if (!addressInput.value.trim()) {
                updateValidationStatus(addressInput, false, "Address is required.");
                formIsValid = false;
            } else {
                updateValidationStatus(addressInput, true);
            }

            // The password field exists on both forms now
            if (passwordInput && !passwordInput.value.trim()) {
                // If it's a new institution, password is required
                if (form.id === 'add-institution-form') {
                    updateValidationStatus(passwordInput, false, "App password is required.");
                    formIsValid = false;
                }
                // If it's an update and the field is shown, it should be validated
                else if (form.id === 'update-institution-form' && !appPasswordField.hidden) {
                    // Password field for update is optional, so no error here
                }
            }
            if (passwordInput) {
                updateValidationStatus(passwordInput, true);
            }

            return formIsValid;
        }

        // --- Event Listeners for the "Add New" form ---
        if (addForm) {
            addForm.addEventListener('submit', function (event) {
                if (!validateForm(addForm)) {
                    event.preventDefault();
                }
            });
        }


        // --- Event Listeners for the "Update" modal ---
        if (updateModal) {
            updateModal.addEventListener('show.bs.modal', event => {
                const button = event.relatedTarget;
                const institutionId = button.getAttribute('data-inst-id');
                const institutionName = button.getAttribute('data-inst-name');
                const institutionEmail = button.getAttribute('data-inst-email');
                const institutionPhn = button.getAttribute('data-inst-phn');
                const institutionAddress = button.getAttribute('data-inst-address');

                if (updateForm) {
                    updateForm.action = `/administrator/update-institution/${institutionId}/`;
                    updateModal.querySelector('#inst_name_update').value = institutionName;
                    updateModal.querySelector('#inst_email_update').value = institutionEmail;
                    updateModal.querySelector('#inst_phn_update').value = institutionPhn;
                    updateModal.querySelector('#inst_address_update').value = institutionAddress;
                    passwordInput.value = ""; // Clear the password field
                }

                if (formInputs) {
                    formInputs.forEach(input => {
                        input.disabled = true;
                    });
                }

                if (appPasswordField) appPasswordField.hidden = true; // Hide password field
                if (editButton) editButton.hidden = false;
                if (updateButton) updateButton.hidden = true;
                if (updateForm) resetValidationStatus(updateForm);
            });

            if (editButton) {
                editButton.addEventListener('click', () => {
                    editButton.hidden = true;
                    updateButton.hidden = false;
                    formInputs.forEach(input => {
                        input.disabled = false;
                    });
                    if (appPasswordField) appPasswordField.hidden = false; // Show password field
                });
            }

            if (updateForm) {
                updateForm.addEventListener('submit', function(event) {
                    if (!validateForm(updateForm)) {
                        event.preventDefault();
                    }
                });
            }
        }
    });
</script>
{% endblock %}