@extends('admin.layouts.app')

@section('title', 'Contact Enquiries')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="{{ route('admin.enquiries.property') }}" class="hover:text-primary-600 transition-colors">Enquiries</a></li>
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="{{ route('admin.enquiries.contact') }}" class="hover:text-primary-600 transition-colors">Contact</a></li>
@endsection
@section('heading', 'Contact Enquiries')
@section('subheading', 'General contact form submissions from the website.')

@section('content')

<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
    <div class="p-5 border-b border-gray-100 flex items-center justify-between">
        <div class="flex items-center gap-3">
            <input type="text" id="searchInput" placeholder="Search enquiries..." class="px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
            <select id="statusFilter" class="px-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
                <option value="all">All Status</option>
                <option value="new">New</option>
                <option value="read">Read</option>
                <option value="replied">Replied</option>
                <option value="closed">Closed</option>
            </select>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Name</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Email</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Phone</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Subject</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Message</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Status</th>
                    <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Date</th>
                </tr>
            </thead>
            <tbody id="enquiriesTableBody">
                <tr>
                    <td colspan="7" class="px-5 py-10 text-center text-gray-500">Loading...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="border-t border-gray-100 px-5 py-3 flex items-center justify-between">
        <p class="text-sm text-gray-500" id="paginationInfo">Loading...</p>
        <div class="flex items-center gap-2" id="paginationControls"></div>
    </div>
</div>

<script>
let currentPage = 1;
let searchTimeout;

async function loadEnquiries(page = 1) {
    const status = document.getElementById('statusFilter').value;
    const search = document.getElementById('searchInput').value;
    const params = new URLSearchParams({
        page: page,
        per_page: 15,
        status: status,
    });
    if (search) params.set('search', search);

    try {
        const response = await fetch(`{{ route('admin.enquiries.contact.api') }}?${params}`, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        });
        const data = await response.json();
        
        renderEnquiries(data.data);
        renderPagination(data.meta);
        currentPage = page;
    } catch (error) {
        console.error('Error loading enquiries:', error);
        document.getElementById('enquiriesTableBody').innerHTML = 
            '<tr><td colspan="7" class="px-5 py-10 text-center text-red-500">Error loading enquiries</td></tr>';
    }
}

function renderEnquiries(enquiries) {
    const tbody = document.getElementById('enquiriesTableBody');
    if (enquiries.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="px-5 py-10 text-center text-gray-500">No enquiries found</td></tr>';
        return;
    }

    tbody.innerHTML = enquiries.map(enquiry => {
        const statusClass = {
            'new': 'bg-amber-50 text-amber-600',
            'read': 'bg-blue-50 text-blue-600',
            'replied': 'bg-emerald-50 text-emerald-600',
            'closed': 'bg-gray-100 text-gray-500'
        }[enquiry.status] || 'bg-gray-100 text-gray-500';
        
        const statusLabel = enquiry.status.charAt(0).toUpperCase() + enquiry.status.slice(1);
        const date = new Date(enquiry.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
        const messagePreview = enquiry.message.length > 50 ? enquiry.message.substring(0, 50) + '...' : enquiry.message;
        
        return `
            <tr class="hover:bg-gray-50/50 transition-colors">
                <td class="px-5 py-3.5 font-medium text-gray-800">${enquiry.name}</td>
                <td class="px-5 py-3.5 text-gray-600">${enquiry.email}</td>
                <td class="px-5 py-3.5 text-gray-600">${enquiry.phone || '—'}</td>
                <td class="px-5 py-3.5 text-gray-600">${enquiry.subject || '—'}</td>
                <td class="px-5 py-3.5 text-gray-600 max-w-[220px]">${messagePreview}</td>
                <td class="px-5 py-3.5">
                    <span class="inline-block px-2 py-0.5 text-[11px] font-medium rounded-full ${statusClass}">${statusLabel}</span>
                </td>
                <td class="px-5 py-3.5 text-gray-500">${date}</td>
            </tr>
        `;
    }).join('');
}

function renderPagination(meta) {
    document.getElementById('paginationInfo').textContent = 
        `Showing ${((meta.current_page - 1) * meta.per_page) + 1} to ${Math.min(meta.current_page * meta.per_page, meta.total)} of ${meta.total} results`;
    
    const controls = document.getElementById('paginationControls');
    controls.innerHTML = `
        <button onclick="loadEnquiries(${meta.current_page - 1})" 
                ${meta.current_page === 1 ? 'disabled' : ''} 
                class="px-3 py-1.5 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
            Previous
        </button>
        ${Array.from({ length: meta.last_page }, (_, i) => i + 1).map(page => `
            <button onclick="loadEnquiries(${page})" 
                    class="px-3 py-1.5 ${page === meta.current_page ? 'bg-primary-500 text-white' : 'border border-gray-200 text-gray-600 hover:bg-gray-50'} text-sm rounded-lg">
                ${page}
            </button>
        `).join('')}
        <button onclick="loadEnquiries(${meta.current_page + 1})" 
                ${meta.current_page === meta.last_page ? 'disabled' : ''} 
                class="px-3 py-1.5 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
            Next
        </button>
    `;
}

document.getElementById('statusFilter').addEventListener('change', () => loadEnquiries(1));
document.getElementById('searchInput').addEventListener('input', (e) => {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => loadEnquiries(1), 500);
});

loadEnquiries(1);
</script>

@endsection