{% extends "layout/base.html" %}
{% block title %}Create CA{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">Create Chartered Accountant</h2>
    <form method="POST" id="createCaForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <!-- Basic Info -->
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Full Name</label>
                <input type="text" name="name" class="form-control" placeholder="Enter full name" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Email</label>
                <input type="email" name="email" class="form-control" placeholder="Enter email" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Password</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="Enter password" required>
            </div>
            <div class="col-md-4 mt-3">
                <label class="form-label">Confirm Password</label>
                <input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm password" required>
            </div>
        </div>

        <hr class="my-4">

        <!-- Access Section -->
        <h4 class="mb-3">Select Access (Year → Category → Months)</h4>
        <div class="accordion" id="companyAccordion">
            {% for comp in structure %}
            <div class="accordion-item mb-2 border rounded">
                <h2 class="accordion-header" id="headingComp{{ loop.index }}">
                    <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComp{{ loop.index }}">
                        📁 {{ comp.company.name }}
                    </button>
                </h2>
                <div id="collapseComp{{ loop.index }}" class="accordion-collapse collapse" data-bs-parent="#companyAccordion">
                    <div class="accordion-body">
                        {% for yr in comp.years %}
                        <div class="accordion mb-2 border rounded">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseYear{{ comp.company.id }}-{{ yr.year.id }}">
                                        📅 {{ yr.year.year }}
                                    </button>
                                </h2>
                                <div id="collapseYear{{ comp.company.id }}-{{ yr.year.id }}" class="accordion-collapse collapse">
                                    <div class="accordion-body">

                                        <!-- ✅ Expiry per year -->
                                        <div class="mb-3">
                                            <label class="form-label">Expiry Date for {{ yr.year.year }}</label>
                                            <input type="date" name="expiry_for_year_{{ yr.year.id }}" class="form-control">
                                        </div>

                                        {% for cat in yr.categories %}
                                        <div class="mb-3 border-bottom pb-2">
                                            <strong>📂 {{ cat.category.name }}</strong>

                                            {% if cat.type == 'purchase' %}
                                                <!-- Purchase Months -->
                                                <div class="row mt-2">
                                                    {% for m in cat.months %}
                                                    <div class="col-md-3">
                                                        <div class="form-check">
                                                            <input class="form-check-input purchase-month" type="checkbox" id="purchaseMonth{{ m.id }}" data-month="{{ m.id }}">
                                                            <label class="form-check-label" for="purchaseMonth{{ m.id }}">
                                                                {{ m.name }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>

                                                <!-- Parties grouped by month -->
                                                {% for m in cat.months %}
                                                    {% if m.id in cat.month_parties %}
                                                    <div class="ms-3 mt-2 purchase-parties" id="partiesForMonth{{ m.id }}" style="display:none;">
                                                        <span class="fw-semibold">Parties for {{ m.name }}:</span>
                                                        {% for party in cat.month_parties[m.id] %}
                                                        <div class="form-check ms-3">
                                                            <input class="form-check-input purchase-party" type="checkbox"
                                                                   value="purchase_{{ party.id }}"
                                                                   data-subfolder="{{ party.id }}"
                                                                   data-monthid="{{ m.id }}"
                                                                   id="party{{ party.id }}Month{{ m.id }}" disabled>
                                                            <label class="form-check-label" for="party{{ party.id }}Month{{ m.id }}">
                                                                {{ party.name }}
                                                            </label>
                                                        </div>
                                                        {% endfor %}
                                                    </div>
                                                    {% endif %}
                                                {% endfor %}

                                            {% elif cat.type == 'expenses' %}
                                                <!-- Expense Months -->
                                                <div class="row mt-2">
                                                    {% for m in cat.months %}
                                                    <div class="col-md-3">
                                                        <div class="form-check">
                                                            <input class="form-check-input expense-month" type="checkbox" id="expenseMonth{{ m.id }}" data-month="{{ m.id }}">
                                                            <label class="form-check-label" for="expenseMonth{{ m.id }}">
                                                                {{ m.name }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>

                                                <!-- Expense Subcategories -->
                                                {% for m in cat.months %}
                                                <div class="ms-3 mt-2 expense-subcats" id="subcatsForMonth{{ m.id }}" style="display:none;">
                                                    <span class="fw-semibold">Subcategories for {{ m.name }}:</span>
                                                    {% for subcat in cat.subcategories %}
                                                    <div class="form-check ms-3">
                                                        <input class="form-check-input subcat-checkbox" type="checkbox"
                                                            value="expenses_{{ subcat.id }}"
                                                            data-subcat="{{ subcat.id }}"
                                                            data-monthid="{{ m.id }}"
                                                            id="subcat{{ subcat.id }}Month{{ m.id }}" disabled>
                                                        <label class="form-check-label" for="subcat{{ subcat.id }}Month{{ m.id }}">
                                                            {{ subcat.name }}
                                                        </label>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                                {% endfor %}

                                            {% else %}
                                                <!-- Default Category -->
                                                <div class="row mt-2">
                                                    {% for m in cat.months %}
                                                    <div class="col-md-3">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" name="access_ids" value="month_{{ m.id }}" id="month{{ m.id }}">
                                                            <label class="form-check-label" for="month{{ m.id }}">
                                                                {{ m.name }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Submit -->
        <div class="mt-4">
            <button type="submit" class="btn btn-primary px-4">
                <i class="bi bi-plus-circle"></i> Create Access
            </button>
        </div>
    </form>
</div>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.getElementById("createCaForm").addEventListener("submit", function(e) {
    let password = document.getElementById("password").value.trim();
    let confirmPassword = document.getElementById("confirm_password").value.trim();

    if (password.length < 8) {
        e.preventDefault();
        Swal.fire({ icon: 'warning', title: 'Weak Password', text: 'Password must be at least 8 characters long.', confirmButtonColor: '#d33' });
        return;
    }
    if (password !== confirmPassword) {
        e.preventDefault();
        Swal.fire({ icon: 'error', title: 'Password Mismatch', text: 'Password and Confirm Password do not match.', confirmButtonColor: '#d33' });
        return;
    }

    // Expense hidden inputs
    document.querySelectorAll('.subcat-checkbox:checked').forEach(cb => {
        let subcatId = cb.dataset.subcat;
        let monthId = cb.dataset.monthid;
        let hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'month_for_subcat_' + subcatId;
        hidden.value = monthId;
        this.appendChild(hidden);
        cb.name = "access_ids";
    });

    // Purchase hidden inputs
    document.querySelectorAll('.purchase-party:checked').forEach(cb => {
        let subfolderId = cb.dataset.subfolder;
        let monthId = cb.dataset.monthid;
        let hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'month_for_party_' + subfolderId + '_' + monthId;
        hidden.value = monthId;
        this.appendChild(hidden);
        cb.name = "access_ids";
    });
});

// Toggle Expense Subcategories
document.querySelectorAll('.expense-month').forEach(function(monthCheckbox) {
    monthCheckbox.addEventListener('change', function() {
        let monthId = this.dataset.month;
        let subcatSection = document.getElementById('subcatsForMonth' + monthId);
        let subcatCheckboxes = subcatSection.querySelectorAll('.subcat-checkbox');
        if (this.checked) {
            subcatSection.style.display = 'block';
            subcatCheckboxes.forEach(cb => cb.disabled = false);
        } else {
            subcatSection.style.display = 'none';
            subcatCheckboxes.forEach(cb => { cb.checked = false; cb.disabled = true; });
        }
    });
});

// Toggle Purchase Parties
document.querySelectorAll('.purchase-month').forEach(function(monthCheckbox) {
    monthCheckbox.addEventListener('change', function() {
        let monthId = this.dataset.month;
        let partySection = document.getElementById('partiesForMonth' + monthId);
        if (!partySection) return;
        let partyCheckboxes = partySection.querySelectorAll('.purchase-party');
        if (this.checked) {
            partySection.style.display = 'block';
            partyCheckboxes.forEach(cb => cb.disabled = false);
        } else {
            partySection.style.display = 'none';
            partyCheckboxes.forEach(cb => { cb.checked = false; cb.disabled = true; });
        }
    });
});
</script>
{% endblock %}