@extends('layouts.app')

@section('content')
    <div class="bg-white shadow rounded p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold">Contact Submissions</h2>
        </div>
<button onclick="exportCleanExcel('contacts-table', 'contact_submissions')" 
    class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 text-sm font-semibold shadow">
    <i class="fas fa-file-excel mr-2"></i> Export Excel
</button>

        <table id="contacts-table" class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-6 py-3 text-left text-sm font-medium">#</th>
                    <th class="px-6 py-3 text-left text-sm font-medium">Name</th>
                    <th class="px-6 py-3 text-left text-sm font-medium">Email</th>
                    <th class="px-6 py-3 text-left text-sm font-medium">Phone</th>
                    <th class="px-6 py-3 text-left text-sm font-medium">Property Name / Visit Page</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($contacts as $contact)
                    <tr>
                        <td class="px-6 py-4">{{ $loop->iteration + ($contacts->currentPage() - 1) * $contacts->perPage() }}</td>
                        <td class="px-6 py-4">{{ $contact->name }}</td>
                        <td class="px-6 py-4">{{ $contact->email }}</td>
                        <td class="px-6 py-4">{{ $contact->number }}</td>
                        <td class="px-6 py-4">
                            @if (!$contact->matched_property)
                                <span class="flex items-center text-yellow-600 font-medium">
                                    <i class="fas fa-phone text-yellow-500 mr-2"></i>
                                    {{ $contact->property_name ?? 'General Inquiry' }}
                                </span>
                            @else
                                <span class="flex items-center text-green-600 font-medium hover:underline">
                                    <i class="fas fa-building text-green-500 mr-2"></i>
                                    {{ $contact->matched_property->property_name }}
                                </span>
                            @endif
                        </td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">No contact submissions found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        <!-- Tailwind Pagination -->
        <div class="mt-6">
            {{ $contacts->links('vendor.pagination.tailwind') }}
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script>
function exportCleanExcel(tableID, filename = '') {
    const table = document.getElementById(tableID);
    const rows = Array.from(table.querySelectorAll('tr'));
    let csv = [];

    rows.forEach(row => {
        let rowData = [];
        row.querySelectorAll('th, td').forEach(cell => {
            // Get only text content, trim spaces
            const text = cell.innerText.trim().replace(/\n/g, ' ');
            rowData.push(`"${text}"`);
        });
        csv.push(rowData.join(','));
    });

    // Convert CSV array to string
    const csvString = csv.join('\n');
    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });

    // Create download link
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute("download", filename + ".csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>

@endsection