@extends('layouts.app')
@section('title', isset($lead) ? 'Edit Lead' : 'New Lead')
@section('page-title', isset($lead) ? 'Edit Lead' : 'New Lead')

@section('content')
<div class="row justify-content-center">
<div class="col-xl-10">

<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('leads.index') }}" class="btn btn-outline-secondary" style="border-radius:9px; font-size:13px;">
        <i class="bi bi-arrow-left me-1"></i> Back
    </a>
    <div>
        <h5 class="mb-0" style="font-weight:700;">
            {{ isset($lead) ? "Edit Lead: {$lead->lead_number}" : 'Create New Lead' }}
        </h5>
    </div>
</div>

<form method="POST"
      action="{{ isset($lead) ? route('leads.update', $lead) : route('leads.store') }}"
      id="leadForm">
    @csrf
    @if(isset($lead)) @method('PUT') @endif

    <div class="row g-4">

        {{-- ── Left Column ─────────────────────────────────────────── --}}
        <div class="col-lg-8">

            {{-- Basic Information --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-person-lines-fill me-2 text-primary"></i>Client Information</span>
                </div>
                <div class="lp-card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Client Name <span class="text-danger">*</span></label>
                            <input type="text" name="client_name"
                                   value="{{ old('client_name', $lead->client_name ?? '') }}"
                                   class="form-control @error('client_name') is-invalid @enderror"
                                   placeholder="Full name" required>
                            @error('client_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone Number</label>
                            <div style="position:relative;">
                                <i class="bi bi-telephone" style="position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--lp-muted);"></i>
                                <input type="tel" name="phone"
                                       value="{{ old('phone', $lead->phone ?? '') }}"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       placeholder="+1 000 000 0000"
                                       style="padding-left:33px;">
                            </div>
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">WhatsApp Number</label>
                            <div style="position:relative;">
                                <i class="bi bi-whatsapp text-success" style="position:absolute; left:11px; top:50%; transform:translateY(-50%);"></i>
                                <input type="tel" name="whatsapp"
                                       value="{{ old('whatsapp', $lead->whatsapp ?? '') }}"
                                       class="form-control @error('whatsapp') is-invalid @enderror"
                                       placeholder="+1 000 000 0000"
                                       style="padding-left:33px;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Telegram ID</label>
                            <div style="position:relative;">
                                <i class="bi bi-telegram text-info" style="position:absolute; left:11px; top:50%; transform:translateY(-50%);"></i>
                                <input type="text" name="telegram_id"
                                       value="{{ old('telegram_id', $lead->telegram_id ?? '') }}"
                                       class="form-control"
                                       placeholder="@username"
                                       style="padding-left:33px;">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Lead Source</label>
                            <select name="lead_source" class="form-select" data-select2>
                                <option value="">— Select source —</option>
                                @foreach($sources as $src)
                                <option value="{{ $src->value }}"
                                    {{ old('lead_source', $lead->lead_source ?? '') === $src->value ? 'selected' : '' }}>
                                    {{ $src->label }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Services --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-grid-3x3-gap me-2 text-primary"></i>Services Interested</span>
                    <small style="color:var(--lp-muted);">Select all that apply</small>
                </div>
                <div class="lp-card-body">
                    @php
                        $selectedServices = old('services', isset($lead) ? $lead->services->pluck('service_value')->toArray() : []);
                    @endphp
                    <div class="row g-2">
                        @foreach($services as $svc)
                        <div class="col-md-6">
                            <label class="d-flex align-items-center gap-2 p-2 rounded"
                                   style="cursor:pointer; border:1.5px solid var(--lp-border); border-radius:9px !important; transition:all .15s;"
                                   onmouseover="this.style.borderColor='#3B6EFF'" onmouseout="this.style.borderColor=''">
                                <input type="checkbox" name="services[]" value="{{ $svc->value }}"
                                       {{ in_array($svc->value, $selectedServices) ? 'checked' : '' }}
                                       style="accent-color:#3B6EFF; flex-shrink:0;">
                                <span style="font-size:13px;">{{ $svc->label }}</span>
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Custom Fields --}}
            @if($customFields->isNotEmpty())
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-sliders me-2 text-primary"></i>Additional Information</span>
                </div>
                <div class="lp-card-body">
                    <div class="row g-3">
                        @foreach($customFields as $field)
                        @php
                            $existing = isset($lead)
                                ? $lead->customValues->firstWhere('field_id', $field->id)?->value
                                : null;
                            $value = old("custom_{$field->id}", $existing ?? $field->default_value);
                        @endphp
                        <div class="col-md-6">
                            <label class="form-label">
                                {{ $field->field_label }}
                                @if($field->is_required)<span class="text-danger">*</span>@endif
                            </label>

                            @if(in_array($field->field_type, ['text','number','email','phone','url']))
                                <input type="{{ $field->input_type }}" name="custom_{{ $field->id }}"
                                       value="{{ $value }}"
                                       class="form-control"
                                       placeholder="{{ $field->placeholder }}"
                                       {{ $field->is_required ? 'required' : '' }}>

                            @elseif($field->field_type === 'textarea')
                                <textarea name="custom_{{ $field->id }}" class="form-control" rows="3"
                                          placeholder="{{ $field->placeholder }}"
                                          {{ $field->is_required ? 'required' : '' }}>{{ $value }}</textarea>

                            @elseif($field->field_type === 'select')
                                <select name="custom_{{ $field->id }}" class="form-select" {{ $field->is_required ? 'required' : '' }}>
                                    <option value="">— Select —</option>
                                    @foreach($field->field_options ?? [] as $opt)
                                    <option value="{{ $opt }}" {{ $value === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                    @endforeach
                                </select>

                            @elseif($field->field_type === 'multi_select')
                                @php $vals = $value ? explode(',', $value) : []; @endphp
                                <select name="custom_{{ $field->id }}[]" class="form-select" multiple data-multiselect>
                                    @foreach($field->field_options ?? [] as $opt)
                                    <option value="{{ $opt }}" {{ in_array($opt, $vals) ? 'selected' : '' }}>{{ $opt }}</option>
                                    @endforeach
                                </select>

                            @elseif($field->field_type === 'checkbox')
                                <div class="form-check">
                                    <input type="checkbox" name="custom_{{ $field->id }}" value="1"
                                           class="form-check-input" {{ $value ? 'checked' : '' }}>
                                    <label class="form-check-label">Yes</label>
                                </div>

                            @elseif(in_array($field->field_type, ['date','datetime']))
                                <input type="{{ $field->field_type === 'datetime' ? 'datetime-local' : 'date' }}"
                                       name="custom_{{ $field->id }}" value="{{ $value }}"
                                       class="form-control" {{ $field->is_required ? 'required' : '' }}>
                            @endif

                            @error("custom_{$field->id}")
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

        </div>

        {{-- ── Right Column ────────────────────────────────────────── --}}
        <div class="col-lg-4">

            {{-- Lead Meta --}}
            <div class="lp-card mb-4">
                <div class="lp-card-header">
                    <span><i class="bi bi-gear me-2 text-primary"></i>Lead Details</span>
                </div>
                <div class="lp-card-body">

                    <div class="mb-3">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                            @foreach($statuses as $s)
                            <option value="{{ $s->value }}"
                                {{ old('status', $lead->status ?? 'no_answer') === $s->value ? 'selected' : '' }}>
                                {{ $s->label }}
                            </option>
                            @endforeach
                        </select>
                        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    @if(!empty($salesReps) && count($salesReps) > 0)
                    <div class="mb-3">
                        <label class="form-label">Assign To</label>
                        <select name="assigned_to" class="form-select" data-select2>
                            <option value="">— Unassigned —</option>
                            @foreach($salesReps as $rep)
                            <option value="{{ $rep->id }}"
                                {{ old('assigned_to', $lead->assigned_to ?? '') == $rep->id ? 'selected' : '' }}>
                                {{ $rep->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                </div>
            </div>

            {{-- Actions --}}
            <div class="lp-card">
                <div class="lp-card-body">
                    <button type="submit" class="btn-primary-lp w-100 justify-content-center mb-2">
                        <i class="bi bi-{{ isset($lead) ? 'check-lg' : 'plus-circle' }}"></i>
                        {{ isset($lead) ? 'Update Lead' : 'Create Lead' }}
                    </button>
                    <a href="{{ route('leads.index') }}" class="btn btn-outline-secondary w-100" style="border-radius:9px; font-size:13.5px;">
                        Cancel
                    </a>

                    @if(isset($lead))
                    <hr style="margin: 14px 0;">
                    <div style="font-size:12px; color:var(--lp-muted);">
                        <div class="d-flex justify-content-between mb-1">
                            <span>Created by</span>
                            <strong>{{ $lead->creator?->name }}</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-1">
                            <span>Created</span>
                            <strong>{{ $lead->created_at->format('M d, Y H:i') }}</strong>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span>Last updated</span>
                            <strong>{{ $lead->updated_at->diffForHumans() }}</strong>
                        </div>
                    </div>
                    @endif
                </div>
            </div>

        </div>
    </div>

</form>
</div>
</div>
@endsection