@extends('backend.layout.main')

@section('title', 'Blog Category Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">User Enquiries</h2>
            </div>
       
        </div>

        <!-- CATEGORY TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="enquiryTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection



<!-- MESSAGE VIEW MODAL -->
<div class="modal fade" id="viewMessageModal" tabindex="-1" aria-labelledby="viewMessageLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">User Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="userMessageContent">Loading...</p>
            </div>

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


@push('scripts')
<script>
let enquiryTable;

$(document).ready(function () {
    fetchEnquiries();

    function fetchEnquiries() {
        $.get("{{ route('advocate.enquiries.fetch') }}", function (res) {

            let rows = '';

            $.each(res.data, function (i, item) {

               console.log('fetched data : ', res.data);

                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.fullname}</td>
                    <td>${item.email ?? '-'}</td>
                    <td>${item.phone ?? '-'}</td>
                    <td>
                        <button class="toggle-status btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Read':'Unread'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm view-msg" data-msg='${item.msg}'>
                            <i class="fa fa-eye text-info"></i>
                        </button>
                        <button class="btn btn-sm delete" data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#enquiryTable')) {
                enquiryTable.destroy();
            }

            $('#enquiryTable tbody').html(rows);

            enquiryTable = $('#enquiryTable').DataTable();
        });
    }

    // DELETE
    $(document).on('click', '.delete', function () {
        if (!confirm('Delete this enquiry?')) return;

        $.ajax({
            url: "{{ route('advocate.enquiries.delete') }}",
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchEnquiries();
            }
        });
    });

    // TOGGLE
    $(document).on('click', '.toggle-status', function () {
        $.ajax({
            url: "{{ route('advocate.enquiries.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchEnquiries();
            }
        });
    });

    $(document).on('click', '.view-msg', function () {
        let message = $(this).data('msg');
        $('#userMessageContent').text(message || 'No message provided');
        let modal = new bootstrap.Modal(document.getElementById('viewMessageModal'));
        modal.show();
    });

});
</script>
@endpush