@include('admin.header')

<style>
    .ck-editor__editable {
        min-height: 350px;
    }
</style>

<div class="main-wrapper">

    @include('admin.topbar')
    @include('admin.leftbar')

    <div class="page-wrapper">

        <div class="content">

            <!-- Page Header -->
            <div class="d-flex align-items-sm-center flex-sm-row flex-column gap-2 mb-3 pb-3 border-bottom">
                <div class="flex-grow-1">
                    <h4 class="fw-bold mb-0">Compose Email</h4>
                </div>

                <div class="text-end">
                    <button type="button"
                        class="btn btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#previewEmailModal">
                        <i class="ti ti-eye me-1"></i>
                        Preview Emails
                    </button>
                </div>
            </div>

            <form id="compose-email-form">

                <div class="card shadow-sm">

                    <div class="card-header">
                        <h5 class="mb-0">Email Composer</h5>
                    </div>

                    <div class="card-body">

                        <!-- TO EMAILS -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                To Emails
                            </label>

                            <div id="to-email-container">

                                <div class="row mb-2 email-row">

                                    <div class="col-md-10">
                                        <input type="email"
                                            name="to_emails[]"
                                            class="form-control"
                                            placeholder="Enter recipient email">
                                    </div>

                                    <div class="col-md-2">
                                        <button type="button"
                                            id="add-to-email"
                                            class="btn btn-primary w-100">
                                            Add More
                                        </button>
                                    </div>

                                </div>

                            </div>
                        </div>

                        <!-- CC EMAILS -->
                        <div class="mb-4">

                            <label class="form-label fw-semibold">
                                CC Emails
                            </label>

                            <div id="cc-email-container">

                                <div class="row mb-2 cc-row">

                                    <div class="col-md-10">
                                        <input type="email"
                                            name="cc_emails[]"
                                            class="form-control"
                                            placeholder="Enter CC email">
                                    </div>

                                    <div class="col-md-2">
                                        <button type="button"
                                            id="add-cc-email"
                                            class="btn btn-secondary w-100">
                                            Add More
                                        </button>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <!-- SUBJECT -->
                        <div class="mb-4">

                            <label class="form-label fw-semibold">
                                Subject
                            </label>

                            <input type="text"
                                name="subject"
                                class="form-control"
                                placeholder="Enter email subject">

                        </div>

                        <!-- BODY -->
                        <div class="mb-4">

                            <label class="form-label fw-semibold">
                                Email Body
                            </label>

                            <textarea
                                name="body"
                                id="email_body"
                                rows="8"
                                class="form-control"
                                placeholder="Write your email content here..."></textarea>

                        </div>

                        <!-- EXCEL -->
                        <div class="mb-4">

                            <label class="form-label fw-semibold">
                                Import Email List
                            </label>

                            <input type="file"
                                name="import_excel"
                                id="import_excel"
                                class="form-control"
                                accept=".xls,.xlsx,.csv">

                            <small class="text-muted">
                                Supported formats: xls, xlsx, csv
                            </small>

                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-semibold">Attachment</label>
                            <input type="file" name="attachment" id="attachment" class="form-control">
                        </div>

                        <!-- <div class="mb-4">
                            <button type="button"
                                class="btn btn-outline-dark btn-sm"
                                id="downloadSampleEmail">
                                Download Sample Excel
                            </button>
                        </div> -->

                        <!-- ACTIONS -->
                        <div class="d-flex gap-2">

                            <button type="button"
                                class="btn btn-outline-dark btn-sm"
                                id="downloadSampleEmail">
                                Download Sample Excel
                            </button>

                            <button type="button"
                                class="btn btn-outline-info"
                                data-bs-toggle="modal"
                                data-bs-target="#previewEmailModal">
                                Preview Emails
                            </button>

                            <!-- <button type="button"
                                class="btn btn-success">
                                Save Draft
                            </button> -->

                            <button
                                type="button"
                                class="btn btn-primary"
                                id="sendEmailBtn">
                                Send Email
                            </button>

                        </div>

                    </div>

                </div>

            </form>

        </div>

        @include('admin.footer')

    </div>

</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewEmailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">
                    Selected Recipients
                </h5>

                <button type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>
            </div>

            <div class="modal-body">

                <div class="row">

                    <div class="col-md-6">

                        <h6>
                            To Emails
                            <span class="badge bg-primary" id="toCount">0</span>
                        </h6>

                        <div id="preview-to-list"
                            class="border rounded p-2"
                            style="height:300px;overflow:auto;">
                        </div>

                    </div>

                    <div class="col-md-6">

                        <h6>
                            CC Emails
                            <span class="badge bg-secondary" id="ccCount">0</span>
                        </h6>

                        <div id="preview-cc-list"
                            class="border rounded p-2"
                            style="height:300px;overflow:auto;">
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
</div>

