<x-app-layout>
    <x-slot name="title">Leads</x-slot>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Add New Lead</h1>
            <p class="text-sm text-gray-500 mt-1">Create a new lead profile in the system.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('leads.index') }}" class="text-gray-500 hover:text-gray-700 font-medium text-sm transition-colors">
                &larr; Back to Leads
            </a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <form action="{{ route('leads.store') }}" method="POST" class="p-6 sm:p-8">
            @csrf
            
            @if ($errors->any())
                <div class="mb-6 bg-red-50 p-4 rounded-md border border-red-200">
                    <ul class="list-disc list-inside text-sm text-red-600">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Personal Info -->
                <div class="col-span-1 md:col-span-2">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Personal Information</h3>
                </div>
                
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Full Name *</label>
                    <input type="text" name="name" id="name" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="cnic" class="block text-sm font-medium text-gray-700">CNIC</label>
                    <input type="text" name="cnic" id="cnic" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>

                <!-- Contact Info -->
                <div class="col-span-1 md:col-span-2 mt-4">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Contact Details</h3>
                </div>

                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
                    <input type="text" name="phone" id="phone" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="whatsapp" class="block text-sm font-medium text-gray-700">WhatsApp</label>
                    <input type="text" name="whatsapp" id="whatsapp" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div class="col-span-1 md:col-span-2">
                    <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
                    <input type="email" name="email" id="email" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>

                <!-- Lead Details -->
                <div class="col-span-1 md:col-span-2 mt-4">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Lead Details</h3>
                </div>

                <div>
                    <div class="flex justify-between">
                        <label for="lead_source_id" class="block text-sm font-medium text-gray-700">Lead Source</label>
                    </div>
                    <select name="lead_source_id" id="lead_source_id" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select a source</option>
                        @foreach($sources as $source)
                            <option value="{{ $source->id }}">{{ $source->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="assigned_agent_id" class="block text-sm font-medium text-gray-700">Assigned Agent</label>
                    <select name="assigned_agent_id" id="assigned_agent_id" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Unassigned</option>
                        @foreach($agents as $agent)
                            <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <div class="flex justify-between">
                        <label for="status" class="block text-sm font-medium text-gray-700">Status *</label>
                        <a href="{{ route('master-data.index', ['type' => 'lead_status']) }}" target="_blank" class="text-xs text-primary-600 hover:underline">Manage Options</a>
                    </div>
                    <select name="status" id="status" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        @forelse($statuses as $status)
                            <option value="{{ $status->name }}">{{ $status->name }}</option>
                        @empty
                            <option value="New">New</option>
                            <option value="Contacted">Contacted</option>
                        @endforelse
                    </select>
                </div>

                <div>
                    <div class="flex justify-between">
                        <label for="priority" class="block text-sm font-medium text-gray-700">Priority *</label>
                        <a href="{{ route('master-data.index', ['type' => 'lead_priority']) }}" target="_blank" class="text-xs text-primary-600 hover:underline">Manage Options</a>
                    </div>
                    <select name="priority" id="priority" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        @forelse($priorities as $priority)
                            <option value="{{ $priority->name }}">{{ $priority->name }}</option>
                        @empty
                            <option value="Medium">Medium</option>
                        @endforelse
                    </select>
                </div>
                
                <div class="col-span-1 md:col-span-2">
                    <div class="flex justify-between">
                        <label for="interested_property" class="block text-sm font-medium text-gray-700">Preferred Location / Property</label>
                        <a href="{{ route('master-data.index', ['type' => 'preferred_location']) }}" target="_blank" class="text-xs text-primary-600 hover:underline">Manage Locations</a>
                    </div>
                    <select name="interested_property" id="interested_property" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Any</option>
                        @foreach($locations as $loc)
                            <option value="{{ $loc->name }}">{{ $loc->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-span-1 md:col-span-2">
                    <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea name="notes" id="notes" rows="4" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm"></textarea>
                </div>

                @if(isset($customFields) && $customFields->count() > 0)
                <div class="col-span-1 md:col-span-2 mt-4">
                    <h3 class="text-lg font-medium text-gray-900 border-b border-gray-100 pb-2 mb-4">Custom Information</h3>
                </div>
                
                @foreach($customFields as $field)
                <div class="{{ $field->type === 'Textarea' ? 'col-span-1 md:col-span-2' : '' }}">
                    <label for="custom_{{ $field->key }}" class="block text-sm font-medium text-gray-700">
                        {{ $field->name }} {!! $field->is_required ? '<span class="text-red-500">*</span>' : '' !!}
                    </label>
                    
                    @if($field->type === 'Textarea')
                        <textarea name="custom_data[{{ $field->key }}]" id="custom_{{ $field->key }}" rows="3" {{ $field->is_required ? 'required' : '' }} class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ old('custom_data.' . $field->key, $field->default_value) }}</textarea>
                    
                    @elseif($field->type === 'Dropdown' && is_array($field->options))
                        <select name="custom_data[{{ $field->key }}]" id="custom_{{ $field->key }}" {{ $field->is_required ? 'required' : '' }} class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            <option value="">Select {{ $field->name }}</option>
                            @foreach($field->options as $option)
                                <option value="{{ $option }}" {{ old('custom_data.' . $field->key, $field->default_value) == $option ? 'selected' : '' }}>{{ $option }}</option>
                            @endforeach
                        </select>
                        
                    @elseif($field->type === 'Date')
                        <input type="date" name="custom_data[{{ $field->key }}]" id="custom_{{ $field->key }}" value="{{ old('custom_data.' . $field->key, $field->default_value) }}" {{ $field->is_required ? 'required' : '' }} class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        
                    @else
                        <input type="{{ $field->type === 'Number' || $field->type === 'Currency' ? 'number' : 'text' }}" name="custom_data[{{ $field->key }}]" id="custom_{{ $field->key }}" value="{{ old('custom_data.' . $field->key, $field->default_value) }}" {{ $field->is_required ? 'required' : '' }} class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                    @endif
                </div>
                @endforeach
                @endif
            </div>

            <div class="mt-8 pt-5 border-t border-gray-100 flex justify-end gap-3">
                <a href="{{ route('leads.index') }}" class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Cancel
                </a>
                <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Save Lead
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
