@extends('admin.layouts.app')

@section('title', 'Inquiries')

@section('content')
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Inquiries</h2>
            <p class="text-gray-500">Manage customer inquiries and leads</p>
        </div>
    </div>

    <!-- Status Tabs -->
    <div class="flex flex-wrap gap-2 mb-6">
        <a href="{{ route('admin.inquiries.index') }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ !request('status') ? 'bg-primary-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            All ({{ $statusCounts['all'] }})
        </a>
        <a href="{{ route('admin.inquiries.index', ['status' => 'new']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ request('status') === 'new' ? 'bg-orange-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            New ({{ $statusCounts['new'] }})
        </a>
        <a href="{{ route('admin.inquiries.index', ['status' => 'contacted']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ request('status') === 'contacted' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Contacted ({{ $statusCounts['contacted'] }})
        </a>
        <a href="{{ route('admin.inquiries.index', ['status' => 'follow_up']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ request('status') === 'follow_up' ? 'bg-purple-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Follow Up ({{ $statusCounts['follow_up'] }})
        </a>
        <a href="{{ route('admin.inquiries.index', ['status' => 'converted']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ request('status') === 'converted' ? 'bg-green-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Converted ({{ $statusCounts['converted'] }})
        </a>
        <a href="{{ route('admin.inquiries.index', ['status' => 'closed']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium {{ request('status') === 'closed' ? 'bg-gray-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Closed ({{ $statusCounts['closed'] }})
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <form action="{{ route('admin.inquiries.index') }}" method="GET" class="flex flex-wrap gap-4">
            @if (request('status'))
                <input type="hidden" name="status" value="{{ request('status') }}">
            @endif
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search by name, email, or phone..." class="form-input w-full">
            </div>
            <select name="inquiry_type" class="form-select">
                <option value="">All Types</option>
                <option value="general" {{ request('inquiry_type') === 'general' ? 'selected' : '' }}>General</option>
                <option value="site_visit" {{ request('inquiry_type') === 'site_visit' ? 'selected' : '' }}>Site Visit
                </option>
                <option value="callback" {{ request('inquiry_type') === 'callback' ? 'selected' : '' }}>Callback</option>
            </select>
            <select name="source" class="form-select">
                <option value="">All Sources</option>
                <option value="property_page" {{ request('source') === 'property_page' ? 'selected' : '' }}>Property Page
                </option>
                <option value="contact_form" {{ request('source') === 'contact_form' ? 'selected' : '' }}>Contact Form
                </option>
                <option value="site_visit_form" {{ request('source') === 'site_visit_form' ? 'selected' : '' }}>Site Visit
                    Form</option>
            </select>
            <button type="submit" class="btn btn-primary">Filter</button>
            @if (request()->hasAny(['search', 'inquiry_type', 'source']))
                <a href="{{ route('admin.inquiries.index', ['status' => request('status')]) }}"
                    class="btn btn-outline">Clear</a>
            @endif
        </form>
    </div>

    <!-- Table -->
    <div class="admin-table">
        <table>
            <thead>
                <tr>
                    <th>Contact</th>
                    <th>Property</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($inquiries as $inquiry)
                    <tr class="{{ $inquiry->status === 'new' ? 'bg-orange-50' : '' }}">
                        <td>
                            <p class="font-medium text-gray-900">{{ $inquiry->name }}</p>
                            <p class="text-sm text-gray-500">{{ $inquiry->phone }}</p>
                            @if ($inquiry->email)
                                <p class="text-xs text-gray-400">{{ $inquiry->email }}</p>
                            @endif
                        </td>
                        <td>
                            @if ($inquiry->property)
                                <a href="{{ route('admin.properties.show', $inquiry->property) }}"
                                    class="text-primary-600 hover:underline text-sm">
                                    {{ Str::limit($inquiry->property->title, 40) }}
                                </a>
                            @else
                                <span class="text-gray-400 text-sm">General Inquiry</span>
                            @endif
                        </td>
                        <td>
                            <span
                                class="text-sm text-gray-600">{{ ucfirst(str_replace('_', ' ', $inquiry->inquiry_type)) }}</span>
                            <p class="text-xs text-gray-400">{{ ucfirst(str_replace('_', ' ', $inquiry->source)) }}</p>
                        </td>
                        <td>
                            <select onchange="updateInquiryStatus({{ $inquiry->id }}, this.value)"
                                class="text-sm border rounded-lg px-2 py-1">
                                <option value="new" {{ $inquiry->status === 'new' ? 'selected' : '' }}>New</option>
                                <option value="viewed" {{ $inquiry->status === 'viewed' ? 'selected' : '' }}>Viewed
                                </option>
                                <option value="contacted" {{ $inquiry->status === 'contacted' ? 'selected' : '' }}>
                                    Contacted</option>
                                <option value="follow_up" {{ $inquiry->status === 'follow_up' ? 'selected' : '' }}>Follow
                                    Up</option>
                                <option value="converted" {{ $inquiry->status === 'converted' ? 'selected' : '' }}>
                                    Converted</option>
                                <option value="closed" {{ $inquiry->status === 'closed' ? 'selected' : '' }}>Closed
                                </option>
                            </select>
                        </td>
                        <td class="text-sm text-gray-500">
                            {{ $inquiry->created_at->format('M d, Y') }}
                            <p class="text-xs">{{ $inquiry->created_at->format('h:i A') }}</p>
                        </td>
                        <td>
                            <div class="flex items-center gap-2">
                                <a href="{{ route('admin.inquiries.show', $inquiry) }}"
                                    class="text-gray-500 hover:text-primary-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </a>
                                <a href="tel:{{ $inquiry->phone }}" class="text-gray-500 hover:text-green-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                    </svg>
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $inquiry->phone) }}" target="_blank"
                                    class="text-gray-500 hover:text-green-600">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24"
                                        fill="currentColor">
                                        <path
                                            d="M17.47,14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94,1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3,0-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37,0-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17,0-.37-.01-.57-.01-.2,0-.52.07-.79.37-.27.3-1.04,1.02-1.04,2.48s1.06,2.88,1.21,3.07c.15.2,2.1,3.2,5.08,4.49.71.31,1.26.49,1.69.63.71.23,1.36.2,1.87.12.57-.09,1.76-.72,2.01-1.41.25-.69.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35z" />
                                    </svg>
                                </a>
                                <form action="{{ route('admin.inquiries.destroy', $inquiry) }}" method="POST"
                                    class="inline" onsubmit="return confirm('Delete this inquiry?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-gray-500 hover:text-red-600">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center py-8 text-gray-500">
                            No inquiries found
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if ($inquiries->hasPages())
        <div class="mt-6">
            {{ $inquiries->links() }}
        </div>
    @endif

    @push('scripts')
        <script>
            function updateInquiryStatus(inquiryId, status) {
                fetch(`/admin/inquiries/${inquiryId}/update-status`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            status: status
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Optionally show a success toast
                        }
                    });
            }
        </script>
    @endpush
@endsection