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

{% block content %}
<style>
.ca-card {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    transition: box-shadow 0.3s ease;
}
.ca-card:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.ca-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.ca-actions .btn {
    border-radius: 30px;
    font-size: 14px;
    padding: 6px 14px;
}
.role-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 13px;
    margin-left: 8px;
    color: #fff;
    background-color: #20c997;
}
</style>

<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>👨‍💼 Manage Chartered Accountants</h2>
        <a href="{{ url_for('uploader.create_ca') }}" class="btn btn-success">
            ➕ Create CA
        </a>
    </div>
    {% for ca in cas %}
    <div class="ca-card">
        <h5>
            {{ ca.name }}
            <span class="role-badge">CA</span>
            {% set expiry_date = user_access_expiry.get(ca.id) %}
{% if expiry_date %}
    <span class="badge bg-warning ms-2">⏳ {{ expiry_date.strftime('%d-%m-%Y') }}</span>
{% else %}
    <span class="badge bg-success ms-2">No Expiry</span>
{% endif %}
        </h5>
        <p><strong>Email:</strong> {{ ca.email }}</p>

        <div class="ca-actions">
            <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editCaModal{{ ca.id }}">✏️ Edit CA</button>
            <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#editAccessModal{{ ca.id }}">🔐 Edit Access</button>
            <button class="btn btn-sm btn-outline-info" onclick="viewActivityLog({{ ca.id }})">📊 Activity Log</button>
            <!-- <button class="btn btn-sm btn-outline-danger" onclick="deleteCa({{ ca.id }})">🗑️ Delete</button> -->
        </div>
    </div>

    <!-- Edit CA Modal -->
    <div class="modal fade" id="editCaModal{{ ca.id }}" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ url_for('uploader.edit_ca', id=ca.id) }}" class="edit-ca-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Edit CA - {{ ca.name }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text" name="name" value="{{ ca.name }}" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" value="{{ ca.email }}" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" placeholder="Leave blank to keep same">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Confirm Password</label>
                        <input type="password" name="confirm_password" class="form-control" placeholder="Confirm password">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Expiry Date</label>
                        <input type="date" name="expiry_date" value="{{ ca.expiry_date if ca.expiry_date else '' }}" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">💾 Save Changes</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

    <!-- Edit Access Modal -->
    <div class="modal fade" id="editAccessModal{{ ca.id }}" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
    <form method="POST" action="{{ url_for('uploader.edit_ca_access', id=ca.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title">Edit Access - {{ ca.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" style="max-height:500px;overflow-y:auto;">
                <div class="accordion" id="companyAccordion{{ ca.id }}">
                    {% for comp in structure %}
                    <div class="accordion-item mb-2 border rounded">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComp{{ ca.id }}{{ loop.index }}">
                                📁 {{ comp.company.name }}
                            </button>
                        </h2>
                        <div id="collapseComp{{ ca.id }}{{ loop.index }}" class="accordion-collapse collapse">
                            <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{{ ca.id }}{{ comp.company.id }}-{{ yr.year.id }}">
                                                📅 {{ yr.year.year }}
                                            </button>
                                        </h2>
                                        <div id="collapseYear{{ ca.id }}{{ comp.company.id }}-{{ yr.year.id }}" class="accordion-collapse collapse">
                                            <div class="accordion-body">
                                                {% for cat in yr.categories %}
                                                <div class="mb-3 border-bottom pb-2">
                                                    <strong>📂 {{ cat.category.name }}</strong>

                                                    {% if cat.type == 'purchase' %}
                                                        <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 }}"
                                                                        {% if existing_access.get(ca.id) and ("month_" ~ m.id) in existing_access[ca.id] %}checked{% endif %}>
                                                                    <label class="form-check-label">
                                                                        {{ m.name }}
                                                                        {% if access_expiries.get(ca.id) and access_expiries[ca.id].get("month_" ~ m.id) %}
                                                                            <span class="badge bg-warning text-dark ms-1">
                                                                                ⏳ {{ access_expiries[ca.id]["month_" ~ m.id].strftime('%d-%m-%Y') }}
                                                                            </span>
                                                                        {% endif %}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            {% endfor %}
                                                        </div>
                                                        <div class="ms-3 mt-2">
                                                            <span class="fw-semibold">Parties:</span>
                                                            {% for party in cat.subfolders %}
                                                            <div class="form-check ms-3">
                                                                <input class="form-check-input" type="checkbox" name="access_ids" value="purchase_{{ party.id }}"
                                                                    {% if existing_access.get(ca.id) and ("purchase_" ~ party.id) in existing_access[ca.id] %}checked{% endif %}>
                                                                <label class="form-check-label">
                                                                    {{ party.name }}
                                                                    {% if access_expiries.get(ca.id) and access_expiries[ca.id].get("purchase_" ~ party.id) %}
                                                                        <span class="badge bg-warning text-dark ms-1">
                                                                            ⏳ {{ access_expiries[ca.id]["purchase_" ~ party.id].strftime('%d-%m-%Y') }}
                                                                        </span>
                                                                    {% endif %}
                                                                </label>
                                                            </div>
                                                            {% endfor %}
                                                        </div>

                                                    {% elif cat.type == 'expenses' %}
                                                        <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 }}"
                                                                        {% if existing_access.get(ca.id) and ("month_" ~ m.id) in existing_access[ca.id] %}checked{% endif %}>
                                                                    <label class="form-check-label">{{ m.name }}</label>
                                                                </div>
                                                            </div>
                                                            {% endfor %}
                                                        </div>
                                                        <div class="ms-3 mt-2">
                                                            <span class="fw-semibold">Subcategories:</span>
                                                            {% for subcat in cat.subcategories %}
                                                            <div class="form-check ms-3">
                                                                <input class="form-check-input" type="checkbox" name="access_ids" value="expenses_{{ subcat.id }}"
                                                                    {% if existing_access.get(ca.id) and ("expenses_" ~ subcat.id) in existing_access[ca.id] %}checked{% endif %}>
                                                                <label class="form-check-label">
                                                                    {{ subcat.name }}
                                                                    {% if access_expiries.get(ca.id) and access_expiries[ca.id].get("expenses_" ~ subcat.id) %}
                                                                        <span class="badge bg-warning text-dark ms-1">
                                                                            ⏳ {{ access_expiries[ca.id]["expenses_" ~ subcat.id].strftime('%d-%m-%Y') }}
                                                                        </span>
                                                                    {% endif %}
                                                                </label>
                                                            </div>
                                                            {% endfor %}
                                                        </div>

                                                    {% else %}
                                                        <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 }}"
                                                                        {% if existing_access.get(ca.id) and ("month_" ~ m.id) in existing_access[ca.id] %}checked{% endif %}>
                                                                    <label class="form-check-label">{{ m.name }}</label>
                                                                </div>
                                                            </div>
                                                            {% endfor %}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success">💾 Save Access</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </form>
