@include('division.layout.header')

<style>
    .rs_left_side td {
        text-align: left;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-auto my-auto">
            <h2 class="main_title">Email Logs</h2>
        </div>
        <div class="col-lg-auto ms-auto">
        </div>
        <div class="col-lg-auto  col-md-auto col-sm-auto">
            {{-- <div class="d-flex align-items-center">
                <div id="reportrange" class="daterange">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span>January 11, 2024 - February 9, 2024</span> <i class="fa fa-caret-down"></i>
                </div>
                <a href="#" class="btn btn-primary ms-2"><i class="fa fa-search"></i></a>
                <a href="#" class="btn btn-danger ms-2"><i class="fa fa-times"></i></a>
            </div> --}}
        </div>
        <div class="col-lg-auto  col-md-auto col-sm-auto mb-2">
            <a href="#" class="btn btn-success" onclick="exportData()"><i class="fa fa-download me-2"></i>Export
            </a>
        </div>
    </div>

    <div class="row mb-3">
    </div>

    <div class="row">
        <div class="col-12">
            <table id="datatable" class="table table-striped data-table-dr" style="width:100%">
                <thead>
                    <tr>
                        <th>Sr No</th>
                        <th>Email Id </th>
                        <th>SMS Type </th>
                        <th>Sent to </th>
                        <th>Message </th>
                        <th>Event Type </th>
                        <th>Status </th>
                        <th>Sent date and time </th>
                    </tr>
                </thead>
                <tbody>
                <tbody>
            </table>
        </div>
    </div>
</div>

</div>
<div class="modal fade" id="email_letter" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header d-flex flex-column align-items-start">
                <h5 class="modal-title fs-4 mb-1" id="exampleModalLabel">Email View</h5>
                <div class="subject-container w-100 d-flex align-items-center">
                    <p class="mb-0 text-muted me-2">Subject:</p>
                    <h6 id="mail_subject" class="fw-bold text-dark mb-0"></h6>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="middle_ct letter_shadow_remove" id="emailContent">
                    {{-- Dynamic email content will be inserted here --}}
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


@include('division.layout.footer')


<script>
    function exportData() {
        $.ajax({
            type: "POST",
            url: "{{ route('communicationLogs.emailLogs.Export') }}",
            data: {
                _token: "{{ csrf_token() }}",
            },
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.message, "info");
                    // Trigger the file download
                    var downloadUrl = '{{ asset('storage/email_logs/email_logs_export/') }}' +
                        '/' + response.filename;
                    window.location.href = downloadUrl; // Redirect to the download URL
                } else {
                    $.notify('Something went wrong !', "error");
                }
            }
        });
    }
    $(document).on('click', '#mailView', function() {
        let recordId = $(this).data('id');

        $.ajax({
            type: "POST",
            url: "{{ route('communicationLogs.emailLogs.getEmailContent') }}",
            data: {
                _token: "{{ csrf_token() }}",
                id: recordId
            },
            success: function(response) {
                if (response.status == 1) {
                    // Load the modal content dynamically
                    $('#mail_subject').text(response.subject); // Example of setting modal content
                    $('#emailContent').html(response.html); // Load the email HTML content

                    // Show the modal
                    $('#email_letter').modal('show');
                } else {
                    $.notify('Error loading email content', 'error');
                }
            }
        });
    });
    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                searchable: false
            },
            {
                data: 'to_email',
                name: 'to_email',
            },
            {
                data: 'mailType',
                name: 'mailType',
            },
            {
                data: 'mailSentTo',
                name: 'mailSentTo',
            },
            {
                data: 'message',
                name: 'message',
                searchable: false
            },
            {
                data: 'mail_status',
                name: 'mail_status'
            },
            {
                data: 'send_status',
                name: 'send_status',
                searchable: false
            },
            {
                data: 'sent_time',
                name: 'sent_time'
                // searchable: false
            }
        ];
        var columnDefs = [
            // {
            //     'targets': 0,
            //     'checkboxes': {
            //         'selectRow': true,
            //     }
            // }
        ];
        getdatatable("{{ route('communicationLogs.emailLogs.paginate') }}", columns, columnDefs);
    });

    function getdatatable(url, columns, columnDefs) {

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            order: [],
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                }
            }
        });
    }
</script>