<div class="page-header">
    <h3 class="page-title">Send Emails To Projects</h3>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Send Emails To Projects</li>
        </ol>
    </nav>
</div>
<div class="row">
    <div class="col-lg-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <form action="" method="post" id="myForm">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>
                                    <div
                                        class="form-check form-check-custom form-check-flat form-check-primary m-0 min-h-unset">
                                        <label class="form-check-label p-0 m-0 ln-14" for="checkAllRecipients">
                                            <input type="checkbox" class="form-check-input" id="checkAllRecipients">
                                            <i class="input-helper"></i>
                                        </label>
                                    </div>
                                </th>
                                <th style="width:100px;">Project Name</th>
                                <th style="width:100px;">Primary Person</th>
                                <th style="width:100px;">Secondary Person (In CC)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% if (data.length===0) { %>
                                <tr>
                                    <td colspan="8" class="text-center">No record found.</td>
                                </tr>
                                <% } else { %>
                                    <% data.forEach(function(record, index) { %>
                                        <tr>
                                            <td style="width: 50px;">
                                                <div class="d-flex align-items-center">
                                                    <div class="form-check form-check-custom form-check-flat form-check-primary m-0"
                                                        style="top: 4px;">
                                                        <label class="form-check-label" for="rec<%=record._id%>">
                                                            <input type="checkbox"
                                                                class="form-check-input recordCheckbox"
                                                                name="selectedProjects" id="rec<%=record._id%>"
                                                                value="<%=record._id%>">
                                                            <i class="input-helper"></i>
                                                        </label>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-capitalize">
                                                <%= record.name || '-' %>
                                            </td>
                                            <td>
                                                <select class="multi-select sm" name="primary_<%= record._id %>"
                                                    multiple="multiple" style="width: 100%;">
                                                    <%-getOptions(recipients, true, record.primaryPerson, 'name' )%>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="multi-select sm" name="cc_<%= record._id %>"
                                                    multiple="multiple" style="width: 100%;">
                                                    <%-getOptions(recipients, true, record.secondaryPerson, 'name' )%>
                                                </select>
                                            </td>
                                        </tr>
                                        <% }); %>
                                            <% } %>
                        </tbody>
                    </table>
                    <button class="btn btn-primary mt-4">Next</button>
                </form>
            </div>
        </div>
    </div>
</div>
<a class="btn btn-primary d-none" data-bs-toggle="modal" href="#emailSettingsModal" id="openModalTrigger"
    role="button">Open first modal</a>

<div class="modal fade" id="emailSettingsModal" aria-hidden="true" aria-labelledby="emailSettingsModalLabel"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-white">
            <div class="modal-header">
                <h5 class="modal-title" id="emailSettingsModalLabel">Email settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" id="emailForm" method="post">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="email-template">Email template</label>
                                <select class="form-select rounded-0" name="email-template" style="width: 100%;">
                                    <%-dropdowns?.templates%>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="defaultCC">Default in CC</label>
                                <select id="defaultCC" class="multi-select" name="defaultCC" multiple="multiple"
                                    style="width: 100%;">
                                    <%-dropdowns?.defaultCC%>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="form-check form-check-flat form-check-primary m-0 min-h-unset">
                                    <label class="form-check-label cp d-inline" for="includeSignature">
                                        <input type="checkbox" class="form-check-input cp" id="includeSignature" value="true"
                                            name="includeSignature" checked>
                                        <i class="input-helper"></i> Include Signature
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 text-center">
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Send emails</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // JS to handle select-all functionality
    document.getElementById('checkAllRecipients').addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('.recordCheckbox');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });

    // Optional: if all individual boxes are checked manually, check "select all"
    const recordCheckboxes = document.querySelectorAll('.recordCheckbox');
    recordCheckboxes.forEach(cb => {
        cb.addEventListener('change', function () {
            const allChecked = Array.from(recordCheckboxes).every(ch => ch.checked);
            document.getElementById('checkAllRecipients').checked = allChecked;
        });
    });

    $(document).ready(function () {
        $("#myForm").validate({
            submitHandler: function (form) {
                const formData = $(form).serializeArray();
                const selectedProjects = formData.filter(field => field.name.startsWith('selectedProjects'));
                if (selectedProjects.length === 0) {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        text: 'Please select at least one project to continue.',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true
                    });
                    return false;
                }
                let data = {
                    projects: [],
                };
                selectedProjects.forEach(project => {
                    const primaryOptions = formData.filter(field => field.name.startsWith(`primary_${project.value}`));
                    const ccOptions = formData.filter(field => field.name.startsWith(`cc_${project.value}`));
                    let record = {
                        projectId: project.value,
                        primary: primaryOptions.map(field => field.value),
                        cc: ccOptions.map(field => field.value),
                    };
                    data.projects.push(record);
                });
                window.projectEmailData = data;
                document.getElementById('openModalTrigger').click();
            }

        });

        $("#emailForm").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 100
                },
            },
            submitHandler: function (form) {
                const formArray = $(form).serializeArray();
                const formObject = Object.fromEntries(new FormData(form));
                const defaultCC = formArray.filter(field => field.name.startsWith(`defaultCC`)).map(field => field.value);

                const formData = new FormData();
                formData.append('projects', JSON.stringify(window.projectEmailData.projects));
                formData.append('defaultCC', JSON.stringify(defaultCC));
                formData.append('emailTemplate', formObject['email-template']);
                formData.append('includeSignature', $('#includeSignature').is(':checked'));

                $.ajax({
                    url: `/manage-emails/send-to-projects`,
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        // alert("Emails sent successfully!");
                        window.location.href = '/logs';
                    },
                    error: function (xhr) {
                        // Show error message
                        $('#result').html('<p style="color:red;">Error: ' + xhr.responseText + '</p>');
                    }
                });
            }
        });
    });
</script>