@extends('layouts.app')
@section('title', 'Leads')
@section('breadcrumb')<a href="{{ route('leads.index') }}" class="text-white">Leads</a>@endsection

@section('content')
<div x-data="{ selectedId: {{ request('selected') ? request('selected') : 'null' }}, panelOpen: {{ request('selected') ? 'true' : 'false' }} }">
<div class="space-y-5" :class="{ 'pr-[440px]': panelOpen }">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1>Leads</h1>
            <p>Manage and track all incoming leads</p>
        </div>
        <a href="{{ route('leads.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> New Lead</a>
    </div>

    <!-- Stats -->
    <div class="grid grid-cols-4 md:grid-cols-7 gap-3">
        @foreach([
            ['label' => 'All', 'key' => 'all', 'color' => 'gray'],
            ['label' => 'New', 'key' => 'new', 'color' => 'blue'],
            ['label' => 'Consult Booked', 'key' => 'consult_booked', 'color' => 'purple'],
            ['label' => 'On Hold', 'key' => 'on_hold', 'color' => 'yellow'],
            ['label' => 'Lost', 'key' => 'lost', 'color' => 'red'],
            ['label' => 'Sold', 'key' => 'sold', 'color' => 'green'],
            ['label' => 'Converted', 'key' => 'converted', 'color' => 'teal'],
        ] as $stat)
        <a href="{{ route('leads.index', ['status' => $stat['key']]) }}"
           class="stat-card text-center hover:border-blue-500 transition-colors {{ request('status', 'all') === $stat['key'] ? 'border-blue-500' : '' }}">
            <div class="text-2xl font-bold text-white">{{ $stats[$stat['key']] }}</div>
            <div class="text-xs text-slate-400 mt-1">{{ $stat['label'] }}</div>
        </a>
        @endforeach
    </div>

    <!-- Search & Filters -->
    <div class="card p-4">
        <form method="GET" class="flex gap-3 flex-wrap">
            <div class="flex-1 relative" style="min-width: 200px;">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search leads..." class="input pl-9">
            </div>
            <select name="status" class="input" style="width: auto;">
                <option value="all">All Statuses</option>
                <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>New</option>
                <option value="consult_booked" {{ request('status') === 'consult_booked' ? 'selected' : '' }}>Consult Booked</option>
                <option value="on_hold" {{ request('status') === 'on_hold' ? 'selected' : '' }}>On Hold</option>
                <option value="lost" {{ request('status') === 'lost' ? 'selected' : '' }}>Lost</option>
                <option value="sold" {{ request('status') === 'sold' ? 'selected' : '' }}>Sold</option>
                <option value="converted" {{ request('status') === 'converted' ? 'selected' : '' }}>Converted</option>
            </select>
            <button type="submit" class="btn btn-secondary">Filter</button>
            <a href="{{ route('leads.index') }}" class="btn btn-secondary">Clear</a>
        </form>
    </div>

    <!-- Table -->
    <div class="card overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-xs text-slate-500 border-b border-slate-700" style="background: #0f172a;">
                        <th class="text-left px-4 py-3 font-medium">Lead</th>
                        <th class="text-left px-4 py-3 font-medium">Contact</th>
                        <th class="text-left px-4 py-3 font-medium">Source</th>
                        <th class="text-left px-4 py-3 font-medium">Project</th>
                        <th class="text-left px-4 py-3 font-medium">Status</th>
                        <th class="text-left px-4 py-3 font-medium">Priority</th>
                        <th class="text-left px-4 py-3 font-medium">Date</th>
                        <th class="text-left px-4 py-3 font-medium">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($leads as $lead)
                    <tr class="table-row" @click="selectedId = {{ $lead->id }}; panelOpen = true; window.history.pushState({}, '', '?selected={{ $lead->id }}')">
                        <td class="px-4 py-3">
                            <div class="text-sm font-medium text-white">{{ $lead->lead_number }}</div>
                            <div class="text-xs text-slate-500">{{ $lead->enquiry_date?->format('d M Y') }}</div>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center text-xs font-bold text-blue-300">
                                    {{ $lead->contact?->initials ?? '??' }}
                                </div>
                                <div>
                                    <div class="text-sm text-white">{{ $lead->contact?->full_name ?? '—' }}</div>
                                    <div class="text-xs text-slate-500">{{ $lead->contact?->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-sm text-slate-300">{{ $lead->source ?? '—' }}</td>
                        <td class="px-4 py-3 text-sm text-slate-300">{{ $lead->project_type ? ucfirst($lead->project_type) : '—' }}</td>
                        <td class="px-4 py-3"><span class="badge badge-{{ $lead->statusColor() }}">{{ $lead->statusLabel() }}</span></td>
                        <td class="px-4 py-3">
                            <span class="badge {{ $lead->priority === 'high' ? 'badge-red' : ($lead->priority === 'medium' ? 'badge-yellow' : 'badge-gray') }}">
                                {{ ucfirst($lead->priority) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm text-slate-400">{{ $lead->enquiry_date?->diffForHumans() ?? '—' }}</td>
                        <td class="px-4 py-3" @click.stop>
                            <div class="flex gap-1">
                                <a href="{{ route('leads.show', $lead) }}" class="w-7 h-7 rounded flex items-center justify-center hover:bg-slate-700 text-slate-400 hover:text-white" title="View">
                                    <i class="fas fa-eye text-xs"></i>
                                </a>
                                <a href="{{ route('leads.edit', $lead) }}" class="w-7 h-7 rounded flex items-center justify-center hover:bg-slate-700 text-slate-400 hover:text-white" title="Edit">
                                    <i class="fas fa-edit text-xs"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="px-4 py-12 text-center text-slate-500">
                        <i class="fas fa-user-plus text-3xl mb-3 text-slate-700 block"></i>
                        No leads found. <a href="{{ route('leads.create') }}" class="text-blue-400 hover:text-blue-300">Create your first lead</a>
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($leads->hasPages())
        <div class="px-4 py-3 border-t border-slate-700">{{ $leads->links() }}</div>
        @endif
    </div>
</div>

<!-- Detail Panel -->
<div class="slide-panel" :class="{ 'open': panelOpen }">
    <template x-if="panelOpen && selectedId">
        <div>
            @if($selectedLead)
            @include('leads.partials.panel', ['lead' => $selectedLead])
            @else
            <div class="p-6 text-center text-slate-500 mt-20">
                <i class="fas fa-spinner fa-spin text-2xl mb-2 block"></i>
                Loading...
            </div>
            @endif
        </div>
    </template>
    <template x-if="!panelOpen">
        <div></div>
    </template>
</div>

<!-- Overlay -->
<div x-show="panelOpen" @click="panelOpen = false" class="fixed inset-0 bg-black/30 z-40" style="display: none;"></div>
</div>
@endsection