@extends('admin.layouts.app')

@section('title', 'Add New Lead')

@section('content')
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">Add New Lead</h2>
            <p class="text-gray-500">Create a new lead for your sales pipeline</p>
        </div>
        <a href="{{ route('admin.crm.leads.index') }}" 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Back to Leads
        </a>
    </div>

    <form action="{{ route('admin.crm.leads.store') }}" method="POST" class="space-y-6">
        @csrf

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Form -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Contact Information -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                        Contact Information
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Full Name <span class="text-red-500">*</span></label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                class="form-input w-full @error('name') border-red-500 @enderror" required>
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="form-label">Email</label>
                            <input type="email" name="email" value="{{ old('email') }}"
                                class="form-input w-full @error('email') border-red-500 @enderror">
                            @error('email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="form-label">Phone <span class="text-red-500">*</span></label>
                            <input type="tel" name="phone" value="{{ old('phone') }}"
                                class="form-input w-full @error('phone') border-red-500 @enderror" required>
                            @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="form-label">Alternate Phone</label>
                            <input type="tel" name="alternate_phone" value="{{ old('alternate_phone') }}"
                                class="form-input w-full">
                        </div>
                        <div class="md:col-span-2">
                            <label class="form-label">Address</label>
                            <textarea name="address" rows="2" class="form-textarea w-full">{{ old('address') }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Property Preferences -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                        </svg>
                        Property Preferences
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="form-label">Interested Property</label>
                            <select name="interested_property_id" class="form-select w-full">
                                <option value="">Select Property (Optional)</option>
                                @foreach ($properties as $property)
                                    <option value="{{ $property->id }}"
                                        {{ old('interested_property_id') == $property->id ? 'selected' : '' }}>
                                        {{ Str::limit($property->title, 50) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Property Type</label>
                            <select name="property_type" class="form-select w-full">
                                <option value="">Select Type</option>
                                @foreach (App\Models\Lead::getPropertyTypes() as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('property_type') === $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Transaction Type</label>
                            <select name="transaction_type" class="form-select w-full">
                                <option value="">Select Type</option>
                                @foreach (App\Models\Lead::getTransactionTypes() as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('transaction_type') === $key ? 'selected' : '' }}>{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Bedrooms Required</label>
                            <select name="bedrooms" class="form-select w-full">
                                <option value="">Any</option>
                                <option value="1" {{ old('bedrooms') === '1' ? 'selected' : '' }}>1 BHK</option>
                                <option value="2" {{ old('bedrooms') === '2' ? 'selected' : '' }}>2 BHK</option>
                                <option value="3" {{ old('bedrooms') === '3' ? 'selected' : '' }}>3 BHK</option>
                                <option value="4" {{ old('bedrooms') === '4' ? 'selected' : '' }}>4 BHK</option>
                                <option value="5+" {{ old('bedrooms') === '5+' ? 'selected' : '' }}>5+ BHK</option>
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Budget Min (₹)</label>
                            <input type="number" name="budget_min" value="{{ old('budget_min') }}"
                                class="form-input w-full" placeholder="e.g., 2500000">
                        </div>
                        <div>
                            <label class="form-label">Budget Max (₹)</label>
                            <input type="number" name="budget_max" value="{{ old('budget_max') }}"
                                class="form-input w-full" placeholder="e.g., 5000000">
                        </div>
                        <div class="md:col-span-2">
                            <label class="form-label">Preferred Locations</label>
                            <input type="text" name="preferred_locations" value="{{ old('preferred_locations') }}"
                                class="form-input w-full" placeholder="e.g., Sigra, Lanka, BHU">
                        </div>
                        <div class="md:col-span-2">
                            <label class="form-label">Requirements / Notes</label>
                            <textarea name="requirements" rows="3" class="form-textarea w-full"
                                placeholder="Any specific requirements...">{{ old('requirements') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Lead Classification -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Lead Classification</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="form-label">Lead Type <span class="text-red-500">*</span></label>
                            <select name="lead_type" class="form-select w-full" required>
                                @foreach (App\Models\Lead::getLeadTypes() as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('lead_type', 'buyer') === $key ? 'selected' : '' }}>{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Priority <span class="text-red-500">*</span></label>
                            <div class="grid grid-cols-3 gap-2 mt-1">
                                <label
                                    class="flex items-center justify-center gap-2 px-3 py-2 border rounded-lg cursor-pointer hover:bg-red-50 has-[:checked]:bg-red-100 has-[:checked]:border-red-500">
                                    <input type="radio" name="priority" value="hot"
                                        {{ old('priority') === 'hot' ? 'checked' : '' }} class="sr-only">
                                    <span class="text-sm font-medium">🔥 Hot</span>
                                </label>
                                <label
                                    class="flex items-center justify-center gap-2 px-3 py-2 border rounded-lg cursor-pointer hover:bg-amber-50 has-[:checked]:bg-amber-100 has-[:checked]:border-amber-500">
                                    <input type="radio" name="priority" value="warm"
                                        {{ old('priority', 'warm') === 'warm' ? 'checked' : '' }} class="sr-only">
                                    <span class="text-sm font-medium">Warm</span>
                                </label>
                                <label
                                    class="flex items-center justify-center gap-2 px-3 py-2 border rounded-lg cursor-pointer hover:bg-blue-50 has-[:checked]:bg-blue-100 has-[:checked]:border-blue-500">
                                    <input type="radio" name="priority" value="cold"
                                        {{ old('priority') === 'cold' ? 'checked' : '' }} class="sr-only">
                                    <span class="text-sm font-medium">❄️ Cold</span>
                                </label>
                            </div>
                        </div>
                        <div>
                            <label class="form-label">Source <span class="text-red-500">*</span></label>
                            <select name="source" class="form-select w-full" required>
                                @foreach (App\Models\Lead::getSources() as $key => $label)
                                    <option value="{{ $key }}"
                                        {{ old('source', 'sales_team') === $key ? 'selected' : '' }}>{{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Source Detail</label>
                            <input type="text" name="source_detail" value="{{ old('source_detail') }}"
                                class="form-input w-full" placeholder="e.g., Referred by John">
                        </div>
                    </div>
                </div>

                <!-- Assignment & Follow-up -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Assignment & Follow-up</h3>
                    <div class="space-y-4">
                        <div>
                            <label class="form-label">Assign To</label>
                            <select name="assigned_to" class="form-select w-full">
                                <option value="">Unassigned</option>
                                @foreach ($salesUsers as $user)
                                    <option value="{{ $user->id }}"
                                        {{ old('assigned_to', auth()->id()) == $user->id ? 'selected' : '' }}>
                                        {{ $user->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="form-label">Next Follow-up</label>
                            <input type="datetime-local" name="next_follow_up" value="{{ old('next_follow_up') }}"
                                class="form-input w-full">
                        </div>
                        <div>
                            <label class="form-label">Follow-up Note</label>
                            <textarea name="follow_up_note" rows="2" class="form-textarea w-full"
                                placeholder="What to follow up about...">{{ old('follow_up_note') }}</textarea>
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="btn btn-primary w-full py-3 text-lg">
                    <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>
                    Create Lead
                </button>
            </div>
        </div>
    </form>
@endsection

@push('styles')
    <style>
        /* Radio button styling */
        label:has(input[type="radio"]:checked) {
            background-color: var(--selected-bg);
            border-color: var(--selected-border);
        }
    </style>
@endpush