@extends('layouts.app')

@section('title', 'Lead Management')

@section('content')
    <div class="min-h-screen bg-gray-50 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Page Header -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                    <div class="mb-4 sm:mb-0">
                        <div class="flex items-center">
                            <div class="bg-emerald-100 rounded-lg p-3 mr-4">
                                <i class="fas fa-users text-emerald-600 text-xl"></i>
                            </div>
                            <div>
                                <h1 class="text-2xl font-bold text-gray-900">Lead Management</h1>
                                <p class="mt-1 text-sm text-gray-500">Manage and track all sales leads</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="{{ route('leads.create') }}"
                            class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-plus mr-2"></i> New Lead
                        </a>
                    </div>
                </div>
            </div>

            <!-- Filters and Search -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                <div class="flex items-center mb-4">
                    <i class="fas fa-filter text-gray-400 mr-2"></i>
                    <h2 class="text-lg font-semibold text-gray-900">Filters</h2>
                </div>
                <form method="GET" action="{{ route('leads.index') }}">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                        <!-- Search -->
                        <div>
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-search text-gray-400 mr-1"></i> Search
                            </label>
                            <input type="text" id="search" name="search" placeholder="Company or contact..."
                                value="{{ request('search') }}"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                        </div>

                        <!-- Status Filter -->
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-info-circle text-gray-400 mr-1"></i> Status
                            </label>
                            <select id="status" name="status"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                                <option value="">All Status</option>
                                <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>New</option>
                                <option value="contacted" {{ request('status') === 'contacted' ? 'selected' : '' }}>Contacted
                                </option>
                                <option value="qualified" {{ request('status') === 'qualified' ? 'selected' : '' }}>Qualified
                                </option>
                                <option value="proposal_sent" {{ request('status') === 'proposal_sent' ? 'selected' : '' }}>
                                    Proposal Sent</option>
                                <option value="negotiation" {{ request('status') === 'negotiation' ? 'selected' : '' }}>
                                    Negotiation</option>
                                <option value="closed_won" {{ request('status') === 'closed_won' ? 'selected' : '' }}>Closed
                                    Won</option>
                                <option value="closed_lost" {{ request('status') === 'closed_lost' ? 'selected' : '' }}>Closed
                                    Lost</option>
                            </select>
                        </div>

                        <!-- City Filter -->
                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-map-marker-alt text-gray-400 mr-1"></i> City
                            </label>
                            <input type="text" id="city" name="city" placeholder="Filter by city..."
                                value="{{ request('city') }}"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                        </div>

                        <!-- Guard Type Filter -->
                        <div>
                            <label for="guard_type" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-shield-alt text-gray-400 mr-1"></i> Guard Type
                            </label>
                            <select id="guard_type" name="guard_type"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors">
                                <option value="">All Types</option>
                                <option value="armed" {{ request('guard_type') === 'armed' ? 'selected' : '' }}>Armed</option>
                                <option value="unarmed" {{ request('guard_type') === 'unarmed' ? 'selected' : '' }}>Unarmed
                                </option>
                                <option value="both" {{ request('guard_type') === 'both' ? 'selected' : '' }}>Both</option>
                            </select>
                        </div>
                    </div>

                    <div class="flex gap-2 mt-4">
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700 transition-all duration-200 shadow-sm hover:shadow-md">
                            <i class="fas fa-filter mr-2"></i>
                            Apply Filters
                        </button>
                        <a href="{{ route('leads.index') }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                            <i class="fas fa-redo mr-2"></i>
                            Reset
                        </a>
                    </div>
                </form>
            </div>

            <!-- Leads Table -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center justify-end">
                        <div class="text-sm text-gray-500">
                            <span class="font-medium">{{ $leads->total() }}</span> total leads
                        </div>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Company</th>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Contact</th>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Status</th>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Location</th>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Inventory</th>
                                <th
                                    class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Created By</th>
                                <th
                                    class="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-100">
                            @forelse($leads as $lead)
                                <tr class="hover:bg-gray-50 transition-colors duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div
                                                class="flex-shrink-0 h-10 w-10 bg-emerald-100 rounded-full flex items-center justify-center ring-2 ring-emerald-200">
                                                <i class="fas fa-building text-emerald-600"></i>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">{{ $lead->company_name }}</div>
                                                <div class="text-xs text-gray-500">{{ $lead->email }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div
                                                class="flex-shrink-0 h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                                                <i class="fas fa-user text-gray-500 text-xs"></i>
                                            </div>
                                            <div>
                                                <div class="text-sm text-gray-900">{{ $lead->contact_person_name }}</div>
                                                <div class="text-xs text-gray-500">{{ $lead->mobile_number }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $lead->getStatusBadgeClass() }}">
                                            <i class="fas fa-circle text-xs mr-1.5 opacity-50"></i>
                                            {{ ucfirst(str_replace('_', ' ', $lead->lead_status)) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center text-sm text-gray-600">
                                            <i class="fas fa-map-marker-alt text-gray-400 mr-1.5"></i>
                                            {{ $lead->city }}, {{ $lead->state }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($lead->inventorySelections->count() > 0)
                                            <div class="group relative">
                                                <div class="flex items-center">
                                                    <i class="fas fa-box text-gray-400 mr-1.5"></i>
                                                    <div>
                                                        <div class="text-sm font-medium text-gray-900">
                                                            {{ $lead->inventorySelections->count() }} items
                                                        </div>
                                                        @if($lead->inventorySummary)
                                                            <div class="text-xs text-gray-500">
                                                                ₹{{ number_format($lead->inventorySummary->total_inventory_price ?? 0) }}
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>

                                                <!-- Hover tooltip with inventory details -->
                                                <div
                                                    class="absolute left-0 bottom-full mb-2 hidden group-hover:block z-10 bg-gray-900 text-white text-xs rounded-lg shadow-lg p-3 w-64">
                                                    <div class="font-semibold mb-2">Inventory Items:</div>
                                                    @foreach($lead->inventorySelections->take(3) as $selection)
                                                        <div class="mb-1">
                                                            <div class="font-medium">
                                                                {{ $selection->inventoryItem->name ?? 'Unknown Item' }}</div>
                                                            <div class="text-gray-300">
                                                                Qty: {{ $selection->quantity_requested }} ×
                                                                ₹{{ number_format($selection->unit_price_at_selection ?? 0) }}
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                    @if($lead->inventorySelections->count() > 3)
                                                        <div class="text-gray-300 text-xs mt-1">... and
                                                            {{ $lead->inventorySelections->count() - 3 }} more</div>
                                                    @endif
                                                    <div class="absolute bottom-0 left-4 transform translate-y-full">
                                                        <div class="border-4 border-transparent border-t-gray-900"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="flex items-center text-sm text-gray-400">
                                                <i class="fas fa-box text-gray-400 mr-1.5"></i>
                                                No items
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @if($lead->assignedSalesExec)
                                            <div class="flex items-center">
                                                <div
                                                    class="flex-shrink-0 h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                                    <i class="fas fa-user-tie text-blue-600 text-xs"></i>
                                                </div>
                                                <div>
                                                    <div class="text-sm text-gray-900">{{ $lead->assignedSalesExec->full_name }}
                                                    </div>
                                                    <div class="text-xs text-gray-500">{{ $lead->assignedSalesExec->email }}</div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="flex items-center text-sm text-gray-400">
                                                <i class="fas fa-user-slash text-gray-400 mr-1.5"></i>
                                                Unassigned
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <div class="flex items-center justify-end space-x-2">
                                            <a href="{{ route('leads.show', $lead) }}"
                                                class="text-emerald-600 hover:text-emerald-800 transition-colors p-1 hover:bg-emerald-50 rounded"
                                                title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('leads.edit', $lead) }}"
                                                class="text-blue-600 hover:text-blue-800 transition-colors p-1 hover:bg-blue-50 rounded"
                                                title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('leads.destroy', $lead) }}" method="POST" class="inline"
                                                onsubmit="return confirm('Are you sure?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="text-red-600 hover:text-red-800 transition-colors p-1 hover:bg-red-50 rounded"
                                                    title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="px-6 py-16 text-center">
                                        <div class="flex flex-col items-center">
                                            <div class="bg-gray-100 rounded-full p-4 mb-4">
                                                <i class="fas fa-users text-gray-400 text-2xl"></i>
                                            </div>
                                            <h3 class="text-lg font-medium text-gray-900 mb-2">No leads found</h3>
                                            <p class="text-sm text-gray-500 max-w-md">No leads found for the selected criteria.
                                                Try adjusting your filters or create a new lead.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($leads->hasPages())
                    <div class="bg-gray-50 px-6 py-4 flex items-center justify-between border-t border-gray-200">
                        <div class="flex-1 flex justify-between sm:hidden">
                            <a href="{{ $leads->previousPageUrl() }}"
                                class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                <i class="fas fa-chevron-left mr-2"></i> Previous
                            </a>
                            <a href="{{ $leads->nextPageUrl() }}"
                                class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                                Next<i class="fas fa-chevron-right ml-2"></i>
                            </a>
                        </div>
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    Showing
                                    <span class="font-medium text-gray-900">{{ $leads->firstItem() }}</span>
                                    to
                                    <span class="font-medium text-gray-900">{{ $leads->lastItem() }}</span>
                                    of
                                    <span class="font-medium text-gray-900">{{ $leads->total() }}</span>
                                    results
                                </p>
                            </div>
                            <div>
                                {{ $leads->links() }}
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection