@extends('admin.template.layout')

@section('css')
    <style>
        #kt_inbox_listing tbody tr {
            cursor: pointer;
        }
    </style>
@endsection

@section('page-title')
@endsection

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-main flex-column flex-row-fluid dashboard " id="detail">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">

                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <!--begin::Content container-->
                        <div id="kt_app_content_container" class="app-container container-fluid">
                            <!--begin::Inbox App - Messages -->
                            <div class="d-flex flex-column flex-lg-row">
                                <!--begin::Sidebar-->
                                <div class="d-none d-lg-flex flex-column flex-lg-row-auto w-100 w-lg-275px"
                                    data-kt-drawer="true" data-kt-drawer-name="inbox-aside"
                                    data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true"
                                    data-kt-drawer-width="225px" data-kt-drawer-direction="start"
                                    data-kt-drawer-toggle="#kt_inbox_aside_toggle">
                                    <!--begin::Sticky aside-->
                                    <div class="card card-flush mb-0" data-kt-sticky="false"
                                        data-kt-sticky-name="inbox-aside-sticky"
                                        data-kt-sticky-offset="{default: false, xl: '100px'}"
                                        data-kt-sticky-width="{lg: '275px'}" data-kt-sticky-left="auto"
                                        data-kt-sticky-top="100px" data-kt-sticky-animation="false"
                                        data-kt-sticky-zindex="95">
                                        <!--begin::Aside content-->
                                        <div class="card-body">
                                            <!--begin::Button-->
                                            <a href="{{ route('inbox.create') }}"
                                                class="btn btn-primary fw-bold w-100 mb-8">Buat Pesan baru</a>
                                            <!--end::Button-->
                                            <!--begin::Menu-->
                                            <div
                                                class="menu menu-column menu-rounded menu-state-bg menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary mb-10">
                                                <!--begin::Menu item-->
                                                <div class="menu-item mb-3">
                                                    <button type="button" class="btn p-0 w-100" id="btn_inbox_all">
                                                        <!--begin::Inbox-->
                                                        <span class="menu-link active">
                                                            <span class="menu-icon">
                                                                <i class="ki-duotone ki-sms fs-2 me-3">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                </i>
                                                            </span>
                                                            <span class="menu-title fw-bold">Kotak Masuk</span>
                                                        </span>
                                                        <!--end::Inbox-->
                                                    </button>
                                                </div>
                                                <!--end::Menu item-->
                                                <!--begin::Menu item-->
                                                <div class="menu-item mb-3">
                                                    <!--begin::Marked-->
                                                    <button type="button" class="btn p-0 w-100" id="btn_inbox_unread">
                                                        <span class="menu-link">
                                                            <span class="menu-icon">
                                                                <i class="ki-duotone ki-message-notif fs-2 me-3">
                                                                    <span class="path1"></span>
                                                                    <span class="path2"></span>
                                                                    <span class="path3"></span>
                                                                    <span class="path4"></span>
                                                                    <span class="path5"></span>
                                                                </i>
                                                            </span>
                                                            <span class="menu-title fw-bold">Belum Dibaca</span>
                                                            <span class="badge badge-light-success">{{ $totalUnreadMessages }}</span>
                                                        </span>
                                                    </button>
                                                    <!--end::Marked-->
                                                </div>
                                                <!--end::Menu item-->
                                            </div>
                                            <!--end::Menu-->
                                        </div>
                                        <!--end::Aside content-->
                                    </div>
                                    <!--end::Sticky aside-->
                                </div>
                                <!--end::Sidebar-->
                                <!--begin::Content-->
                                <div class="flex-lg-row-fluid ms-lg-7 ms-xl-10">
                                    <!--begin::Card-->
                                    <div class="card">
                                        <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                                            <!--begin::Actions-->
                                            <div class="d-flex flex-wrap gap-2">
                                                <!--begin::Checkbox-->
                                                <div
                                                    class="form-check form-check-sm form-check-custom form-check-solid me-4 me-lg-7">
                                                    <input class="form-check-input" type="checkbox" data-kt-check="true"
                                                        data-kt-check-target="#kt_inbox_listing .form-check-input"
                                                        value="1" />
                                                </div>
                                                <!--end::Checkbox-->
                                                <!--begin::Reload-->
                                                <a
                                                    class="btn btn-sm btn-icon btn-light btn-active-light-primary"
                                                    data-bs-toggle="tooltip" data-bs-dismiss="click" id="kt_inbox_reload" data-bs-placement="top"
                                                    title="Muat Ulang">
                                                    <i class="ki-duotone ki-arrows-circle fs-2">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                </a>
                                                <!--end::Reload-->
                                                <!--begin::Delete-->
                                                <a
                                                    class="btn btn-sm btn-icon btn-active-danger btn-light-danger"
                                                    data-bs-toggle="tooltip" data-bs-dismiss="click" id="kt_inbox_delete" data-bs-placement="top"
                                                    title="Hapus">
                                                    <i class="ki-solid ki-trash fs-2">
                                                    </i>
                                                </a>
                                                <!--end::Delete-->
                                            </div>
                                            <!--end::Actions-->
                                            <!--begin::Actions-->
                                            <div class="d-flex align-items-center flex-wrap gap-2">
                                                <!--begin::Search-->
                                                <div class="d-flex align-items-center position-relative">
                                                    <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-4">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                    </i>
                                                    <input type="text" data-kt-inbox-listing-filter="search"
                                                        class="form-control form-control-sm form-control-solid mw-100 min-w-125px min-w-lg-150px min-w-xxl-200px ps-11"
                                                        placeholder="Cari pesan" />
                                                </div>
                                                <!--end::Search-->
                                                <!--begin::Toggle-->
                                                <a href="#"
                                                    class="btn btn-sm btn-icon btn-color-primary btn-light btn-active-light-primary d-lg-none"
                                                    data-bs-toggle="tooltip" data-bs-dismiss="click"
                                                    data-bs-placement="top" title="Toggle inbox menu"
                                                    id="kt_inbox_aside_toggle">
                                                    <i class="ki-duotone ki-burger-menu-2 fs-3 m-0">
                                                        <span class="path1"></span>
                                                        <span class="path2"></span>
                                                        <span class="path3"></span>
                                                        <span class="path4"></span>
                                                        <span class="path5"></span>
                                                        <span class="path6"></span>
                                                        <span class="path7"></span>
                                                        <span class="path8"></span>
                                                        <span class="path9"></span>
                                                        <span class="path10"></span>
                                                    </i>
                                                </a>
                                                <!--end::Toggle-->
                                            </div>
                                            <!--end::Actions-->
                                        </div>
                                        <div class="card-body">
                                            <!--begin::Table-->
                                            <table class="table table-hover table-row-dashed fs-6 gy-2 my-0"
                                                id="kt_inbox_listing">
                                                <thead class="fw-bold fs-6 text-gray-800 border-bottom border-gray-200">
                                                    <tr>
                                                        <th class="ps-9 w-50px"></th>
                                                        <th class="min-w-150px">SISWA</th>
                                                        <th>NIS</th>
                                                        <th class="pe-2">Belum dibaca</th>
                                                        <th class="pe-2">Pesan terbaru</th>
                                                    </tr>
                                                </thead>
                                            </table>

                                            <!--end::Table-->
                                        </div>
                                    </div>
                                    <!--end::Card-->
                                </div>
                                <!--end::Content-->
                            </div>
                            <!--end::Inbox App - Messages -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
            <i class="ki-duotone ki-arrow-up">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
        </div>
    </div>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>

    <script>
        function initSelect2(route, selectElement, params = null) {
            var id = null
            if (params != null) {
                id = params
            }
            $(selectElement).select2({
                ajax: {
                    url: route,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term,
                            id: id
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.results
                        };
                    },
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    allowClear: true
                }
            });
        }
        $(document).ready(function() {
            var table = $('#kt_inbox_listing').DataTable({
                ajax: "{{ route('inbox.data') }}",
                columns: [{
                        data: 'id',
                        className: 'ps-3',
                        render: function(data) {
                            return `
                        <div class="form-check form-check-sm form-check-custom mt-3">
                            <input class="form-check-input inbox-checkbox" type="checkbox" value="${data}" />
                        </div>`;
                        },
                        orderable: false
                    },
                    {
                        data: 'name',
                        render: function(data, type, row) {
                            const avatar = row.avatar ?
                                `<div class="symbol symbol-35px me-3">
                                <span class="symbol-label" style="background-image:url(${row.avatar})"></span>
                           </div>` :
                                `<div class="symbol symbol-35px me-3">
                                <div class="symbol-label bg-light-warning">
                                    <span class="text-warning">${data.charAt(0)}</span>
                                </div>
                           </div>`;
                            const nameStyle = row.is_read ? '' : 'fw-bold';

                            return `<a href="${row.link}" class="main-link d-flex align-items-center text-gray-900 ${nameStyle}">
                                ${avatar}
                                <span class="${nameStyle}">${data}</span>
                            </a>`;
                        }
                    },
                    {
                        data: 'nis',
                        render: function(data, type, row) {
                            const titleStyle = row.is_read ? '' : 'fw-bold';
                            const badge = row.is_read ? '' :
                                `<div class="badge badge-light-primary">new</div>`;

                            return `
                            <div class="text-gray-900 gap-1 pt-2">
                                <a href="${row.link}" class="main-link text-gray-900 ${titleStyle}">
                                    <span class="${titleStyle}">${data}</span>
                                </a>
                                ${badge}
                            </div>
                        `;
                        }
                    },

                    {
                        data: 'unread_message',
                        className: 'text-center pe-2 pt-4',
                        render: function(data) {
                            if (data) {
                                return `<span class="badge badge-light-primary">${data} pesan</span>`;
                            } else {
                                return `<span class="badge badge-secondary">Sudah dibaca</span>`;
                            }
                        }
                    },
                    {
                        data: 'newest_message',
                        className: 'text-center pe-2 pt-4',
                    }

                ],
                rowCallback: function(row, data) {
                    // Remove old bg classes
                    $(row).removeClass(
                        'bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900 text-white'
                    );

                    // Apply bg class based on `is_read`
                    if (data.is_read) {} else {
                        $(row).addClass('bg-light-success'); // Lighter for unread
                    }
                }
            });
            setInterval(function() {
                table.ajax.reload(null, false);
            }, 10000000000000);

            $("#btn_inbox_unread, #btn_inbox_all").click(function() {
                // Remove 'active' from all .menu-link
                $(".menu-link").removeClass("active");

                // Add 'active' to the clicked button's .menu-link
                $(this).find(".menu-link").addClass("active");
            });

            let currentInboxState = 'all'; // default state

            // Handle 'All' button click
            $("#btn_inbox_all").click(function () {
                currentInboxState = 'all';
                $(".menu-link").removeClass("active");
                $(this).find(".menu-link").addClass("active");
                table.ajax.url("{{ route('inbox.data') }}").load();
            });

            // Handle 'Unread' button click
            $("#btn_inbox_unread").click(function () {
                currentInboxState = 'unread';
                $(".menu-link").removeClass("active");
                $(this).find(".menu-link").addClass("active");
                table.ajax.url("{{ route('inbox.data') }}?unread=true").load();
            });

            // Handle 'Reload' button click
            $("#kt_inbox_reload").click(function () {
                if (currentInboxState === 'unread') {
                    table.ajax.url("{{ route('inbox.data') }}?unread=true").load();
                } else {
                    table.ajax.url("{{ route('inbox.data') }}").load();
                }
            });

            $('#kt_inbox_delete').click(function () {
                // Get all checked checkboxes
                let selectedIds = [];
                $('.inbox-checkbox:checked').each(function () {
                    selectedIds.push($(this).val());
                });

                if (selectedIds.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak ada data yang dipilih',
                        text: 'Silakan pilih data yang ingin dihapus.'
                    });
                    return;
                }

                // Confirm before deletion
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data yang dihapus tidak dapat dikembalikan.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('inbox.bulkDelete') }}", // Make this route in your Laravel controller
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                ids: selectedIds
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: response.message || 'Data berhasil dihapus'
                                });
                                table.ajax.reload(); // Reload DataTable
                            },
                            error: function (xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data.'
                                });
                            }
                        });
                    }
                });
            });


            // Make row clickable, skip checkbox
            $('#kt_inbox_listing tbody').on('click', 'tr', function(e) {
                if ($(e.target).is('input[type="checkbox"]')) return;
                const link = $(this).find('a.main-link').attr('href');
                if (link) window.location.href = link;
            });
            $(".filter").on('change', function() {
                var penilaianPemantapan = $("#filter_penilaian_pemantapan").val();
                var angkatan = $("#filter_angkatan").val();
                var kelas = $("#filter_kelas").val();

                // Update the DataTable with the selected filters
                table.ajax.url(
                    `{{ route('penilaian-pemantapan.data') }}?penilaian_pemantapan=${penilaianPemantapan}&angkatan=${angkatan}&kelas=${kelas}`
                ).load();
            });

        });
    </script>
@endsection