@extends('admin.layouts.base')

@section('title', 'Contact Inquiries')

@section('content')
<div id="kt_app_content_container" class="app-container">
    <div class="card">
        <div class="card-header border-0 pt-6 d-flex align-items-center justify-content-between">
            <div class="card-title">
                <h3 class="fw-bold">Contact Inquiries Management</h3>
            </div>
            <div>
                <button type="button" class="btn btn-danger btn-sm" id="bulkDeleteBtn" disabled>
                    <i class="ki-duotone ki-trash fs-2"></i> Delete Selected
                </button>
            </div>
        </div>

        <div class="card-body py-4">
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="inquiries_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th class="text-center min-w-50px">
                            <div class="form-check form-check-sm form-check-custom form-check-solid justify-content-center">
                                <input type="checkbox" id="selectAll" class="form-check-input" />
                            </div>
                        </th>
                        <th class="min-w-150px">Name</th>
                        <th class="min-w-150px">Company</th>
                        <th class="min-w-200px">Email</th>
                        <th class="min-w-120px">Phone</th>
                        <th class="min-w-120px">Preferred Date</th>
                        <th class="min-w-200px">Message</th>
                        <th class="min-w-150px">Submitted At</th>
                        <th class="text-center min-w-100px">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- View Inquiry Modal -->
<div class="modal fade" id="inquiryModal" tabindex="-1" aria-labelledby="inquiryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="inquiryModalLabel">Contact Inquiry Details #<span id="modalId"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-4">
                    <div class="col-6"><strong>Name:</strong></div>
                    <div class="col-6" id="modalName"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-6"><strong>Company:</strong></div>
                    <div class="col-6" id="modalCompany"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-6"><strong>Email:</strong></div>
                    <div class="col-6" id="modalEmail"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-6"><strong>Phone:</strong></div>
                    <div class="col-6" id="modalPhone"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-6"><strong>Preferred Date:</strong></div>
                    <div class="col-6" id="modalDate"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-6"><strong>Submitted At:</strong></div>
                    <div class="col-6" id="modalSubmitted"></div>
                </div>
                <div class="row mb-4">
                    <div class="col-12"><strong>Message:</strong></div>
                    <div class="col-12">
                        <div class="border p-4 bg-light" id="modalMessage" style="white-space: pre-wrap;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .table th,
    .table td {
        vertical-align: middle;
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        const table = $('#inquiries_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route("admin.contact-inquiries.data") }}',
            columns: [{
                    data: 'checkbox',
                    className: 'text-center',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return `<div class="form-check form-check-sm form-check-custom form-check-solid justify-content-center">
                                <input type="checkbox" class="form-check-input inquiry-checkbox" value="${row.id}" />
                            </div>`;
                    }
                },
                {
                    data: 'name'
                },
                {
                    data: 'company'
                },
                {
                    data: 'email'
                },
                {
                    data: 'phone'
                },
                {
                    data: 'preferred_date'
                },
                {
                    data: 'message'
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'actions',
                    orderable: false,
                    searchable: false,
                    className: 'text-center'
                }
            ],
            order: [
                [7, 'desc']
            ],
            pageLength: 25,
            language: {
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>'
            }
        });

        // Select All checkbox
        $('#selectAll').on('click', function() {
            $('.inquiry-checkbox').prop('checked', this.checked);
            toggleBulkDeleteButton();
        });

        // Toggle bulk delete button
        $(document).on('change', '.inquiry-checkbox', function() {
            toggleBulkDeleteButton();
        });

        function toggleBulkDeleteButton() {
            const checked = $('.inquiry-checkbox:checked').length;
            $('#bulkDeleteBtn').prop('disabled', checked === 0);
        }

        // Bulk Delete
        $('#bulkDeleteBtn').on('click', function() {
            const ids = $('.inquiry-checkbox:checked')
                .map(function() {
                    return Number($(this).val());
                })
                .get();

            if (ids.length === 0) return;

            Swal.fire({
                title: 'Are you sure?',
                text: `You are about to delete ${ids.length} inquiry(s). This action cannot be undone!`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete them!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route("admin.contact-inquiries.bulk-delete") }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            ids: ids
                        },
                        success: function(response) {
                            Swal.fire('Deleted!', response.message, 'success');
                            table.ajax.reload();
                            $('#selectAll').prop('checked', false);
                            toggleBulkDeleteButton();
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', xhr.responseJSON?.message || 'Something went wrong.', 'error');
                        }
                    });
                }
            });
        });

        // Create modal instance ONCE
        const inquiryModalEl = document.getElementById('inquiryModal');
        const inquiryModal = new bootstrap.Modal(inquiryModalEl);

        // View inquiry - populate and show modal
        $(document).on('click', '.view-inquiry', function() {
            const btn = $(this);

            $('#modalId').text(btn.data('id'));
            $('#modalName').text(btn.data('name'));
            $('#modalCompany').text(btn.data('company'));
            $('#modalEmail').text(btn.data('email'));
            $('#modalPhone').text(btn.data('phone'));
            $('#modalDate').text(btn.data('date'));
            $('#modalSubmitted').text(btn.data('submitted'));
            $('#modalMessage').html(btn.data('message')); // Already has <br> from nl2br

            inquiryModal.show();
        });
    });
</script>
@endpush