@csrf
@php
    // Contact details keyed by customer id, so picking a customer auto-fills the form.
    $customerMap = $customers->mapWithKeys(fn ($c) => [$c->id => [
        'name'  => $c->name,
        'phone' => $c->phone,
        'email' => $c->email,
    ]]);
@endphp

{{-- Section: linked customer + contact details --}}
<div class="form-section mb-4">
    <div class="form-section-title"><i class="bi bi-person-vcard me-1"></i> {{ __('leads.sec_contact') }}</div>
    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label">{{ __('leads.link_customer') }}</label>
            <select name="customer_id" id="lead-customer" class="form-select">
                <option value="">— {{ __('app.none') }} —</option>
                @foreach($customers as $c)
                    <option value="{{ $c->id }}" @selected(old('customer_id', $lead->customer_id ?? '') == $c->id)>
                        {{ $c->name }}@if($c->national_id) ({{ $c->national_id }})@endif
                    </option>
                @endforeach
            </select>
            <div class="form-text">{{ __('leads.link_customer_hint') }}</div>
        </div>
        <div class="col-md-6">
            <label class="form-label">{{ __('leads.contact_name') }} *</label>
            <input type="text" name="contact_name" id="lead-contact-name" class="form-control"
                   value="{{ old('contact_name', $lead->contact_name ?? '') }}" required>
        </div>
        <div class="col-md-6">
            <label class="form-label">{{ __('app.phone') }}</label>
            <input type="text" name="contact_phone" id="lead-contact-phone" class="form-control" dir="ltr"
                   value="{{ old('contact_phone', $lead->contact_phone ?? '') }}">
        </div>
        <div class="col-md-6">
            <label class="form-label">{{ __('app.email') }}</label>
            <input type="email" name="contact_email" id="lead-contact-email" class="form-control" dir="ltr"
                   value="{{ old('contact_email', $lead->contact_email ?? '') }}">
        </div>
    </div>
</div>

{{-- Section: the financing opportunity --}}
<div class="form-section mb-4">
    <div class="form-section-title"><i class="bi bi-cash-coin me-1"></i> {{ __('leads.sec_opportunity') }}</div>
    <div class="row g-3">
        <div class="col-md-6">
            <label class="form-label">{{ __('leads.finance_product') }}</label>
            <select name="finance_product_id" class="form-select">
                <option value="">— {{ __('app.none') }} —</option>
                @foreach($products as $p)
                    <option value="{{ $p->id }}" @selected(old('finance_product_id', $lead->finance_product_id ?? '') == $p->id)>{{ $p->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6">
            <label class="form-label">{{ __('leads.estimated_amount') }}</label>
            <div class="input-group">
                <input type="number" step="0.01" min="0" name="estimated_amount" class="form-control"
                       value="{{ old('estimated_amount', $lead->estimated_amount ?? '') }}">
                <span class="input-group-text"><x-riyal /></span>
            </div>
        </div>
        @isset($lead)
        <div class="col-md-6">
            <label class="form-label">{{ __('leads.status') }}</label>
            <select name="status" class="form-select">
                @foreach(\App\Models\Lead::STATUSES as $s)
                    <option value="{{ $s }}" @selected(old('status', $lead->status) === $s)>{{ __('leads.statuses.' . $s) }}</option>
                @endforeach
            </select>
        </div>
        @endisset
    </div>
</div>

{{-- Section: follow-up + source + owner --}}
<div class="form-section mb-4">
    <div class="form-section-title"><i class="bi bi-calendar-check me-1"></i> {{ __('leads.sec_follow_up') }}</div>
    <div class="row g-3">
        <div class="col-md-4">
            <label class="form-label">{{ __('leads.source') }}</label>
            <select name="source" class="form-select">
                <option value="">— {{ __('app.none') }} —</option>
                @foreach($sources as $s)
                    <option value="{{ $s }}" @selected(old('source', $lead->source ?? '') === $s)>{{ __('leads.sources.' . $s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">{{ __('leads.next_follow_up') }}</label>
            <input type="date" name="next_follow_up_at" class="form-control"
                   value="{{ old('next_follow_up_at', optional($lead->next_follow_up_at ?? null)?->format('Y-m-d')) }}">
        </div>
        <div class="col-md-4">
            <label class="form-label">{{ __('leads.owner') }}</label>
            <select name="owner_id" class="form-select">
                <option value="">— {{ __('app.none') }} —</option>
                @foreach($owners as $o)
                    <option value="{{ $o->id }}" @selected(old('owner_id', $lead->owner_id ?? auth()->id()) == $o->id)>{{ $o->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>

{{-- Section: notes --}}
<div class="form-section mb-3">
    <div class="form-section-title"><i class="bi bi-sticky me-1"></i> {{ __('leads.sec_notes') }}</div>
    <textarea name="notes" class="form-control" rows="3" placeholder="{{ __('app.notes') }}">{{ old('notes', $lead->notes ?? '') }}</textarea>
</div>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> {{ __('app.save') }}</button>
    <a href="{{ route('leads.index') }}" class="btn btn-secondary">{{ __('app.cancel') }}</a>
</div>

@push('scripts')
<script>
(function () {
    const customers = @json($customerMap);
    const sel   = document.getElementById('lead-customer');
    const name  = document.getElementById('lead-contact-name');
    const phone = document.getElementById('lead-contact-phone');
    const email = document.getElementById('lead-contact-email');

    sel?.addEventListener('change', function () {
        const c = customers[this.value];
        if (!c) return;
        // Only fill empty fields, never overwrite what the user already typed.
        if (!name.value)  name.value  = c.name  || '';
        if (!phone.value) phone.value = c.phone || '';
        if (!email.value) email.value = c.email || '';
    });
})();
</script>
@endpush