@include('admin.scripts')

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
    // ClassicEditor
    //     .create(document.querySelector('#email_body'))
    //     .catch(error => {
    //         console.error(error);
    //     });

    let emailEditor;

    ClassicEditor
        .create(document.querySelector('#email_body'))
        .then(editor => {
            emailEditor = editor;
        })
        .catch(error => {
            console.error(error);
        });
</script>

<script>
    function isValidEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    }


    $(document).ready(function() {

        // Add TO Email

        $(document).on('click', '#add-to-email', function() {

            $('#to-email-container').append(`
            <div class="row mb-2 email-row">

                <div class="col-md-10">
                    <input type="email"
                        name="to_emails[]"
                        class="form-control"
                        placeholder="Enter recipient email">
                </div>

                <div class="col-md-2">
                    <button type="button"
                        class="btn btn-danger remove-email w-100">
                        Remove
                    </button>
                </div>

            </div>
        `);

        });

        // Add CC Email

        $(document).on('click', '#add-cc-email', function() {

            $('#cc-email-container').append(`
            <div class="row mb-2 cc-row">

                <div class="col-md-10">
                    <input type="email"
                        name="cc_emails[]"
                        class="form-control"
                        placeholder="Enter CC email">
                </div>

                <div class="col-md-2">
                    <button type="button"
                        class="btn btn-danger remove-email w-100">
                        Remove
                    </button>
                </div>

            </div>
        `);

        });

        // Remove

        $(document).on('click', '.remove-email', function() {

            $(this).closest('.row').remove();

        });

        // Preview Modal

        $('#previewEmailModal').on('show.bs.modal', function() {

            let toHtml = '';
            let ccHtml = '';

            if ($('#toEmailsTextarea').length) {

                let toEmails = $('#toEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e);

                toEmails.forEach(function(email) {
                    toHtml += '<div>' + email + '</div>';
                });

            } else {

                $('input[name="to_emails[]"]').each(function() {

                    if ($(this).val() !== '') {
                        toHtml += '<div>' + $(this).val() + '</div>';
                    }

                });
            }

            if ($('#ccEmailsTextarea').length) {

                let ccEmails = $('#ccEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e);

                ccEmails.forEach(function(email) {
                    ccHtml += '<div>' + email + '</div>';
                });

            } else {

                $('input[name="cc_emails[]"]').each(function() {

                    if ($(this).val() !== '') {
                        ccHtml += '<div>' + $(this).val() + '</div>';
                    }

                });
            }

            $('#preview-to-list').html(toHtml);
            $('#preview-cc-list').html(ccHtml);

            if ($('#toEmailsTextarea').length) {

                $('#toCount').text(
                    $('#toEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e).length
                );

            } else {

                $('#toCount').text(
                    $('input[name="to_emails[]"]').filter(function() {
                        return $(this).val() != '';
                    }).length
                );
            }

            if ($('#ccEmailsTextarea').length) {

                $('#ccCount').text(
                    $('#ccEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e).length
                );

            } else {

                $('#ccCount').text(
                    $('input[name="cc_emails[]"]').filter(function() {
                        return $(this).val() != '';
                    }).length
                );
            }

        });


        $('#sendEmailBtn').click(function() {

            let toCount = 0;

            if ($('#toEmailsTextarea').length) {

                toCount = $('#toEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e).length;

            } else {

                $('input[name="to_emails[]"]').each(function() {

                    if ($(this).val().trim() != '') {
                        toCount++;
                    }

                });
            }

            if (toCount == 0) {
                toastr.error('Please add at least one To Email');
                return false;
            }

            if ($('input[name="subject"]').val().trim() == '') {
                toastr.error('Please enter subject');
                return false;
            }

            if (emailEditor.getData().trim() == '') {
                toastr.error('Please enter email body');
                return false;
            }

            // toastr.success('Validation Passed');

            let formData = new FormData();

            formData.append(
                'subject',
                $('input[name="subject"]').val()
            );

            formData.append(
                'body',
                emailEditor.getData()
            );

            formData.append('attachment', $('#attachment')[0].files[0]);

            let toEmails = [];
            let invalidEmails = [];

            if ($('#toEmailsTextarea').length) {

                toEmails = $('#toEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e);

                toEmails.forEach(function(email) {
                    if (!isValidEmail(email)) {
                        invalidEmails.push(email);
                    }
                });

            } else {

                $('input[name="to_emails[]"]').each(function() {

                    let email = $(this).val().trim();

                    if (email != '') {

                        if (!isValidEmail(email)) {
                            invalidEmails.push(email);
                        } else {
                            toEmails.push(email);
                        }
                    }
                });
            }

            if (invalidEmails.length > 0) {
                toastr.error("Invalid TO emails: " + invalidEmails.join(', '));
                return false;
            }

            let ccEmails = [];
            let invalidCcEmails = [];

            if ($('#ccEmailsTextarea').length) {

                ccEmails = $('#ccEmailsTextarea')
                    .val()
                    .split(',')
                    .map(e => e.trim())
                    .filter(e => e);

                ccEmails.forEach(function(email) {
                    if (!isValidEmail(email)) {
                        invalidCcEmails.push(email);
                    }
                });

            } else {

                $('input[name="cc_emails[]"]').each(function() {

                    let email = $(this).val().trim();

                    if (email != '') {

                        if (!isValidEmail(email)) {
                            invalidCcEmails.push(email);
                        } else {
                            ccEmails.push(email);
                        }
                    }
                });
            }

            if (invalidCcEmails.length > 0) {
                toastr.error("Invalid CC emails: " + invalidCcEmails.join(', '));
                return false;
            }


            formData.append(
                'to_emails',
                JSON.stringify(toEmails)
            );

            formData.append(
                'cc_emails',
                JSON.stringify(ccEmails)
            );

            toastr.success('Validation Passed');

            $('#sendEmailBtn').prop('disabled', true);

            $.ajax({
                url: _BaseURL + 'send-compose-email',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                success: function(response) {

                    $('#sendEmailBtn').prop('disabled', false);

                    if (response.success == 1) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            location.reload();
                        }, 2000);
                    } else {
                        toastr.error(response.message);
                    }
                },

                error: function() {

                    $('#sendEmailBtn').prop('disabled', false);

                    toastr.error('Something went wrong');
                }
            });
        });

    });
</script>


<script>
    $('#import_excel').change(function() {

        let formData = new FormData();

        let file = $('#import_excel')[0].files[0];

        if (!file) {
            toastr.error('Please select an Excel file');
            return false;
        }

        let allowedExtensions = ['xls', 'xlsx', 'csv'];
        let extension = file.name.split('.').pop().toLowerCase();

        if (!allowedExtensions.includes(extension)) {
            toastr.error('Only Excel files (.xls, .xlsx) are allowed');
            $('#import_excel').val('');
            return false;
        }

        formData.append(
            'import_excel',
            $('#import_excel')[0].files[0]
        );

        $.ajax({
            url: _BaseURL + 'email-import-preview',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {

                if (response.success == 1) {


                    $('#to-email-container').empty();
                    $('#cc-email-container').empty();

                    let toEmails = [];
                    let ccEmails = [];

                    response.emails.forEach(function(item) {

                        if (item.to_email != '') {
                            toEmails.push(item.to_email);

                            $('#to-email-container').append(`
                                <input type="hidden"
                                    name="to_emails[]"
                                    value="${item.to_email}">
                            `);
                        }

                        if (item.cc_email != '') {
                            ccEmails.push(item.cc_email);

                            $('#cc-email-container').append(`
                                <input type="hidden"
                                    name="cc_emails[]"
                                    value="${item.cc_email}">
                            `);
                        }

                    });

                    $('#to-email-container').append(`
                        <textarea
                            id="toEmailsTextarea"
                            class="form-control mt-2"
                            rows="8">${toEmails.join(', ')}</textarea>

                        <small class="text-muted">
                            Total Emails:
                            <span id="toEmailCount">${toEmails.length}</span>
                        </small>
                    `);
                    $('#cc-email-container').append(`
                        <textarea
                            id="ccEmailsTextarea"
                            class="form-control mt-2"
                            rows="5">${ccEmails.join(', ')}</textarea>

                        <small class="text-muted">
                            Total CC Emails:
                            <span id="ccEmailCount">${ccEmails.length}</span>
                        </small>
                    `);

                }
            }
        });

    });

    $(document).on('click', '#downloadSampleEmail', function() {

        window.location.href =
            _BaseURL + 'download-sample-email';

    });


    $(document).on('input', '#toEmailsTextarea', function() {

        let count = $(this)
            .val()
            .split(',')
            .map(e => e.trim())
            .filter(e => e).length;

        $('#toEmailCount').text(count);
    });

    $(document).on('input', '#ccEmailsTextarea', function() {

        let count = $(this)
            .val()
            .split(',')
            .map(e => e.trim())
            .filter(e => e).length;

        $('#ccEmailCount').text(count);
    });
</script>
</body>

</html>