@extends('layouts.app')
@section('title', 'New Lead')
@section('breadcrumb')<a href="{{ route('leads.index') }}" class="hover:text-white">Leads</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">New Lead</span>@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2">
        <form method="POST" action="{{ route('leads.store') }}" class="space-y-6">
            @csrf

            <!-- Lead Information -->
            <div class="card p-5">
                <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-info-circle text-blue-400"></i> Lead Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>Source *</label>
                        <select name="source" class="input">
                            <option value="">Select source</option>
                            @foreach(['Website', 'Referral', 'Social Media', 'Walk-in', 'Real Estate Agent', 'Exhibition', 'Google Ads', 'Word of Mouth', 'Other'] as $source)
                            <option value="{{ $source }}" {{ old('source') === $source ? 'selected' : '' }}>{{ $source }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label>Status *</label>
                        <select name="status" class="input" required>
                            <option value="new" {{ old('status', 'new') === 'new' ? 'selected' : '' }}>New</option>
                            <option value="consult_booked" {{ old('status') === 'consult_booked' ? 'selected' : '' }}>Consult Booked</option>
                            <option value="on_hold" {{ old('status') === 'on_hold' ? 'selected' : '' }}>On Hold</option>
                        </select>
                    </div>
                    <div>
                        <label>Priority *</label>
                        <select name="priority" class="input" required>
                            <option value="low" {{ old('priority') === 'low' ? 'selected' : '' }}>Low</option>
                            <option value="medium" {{ old('priority', 'medium') === 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="high" {{ old('priority') === 'high' ? 'selected' : '' }}>High</option>
                        </select>
                    </div>
                    <div>
                        <label>Enquiry Date</label>
                        <input type="date" name="enquiry_date" value="{{ old('enquiry_date', date('Y-m-d')) }}" class="input">
                    </div>
                    <div>
                        <label>Preferred Contact Method</label>
                        <select name="preferred_contact" class="input">
                            <option value="">Select</option>
                            <option value="Phone">Phone</option>
                            <option value="Email">Email</option>
                            <option value="SMS">SMS</option>
                        </select>
                    </div>
                </div>
                <div class="mt-4">
                    <label>Notes</label>
                    <textarea name="notes" rows="3" class="input" placeholder="Any initial notes about this lead...">{{ old('notes') }}</textarea>
                </div>
            </div>

            <!-- Client Details -->
            <div class="card p-5">
                <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-user text-blue-400"></i> Client Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>Title</label>
                        <select name="title" class="input">
                            <option value="">No title</option>
                            <option value="Mr" {{ old('title') === 'Mr' ? 'selected' : '' }}>Mr</option>
                            <option value="Mrs" {{ old('title') === 'Mrs' ? 'selected' : '' }}>Mrs</option>
                            <option value="Ms" {{ old('title') === 'Ms' ? 'selected' : '' }}>Ms</option>
                            <option value="Dr" {{ old('title') === 'Dr' ? 'selected' : '' }}>Dr</option>
                        </select>
                    </div>
                    <div>
                        <label>Company</label>
                        <input type="text" name="company" value="{{ old('company') }}" class="input" placeholder="Company name (optional)">
                    </div>
                    <div>
                        <label>First Name *</label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}" class="input" required placeholder="First name">
                        @error('first_name')<p class="text-red-400 text-xs mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label>Last Name *</label>
                        <input type="text" name="last_name" value="{{ old('last_name') }}" class="input" required placeholder="Last name">
                    </div>
                    <div>
                        <label>Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" class="input" placeholder="email@example.com">
                    </div>
                    <div>
                        <label>Phone</label>
                        <input type="text" name="phone" value="{{ old('phone') }}" class="input" placeholder="04XX XXX XXX">
                    </div>
                </div>
            </div>

            <!-- Site Address -->
            <div class="card p-5" x-data="{ sameAsClient: false }">
                <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-map-marker-alt text-blue-400"></i> Site Address</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label>Street Address</label>
                        <input type="text" name="site_address" value="{{ old('site_address') }}" class="input" placeholder="123 Main Street">
                    </div>
                    <div>
                        <label>Suburb</label>
                        <input type="text" name="site_suburb" value="{{ old('site_suburb') }}" class="input" placeholder="Suburb">
                    </div>
                    <div>
                        <label>State</label>
                        <!-- <select name="site_state" class="input">
                            <option value="">Select state</option>
                            @foreach(['NSW', 'VIC', 'QLD', 'WA', 'SA', 'TAS', 'ACT', 'NT'] as $state)
                            <option value="{{ $state }}" {{ old('site_state') === $state ? 'selected' : '' }}>{{ $state }}</option>
                            @endforeach
                        </select> -->
                        <input type="text" name="site_state" value="{{ old('site_state') }}" class="input" placeholder="State">
                    </div>
                    <div>
                        <label>Postcode</label>
                        <input type="text" name="site_postcode" value="{{ old('site_postcode') }}" class="input" placeholder="2000">
                    </div>
                </div>
            </div>

            <!-- Project Overview -->
            <div class="card p-5">
                <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-project-diagram text-blue-400"></i> Project Overview</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label>Project Type</label>
                        <select name="project_type" class="input">
                            <option value="">Select type</option>
                            <option value="kitchen">Kitchen</option>
                            <option value="bathroom">Bathroom</option>
                            <option value="laundry">Laundry</option>
                            <option value="wardrobe">Wardrobe</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div>
                        <label>Budget Range</label>
                        <select name="budget_range" class="input">
                            <option value="">Select range</option>
                            <option value="Under $10k">Under $10k</option>
                            <option value="$10k - $20k">$10k - $20k</option>
                            <option value="$20k - $35k">$20k - $35k</option>
                            <option value="$35k - $50k">$35k - $50k</option>
                            <option value="$50k - $75k">$50k - $75k</option>
                            <option value="$75k - $100k">$75k - $100k</option>
                            <option value="$100k+">$100k+</option>
                        </select>
                    </div>
                    <div>
                        <label>Expected Start</label>
                        <input type="date" name="expected_start" value="{{ old('expected_start') }}" class="input">
                    </div>
                </div>
                <div class="mt-4">
                    <label>Description</label>
                    <textarea name="description" rows="3" class="input" placeholder="Brief description of the project...">{{ old('description') }}</textarea>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="submit" class="btn btn-primary flex-1 justify-center"><i class="fas fa-save"></i> Save Lead</button>
                <a href="{{ route('leads.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>

    <!-- Sidebar summary -->
    <div class="space-y-4">
        <div class="card p-5">
            <h3 class="mb-3">Lead Summary</h3>
            <p class="text-sm text-slate-400">Fill in the form on the left to create a new lead. All required fields are marked with *.</p>
        </div>
        <div class="card p-5">
            <h3 class="mb-3">Quick Tips</h3>
            <ul class="space-y-2 text-sm text-slate-400">
                <li class="flex gap-2"><i class="fas fa-check-circle text-green-400 mt-0.5"></i> Always capture source for tracking</li>
                <li class="flex gap-2"><i class="fas fa-check-circle text-green-400 mt-0.5"></i> Set priority to ensure follow-up</li>
                <li class="flex gap-2"><i class="fas fa-check-circle text-green-400 mt-0.5"></i> Note preferred contact method</li>
                <li class="flex gap-2"><i class="fas fa-check-circle text-green-400 mt-0.5"></i> Record budget range upfront</li>
            </ul>
        </div>
    </div>
</div>
@endsection