</div>
</div>
    {% endfor %}
</div>

<!-- Activity Log Modal -->
<div class="modal fade" id="activityLogModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Activity Log</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-bordered" id="activityLogTable">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Action</th>
                            <th>Details</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="3" class="text-center">No data</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function deleteCa(id) {
    Swal.fire({
        title: "Delete CA?",
        text: "This action cannot be undone.",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        confirmButtonText: "Yes, delete it!"
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = `/delete-ca/${id}`;
        }
    });
}
function viewActivityLog(caId) {
    fetch(`/ca-activity-log/${caId}`)
    .then(res => res.json())
    .then(data => {
        let tbody = document.querySelector("#activityLogTable tbody");
        tbody.innerHTML = "";
        if (data.length === 0) {
            tbody.innerHTML = `<tr><td colspan="3" class="text-center">No activity found</td></tr>`;
        } else {
            data.forEach(row => {
                tbody.innerHTML += `<tr>
                    <td>${row.date}</td>
                    <td>${row.action}</td>
                    <td>${row.details}</td>
                </tr>`;
            });
        }
        new bootstrap.Modal(document.getElementById('activityLogModal')).show();
    });
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll('.edit-ca-form').forEach(form => {
        form.addEventListener('submit', function (e) {
            const name = form.querySelector('input[name="name"]').value.trim().toLowerCase();
            const email = form.querySelector('input[name="email"]').value.trim().toLowerCase();
            const password = form.querySelector('input[name="password"]').value;
            const confirmPassword = form.querySelector('input[name="confirm_password"]').value;

            if (password.length > 0) {
                const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

                if (password !== confirmPassword) {
                    e.preventDefault();
                    return Swal.fire({
                        icon: 'error',
                        title: 'Password Mismatch',
                        text: '❌ Password and Confirm Password do not match.',
                        confirmButtonColor: '#d33'
                    });
                }

                if (!strongPasswordRegex.test(password)) {
                    e.preventDefault();
                    return Swal.fire({
                        icon: 'warning',
                        title: 'Weak Password',
                        html: `
                          Your password must include:<br><br>
                          <ul style="text-align:left">
                            <li>✅ At least 8 characters</li>
                            <li>✅ One uppercase letter</li>
                            <li>✅ One lowercase letter</li>
                            <li>✅ One digit</li>
                            <li>✅ One special character (@$!%*?&)</li>
                          </ul>
                        `,
                        confirmButtonColor: '#d33'
                    });
                }

                if (password.toLowerCase() === name || password.toLowerCase() === email) {
                    e.preventDefault();
                    return Swal.fire({
                        icon: 'error',
                        title: 'Weak Password',
                        text: '⚠️ Your password should not be the same as the CA\'s name or email.',
                        confirmButtonColor: '#d33'
                    });
                }
            }
        });
    });
});
</script>
{% endblock %}