@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/vendor/libs/quill/typography.css')) }}" />
    <link rel="stylesheet" href="{{ asset(mix('assets/vendor/libs/quill/katex.css')) }}" />
    <link rel="stylesheet" href="{{ asset(mix('assets/vendor/libs/quill/editor.css')) }}" />
    <style>
        .chat-bubble {
            position: relative;
            border-radius: 16px;
            padding: 8px 12px;
            margin-bottom: 8px;
            overflow: hidden;
            border: 1px solid #ccc;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .sender {
            background-color: #DCF8C6;
            margin-right: 20000px
        }

        .recipient {
            background-color: #E4E4E4;
        }

        .chat-bubble::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background-color: inherit;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-radius: 0 0 0 16px;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            <div class="app-email card">
                <div class="row g-0">

                    <!-- Emails List -->
                    <div class="col app-emails-list" id="listAllMessage">
                        <div class="shadow-none border-0 " data-target="#listAllMessage">
                            <div class="row px-3 pt-3 m-0">
                                <h4 class="fw-bold">{{ $title }}</h4>
                            </div>

                            <hr class="container-m-nx m-0">

                            <div class="emails-list-header p-3 py-lg-3 py-2">
                                <!-- Email List: Search -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex align-items-center w-100">
                                        <i class="ti ti-menu-2 ti-sm cursor-pointer d-block d-lg-none me-3"
                                            data-bs-toggle="sidebar" data-overlay></i>
                                        <div class="mb-0 mb-lg-2 w-100">
                                            <div class="input-group input-group-merge shadow-none">
                                                <span class="input-group-text border-0 ps-0" id="email-search">
                                                    <i class="ti ti-search"></i>
                                                </span>
                                                <input type="text" class="form-control email-search-input border-0"
                                                    placeholder="Search mail" aria-label="Search mail"
                                                    aria-describedby="email-search" id="search-input" />
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <hr class="mx-n3 emails-list-header-hr" />
                            </div>
                            <hr class="container-m-nx m-0" />
                            <!-- Email List: Items -->
                            <div class="email-list pt-0">
                                <ul class="list-unstyled m-0" id="listEmailId">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Emails List -->

                    <!-- Email View -->
                    <div class=" col app-email-view flex-grow-0 bg-body w-100" id="app-email-view">

                        {{-- Nav Email --}}
                        <div class="card shadow-none border-0 rounded-0 app-email-view-header p-3 py-md-3 py-2">
                            <div class="d-flex justify-content-between align-items-center py-2">
                                <div class="d-flex align-items-center overflow-hidden">
                                    <i class="ti ti-chevron-left ti-sm cursor-pointer me-2" data-bs-toggle="sidebar"
                                        data-target="#app-email-view" id="backHome"></i>
                                    <div class="nav-requestor" id="nav-requestor">

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

                        </div>
                        <hr class="m-0" />
                        {{-- End Nav Email --}}


                        {{-- Message --}}
                        <div class="app-email-view-content py-4" style="height: 50%">
                            {{-- Email Sender --}}
                            <div class="chat-bubble-wrapper" id="sender">

                            </div>

                            {{-- Email Recipient --}}
                            <div class="chat-bubble-wrapper" id="recipient">

                            </div>
                        </div>

                        <div class="card mb-3" id="card-editor">
                            <div class="row g-2 p-3">
                                <div class="col-md-1 pt-3">
                                    <button type="button" class="btn btn-primary" id="add_email">
                                        <i class='bx bx-paper-plane '></i>
                                    </button>
                                </div>

                                <div class="col-md-4 mt-3 pt-2">
                                    <select id="connectionid" name="connectionid"
                                        class="mt-2 form-select animation-dropdown select2" data-placeholder="Kirim Sebagai"
                                        disabled>
                                    </select>
                                </div>
                            </div>

                            <div class="row g-2 p-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="collapsible-fullname">Subject</label>
                                    <input type="text" name="subject" id="subject" class="form-control"
                                        placeholder="Subject" />
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="collapsible-fullname">Cc</label>
                                    <input type="text" name="cc" id="cc" class="form-control"
                                        placeholder="Cc" />
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="collapsible-fullname">Bcc</label>
                                    <input type="text" name="bcc" id="bcc" class="form-control"
                                        placeholder="Bcc" />
                                </div>

                                <input type="hidden" name="from" id="from" value="" />
                                <input type="hidden" name="host" id="host" value="" />
                                <input type="hidden" name="port" id="port" value="" />
                                <input type="hidden" name="password" id="password" value="" />
                                <input type="hidden" name="name" id="name" value="" />

                            </div>

                            <div id="editor"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="{{ asset(mix('assets/vendor/libs/quill/quill.js')) }}"></script>
    <script src="{{ asset(mix('assets/vendor/libs/quill/katex.js')) }}"></script>
    <script src="{{ asset(mix('assets/vendor/libs/quill/quill.js')) }}"></script>

    <script>
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],

            [{
                'header': 1
            }, {
                'header': 2
            }],
            [{
                'list': 'ordered'
            }, {
                'list': 'bullet'
            }],
            [{
                'script': 'sub'
            }, {
                'script': 'super'
            }],
            [{
                'indent': '-1'
            }, {
                'indent': '+1'
            }],
            [{
                'direction': 'rtl'
            }],

            [{
                'size': ['small', false, 'large', 'huge']
            }],
            [{
                'header': [1, 2, 3, 4, 5, 6, false]
            }],
            ['link', 'image', 'video', 'formula'],
            [{
                'color': []
            }, {
                'background': []
            }],
            [{
                'font': []
            }],
            [{
                'align': []
            }],

            ['clean']
        ];

        let quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },

            theme: 'snow'
        });
    </script>

    <script>
        $(document).ready(function() {
            var searchInput = $('#search-input');

            searchInput.on('blur', function() {
                $(".spinnerloader").show();

                var searchTerm = searchInput.val().toLowerCase();

                $('#listEmailId li').each(function() {
                    var listItem = $(this);
                    var listItemText = listItem.text().toLowerCase();

                    if (listItemText.includes(searchTerm)) {
                        listItem.show();
                    } else {
                        listItem.hide();
                    }
                });

                $(".spinnerloader").hide();
            });


            list_message();

            $('#app-email-view').hide();

            $(document).on('click', '.message_list', function() {
                $('#app-email-view').addClass('show');
                $('#app-email-view').show();
                $('#sender').empty();
                $('#recipient').empty();
                $('#nav-requestor').empty();

                var emailId = $(this).data('email-id');
                var emailName = $(this).data('email-email');

                $.ajax({
                    url: `{{ url('kotakmasuk/message') }}`,
                    method: "POST",
                    data: {
                        objectid: emailId
                    },
                    cache: false,
                    success: function(response) {
                        var data = JSON.parse(response);

                        data.forEach(function(email) {
                            if (emailId == email.ObjectId) {
                                
                                var navRequestor = ` <input type="hidden" name="to" id="to" value="${emailName}"class="form-control" />
                                <h6 class="text-truncate mb-0 me-2" id="detail-chat-sender-TitleName">
                                        ` + email.From + `</h6>
                                        <span class="badge bg-label-success rounded-pill"
                                        id="detail-chat-sender-TitleSubyek"></span>`

                                var chatSender = `
                                            <div style="margin-right: 20%;">
                                <input type="hidden" name="objectid" id="objectid" value="${email.ObjectId}" class="form-control"/>
                                <div class="chat-bubble sender x-sm-4 mx-3 mt-4">
                                    <div class="chat-bubble-header d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/avatars/avatar.png') }}" alt="user-avatar"
                                                class="flex-shrink-0 rounded-circle me-3" height="40"
                                                width="40" />
                                            <div class="flex-grow-1 ms-1">
                                                <h6 class="m-0" id="detail-chat-sender-NamaPengirim"></h6>
                                                <small class="text-muted" id="detail-chat-sender-Email">${emailName}</small>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <p class="mb-0 me-3 text-muted" id="detail-chat-sender-Date">${email.CreateDateDiff}</p>
                                        </div>
                                    </div>
                                    <div class="chat-bubble-content">
                                        <div class="mt-3 mb-3" id="detail-chat-sender-IsiPesan">${email.Description}</div>
                                    </div>
                                </div> </div>`;

                                var chatRecipient = `
                                            <div style="margin-left: 20%;">
                                <div class="chat-bubble recipient x-sm-4 mx-3 mt-4">
                                    <div class="chat-bubble-header d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('images/avatars/avatar.png') }}" alt="user-avatar"
                                                class="flex-shrink-0 rounded-circle me-3" height="40"
                                                width="40" />
                                            <div class="flex-grow-1 ms-1">
                                                <h6 class="m-0">${email.From}</h6>
                                                <small class="text-muted"></small>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <p class="mb-0 me-3 text-muted">${email.CreateDateDiff}</p>
                                        </div>
                                    </div>
                                    <div class="chat-bubble-content">
                                        <div class="mt-3 mb-3">${email.Description}</div>
                                    </div>
                                </div> </div>`;
                            }

                            if (email.BatchId == 0 || email.BatchId == null || email
                                .BatchId == undefined) {
                                $('#nav-requestor').append(navRequestor);
                                if ($('#recipient').length) {
                                    var inserted = false;
                                    $('#recipient').each(function() {
                                        if (parseInt($(this).attr('data-id')) >
                                            email.Id) {
                                            $(this).after(chatSender);
                                            inserted = true;
                                            return false;
                                        }
                                    });

                                    if (!inserted) {
                                        $('#recipient').append(chatSender);
                                    }
                                } else {
                                    $('#sender').append(chatSender);
                                }
                            } else if (email.BatchId === 1) {
                                $('#recipient').append(chatRecipient);
                            }
                        });
                    },
                    error: function() {}
                });

                $.ajax({
                    url: "{{ url('kotakmasuk/connection') }}",
                    method: "POST",
                    data: {},
                    success: function(data) {
                        let da = JSON.parse(data);
                        let d = da.Data
                        let connectionHtml = '<option value=""></option>';

                        if (d !== null) {
                            for (let i = 0; i < d.length; i++) {
                                connectionHtml += '<option data-from="' + d[i].From +
                                    '" data-host="' + d[i].Host +
                                    '" data-password="' + d[i].Password + '" data-port="' + d[i]
                                    .Port +
                                    '" data-name="' + d[i].Name + '" value="' + d[i].Id + '">' +
                                    d[
                                        i].From +
                                    '</option>';
                            }
                        }

                        $("#connectionid").prop("disabled", false);
                        $("#connectionid").html(connectionHtml);

                    },

                    error: function(xhr, status, error) {
                        // Handle the error if necessary
                        console.error(error);
                    }
                });
            });

            $(document).on('click', '.delete-record', function() {
                if (confirm(
                        'Apakah anda yakin?') ==
                    false
                ) {
                    return false;
                }

                var ticketId = $(this).data('ticket-id');
                var deleteUrl = "{{ url('kotakmasuk/_delete') }}/" + ticketId;

                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                            .attr(
                                'content')
                    },
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(response) {
                        var responseData = JSON.parse(response);
                        if (responseData === "Delete Success") {
                            $(".spinnerloader").hide()
                            Swal.fire({
                                title: "Berhasil",
                                icon: "success",
                                text: "Data Berhasil Di Hapus",
                                showClass: {
                                    popup: 'animate__animated animate__bounceIn'
                                },
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                allowOutsideClick: false,
                                buttonsStyling: false
                            }).then(function() {
                                $('#listEmailId').empty();
                                list_message();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: 'Failed to delete record.',
                                customClass: {
                                    confirmButton: 'btn btn-danger'
                                }
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });

            $(document).on('click', '.mark-read', function() {
                let ticketId = $(this).data('ticket-id');
                let readUrl = "{{ url('kotakmasuk/mark_read') }}/" + ticketId;
                let formData = new FormData();
                let now = new Date();

                let formattedDate = now.getFullYear() + '-' +
                    String(now.getMonth() + 1).padStart(2, '0') + '-' +
                    String(now.getDate()).padStart(2, '0') + ' ' +
                    String(now.getHours()).padStart(2, '0') + ':' +
                    String(now.getMinutes()).padStart(2, '0') + ':' +
                    String(now.getSeconds()).padStart(2, '0');

                formData.append("OpenDate", formattedDate);

                $.ajax({
                    url: readUrl,
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(response) {
                        let responseData = JSON.parse(response);
                        if (responseData.Status === 200) {
                            $(".spinnerloader").hide()
                            Swal.fire({
                                title: "Berhasil",
                                icon: "success",
                                text: "Data Berhasil Di Ubah",
                                showClass: {
                                    popup: 'animate__animated animate__bounceIn'
                                },
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                allowOutsideClick: false,
                                buttonsStyling: false
                            }).then(function() {
                                $('#listEmailId').empty();
                                list_message();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error',
                                text: 'An error occurred while updating the content. Please try again.',
                                icon: 'error',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                buttonsStyling: false
                            });
                        }
                    },
                    error: function() {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                });

            });


            $('#backHome').click(function() {
                $('#app-email-view').hide();
                $('#listAllMessage').show();
            });

            $('#add_email').on('click', function(event) {

                if ($("#subject").val() == "" || $("#from").val() == "" || quill.root.innerHTML ==
                    "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Subject, From dan Description Sudah Terisi!'
                    )
                } else {
                    _add_email();
                }
            });
        });

        function list_message() {
            $.ajax({
                url: `{{ url('kotakmasuk/_ticket') }}`,
                method: "POST",
                data: {},
                cache: false,
                success: function(data) {
                    var data = JSON.parse(data);
                    var d = data.data

                    d.forEach(function(email) {
                        if (email != undefined || email != null) {
                            if (email.OpenDate === undefined || email.OpenDate === null) {

                                
                                var listMessage = `
                                
                                    <li style="background-color:EBF3E8;" class="email-list-item email-list-item-link" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view" >
                                        <div class="d-flex align-items-center">
                                        <img src="{{ asset('images/avatars/avatar.png') }}" alt="user-avatar"
                                                        class="d-block flex-shrink-0 rounded-circle me-sm-3 me-2"
                                                        height="32" width="32" />
                                                    <div class="email-list-item-content message_list" style="width:40%; margin-right:20px;" data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span
                                                            class="h6 email-list-item-username me-2">` + email
                                    .Requestor +
                                    `
                                                        </span>
                                                        <br>
                                                        <span
                                                            class="email-list-item-subject d-xl-inline-block d-block">` +
                                    email.Subject.split(' ').slice(0, 5).join(' ') + (email.Subject
                                        .split(' ').length > 5 ? '...' : '') +
                                    `
                                                        </span>

                                                    </div>

                                                    <div class="email-list-item-content message_list" style="width:20%; margin-right:10px;" data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span>` + email.Email +
                                    `</span>
                                                    </div>

                                                    <div class="email-list-item-content message_list" style="width:20%; margin-left:10px;"  data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span class="badge bg-label-danger rounded-pill"
                                                            id="detail-chat-sender-TitleSubyek">` + email.TypeId.split(
                                        ' ').slice(0, 5).join(' ') + (email.TypeId.split(' ').length >
                                        5 ? '...' : '') + `</span>
                                                    </div>



                                                    <div class="email-list-item-meta ms-auto d-flex align-items-center">
                                                        <span
                                                            class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2"
                                                            data-label="private"></span>
                                                        <small
                                                            class="email-list-item-time text-muted w-100">` + email
                                    .CreateDateDiff +
                                    `</small>
                                                         <ul class="list-inline email-list-item-actions text-nowrap">
                                                            <a href="#" class="text-body mark-read" data-ticket-id="` +
                                    email.Id +
                                    `"><i
                                                                    class="ti ti-mail-opened"></i></a>

                                                                    <a href="#" class="text-body delete-record" data-ticket-id="` +
                                    email.Id + `"><i class="ti ti-trash"></i></a>
                                                            
                                                            
                                                        </ul> 
                                                    </div>
                                                </div>
                                            </li>
                        `
                            } else {
                                var listMessage = `
                                
                                    <li class="email-list-item email-list-item-link" data-starred="true" data-bs-toggle="sidebar" data-target="#app-email-view" >
                                        <div class="d-flex align-items-center">
                                        <img src="{{ asset('images/avatars/avatar.png') }}" alt="user-avatar"
                                                        class="d-block flex-shrink-0 rounded-circle me-sm-3 me-2"
                                                        height="32" width="32" />
                                                    <div class="email-list-item-content message_list" style="width:40%; margin-right:20px;" data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span
                                                            class="h6 email-list-item-username me-2">` + email
                                    .Requestor +
                                    `
                                                        </span>
                                                        <br>
                                                        <span
                                                            class="email-list-item-subject d-xl-inline-block d-block">` +
                                    email.Subject.split(' ').slice(0, 5).join(' ') + (email.Subject
                                        .split(' ').length > 5 ? '...' : '') +
                                    `
                                                        </span>

                                                    </div>

                                                    <div class="email-list-item-content message_list" style="width:20%; margin-right:10px;" data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span>` + email.Email +
                                    `</span>
                                                    </div>

                                                    <div class="email-list-item-content message_list" style="width:20%; margin-left:10px;"  data-email-id="` +
                                    email.Id + `" data-email-email="` + email.Email + `">
                                                        <span class="badge bg-label-danger rounded-pill"
                                                            id="detail-chat-sender-TitleSubyek">` + email.TypeId.split(
                                        ' ').slice(0, 5).join(' ') + (email.TypeId.split(' ').length >
                                        5 ? '...' : '') + `</span>
                                                    </div>



                                                    <div class="email-list-item-meta ms-auto d-flex align-items-center">
                                                        <span
                                                            class="email-list-item-label badge badge-dot bg-danger d-none d-md-inline-block me-2"
                                                            data-label="private"></span>
                                                        <small
                                                            class="email-list-item-time text-muted w-100">` + email
                                    .CreateDateDiff +
                                    `</small>
                                                         <ul class="list-inline email-list-item-actions text-nowrap">
                                                            <a href="#" class="text-body mark-read" data-ticket-id="` +
                                    email.Id +
                                    `"><i
                                                                    class="ti ti-mail-opened"></i></a>

                                                                    <a href="#" class="text-body delete-record" data-ticket-id="` +
                                    email.Id + `"><i class="ti ti-trash"></i></a>
                                                            
                                                            
                                                        </ul> 
                                                    </div>
                                                </div>
                                            </li>
                        `
                            }
                        }
                        $('#listEmailId').append(listMessage);


                    });
                },
                error: function() {}
            });
        }

        $(document).on('change', '#connectionid', function(e) {
            e.preventDefault();

            var from = $("#connectionid option:selected").data('from');
            var host = $("#connectionid option:selected").data('host');
            var password = $("#connectionid option:selected").data('password');
            var port = $("#connectionid option:selected").data('port');
            var name = $("#connectionid option:selected").data('name');

            $('#from').val(from);
            $('#host').val(host);
            $('#password').val(password);
            $('#port').val(port);
            $('#name').val(name);
            $('#email').val(email);

        });

        function _add_email() {
            let form_data = new FormData();
            let token = $("meta[name='csrf-token']").attr("content");

            form_data.append('description', quill.root.innerHTML)
            form_data.append('subject', $('#subject').val())
            form_data.append('cc', $('#cc').val())
            form_data.append('bcc', $('#bcc').val())
            form_data.append('from', $('#from').val())
            form_data.append('host', $('#host').val())
            form_data.append('port', $('#port').val())
            form_data.append('password', $('#password').val())
            form_data.append('name', $('#name').val())
            form_data.append('to', $('#to').val())
            form_data.append('objectid', $('#objectid').val())


            $.ajax({
                url: "{{ url('kotakmasuk/_add_email') }}",
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: form_data,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    var responseData = JSON.parse(data);

                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        });
                        var redirectUrl = "{{ url('kotakmasuk/list') }}";
                        window.location.href = redirectUrl;
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
            });
        }
    </script>
@endsection