@extends('admin.layouts.app')

@section('title', 'CRM - Leads Management')

@section('content')
    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">CRM - Leads</h2>
            <p class="text-gray-500">Manage and track all your leads</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.crm.dashboard') }}" class="btn btn-secondary">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                Dashboard
            </a>
            <a href="{{ route('admin.crm.leads.export', request()->query()) }}" class="btn btn-secondary">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                Export
            </a>
            <a href="{{ route('admin.crm.leads.create') }}" class="btn btn-primary">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                Add Lead
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div class="text-3xl font-bold text-gray-900">{{ $stats['total'] }}</div>
            <div class="text-sm text-gray-500">Total Leads</div>
        </div>
        <div class="bg-orange-50 rounded-xl p-4 border border-orange-100">
            <div class="text-3xl font-bold text-orange-600">{{ $stats['new'] }}</div>
            <div class="text-sm text-orange-600">New Leads</div>
        </div>
        <div class="bg-red-50 rounded-xl p-4 border border-red-100">
            <div class="text-3xl font-bold text-red-600">{{ $stats['hot'] }}</div>
            <div class="text-sm text-red-600">Hot Leads 🔥</div>
        </div>
        <div class="bg-purple-50 rounded-xl p-4 border border-purple-100">
            <div class="text-3xl font-bold text-purple-600">{{ $stats['follow_ups_today'] }}</div>
            <div class="text-sm text-purple-600">Today's Follow-ups</div>
        </div>
        <div class="bg-amber-50 rounded-xl p-4 border border-amber-100">
            <div class="text-3xl font-bold text-amber-600">{{ $stats['pending_follow_ups'] }}</div>
            <div class="text-sm text-amber-600">Pending Follow-ups</div>
        </div>
        <div class="bg-green-50 rounded-xl p-4 border border-green-100">
            <div class="text-3xl font-bold text-green-600">{{ $stats['converted_this_month'] }}</div>
            <div class="text-sm text-green-600">Converted (Month)</div>
        </div>
    </div>

    <!-- Quick Filters -->
    <div class="flex flex-wrap gap-2 mb-6">
        <a href="{{ route('admin.crm.leads.index') }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ !request()->hasAny(['status', 'priority']) ? 'bg-primary-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            All Leads
        </a>
        <a href="{{ route('admin.crm.leads.index', ['status' => 'new']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('status') === 'new' ? 'bg-orange-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            New
        </a>
        <a href="{{ route('admin.crm.leads.index', ['priority' => 'hot']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('priority') === 'hot' ? 'bg-red-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            🔥 Hot
        </a>
        <a href="{{ route('admin.crm.leads.index', ['status' => 'qualified']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('status') === 'qualified' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Qualified
        </a>
        <a href="{{ route('admin.crm.leads.index', ['status' => 'site_visit_scheduled']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('status') === 'site_visit_scheduled' ? 'bg-cyan-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Site Visits
        </a>
        <a href="{{ route('admin.crm.leads.index', ['status' => 'negotiation']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('status') === 'negotiation' ? 'bg-purple-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Negotiation
        </a>
        <a href="{{ route('admin.crm.leads.index', ['status' => 'converted']) }}"
            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ request('status') === 'converted' ? 'bg-green-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
            Converted
        </a>
    </div>

    <!-- Advanced Filters -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <form action="{{ route('admin.crm.leads.index') }}" method="GET"
            class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-4">
            <div>
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Search name, phone, email..." class="form-input w-full">
            </div>
            <div>
                <select name="source" class="form-select w-full">
                    <option value="">All Sources</option>
                    @foreach (App\Models\Lead::getSources() as $key => $label)
                        <option value="{{ $key }}" {{ request('source') === $key ? 'selected' : '' }}>
                            {{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <select name="lead_type" class="form-select w-full">
                    <option value="">All Types</option>
                    @foreach (App\Models\Lead::getLeadTypes() as $key => $label)
                        <option value="{{ $key }}" {{ request('lead_type') === $key ? 'selected' : '' }}>
                            {{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <select name="assigned_to" class="form-select w-full">
                    <option value="">All Assignees</option>
                    @foreach ($salesUsers as $user)
                        <option value="{{ $user->id }}" {{ request('assigned_to') == $user->id ? 'selected' : '' }}>
                            {{ $user->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="btn btn-primary flex-1">Filter</button>
                @if (request()->hasAny(['search', 'source', 'lead_type', 'assigned_to', 'status', 'priority']))
                    <a href="{{ route('admin.crm.leads.index') }}" class="btn btn-secondary">Clear</a>
                @endif
            </div>
        </form>
    </div>

    <!-- Leads Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Lead
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Contact
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Type /
                            Source</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Priority</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Status
                        </th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Assigned</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Follow-up</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($leads as $lead)
                        <tr
                            class="hover:bg-gray-50 transition {{ $lead->status === 'new' ? 'bg-orange-50/50' : '' }} {{ $lead->priority === 'hot' ? 'border-l-4 border-l-red-500' : '' }}">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white font-semibold text-sm">
                                        {{ strtoupper(substr($lead->name, 0, 2)) }}
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.crm.leads.show', $lead) }}"
                                            class="font-medium text-gray-900 hover:text-primary-600">
                                            {{ $lead->name }}
                                        </a>
                                        <div class="flex items-center gap-2 text-xs text-gray-500">
                                            <span>Score: {{ $lead->score }}</span>
                                            @if ($lead->budget_range)
                                                <span>• {{ $lead->budget_range }}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="text-sm">
                                    <a href="tel:{{ $lead->phone }}"
                                        class="text-gray-900 hover:text-primary-600 flex items-center gap-1">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24">
                                            <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>
                                        {{ $lead->phone }}
                                    </a>
                                    @if ($lead->email)
                                        <div class="text-xs text-gray-500 truncate max-w-[150px]">{{ $lead->email }}
                                        </div>
                                    @endif
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <div class="text-sm">
                                    <span class="font-medium text-gray-700">{{ $lead->lead_type_label }}</span>
                                    <div class="text-xs text-gray-500">{{ $lead->source_label }}</div>
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                <select onchange="updateLeadPriority({{ $lead->id }}, this.value)"
                                    class="text-xs border-0 rounded-full px-3 py-1 font-medium
                                    {{ $lead->priority === 'hot' ? 'bg-red-100 text-red-700' : '' }}
                                    {{ $lead->priority === 'warm' ? 'bg-amber-100 text-amber-700' : '' }}
                                    {{ $lead->priority === 'cold' ? 'bg-blue-100 text-blue-700' : '' }}">
                                    <option value="hot" {{ $lead->priority === 'hot' ? 'selected' : '' }}>🔥 Hot
                                    </option>
                                    <option value="warm" {{ $lead->priority === 'warm' ? 'selected' : '' }}>Warm
                                    </option>
                                    <option value="cold" {{ $lead->priority === 'cold' ? 'selected' : '' }}>❄️ Cold
                                    </option>
                                </select>
                            </td>
                            <td class="px-4 py-3">
                                <select onchange="updateLeadStatus({{ $lead->id }}, this.value)"
                                    class="text-xs border rounded-lg px-2 py-1">
                                    @foreach (App\Models\Lead::getStatuses() as $key => $info)
                                        <option value="{{ $key }}"
                                            {{ $lead->status === $key ? 'selected' : '' }}>{{ $info['label'] }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-4 py-3">
                                @if ($lead->assignedTo)
                                    <div class="flex items-center gap-2">
                                        <div
                                            class="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium">
                                            {{ substr($lead->assignedTo->name, 0, 1) }}
                                        </div>
                                        <span class="text-sm text-gray-600">{{ $lead->assignedTo->name }}</span>
                                    </div>
                                @else
                                    <span class="text-xs text-gray-400">Unassigned</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                @if ($lead->next_follow_up)
                                    <div
                                        class="text-sm {{ $lead->next_follow_up->isPast() ? 'text-red-600 font-medium' : 'text-gray-600' }}">
                                        {{ $lead->next_follow_up->format('M d') }}
                                        <div class="text-xs">{{ $lead->next_follow_up->format('h:i A') }}</div>
                                    </div>
                                @else
                                    <span class="text-xs text-gray-400">Not set</span>
                                @endif
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('admin.crm.leads.show', $lead) }}"
                                        class="p-2 text-gray-500 hover:text-primary-600 hover:bg-gray-100 rounded-lg transition"
                                        title="View">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <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:{{ $lead->phone }}"
                                        class="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded-lg transition"
                                        title="Call">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <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/91{{ preg_replace('/[^0-9]/', '', $lead->phone) }}"
                                        target="_blank"
                                        class="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded-lg transition"
                                        title="WhatsApp">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                                            <path
                                                d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
                                        </svg>
                                    </a>
                                    <a href="{{ route('admin.crm.leads.edit', $lead) }}"
                                        class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition"
                                        title="Edit">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <svg class="w-12 h-12 text-gray-300 mb-4" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                    <p class="text-gray-500">No leads found</p>
                                    <a href="{{ route('admin.crm.leads.create') }}" class="mt-4 btn btn-primary">Add Your
                                        First Lead</a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

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

@endsection

@push('scripts')
    <script>
        function updateLeadStatus(leadId, status) {
            fetch(`/admin/crm/leads/${leadId}/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) {
                        // Optional: show success toast
                    }
                });
        }

        function updateLeadPriority(leadId, priority) {
            fetch(`/admin/crm/leads/${leadId}/update-priority`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        priority: priority
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                });
        }
    </script>
@endpush