@extends('admin.layouts.app')

@section('title', 'Property 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">Property
            Enquiries</a></li>
@endsection
@section('heading', 'Property Enquiries')
@section('subheading', 'Manage enquiries for property listings.')
@section('actions')
    <button type="button"
        class="px-5 py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors">Export</button>
@endsection

@section('content')

    {{-- Stats --}}
    {{-- <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5 mb-8">
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-primary-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                    </svg>
                </div>
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+18%</span>
            </div>
            <p class="text-2xl font-semibold text-gray-900">1,847</p>
            <p class="text-sm text-gray-500 mt-1">Total</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-amber-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+12%</span>
            </div>
            <p class="text-2xl font-semibold text-gray-900">423</p>
            <p class="text-sm text-gray-500 mt-1">Open</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
                    </svg>
                </div>
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+8%</span>
            </div>
            <p class="text-2xl font-semibold text-gray-900">1,324</p>
            <p class="text-sm text-gray-500 mt-1">Responded</p>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 p-5 hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <div class="w-10 h-10 rounded-lg bg-emerald-50 flex items-center justify-center">
                    <svg class="w-5 h-5 text-emerald-500" fill="none" stroke="currentColor" stroke-width="1.5"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+5%</span>
            </div>
            <p class="text-2xl font-semibold text-gray-900">186</p>
            <p class="text-sm text-gray-500 mt-1">Converted</p>
        </div>
    </div> --}}

    {{-- Table --}}
    <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="contacted">Contacted</option>
                    <option value="follow-up">Follow-up</option>
                    <option value="converted">Converted</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">Enquirer
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Property
                        </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">Agent
                            Assigned</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Source
                        </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>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider px-5 py-3">Actions
                        </th>
                    </tr>
                </thead>
                <tbody id="enquiriesTableBody">
                    <tr>
                        <td colspan="8" 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.property.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="8" 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="8" 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',
                    'contacted': 'bg-blue-50 text-blue-600',
                    'follow-up': 'bg-purple-50 text-purple-600',
                    'converted': 'bg-emerald-50 text-emerald-600',
                    'closed': 'bg-gray-100 text-gray-500'
                } [enquiry.status] || 'bg-gray-100 text-gray-500';

                const sourceClass = {
                    'website': 'bg-blue-50 text-blue-600',
                    'app': 'bg-primary-50 text-primary-600',
                    'whatsapp': 'bg-emerald-50 text-emerald-600'
                } [enquiry.source.toLowerCase()] || 'bg-gray-100 text-gray-500';

                const statusLabel = enquiry.status.charAt(0).toUpperCase() + enquiry.status.slice(1).replace('-',
                    ' ');
                const sourceLabel = enquiry.source.charAt(0).toUpperCase() + enquiry.source.slice(1);
                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">
                    <p class="font-medium text-gray-800">${enquiry.name}</p>
                    <p class="text-xs text-gray-400">${enquiry.phone || '—'}</p>
                </td>
                <td class="px-5 py-3.5 text-gray-600">${enquiry.property}</td>
                <td class="px-5 py-3.5 text-gray-600 max-w-[200px]">${messagePreview}</td>
                <td class="px-5 py-3.5 text-gray-600">${enquiry.agent}</td>
                <td class="px-5 py-3.5">
                    <span class="inline-block px-2 py-0.5 text-[11px] font-medium rounded-full ${sourceClass}">${sourceLabel}</span>
                </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">${enquiry.date}</td>
                <td class="px-5 py-3.5">
                    <div class="flex items-center gap-1.5">
                        <button type="button" onclick="viewEnquiry(${enquiry.id})" class="px-2.5 py-1.5 text-xs font-medium text-primary-600 hover:bg-primary-50 rounded-lg transition-colors">View</button>
                        <button type="button" class="px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">Assign</button>
                        <button type="button" onclick="updateStatus(${enquiry.id})" class="px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">Status</button>
                    </div>
                </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');
            const pageButtons = Array.from({
                length: Math.min(meta.last_page, 10)
            }, (_, i) => {
                const page = i + 1;
                return `<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('');

            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>
                ${pageButtons}
                <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>
            `;
        }

        function viewEnquiry(id) {
            alert('View enquiry ' + id + ' - Feature coming soon');
        }

        function updateStatus(id) {
            const status = prompt('Enter new status (new, contacted, follow-up, converted, closed):');
            if (status) {
                fetch(`/admin/enquiries/property/${id}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
                        },
                        body: JSON.stringify({
                            status: status
                        }),
                    })
                    .then(() => loadEnquiries(currentPage))
                    .catch(err => alert('Error updating status'));
            }
        }

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

        loadEnquiries(1);
    </script>

@endsection