@extends('layouts.dashboard.inface', ['section' => 'developments'])

@section('navbar-buttons')
    <a href="{{ route('realEstate.development.show', ['id' => $development->id]) }}"
        class="flex h-10 items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
        <span class="material-symbols-outlined !text-[20px]">arrow_back</span>
        Volver al fraccionamiento
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light p-4 dark:bg-background-dark md:p-6">
        <div class="mx-auto max-w-6xl space-y-6">
            <header>
                <p class="text-sm font-bold text-primary">{{ $development->name }}</p>
                <h1 class="mt-1 text-3xl font-black tracking-tight text-slate-900 dark:text-white">Etapas del fraccionamiento</h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500 dark:text-slate-400">
                    Cada etapa es una ficha independiente: sus modelos, precios, amenidades, planes y lotes no se mezclan
                    con los de otra etapa. La ficha principal conserva la identidad general del proyecto.
                </p>
            </header>

            @if (session('success'))
                <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700">
                    {{ session('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
                    <ul class="list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="grid gap-4 sm:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-xs font-black uppercase tracking-wide text-slate-500">Etapas registradas</p>
                    <p class="mt-2 text-3xl font-black text-slate-900 dark:text-white">{{ count($stages) }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-xs font-black uppercase tracking-wide text-slate-500">Etapas activas</p>
                    <p class="mt-2 text-3xl font-black text-emerald-600">{{ collect($stages)->where('is_active', true)->count() }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <p class="text-xs font-black uppercase tracking-wide text-slate-500">Control de inventario</p>
                    <p class="mt-2 text-lg font-black {{ $access['inventory_managed'] ? 'text-emerald-700' : 'text-amber-700' }}">
                        {{ $access['inventory_managed'] ? 'Interno por etapa' : 'Externo por etapa' }}
                    </p>
                </div>
            </div>

            @if ($canManageStages)
                <details class="group rounded-2xl border border-primary/30 bg-primary/5 shadow-sm" @if ($errors->any()) open @endif>
                    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 p-5 md:p-6">
                        <div class="flex items-center gap-3">
                            <span class="flex size-11 items-center justify-center rounded-xl bg-primary text-white">
                                <span class="material-symbols-outlined">add</span>
                            </span>
                            <div>
                                <h2 class="font-black text-slate-900 dark:text-white">Crear una nueva etapa</h2>
                                <p class="text-sm text-slate-500">Se crea sin lotes ni configuración financiera para evitar herencias accidentales.</p>
                            </div>
                        </div>
                        <span class="material-symbols-outlined transition-transform group-open:rotate-180">expand_more</span>
                    </summary>
                    <form method="POST" action="{{ route('realEstate.developmentStages.store', $development) }}"
                        class="grid gap-5 border-t border-primary/20 bg-white p-5 dark:bg-slate-900 md:grid-cols-2 md:p-6">
                        @csrf
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Nombre de la etapa *</label>
                            <input name="name" value="{{ old('name') }}" required maxlength="255" placeholder="Ej. Primera etapa"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                        </div>
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Código *</label>
                            <input name="code" value="{{ old('code') }}" required maxlength="100" placeholder="ET-01"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm uppercase dark:border-slate-700 dark:bg-slate-800">
                        </div>
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Fecha de inicio</label>
                            <input type="date" name="start_date" value="{{ old('start_date') }}"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                        </div>
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Fecha estimada de cierre</label>
                            <input type="date" name="end_date" value="{{ old('end_date') }}"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                        </div>
                        <div>
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Orden</label>
                            <input type="number" min="0" max="10000" name="sort_order" value="{{ old('sort_order', count($stages) + 1) }}"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                        </div>
                        <div class="md:col-span-2">
                            <label class="text-xs font-black uppercase tracking-wide text-slate-500">Descripción</label>
                            <textarea name="description" rows="2" maxlength="3000"
                                class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">{{ old('description') }}</textarea>
                        </div>
                        <label class="flex items-center gap-3 rounded-xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:text-slate-200 md:col-span-2">
                            <input type="hidden" name="copy_catalog" value="0">
                            <input type="checkbox" name="copy_catalog" value="1" @checked(old('copy_catalog', true))
                                class="size-5 rounded border-slate-300 text-primary focus:ring-primary">
                            Copiar modelos y amenidades como punto de partida
                        </label>
                        <input type="hidden" name="is_active" value="1">
                        <div class="md:col-span-2 flex justify-end">
                            <button class="inline-flex items-center gap-2 rounded-xl bg-primary px-6 py-3 text-sm font-black text-white">
                                <span class="material-symbols-outlined !text-[19px]">add_business</span>
                                Crear etapa independiente
                            </button>
                        </div>
                    </form>
                </details>
            @else
                <div class="rounded-2xl border border-blue-200 bg-blue-50 p-5 text-sm text-blue-800 dark:border-blue-900/60 dark:bg-blue-900/20 dark:text-blue-200">
                    Las etapas son de solo lectura porque la ficha principal es administrada por otra inmobiliaria.
                </div>
            @endif

            <section class="space-y-4">
                <div class="flex items-center justify-between gap-3">
                    <h2 class="text-xl font-black text-slate-900 dark:text-white">Configuraciones por etapa</h2>
                    <span class="text-sm text-slate-500">Vista consolidada del proyecto</span>
                </div>

                <div class="grid gap-4 lg:grid-cols-2">
                    @forelse ($stages as $stage)
                        @php
                            $configurationUrl = null;
                            if ($stage['can_manage_inventory'] ?? false) {
                                $configurationUrl = route('realEstate.development.edit', ['id' => $stage['stage_development_id']]);
                            } elseif ((($stage['can_manage_catalog'] ?? false) || ($stage['can_manage_promotion'] ?? false)) && $stage['promotion_id']) {
                                $configurationUrl = route('realEstate.developmentPromotions.edit', ['promotion' => $stage['promotion_id']]);
                            }
                        @endphp
                        <article class="rounded-2xl border {{ $stage['is_active'] ? 'border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900' : 'border-slate-300 bg-slate-50 opacity-75 dark:border-slate-700 dark:bg-slate-900/70' }} p-5 shadow-sm">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-700 dark:bg-slate-800 dark:text-slate-300">{{ $stage['code'] }}</span>
                                        <span class="rounded-full {{ $stage['is_active'] ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-700' }} px-2.5 py-1 text-xs font-bold">
                                            {{ $stage['is_active'] ? 'Activa' : 'Inactiva' }}
                                        </span>
                                        <span class="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-amber-800">{{ $stage['availability_label'] }}</span>
                                    </div>
                                    <h3 class="mt-3 text-lg font-black text-slate-900 dark:text-white">{{ $stage['name'] }}</h3>
                                    @if ($stage['description'])
                                        <p class="mt-1 text-sm text-slate-500">{{ $stage['description'] }}</p>
                                    @endif
                                </div>
                                <span class="text-xs font-bold text-slate-400">#{{ $stage['sort_order'] }}</span>
                            </div>

                            <dl class="mt-5 grid grid-cols-2 gap-3 text-sm sm:grid-cols-4">
                                <div><dt class="text-xs font-bold text-slate-500">Modelos</dt><dd class="mt-1 font-black text-slate-900 dark:text-white">{{ $stage['models_count'] }}</dd></div>
                                <div><dt class="text-xs font-bold text-slate-500">Precio desde</dt><dd class="mt-1 font-black text-slate-900 dark:text-white">{{ $stage['minimum_price'] !== null ? '$'.number_format($stage['minimum_price'], 0).' '.$stage['currency'] : 'Por confirmar' }}</dd></div>
                                <div><dt class="text-xs font-bold text-slate-500">Lotes</dt><dd class="mt-1 font-black text-slate-900 dark:text-white">{{ $stage['lots']['total'] ?? 'Externo' }}</dd></div>
                                <div><dt class="text-xs font-bold text-slate-500">Disponibles</dt><dd class="mt-1 font-black text-slate-900 dark:text-white">{{ $stage['lots']['available'] ?? 'Consultar' }}</dd></div>
                            </dl>

                            <div class="mt-5 flex flex-wrap gap-3 border-t border-slate-100 pt-4 dark:border-slate-800">
                                @if ($stage['is_active'])
                                    <a href="{{ route('realEstate.development.show', ['id' => $stage['stage_development_id']]) }}" class="text-sm font-bold text-slate-700 hover:text-primary dark:text-slate-200">Ver etapa</a>
                                @endif
                                @if ($configurationUrl)
                                    <a href="{{ $configurationUrl }}" class="text-sm font-bold text-primary hover:underline">Configurar etapa</a>
                                @endif
                            </div>

                            @if ($canManageStages)
                                <details class="group mt-4 rounded-xl border border-slate-200 dark:border-slate-700">
                                    <summary class="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-bold text-slate-700 dark:text-slate-200">
                                        Editar datos de la etapa
                                        <span class="material-symbols-outlined !text-[18px] transition-transform group-open:rotate-180">expand_more</span>
                                    </summary>
                                    <form method="POST" action="{{ route('realEstate.developmentStages.update', ['stage' => $stage['id']]) }}" class="grid gap-3 border-t border-slate-200 p-4 dark:border-slate-700 sm:grid-cols-2">
                                        @csrf
                                        @method('PUT')
                                        <input name="name" value="{{ $stage['name'] }}" required maxlength="255" class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800" aria-label="Nombre de la etapa">
                                        <input name="code" value="{{ $stage['code'] }}" required maxlength="100" class="rounded-lg border-slate-300 text-sm uppercase dark:border-slate-700 dark:bg-slate-800" aria-label="Código de la etapa">
                                        <input type="date" name="start_date" value="{{ $stage['start_date'] }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800" aria-label="Inicio">
                                        <input type="date" name="end_date" value="{{ $stage['end_date'] }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800" aria-label="Cierre">
                                        <input type="number" min="0" max="10000" name="sort_order" value="{{ $stage['sort_order'] }}" class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800" aria-label="Orden">
                                        <textarea name="description" rows="2" maxlength="3000" class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800 sm:col-span-2" aria-label="Descripción">{{ $stage['description'] }}</textarea>
                                        <label class="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200 sm:col-span-2">
                                            <input type="hidden" name="is_active" value="0">
                                            <input type="checkbox" name="is_active" value="1" @checked($stage['is_active']) class="rounded text-primary">
                                            Etapa activa y visible
                                        </label>
                                        <button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-bold text-white dark:bg-slate-100 dark:text-slate-900 sm:col-span-2">Guardar datos</button>
                                    </form>
                                    <form method="POST" action="{{ route('realEstate.developmentStages.destroy', ['stage' => $stage['id']]) }}"
                                        onsubmit="return confirm('¿Archivar esta etapa? Su configuración histórica se conservará.')"
                                        class="border-t border-slate-200 p-4 dark:border-slate-700">
                                        @csrf
                                        @method('DELETE')
                                        <button class="text-sm font-bold text-rose-600 hover:underline">Archivar etapa</button>
                                    </form>
                                </details>
                            @endif
                        </article>
                    @empty
                        <div class="rounded-2xl border border-dashed border-slate-300 p-10 text-center text-sm text-slate-500 dark:border-slate-700 lg:col-span-2">
                            Este fraccionamiento todavía no tiene etapas. Su configuración actual continúa funcionando como configuración general.
                        </div>
                    @endforelse
                </div>
            </section>
        </div>
    </div>
@endsection