@extends('layouts/page')
@section('page-styles')
@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">
                                <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 -->

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

@section('page-scripts')
    <script>
        var searchInput = $('#search-input');
        var listEmailId = $('#listEmailId');

        $(document).on('blur', '#search-input', function() {
            $(".spinnerloader").show();

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

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

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

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

        $(document).ready(function() {
            $(".spinnerloader").show()
            console.log($(".spinnerloader"));
            list_message();

        });

        function list_message() {
            $.ajax({
                url: `{{ url('kotakmasuk/_ticket') }}`,
                method: "POST",
                data: {},
                cache: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(data) {
                    $(".spinnerloader").hide()
                    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() {}
            });
        }
    </script>
@endsection