@props([
    'plan' => null,
    'purposes' => [],
    'prospectOptions' => [],
    'defaultItems' => [],
    'formAction' => '',
    'formMethod' => 'POST',
    'requiresResubmit' => false,
])

@php
    $isEdit = strtoupper($formMethod) === 'PATCH';
    $titleValue = old('title', $plan?->title ?? '');
    $planDateValue = old('plan_date', optional($plan?->plan_date)->format('Y-m-d') ?? '');
    $weekStartValue = old('week_start', optional($plan?->week_start)->format('Y-m-d') ?? '');
    $weekEndValue = old('week_end', optional($plan?->week_end)->format('Y-m-d') ?? '');
    $notesValue = old('notes', $plan?->notes ?? '');
@endphp

<form
    method="POST"
    action="{{ $formAction }}"
    class="space-y-6"
    x-data="prospectingPlanForm(@js($defaultItems), @js($prospectOptions))"
    @if ($requiresResubmit)
        onsubmit="return confirm('Saving will resubmit this plan to your manager for approval. Calendar visits are only added after approval. Continue?')"
    @endif
>
    @csrf
    @if ($isEdit)
        @method('PATCH')
    @endif

    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-4">
        <h2 class="text-lg font-semibold text-gray-900">Plan details</h2>

        <div>
            <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
            <input
                type="text"
                name="title"
                id="title"
                required
                maxlength="255"
                value="{{ $titleValue }}"
                class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-[var(--dealer-accent-color)] focus:ring-[var(--dealer-accent-color)] text-sm"
                placeholder="e.g. Week 21 dealership visits"
            >
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <label for="plan_date" class="block text-sm font-medium text-gray-700">Plan date (optional)</label>
                <input type="date" name="plan_date" id="plan_date" value="{{ $planDateValue }}" class="mt-1 block w-full rounded-xl border-gray-300 text-sm">
            </div>
            <div>
                <label for="week_start" class="block text-sm font-medium text-gray-700">Week start (optional)</label>
                <input type="date" name="week_start" id="week_start" value="{{ $weekStartValue }}" class="mt-1 block w-full rounded-xl border-gray-300 text-sm">
            </div>
            <div>
                <label for="week_end" class="block text-sm font-medium text-gray-700">Week end (optional)</label>
                <input type="date" name="week_end" id="week_end" value="{{ $weekEndValue }}" class="mt-1 block w-full rounded-xl border-gray-300 text-sm">
            </div>
        </div>

        <div>
            <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
            <textarea name="notes" id="notes" rows="3" class="mt-1 block w-full rounded-xl border-gray-300 text-sm">{{ $notesValue }}</textarea>
        </div>
    </div>

    <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-4">
        <div class="flex items-center justify-between gap-3">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">Planned visits</h2>
                <p class="mt-1 text-sm text-gray-600">Select a prospect from your pipeline for each visit. Add as many entries as needed.</p>
            </div>
            <button
                type="button"
                class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-semibold text-gray-800 shadow-sm hover:bg-gray-50"
                @click="addItem()"
            >
                Add visit
            </button>
        </div>

        @if (count($prospectOptions) === 0)
            <div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                You have no prospects in your pipeline. <a href="{{ route('leads.prospects') }}" class="font-semibold underline">Add prospects</a> before creating a plan.
            </div>
        @endif

        @error('items')
            <p class="text-sm text-red-600">{{ $message }}</p>
        @enderror

        <template x-for="(item, index) in items" :key="index">
            <div class="rounded-xl border border-gray-200 bg-gray-50 p-4 space-y-3">
                <div class="flex items-center justify-between">
                    <p class="text-sm font-semibold text-gray-800">Visit <span x-text="index + 1"></span></p>
                    <button
                        type="button"
                        class="text-xs font-semibold text-red-600 hover:underline"
                        x-show="items.length > 1"
                        @click="removeItem(index)"
                    >
                        Remove
                    </button>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="sm:col-span-2">
                        <label class="block text-xs font-medium text-gray-700">Prospect *</label>
                        <select
                            class="mt-1 block w-full rounded-lg border-gray-300 text-sm"
                            x-model="item.lead_id"
                            x-bind:name="'items[' + index + '][lead_id]'"
                            required
                            @change="onLeadChange(index)"
                        >
                            <option value="">— Select prospect —</option>
                            <template x-for="prospect in prospectOptions" :key="prospect.id">
                                <option :value="String(prospect.id)" x-text="prospect.label" :selected="String(item.lead_id) === String(prospect.id)"></option>
                            </template>
                        </select>
                        <p class="mt-1 text-xs text-gray-500" x-show="selectedSummary(index)" x-text="selectedSummary(index)"></p>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Planned visit date *</label>
                        <input type="date" class="mt-1 block w-full rounded-lg border-gray-300 text-sm" x-model="item.planned_visit_date" x-bind:name="'items[' + index + '][planned_visit_date]'" required>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Planned visit time</label>
                        <input type="time" class="mt-1 block w-full rounded-lg border-gray-300 text-sm" x-model="item.planned_visit_time" x-bind:name="'items[' + index + '][planned_visit_time]'">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Location</label>
                        <input type="text" class="mt-1 block w-full rounded-lg border-gray-300 text-sm" x-model="item.location" x-bind:name="'items[' + index + '][location]'" maxlength="255">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Purpose</label>
                        <select class="mt-1 block w-full rounded-lg border-gray-300 text-sm" x-model="item.purpose" x-bind:name="'items[' + index + '][purpose]'">
                            <option value="">— Select —</option>
                            @foreach ($purposes as $purpose)
                                <option value="{{ $purpose }}">{{ $purpose }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700">Visit notes</label>
                    <textarea rows="2" class="mt-1 block w-full rounded-lg border-gray-300 text-sm" x-model="item.notes" x-bind:name="'items[' + index + '][notes]'"></textarea>
                </div>
            </div>
        </template>
    </div>

    <div class="flex flex-wrap gap-3 justify-end">
        <a href="{{ route('prospecting-plans.index') }}" class="inline-flex items-center rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold text-gray-700 shadow-sm hover:bg-gray-50">
            Cancel
        </a>
        <button
            type="submit"
            class="inline-flex items-center rounded-xl bg-[var(--dealer-accent-color)] px-4 py-2.5 text-sm font-semibold text-[var(--dealer-accent-text-color)] shadow-sm hover:opacity-95 disabled:opacity-50"
            :disabled="prospectOptions.length === 0"
        >
            @if ($requiresResubmit)
                Save &amp; resubmit
            @elseif ($isEdit)
                Save changes
            @else
                Save draft
            @endif
        </button>
    </div>
</form>