@extends('admin.layout.content')

@section('content')
    <div class="content-manager-container px-3 py-4">

        {{-- Notifikasi Flash Message Sukses / Gagal --}}
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
                <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div
            class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
            <div>
                <h2 class="content-manager-title h3 mb-1">Pesan Masuk</h2>
                <p class="text-muted mb-0">Kelola pesan dan pertanyaan yang dikirimkan oleh pengguna melalui formulir
                    kontak.</p>
            </div>
            {{-- Statistik ringkas --}}
            <div class="d-flex align-items-center gap-2">
                @php $unreadCount = $messages->where('is_read', false)->count(); @endphp
                @if ($unreadCount > 0)
                    <span
                        style="display:inline-flex; align-items:center; gap:6px; background-color:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-size:0.82rem; padding:6px 14px; border-radius:20px; font-weight:600;">
                        <span class="material-symbols-outlined" style="font-size:16px;">mark_email_unread</span>
                        {{ $unreadCount }} Belum Dibaca
                    </span>
                @else
                    <span
                        style="display:inline-flex; align-items:center; gap:6px; background-color:#f0fdf4; color:#166534; border:1px solid #bbf7d0; font-size:0.82rem; padding:6px 14px; border-radius:20px; font-weight:600;">
                        <span class="material-symbols-outlined" style="font-size:16px;">mark_email_read</span>
                        Semua sudah dibaca
                    </span>
                @endif
            </div>
        </div>

        <div class="content-manager-card">

            <div
                class="content-filter-bar d-flex flex-column flex-sm-row-reverse justify-content-between align-items-stretch align-items-sm-center gap-3">
                <div class="search-box-wrapper">
                    <span class="material-symbols-outlined">search</span>
                    <input type="text" id="search-input" class="form-control search-box-input" placeholder="Cari...">
                </div>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    {{-- Filter Status --}}
                    <div class="dropdown position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="statusDropdown" data-bs-toggle="dropdown" aria-expanded="false"
                            style="min-width: 140px;">
                            <span id="selected-status-value">Semua Status</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="statusDropdown">
                            <li><a class="dropdown-item active" href="#" data-filter-value="all">Semua Status</a></li>
                            <li><a class="dropdown-item" href="#" data-filter-value="unread">Belum Dibaca</a></li>
                            <li><a class="dropdown-item" href="#" data-filter-value="read">Sudah Dibaca</a></li>
                        </ul>
                    </div>

                    <span class="text-muted small text-nowrap">Tampilkan:</span>
                    <div class="dropdown show-entries-wrapper position-relative">
                        <button
                            class="btn dropdown-toggle dropdown-toggle-select d-flex align-items-center justify-content-between"
                            type="button" id="entriesDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <span id="selected-entry-value">10</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-entries" aria-labelledby="entriesDropdown">
                            <li><a class="dropdown-item active" href="#" data-value="10">10</a></li>
                            <li><a class="dropdown-item" href="#" data-value="25">25</a></li>
                            <li><a class="dropdown-item" href="#" data-value="50">50</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="table-responsive">
                <table id="message-table" class="table content-data-table mb-0 align-middle">
                    <thead>
                        <tr>
                            <th style="width: 60px;">No</th>
                            <th>Pengirim</th>
                            <th>Subjek</th>
                            <th>Tanggal</th>
                            <th class="text-center" style="width: 110px;">Status</th>
                            <th class="text-center" style="width: 120px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($messages as $index => $msg)
                            <tr class="message-row {{ $msg->is_read ? 'msg-read' : 'msg-unread' }}"
                                data-status="{{ $msg->is_read ? 'read' : 'unread' }}">
                                <td class="row-index-number" data-origin-index="{{ $index + 1 }}">{{ $index + 1 }}</td>
                                <td>
                                    <span class="content-item-name fw-semibold {{ !$msg->is_read ? 'text-dark' : '' }}">
                                        {{ $msg->full_name }}
                                    </span>
                                    <small class="d-block text-muted" style="font-size:0.75rem;">
                                        {{ $msg->email }}
                                    </small>
                                </td>
                                <td>
                                    <span
                                        class="badge"
                                        style="font-size:0.75rem; padding:4px 10px; border-radius:8px;
                                        @switch($msg->subject)
                                            @case('Pemesanan') background-color:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; @break
                                            @case('Pertanyaan') background-color:#f0fdf4; color:#166534; border:1px solid #bbf7d0; @break
                                            @case('Kritik & Saran') background-color:#fefce8; color:#854d0e; border:1px solid #fde68a; @break
                                            @case('Keluhan') background-color:#fef2f2; color:#991b1b; border:1px solid #fecaca; @break
                                            @default background-color:#f8fafc; color:#475569; border:1px solid #e2e8f0;
                                        @endswitch
                                        ">
                                        {{ $msg->subject }}
                                    </span>
                                </td>
                                <td>
                                    <span style="font-size:0.85rem;">
                                        {{ $msg->created_at->format('d M Y') }}
                                    </span>
                                    <small class="d-block text-muted" style="font-size:0.72rem;">
                                        {{ $msg->created_at->format('H:i') }}
                                    </small>
                                </td>
                                <td class="text-center">
                                    @if ($msg->is_read)
                                        <span
                                            style="display:inline-flex; align-items:center; gap:4px; background-color:#f0fdf4; color:#166534; border:1px solid #bbf7d0; font-size:0.72rem; padding:3px 10px; border-radius:20px; font-weight:600;">
                                            <span class="material-symbols-outlined"
                                                style="font-size:13px;">done_all</span> Dibaca
                                        </span>
                                    @else
                                        <span
                                            style="display:inline-flex; align-items:center; gap:4px; background-color:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-size:0.72rem; padding:3px 10px; border-radius:20px; font-weight:600;">
                                            <span class="material-symbols-outlined"
                                                style="font-size:13px;">mark_email_unread</span> Baru
                                        </span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-1">
                                        {{-- Tombol Detail --}}
                                        <button class="btn-table-action btn-action-view" title="Baca Pesan"
                                            data-bs-toggle="modal" data-bs-target="#modalShow"
                                            data-id="{{ $msg->message_id }}"
                                            data-name="{{ $msg->full_name }}"
                                            data-email="{{ $msg->email }}"
                                            data-subject="{{ $msg->subject }}"
                                            data-message="{{ $msg->message }}"
                                            data-date="{{ $msg->created_at->format('d M Y, H:i') }}"
                                            data-read="{{ $msg->is_read ? '1' : '0' }}"
                                            data-user="{{ $msg->user?->username ?? '-' }}">
                                            <span class="material-symbols-outlined">visibility</span>
                                        </button>
                                        {{-- Tombol Hapus --}}
                                        <button class="btn-table-action btn-action-delete" title="Hapus"
                                            data-bs-toggle="modal" data-bs-target="#modalDelete"
                                            data-id="{{ $msg->message_id }}"
                                            data-name="{{ $msg->full_name }} — {{ $msg->subject }}">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr class="empty-row">
                                <td colspan="6" class="text-center text-muted py-4">Belum ada pesan masuk yang
                                    tersedia.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div
                class="content-pagination-bar d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
                <p class="pagination-summary"></p>
                <nav class="d-flex align-items-center">
                    {{-- Navigasi dinamis --}}
                </nav>
            </div>

        </div>
    </div>

    {{-- ==================== MODAL DETAIL / BACA PESAN (SHOW) ==================== --}}
    <div class="modal fade modal-modern" id="modalShow" tabindex="-1" aria-labelledby="modalShowLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down mx-auto px-2" style="max-width: 560px;">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-flex align-items-center justify-content-between border-0 pb-0 pt-4 px-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="icon-circle-wrapper bg-emerald-light border border-emerald-light flex-shrink-0">
                            <span class="material-symbols-outlined"
                                style="font-size: 22px; color: #10b981;">mail</span>
                        </div>
                        <div>
                            <h5 class="modal-title fw-bold text-slate-800 mb-0" id="modalShowLabel"
                                style="font-size: 1.1rem; line-height: 1.2;">Baca Pesan</h5>
                            <small class="text-muted d-block mt-1" style="font-size: 0.78rem;">Detail lengkap pesan
                                masuk</small>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-flex flex-column gap-3 py-1">

                        {{-- Badge status --}}
                        <div id="show-status-badge"></div>

                        <div class="row g-3">
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">NAMA PENGIRIM</span>
                                    <span id="show-name" class="fw-bold text-slate-800 style-word-break"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">EMAIL</span>
                                    <span id="show-email" class="fw-semibold text-slate-800 style-word-break"
                                        style="font-size:0.9rem;"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">SUBJEK</span>
                                    <span id="show-subject" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">TANGGAL DIKIRIM</span>
                                    <span id="show-date" class="fw-semibold text-slate-800"
                                        style="font-size:0.9rem;"></span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9;">
                                    <span class="d-block text-secondary fw-semibold small mb-1">AKUN TERDAFTAR</span>
                                    <span id="show-user" class="fw-semibold text-slate-800"></span>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="p-3 rounded-3"
                                    style="background-color: #f8fafc; border: 1px solid #f1f5f9; min-height: 100px;">
                                    <span class="d-block text-secondary fw-semibold small mb-2">ISI PESAN</span>
                                    <p id="show-message" class="mb-0 text-slate-700 style-word-break"
                                        style="font-size: 0.95rem; white-space: pre-line; line-height:1.7;"></p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 p-4 d-flex gap-2">
                    {{-- Form Tandai Dibaca --}}
                    <form id="form-mark-read" method="POST" class="flex-grow-1">
                        @csrf
                        @method('PATCH')
                        <button type="submit" id="btn-mark-read"
                            class="btn btn-modern-primary w-100 d-inline-flex align-items-center justify-content-center gap-2">
                            <span class="material-symbols-outlined" style="font-size:18px;">done_all</span>
                            Tandai Sudah Dibaca
                        </button>
                    </form>
                    <button type="button" class="btn btn-modern-secondary px-4"
                        data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ==================== MODAL HAPUS (DELETE) ==================== --}}
    <div class="modal fade modal-modern" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mx-auto px-3" style="max-width: 400px;">
            <div class="modal-content border-0 shadow">
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body text-center p-4 pt-5">
                        <div class="icon-circle-wrapper bg-danger-subtle text-danger mx-auto mb-3 flex-shrink-0"
                            style="width: 56px; height: 56px; background-color: #fef2f2;">
                            <span class="material-symbols-outlined"
                                style="font-size: 28px; color: #ef4444;">delete_forever</span>
                        </div>
                        <h5 class="fw-bold text-slate-800 mb-2" style="font-size: 1.15rem;">Hapus Pesan Ini?</h5>
                        <p class="text-secondary mb-0 small px-1">Tindakan ini tidak dapat dibatalkan. Anda akan
                            menghapus pesan secara permanen dari:</p>
                        <div class="mt-3 p-2 rounded-3 font-monospace fw-bold text-danger bg-light style-word-break"
                            id="delete-name"
                            style="font-size: 1.0rem; background-color: #fff5f5 !important; border: 1px dashed #fca5a5;">
                        </div>
                    </div>
                    <div class="modal-footer bg-white border-0 d-flex gap-2 p-4 pt-0 justify-content-center">
                        <button type="button" class="btn btn-modern-secondary px-4 m-0 w-50"
                            data-bs-dismiss="modal" style="padding: 0.6rem;">Batal</button>
                        <button type="submit" class="btn btn-danger px-4 m-0 w-50"
                            style="background-color: #ef4444; border: none; border-radius: 10px; font-weight: 500; padding: 0.6rem;">Ya,
                            Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- JAVASCRIPT: Logic Utama --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            // ================= LOGIK AUTO-DISMISS ALERT (5 DETIK) =================
            const alerts = document.querySelectorAll('.flash-alert');
            alerts.forEach(function(alertElement) {
                setTimeout(function() {
                    const bsAlert = bootstrap.Alert.getOrCreateInstance(alertElement);
                    if (bsAlert) bsAlert.close();
                }, 5000);
            });

            // ================= LOGIK MODAL SHOW (BACA PESAN) =================
            const modalShow = document.getElementById('modalShow');
            if (modalShow) {
                modalShow.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;

                    document.getElementById('show-name').textContent = btn.getAttribute('data-name');
                    document.getElementById('show-email').textContent = btn.getAttribute('data-email');
                    document.getElementById('show-subject').textContent = btn.getAttribute('data-subject');
                    document.getElementById('show-date').textContent = btn.getAttribute('data-date');
                    document.getElementById('show-message').textContent = btn.getAttribute('data-message');
                    document.getElementById('show-user').textContent = btn.getAttribute('data-user');

                    const isRead = btn.getAttribute('data-read') === '1';
                    const id = btn.getAttribute('data-id');

                    // Set badge status
                    const badgeEl = document.getElementById('show-status-badge');
                    if (isRead) {
                        badgeEl.innerHTML = `<span style="display:inline-flex; align-items:center; gap:5px; background-color:#f0fdf4; color:#166534; border:1px solid #6ee7b7; font-size:0.8rem; padding:5px 14px; border-radius:20px; font-weight:600;">
                            <span class="material-symbols-outlined" style="font-size:15px;">done_all</span> Sudah Dibaca
                        </span>`;
                    } else {
                        badgeEl.innerHTML = `<span style="display:inline-flex; align-items:center; gap:5px; background-color:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-size:0.8rem; padding:5px 14px; border-radius:20px; font-weight:600;">
                            <span class="material-symbols-outlined" style="font-size:15px;">mark_email_unread</span> Belum Dibaca
                        </span>`;
                    }

                    // Set form action untuk mark read & tampilkan/sembunyikan tombol
                    const formMarkRead = document.getElementById('form-mark-read');
                    const btnMarkRead = document.getElementById('btn-mark-read');
                    formMarkRead.action = `/admin/messages/{{ session('admin_route_code') }}/${id}/mark-read`;
                    btnMarkRead.style.display = isRead ? 'none' : '';
                });
            }

            // ================= LOGIK MODAL DELETE =================
            const modalDelete = document.getElementById('modalDelete');
            if (modalDelete) {
                modalDelete.addEventListener('show.bs.modal', function(event) {
                    const btn = event.relatedTarget;
                    const id = btn.getAttribute('data-id');
                    document.getElementById('delete-name').textContent = btn.getAttribute('data-name');
                    document.getElementById('form-delete').action = `/admin/messages/{{ session('admin_route_code') }}/${id}`;
                });
            }

            // ================= FILTER STATUS =================
            const statusItems = document.querySelectorAll('[data-filter-value]');
            const selectedStatusValue = document.getElementById('selected-status-value');
            let currentStatusFilter = 'all';

            statusItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    statusItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    currentStatusFilter = this.getAttribute('data-filter-value');
                    selectedStatusValue.textContent = this.textContent;
                    currentPage = 1;
                    applyFilters();
                });
            });

            // ================= LOGIK FILTER & PAGINATION =================
            const searchInput = document.getElementById('search-input');
            const dropdownItems = document.querySelectorAll('.dropdown-menu-entries .dropdown-item[data-value]');
            const selectedEntryValue = document.getElementById('selected-entry-value');
            const paginationSummary = document.querySelector('.pagination-summary');
            const paginationContainer = document.querySelector('.content-pagination-bar nav');

            let currentLimit = parseInt(selectedEntryValue.textContent) || 10;
            let currentPage = 1;

            function applyFilters() {
                const rows = document.querySelectorAll('.message-row');
                const query = searchInput.value.toLowerCase().trim();

                let matchedRows = [];
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    const status = row.getAttribute('data-status');

                    const matchesSearch = text.includes(query);
                    const matchesStatus = currentStatusFilter === 'all' || status === currentStatusFilter;

                    if (matchesSearch && matchesStatus) {
                        matchedRows.push(row);
                    } else {
                        row.style.display = 'none';
                    }
                });

                const totalMatch = matchedRows.length;
                const totalPages = Math.ceil(totalMatch / currentLimit) || 1;
                if (currentPage > totalPages) currentPage = totalPages;

                const startIdx = (currentPage - 1) * currentLimit;
                const endIdx = startIdx + currentLimit;

                matchedRows.forEach((row, index) => {
                    if (index >= startIdx && index < endIdx) {
                        row.style.display = '';
                        const indexCell = row.querySelector('.row-index-number');
                        if (indexCell) indexCell.textContent = index + 1;
                    } else {
                        row.style.display = 'none';
                    }
                });

                if (paginationSummary) {
                    if (totalMatch === 0) {
                        paginationSummary.textContent = "Menampilkan 0 data";
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = '';
                    } else {
                        const emptyRow = document.querySelector('.empty-row');
                        if (emptyRow) emptyRow.style.display = 'none';
                        const fromPos = startIdx + 1;
                        const toPos = Math.min(endIdx, totalMatch);
                        paginationSummary.textContent =
                            `Menampilkan ${fromPos} sampai ${toPos} dari ${totalMatch} entri`;
                    }
                }

                renderPagination(totalPages);
            }

            function renderPagination(totalPages) {
                if (!paginationContainer) return;
                paginationContainer.innerHTML = '';

                const prevLink = document.createElement('a');
                prevLink.href = '#';
                prevLink.className = `content-page-link ${currentPage === 1 ? 'disabled' : ''}`;
                prevLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_left</span>';
                prevLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage > 1) { currentPage--; applyFilters(); }
                });
                paginationContainer.appendChild(prevLink);

                for (let i = 1; i <= totalPages; i++) {
                    const pageLink = document.createElement('a');
                    pageLink.href = '#';
                    pageLink.className = `content-page-link ${currentPage === i ? 'active' : ''}`;
                    pageLink.textContent = i;
                    pageLink.addEventListener('click', function(e) {
                        e.preventDefault();
                        currentPage = i;
                        applyFilters();
                    });
                    paginationContainer.appendChild(pageLink);
                }

                const nextLink = document.createElement('a');
                nextLink.href = '#';
                nextLink.className = `content-page-link ${currentPage === totalPages ? 'disabled' : ''}`;
                nextLink.innerHTML =
                    '<span class="material-symbols-outlined" style="font-size: 18px;">chevron_right</span>';
                nextLink.addEventListener('click', function(e) {
                    e.preventDefault();
                    if (currentPage < totalPages) { currentPage++; applyFilters(); }
                });
                paginationContainer.appendChild(nextLink);
            }

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    currentPage = 1;
                    applyFilters();
                });
            }

            dropdownItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    dropdownItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    selectedEntryValue.textContent = this.getAttribute('data-value');
                    currentLimit = parseInt(this.getAttribute('data-value'));
                    currentPage = 1;
                    applyFilters();
                });
            });

            applyFilters();
        });
    </script>
@endsection