@extends('admin.templates.layout')

@section('head')
<link rel="stylesheet" href="{{ asset('admin_assets/assets/css/jquery.dataTables.min.css') }}">
<style>
    .filter-bar {
        display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
        padding: 16px 20px; border-bottom: 1px solid #e9edf2; background: #fafbfd;
    }
    .filter-bar .filter-item.search { flex: 1; min-width: 240px; max-width: 340px; margin-left: auto; }
    .filter-bar label {
        font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px;
        display: block;
    }
    .filter-bar .form-control {
        height: 36px; font-size: 13.5px; border-color: #e5e9f0;
    }
    .filter-bar .form-control:focus {
        border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    }

    /* ---- Table ---- */
    #dataTable { table-layout: fixed; width: 100% !important; }
    #dataTable thead th {
        background: #fafbfd; font-size: 11px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .6px;
        padding: 13px 20px; border-bottom: 1px solid #e9edf2; white-space: nowrap;
    }
    #dataTable tbody td {
        padding: 14px 20px; font-size: 13.5px; color: #334155;
        border-bottom: 1px solid #f1f4f9; vertical-align: middle;
        overflow: hidden; text-overflow: ellipsis;
    }
    #dataTable tbody tr:last-child td { border-bottom: none; }
    #dataTable tbody tr:hover { background: #fafbfd; }

    .col-idx     { width: 50px; }
    .col-name    { width: 240px; }
    .col-phone   { width: 160px; }
    .col-subject { width: auto; }
    .col-date    { width: 160px; }
    .col-action  { width: 70px; text-align: right; }

    /* ---- Modal ---- */
    .msg-modal .modal-content { border: 0; border-radius: 14px; overflow: hidden; }
    .msg-modal .modal-header {
        padding: 18px 22px; border-bottom: 1px solid #eef1f6;
        background: #fafbfd;
    }
    .msg-modal .modal-title {
        font-size: 16px; font-weight: 700; color: #0f172a; letter-spacing: -.01em;
    }
    .msg-modal .modal-body { padding: 22px; }

    .msg-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
    .msg-meta .m-item { min-width: 0; }
    .msg-meta .m-label {
        font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
    }
    .msg-meta .m-value {
        font-size: 13.5px; font-weight: 600; color: #0f172a;
        word-break: break-word;
    }

    .msg-body {
        background: #fafbfd; border: 1px solid #eef1f6; border-radius: 10px;
        padding: 16px;
    }
    .msg-body .m-label {
        font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
    }
    .msg-body .m-text {
        font-size: 13.5px; color: #334155; line-height: 1.6;
        white-space: pre-wrap; word-break: break-word;
        max-height: 340px; overflow-y: auto;
    }

    .msg-modal .modal-footer {
        padding: 14px 22px; background: #fafbfd; border-top: 1px solid #eef1f6;
    }
</style>
@endsection

@section('content')
<div class="row"><div class="col-lg-12">
    <div class="card">
        <div class="card-header py-3 border-bottom">
            <h5 class="card-title mb-0">{{ $page_heading }}</h5>
            <p class="text-muted small mb-0">Messages submitted through the mobile app</p>
        </div>

        <div class="filter-bar">
            <div class="filter-item search">
                <label>Search</label>
                <input type="text" id="searchInput" class="form-control form-control-sm"
                       placeholder="Search by name, email or subject...">
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="dataTable">
                    <thead>
                        <tr>
                            <th class="col-idx">#</th>
                            <th class="col-name">Name</th>
                            <th class="col-phone">Phone</th>
                            <th class="col-subject">Subject &amp; Message</th>
                            <th class="col-date">Received</th>
                            <th class="col-action">View</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div></div>

{{-- ============ MESSAGE MODAL ============ --}}
<div class="modal fade msg-modal" id="msgModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Contact Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="msg-meta">
                    <div class="m-item">
                        <div class="m-label">Name</div>
                        <div class="m-value" id="msgName">—</div>
                    </div>
                    <div class="m-item">
                        <div class="m-label">Email</div>
                        <div class="m-value" id="msgEmail">—</div>
                    </div>
                    <div class="m-item">
                        <div class="m-label">Phone</div>
                        <div class="m-value" id="msgPhone">—</div>
                    </div>
                    <div class="m-item">
                        <div class="m-label">Received</div>
                        <div class="m-value" id="msgDate">—</div>
                    </div>
                </div>

                <div class="m-label" style="font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                    Subject
                </div>
                <div class="msg-body mb-3" style="padding: 12px 16px;">
                    <div class="m-text" id="msgSubject" style="font-weight:600;">—</div>
                </div>

                <div class="m-label" style="font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;">
                    Message
                </div>
                <div class="msg-body">
                    <div class="m-text" id="msgMessage">—</div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('admin_assets/assets/js/jquery.dataTables.min.js') }}"></script>
<script>
$(function () {
    var table = $('#dataTable').DataTable({
        processing: true, serverSide: true, searching: false,
        autoWidth: false,
        ajax: {
            url: '{{ route("admin.contact_messages.list") }}',
            data: function (d) {
                d.keyword = $('#searchInput').val();
            }
        },
        columns: [
            { data: 'DT_RowIndex', searchable: false, orderable: false, className: 'col-idx' },
            { data: 'name_col', searchable: false, orderable: false, className: 'col-name' },
            { data: 'phone_col', searchable: false, orderable: false, className: 'col-phone' },
            { data: 'subject_col', searchable: false, orderable: false, className: 'col-subject' },
            { data: 'date_col', searchable: false, orderable: false, className: 'col-date' },
            { data: 'action', searchable: false, orderable: false, className: 'col-action' }
        ],
        order: [[0, 'desc']],
        pageLength: 20,
        language: {
            processing: '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>',
            emptyTable: '<div class="text-center py-4 text-muted">No contact messages yet</div>',
            zeroRecords: '<div class="text-center py-4 text-muted">No matching messages</div>',
            lengthMenu: 'Show _MENU_',
            info: 'Showing _START_ to _END_ of _TOTAL_',
            infoEmpty: 'No entries',
            infoFiltered: '(filtered from _MAX_)',
            paginate: { previous: '‹', next: '›' }
        }
    });

    var t;
    $('#searchInput').on('keyup', function () {
        clearTimeout(t);
        t = setTimeout(function () { table.ajax.reload(); }, 350);
    });

    /* ---------- Open view modal ---------- */
    $(document).on('click', '.view-msg-btn', function () {
        var $btn = $(this);

        $('#msgName').text($btn.data('name'));
        $('#msgEmail').text($btn.data('email'));
        $('#msgPhone').text($btn.data('phone'));
        $('#msgSubject').text($btn.data('subject'));
        $('#msgMessage').text($btn.data('message'));
        $('#msgDate').text($btn.data('date'));

        new bootstrap.Modal(document.getElementById('msgModal')).show();
    });
});
</script>
@endsection