@extends('site_builder.layouts.app')

@section('title', 'Hizmetler · Sihirbaz')

@section('content')
    @include('site_builder.wizard._steps', ['current' => 3])

    @php
        $initialRows = $services->isNotEmpty()
            ? $services->map(fn ($s) => [
                'title' => $s->title,
                'duration_minutes' => $s->duration_minutes,
                'price' => $s->price,
                'is_ai_available' => (bool) $s->is_ai_available,
            ])->values()->all()
            : [
                ['title' => '', 'duration_minutes' => 45, 'price' => 0, 'is_ai_available' => false],
                ['title' => '', 'duration_minutes' => 45, 'price' => 0, 'is_ai_available' => false],
                ['title' => '', 'duration_minutes' => 45, 'price' => 0, 'is_ai_available' => false],
            ];
        $placeholders = ['Natal Harita Yorumu', 'İlişki & Sinastri Analizi', 'Kariyer Astrolojisi'];
    @endphp

    <h1 class="font-display text-2xl font-semibold text-ink-900">Hizmetler</h1>
    <p class="mt-2 text-sm text-ink-700">Danışanlarına sunduğun hizmetleri ve fiyatlarını ekle.</p>

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

    <form
        method="POST"
        action="{{ route('sitebuilder.wizard.services.save') }}"
        class="mt-8 space-y-5"
        x-data="{
            rows: {{ Illuminate\Support\Js::from($initialRows) }},
            placeholders: {{ Illuminate\Support\Js::from($placeholders) }},
            addRow() {
                this.rows.push({ title: '', duration_minutes: 45, price: 0, is_ai_available: false });
            },
            removeRow(index) {
                this.rows.splice(index, 1);
            },
        }"
    >
        @csrf

        <template x-for="(row, index) in rows" :key="index">
            <div class="rounded-xl border border-brand-100 bg-white p-4 shadow-sm">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-12 sm:items-end">
                    <div class="sm:col-span-5">
                        <label class="block text-sm font-medium text-ink-800">Hizmet Adı</label>
                        <input
                            type="text"
                            :name="`services[${index}][title]`"
                            x-model="row.title"
                            :placeholder="placeholders[index % placeholders.length]"
                            required
                            class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                        >
                    </div>

                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-ink-800">Süre (dk)</label>
                        <input
                            type="number"
                            :name="`services[${index}][duration_minutes]`"
                            x-model.number="row.duration_minutes"
                            min="15"
                            max="480"
                            required
                            class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                        >
                    </div>

                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-ink-800">Fiyat (₺)</label>
                        <input
                            type="number"
                            :name="`services[${index}][price]`"
                            x-model.number="row.price"
                            min="0"
                            required
                            class="mt-1 block w-full rounded-lg border border-brand-200 bg-white px-3 py-2 text-sm text-ink-900 shadow-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
                        >
                    </div>

                    <div class="flex items-center gap-2 sm:col-span-2">
                        <input
                            type="checkbox"
                            :name="`services[${index}][is_ai_available]`"
                            value="1"
                            x-model="row.is_ai_available"
                            class="h-4 w-4 rounded border-brand-300 text-brand-600 focus:ring-brand-500"
                        >
                        <label class="text-sm text-ink-700">AI Destekli</label>
                    </div>

                    <div class="sm:col-span-1">
                        <button
                            type="button"
                            @click="removeRow(index)"
                            class="w-full rounded-lg border border-red-200 px-3 py-2 text-xs font-semibold text-red-600 transition hover:bg-red-50"
                        >
                            Hizmet Sil
                        </button>
                    </div>
                </div>
            </div>
        </template>

        <button
            type="button"
            @click="addRow()"
            class="w-full rounded-lg border border-dashed border-brand-300 px-4 py-2.5 text-sm font-semibold text-brand-700 transition hover:bg-brand-50"
        >
            + Hizmet Ekle
        </button>

        <button
            type="submit"
            class="w-full rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white shadow-glow transition hover:bg-brand-700 sm:w-auto"
        >
            Devam Et
        </button>
    </form>
@endsection