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

<!---------------------- Modal for Adding new Institution -------------------->
<div class="modal fade" id="ModalAddProject" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl 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="plus-circle"></i> Add a New Project
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form method="post" id="create-project-form" action="{% url 'admin_add_project' %}">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <div class="row g-4">

                        <div class="col-lg-6 border-end pe-lg-4">
                            <h6 class="fw-bold text-dark mb-3">Project Funding & Description</h6>
                            <div class="row g-3">

                                <div class="col-lg-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control rounded-3" id="projectTitle" placeholder="Enter the project title.. " name="title" required>
                                        <label for="projectTitle">Project Title</label>
                                        <span class="text-danger small mt-1 d-block" id="projectTitle-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="number" class="form-control rounded-3" id="fundingGoal" placeholder="Enter the funding goal.. " name="goal" required>
                                        <label for="fundingGoal">Funding Goal (₹)</label>
                                        <span class="text-danger small mt-1 d-block" id="fundingGoal-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="number" class="form-control rounded-3" id="tileValue" placeholder="Enter tile value " name="tvalue" required>
                                        <label for="tileValue">Single Tile Value (₹)</label>
                                        <span class="text-danger small mt-1 d-block" id="tileValue-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-floating">
                                        <textarea class="form-control rounded-3" id="projectDesc" style="resize:none; height:120px;" placeholder="Enter the description..." name="desc" required></textarea>
                                        <label for="projectDesc">Project Description</label>
                                        <span class="text-danger small mt-1 d-block" id="projectDesc-error"></span>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-6 ps-lg-4">
                            <h6 class="fw-bold text-dark mb-3">Beneficiary Personal Details</h6>
                            <div class="row g-3">

                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control rounded-3" id="fname" placeholder="Enter Firstname" name="fname" required>
                                        <label for="fname">First Name</label>
                                        <span class="text-danger small mt-1 d-block" id="fname-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control rounded-3" id="lname" placeholder="Enter Lastname" name="lname" required>
                                        <label for="lname">Last Name</label>
                                        <span class="text-danger small mt-1 d-block" id="lname-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="number" class="form-control rounded-3" id="age" placeholder="Enter Age " name="age" required>
                                        <label for="age">Age</label>
                                        <span class="text-danger small mt-1 d-block" id="age-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-floating">
                                        <input type="number" class="form-control rounded-3" id="telPhn" placeholder="Enter Phone Number.. " name="phn" required>
                                        <label for="telPhn">Phone Number</label>
                                        <span class="text-danger small mt-1 d-block" id="telPhn-error"></span>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-floating">
                                        <textarea class="form-control rounded-3" style="resize:none; height:120px;" id="address" placeholder="Enter your Address.." name="addr" required></textarea>
                                        <label for="address">Address</label>
                                        <span class="text-danger small mt-1 d-block" id="address-error"></span>
                                    </div>
                                </div>
                            </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> Reset & Close
                    </button>
                    <button type="submit" class="btn btn-primary fw-semibold rounded-pill px-4">
                        <i class="align-middle me-1" data-feather="save"></i> Add Project
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!---------------------- All Institution Table Details -------------------->
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4 fw-bold">Project 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">

                    {% if not admin.is_superuser %}
                        <button type="button" class="btn btn-info fw-semibold rounded-pill py-2 px-3 me-3" data-bs-toggle="modal" data-bs-target="#ModalAddProject"
                                {% if not admin.institution.default_bank %} disabled {% endif %}
                                title="{% if not admin.institution.default_bank %} Please set default bank details first. {% endif %}">
                            <i class="align-middle me-1" data-feather="folder-plus"></i> Add New Project
                        </button>
                    {% endif %}

                    <button type="button" class="btn btn-primary fw-semibold rounded-pill py-2 px-3"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasProjectFilter"
                        aria-controls="offcanvasProjectFilter">
                        <i class="align-middle me-1" data-feather="filter"></i> Advanced Filter
                    </button>
                </div>

                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasProjectFilter" aria-labelledby="offcanvasProjectFilterLabel">
                    <div class="offcanvas-header border-bottom">
                        <h5 class="offcanvas-title fw-bold" id="offcanvasProjectFilterLabel">
                            <i class="align-middle me-2" data-feather="filter"></i> Filter Projects
                        </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 & Status</h6>
                            </div>

                            <div class="col-12">
                                <label for="project_title" class="form-label small text-muted mb-1">Project Name</label>
                                <input type="text" class="form-control" id="project_title" name="project_title" placeholder="Enter Project Name">
                            </div>
                            <div class="col-12">
                                <label for="project_status" class="form-label small text-muted mb-1">Project Status</label>
                                <select id="project_status" name="project_status" class="form-select">
                                    <option value="">All Projects</option>
                                    <option value="active">Active Projects</option>
                                    <option value="closed">Closed Projects</option>
                                    <option value="success">Successful Projects</option>
                                </select>
                            </div>

                            <div class="col-12 mt-4">
                                <h6 class="mb-3 fw-bold text-dark">Date Range</h6>
                            </div>

                            <div class="col-md-6">
                                <label for="start_date" class="form-label small text-muted mb-1">Created From</label>
                                <input type="date" class="form-control" id="start_date" name="start_date">
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label small text-muted mb-1">Created To</label>
                                <input type="date" class="form-control" id="end_date" name="end_date">
                            </div>

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

                            <div class="col-md-6">
                                <label for="order_by_target" class="form-label small text-muted mb-1">Sort by Target</label>
                                <select id="order_by_target" name="target_order" class="form-select">
                                    <option value="">None</option>
                                    <option value="asc">Ascending</option>
                                    <option value="desc">Descending</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="order_by_current_amount" class="form-label small text-muted mb-1">Sort by Current</label>
                                <select id="order_by_current_amount" name="amount_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">Project Title</th>
                                    <th class="d-none d-lg-table-cell text-white small fw-bold text-uppercase">Target</th>
                                    <th class="text-white small fw-bold text-uppercase">Current Amount</th>
                                    <th class="d-none d-md-table-cell text-white small fw-bold text-uppercase">Created</th>
                                    <th class="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 p in prj %}
                                <tr>
                                    <td class="ps-4">{{ forloop.counter }}</td>

                                    <td class="fw-semibold text-dark">
                                        {{ p.title|truncatechars:35 }}
                                    </td>

                                    <td class="d-none d-lg-table-cell fw-bold text-info text-nowrap">₹{{ p.funding_goal|floatformat:2|intcomma }}</td>

                                    <td class="fw-bold text-success text-nowrap">₹{{ p.current_amount|floatformat:2|intcomma }}</td>

                                    <td class="d-none d-md-table-cell">{{ p.started_at|date:"d M, Y" }}</td>

                                    <td>
                                        {% if p.validity %}
                                            <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-square"></i> Completed
                                            </span>
                                            <small class="d-block text-muted small mt-1">On {{ p.closed_by|date:"d M, Y" }}</small>
                                        {% elif p.table_status == False %}
                                            <span class="badge bg-danger bg-opacity-10 text-danger fw-bold rounded-pill p-2">
                                                <i class="align-middle me-1" data-feather="lock"></i> Closed
                                            </span>
                                            <small class="d-block text-muted small mt-1">Manually stopped</small>
                                        {% else %}
                                            <span class="badge bg-info bg-opacity-10 text-info fw-bold rounded-pill p-2">
                                                <i class="align-middle me-1" data-feather="activity"></i> Ongoing
                                            </span>
                                        {% endif %}
                                    </td>

                                    <td class="text-center pe-4">
                                        <a class="btn btn-sm btn-info rounded-pill px-3" href="/administrator/single-project/{{ p.id }}/" title="View Project Details">
                                            <i class="align-middle" data-feather="eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="7" class="text-center p-5">
                                        <div class="alert alert-warning m-0 rounded-3" role="alert">
                                            No projects were found matching the criteria.
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('create-project-form');

        if (!form) return; // Guard clause

        // Define all input elements
        const projectTitleInput = document.getElementById('projectTitle');
        const fundingGoalInput = document.getElementById('fundingGoal');
        const tileValueInput = document.getElementById('tileValue');
        const projectDescInput = document.getElementById('projectDesc');
        const fnameInput = document.getElementById('fname');
        const lnameInput = document.getElementById('lname');
        const ageInput = document.getElementById('age');
        const phoneInput = document.getElementById('telPhn');
        const addressInput = document.getElementById('address');

        // --- Regex patterns for validation ---
        const phoneRegex = /^\d{10}$/;          // Must be exactly 10 digits
        const nameRegex = /^[a-zA-Z\s]+$/;      // Only letters and spaces
        const nonDigitRegex = /\D/;             // New: Must contain at least one non-digit character (letter, space, symbol, etc.)

        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 validateForm() {
            let formIsValid = true;

            // --- 1. Validate all Required Fields (Simple Empty Check) ---
            const requiredInputs = form.querySelectorAll('[required]');
            requiredInputs.forEach(input => {
                if (input.value.trim() === '') {
                    updateValidationStatus(input, false, "This field is required.");
                    formIsValid = false;
                } else {
                    // Temporarily set to valid before specific checks
                    updateValidationStatus(input, true);
                }
            });


            // --- 2. Validate Specific Fields with Custom Rules ---

            // Validate First and Last Name (Letters and Spaces Only)
            if (fnameInput.value.trim() !== '' && !nameRegex.test(fnameInput.value)) {
                updateValidationStatus(fnameInput, false, "First Name must contain only letters and spaces.");
                formIsValid = false;
            }
            if (lnameInput.value.trim() !== '' && !nameRegex.test(lnameInput.value)) {
                updateValidationStatus(lnameInput, false, "Last Name must contain only letters and spaces.");
                formIsValid = false;
            }

            // Validate Phone Number (Exactly 10 Digits)
            if (phoneInput.value.trim() !== '' && !phoneRegex.test(phoneInput.value)) {
                updateValidationStatus(phoneInput, false, "Phone number must be exactly 10 digits.");
                formIsValid = false;
            }

            // Validate Age (1 to 100)
            const age = parseInt(ageInput.value);
            if (ageInput.value.trim() !== '') {
                if (isNaN(age) || age < 1 || age > 100) { // Updated limit to 100
                    updateValidationStatus(ageInput, false, "Please enter a valid age (1-100).");
                    formIsValid = false;
                }
            }

            // Validate Project Title (Must contain characters, not just numbers)
            if (projectTitleInput.value.trim() !== '' && !nonDigitRegex.test(projectTitleInput.value)) {
                updateValidationStatus(projectTitleInput, false, "Project Title must contain characters, not just numbers.");
                formIsValid = false;
            }

            // Validate Project Description (Must contain characters, not just numbers)
            if (projectDescInput.value.trim() !== '' && !nonDigitRegex.test(projectDescInput.value)) {
                updateValidationStatus(projectDescInput, false, "Description must contain characters, not just numbers.");
                formIsValid = false;
            }

            // Validate Address (Must contain characters, not just numbers)
            if (addressInput.value.trim() !== '' && !nonDigitRegex.test(addressInput.value)) {
                updateValidationStatus(addressInput, false, "Address must contain characters, not just numbers.");
                formIsValid = false;
            }


            // --- 3. Validate Funding Goal and Tile Value ---
            const fundingGoal = parseFloat(fundingGoalInput.value);
            const tileValue = parseFloat(tileValueInput.value);
            let goalValid = true;
            let tileValid = true;

            // A. Check for positive number and maximum limit
            if (fundingGoalInput.value.trim() === '' || isNaN(fundingGoal) || fundingGoal <= 0) {
                updateValidationStatus(fundingGoalInput, false, "Funding goal must be a positive number.");
                formIsValid = false; goalValid = false;
            } else if (fundingGoal > 10000000) {
                updateValidationStatus(fundingGoalInput, false, "Funding goal cannot exceed 1 Crore (10,000,000).");
                formIsValid = false; goalValid = false;
            } else if(fundingGoalInput.value.trim() !== '') {
                 updateValidationStatus(fundingGoalInput, true);
            }

            if (tileValueInput.value.trim() === '' || isNaN(tileValue) || tileValue <= 0) {
                updateValidationStatus(tileValueInput, false, "Tile value must be a positive number.");
                formIsValid = false; tileValid = false;
            } else if(tileValueInput.value.trim() !== '') {
                 updateValidationStatus(tileValueInput, true);
            }


            // B. Combined Goal and Tile Logic (Only if both are valid numbers)
            if (goalValid && tileValid) {

                // Rule 1: Goal must be greater than tile value.
                if (fundingGoal <= tileValue) {
                    const errorMessage = "Goal must be greater than tile value.";
                    updateValidationStatus(fundingGoalInput, false, errorMessage);
                    updateValidationStatus(tileValueInput, false, errorMessage);
                    formIsValid = false;
                }

                // Rule 2: Goal must be perfectly divisible by tile value.
                const remainder = fundingGoal % tileValue;

                // Check if the remainder is effectively zero (using a small tolerance for floating point math)
                if (remainder > 0.0001 && Math.abs(remainder - tileValue) > 0.0001) {
                    const errorMessage = "Goal must be perfectly divisible by Tile Value.";
                    updateValidationStatus(fundingGoalInput, false, errorMessage);
                    updateValidationStatus(tileValueInput, false, errorMessage);
                    formIsValid = false;
                }
            }

            return formIsValid;
        }

        // Add the submit event listener to run validation
        form.addEventListener('submit', (event) => {
            const formIsValid = validateForm();
            if (!formIsValid) {
                event.preventDefault(); // Stop form submission if validation fails

                // Optional: Scroll to the first invalid input
                const firstInvalid = form.querySelector('.is-invalid');
                if (firstInvalid) {
                    firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    });
</script>
{% endblock %}