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

@section('navbar-buttons')
    <a href="{{ route('realEstate.developmentPromotions.create', ['real_estate_agency_id' => $selectedAgencyId]) }}"
        aria-label="Registrar fraccionamiento externo"
        class="flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark">
        <span class="material-symbols-outlined !text-[20px]">add</span>
        <span class="hidden sm:inline">Registrar externo</span>
    </a>
    <a href="{{ route('realEstate.developments') }}"
        class="hidden md: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>
        Fraccionamientos
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light p-6 dark:bg-background-dark">
        <div class="mx-auto flex max-w-[1400px] flex-col gap-6">
            <div>
                <p class="text-sm font-semibold text-primary">Catálogo compartido</p>
                <h1 class="mt-1 text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                    Fraccionamientos promovidos
                </h1>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-500 dark:text-slate-400">
                    Vincula un desarrollo registrado por otra inmobiliaria o captura una ficha externa con sus modelos,
                    características y precios. La disponibilidad siempre se consulta con el desarrollador.
                </p>
            </div>

            @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">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="GET" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end">
                    @if (count($agencies) > 1)
                        <div>
                            <label class="text-xs font-bold uppercase tracking-wide text-slate-500" for="promotionAgency">
                                Inmobiliaria promotora
                            </label>
                        <select id="promotionAgency" name="real_estate_agency_id"
                            class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800"
                            required>
                            <option value="">Selecciona una inmobiliaria</option>
                            @foreach ($agencies as $agency)
                                <option value="{{ $agency['id'] }}" @selected((int) $selectedAgencyId === (int) $agency['id'])>
                                    {{ $agency['name'] }}
                                </option>
                            @endforeach
                        </select>
                        </div>
                    @elseif ($selectedAgencyId)
                        <input type="hidden" name="real_estate_agency_id" value="{{ $selectedAgencyId }}">
                    @endif
                    <div>
                        <label class="text-xs font-bold uppercase tracking-wide text-slate-500" for="promotionSearch">Buscar</label>
                        <input id="promotionSearch" name="q" value="{{ $search }}" maxlength="100"
                            placeholder="Fraccionamiento, desarrollador o referencia"
                            class="mt-2 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                    </div>
                    <button class="rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-bold text-white dark:bg-slate-100 dark:text-slate-900">Aplicar</button>
                </div>
            </form>

            @if ($selectedAgencyId)
                <div class="grid gap-3 sm:grid-cols-2">
                    <a href="{{ route('realEstate.developmentPromotions.create', ['real_estate_agency_id' => $selectedAgencyId]) }}"
                        class="group rounded-2xl border border-primary/30 bg-primary/5 p-5 transition hover:border-primary hover:bg-primary/10">
                        <span class="material-symbols-outlined text-primary">add_business</span>
                        <h2 class="mt-3 font-black text-slate-900 dark:text-white">Registrar una ficha externa</h2>
                        <p class="mt-1 text-sm text-slate-500">Captura un fraccionamiento que todavía no existe en la plataforma.</p>
                    </a>
                    <a href="#catalogo-disponible"
                        class="group rounded-2xl border border-amber-300 bg-amber-50 p-5 transition hover:border-amber-500 hover:bg-amber-100 dark:border-amber-900/70 dark:bg-amber-900/20">
                        <span class="material-symbols-outlined text-amber-700 dark:text-amber-400">link</span>
                        <h2 class="mt-3 font-black text-slate-900 dark:text-white">Vincular desde el catálogo</h2>
                        <p class="mt-1 text-sm text-slate-500">Promueve una ficha que otra inmobiliaria ya mantiene actualizada.</p>
                    </a>
                </div>
            @endif

            <section class="space-y-3">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-black text-slate-900 dark:text-white">Promociones administradas</h2>
                    <span class="text-sm text-slate-500">{{ count($promotions) }} registrados</span>
                </div>
                <div class="grid gap-4 lg:grid-cols-2">
                    @forelse ($promotions as $promotion)
                        <article class="rounded-2xl border {{ $promotion['is_active'] ? 'border-slate-200 dark:border-slate-800' : 'border-slate-300 bg-slate-50 opacity-80 dark:border-slate-700 dark:bg-slate-900/70' }} bg-white p-5 shadow-sm dark:bg-slate-900">
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <span class="inline-flex rounded-full {{ $promotion['is_active'] ? 'bg-amber-100 text-amber-800' : 'bg-slate-200 text-slate-700' }} px-2.5 py-1 text-xs font-bold">
                                        {{ $promotion['is_active'] ? 'Promoción activa' : 'Promoción suspendida' }}
                                    </span>
                                    <span class="ml-1 inline-flex rounded-full bg-sky-100 px-2.5 py-1 text-xs font-bold text-sky-800">
                                        Disponibilidad externa
                                    </span>
                                    <h3 class="mt-3 text-lg font-black text-slate-900 dark:text-white">
                                        {{ $promotion['development']['name'] }}
                                    </h3>
                                    <p class="mt-1 text-sm text-slate-500">
                                        Desarrolla: {{ $promotion['development']['developer'] ?: 'Sin especificar' }}
                                    </p>
                                    <p class="text-sm text-slate-500">
                                        Promueve: {{ $promotion['agency']['name'] ?? 'Sin especificar' }}
                                    </p>
                                </div>
                                <div class="flex items-center gap-1">
                                    <a href="{{ route('realEstate.developmentPromotions.edit', $promotion['id']) }}"
                                        class="rounded-lg p-2 text-primary hover:bg-primary/10" title="Editar promoción">
                                        <span class="material-symbols-outlined">edit</span>
                                    </a>
                                    <form method="POST"
                                        action="{{ route('realEstate.developmentPromotions.destroy', $promotion['id']) }}"
                                        onsubmit="return confirm('¿Retirar este fraccionamiento del catálogo de promoción? Esta acción no elimina la ficha del desarrollador.')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="rounded-lg p-2 text-rose-600 hover:bg-rose-50" title="Retirar promoción">
                                            <span class="material-symbols-outlined">delete</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <dl class="mt-4 grid gap-2 text-xs text-slate-500 sm:grid-cols-2">
                                <div><dt class="font-bold">Referencia</dt><dd>{{ $promotion['external_reference'] ?: 'Sin referencia' }}</dd></div>
                                <div><dt class="font-bold">Última verificación</dt><dd>{{ $promotion['availability_checked_at'] ? \Illuminate\Support\Carbon::parse($promotion['availability_checked_at'])->format('d/m/Y H:i') : 'Sin verificar' }}</dd></div>
                            </dl>
                            <div class="mt-4 flex flex-wrap gap-2">
                                @foreach (array_slice($promotion['development']['unit_models'], 0, 4) as $model)
                                    <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300">
                                        {{ $model['name'] }}
                                    </span>
                                @endforeach
                            </div>
                            @if ($promotion['availability_url'])
                                <a href="{{ $promotion['availability_url'] }}" target="_blank" rel="noopener"
                                    class="mt-4 inline-flex items-center gap-1 text-sm font-bold text-primary hover:underline">
                                    Consultar disponibilidad
                                    <span class="material-symbols-outlined !text-[16px]">open_in_new</span>
                                </a>
                            @endif
                            <div class="mt-4 flex flex-wrap items-center gap-3 border-t border-slate-100 pt-4 dark:border-slate-800">
                                @if ($promotion['is_active'])
                                    <a href="{{ route('realEstate.development.show', $promotion['development_id']) }}"
                                        class="text-sm font-bold text-slate-700 hover:text-primary dark:text-slate-200">Ver ficha</a>
                                @endif
                                <a href="{{ route('realEstate.developmentPromotions.edit', $promotion['id']) }}"
                                    class="text-sm font-bold text-primary hover:underline">
                                    {{ $promotion['can_manage_catalog'] ? 'Administrar ficha, modelos y características' : 'Editar datos de promoción' }}
                                </a>
                            </div>
                        </article>
                    @empty
                        <div class="rounded-2xl border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 dark:border-slate-700 lg:col-span-2">
                            Aún no hay fraccionamientos externos en promoción.
                        </div>
                    @endforelse
                </div>
            </section>

            @if ($selectedAgencyId)
                <section id="catalogo-disponible" class="scroll-mt-6 space-y-3">
                    <div>
                        <h2 class="text-xl font-black text-slate-900 dark:text-white">Fraccionamientos disponibles</h2>
                        <p class="mt-1 text-sm text-slate-500">Elige un desarrollo de otra inmobiliaria para incorporarlo al catálogo comercial.</p>
                    </div>
                    <div class="grid gap-4 lg:grid-cols-2">
                        @forelse ($catalog as $development)
                            <form method="POST" action="{{ route('realEstate.developmentPromotions.store') }}"
                                class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                                @csrf
                                <input type="hidden" name="development_id" value="{{ $development['id'] }}">
                                <input type="hidden" name="real_estate_agency_id" value="{{ $selectedAgencyId }}">
                                <h3 class="text-lg font-black text-slate-900 dark:text-white">{{ $development['name'] }}</h3>
                                <p class="mt-1 text-sm text-slate-500">{{ $development['developer'] ?: 'Desarrollador sin especificar' }}</p>
                                <p class="mt-1 text-xs text-slate-400">{{ $development['models_count'] }} modelos · {{ count($development['features']) }} características</p>
                                <div class="mt-4 grid gap-3 md:grid-cols-2">
                                    <input name="external_reference" placeholder="Referencia externa"
                                        class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                    <input name="availability_url" type="url" placeholder="URL de disponibilidad"
                                        class="rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800">
                                </div>
                                <textarea name="notes" rows="2" placeholder="Notas para el equipo comercial"
                                    class="mt-3 w-full rounded-lg border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800"></textarea>
                                <button class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white">
                                    <span class="material-symbols-outlined !text-[18px]">campaign</span>
                                    Agregar a promoción
                                </button>
                            </form>
                        @empty
                            <div class="rounded-2xl border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 dark:border-slate-700 lg:col-span-2">
                                No hay más fraccionamientos externos disponibles.
                            </div>
                        @endforelse
                    </div>
                </section>
            @endif
        </div>
    </div>
@endsection