@extends('layouts.app', ['title' => 'Proyecto · '.$project->name])

@section('header_actions')
<a class="btn btn-ghost" href="{{ route('projects.index') }}"><i class="fa-solid fa-arrow-left"></i> Proyectos</a>
<button class="btn btn-primary" type="button" data-modal-open="modal-add-manzana"><i class="fa-solid fa-th-large"></i> Nueva manzana</button>
@endsection

@section('content')
@if($project->logo_path)
    <div class="card project-logo-show" style="margin-bottom:14px;display:flex;gap:12px;align-items:center">
        <img src="{{ project_logo_url($project->logo_path) }}" alt="Logo {{ $project->name }}" style="width:64px;height:64px;border-radius:16px;object-fit:contain;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:6px">
        <div><div class="card-title">{{ $project->name }}</div><div class="sub">Logotipo activo. Se usa en tarjetas de vinculación y en la Portada de contratos. Recomendado para portada: 1600 x 1200 px (4:3), PNG/JPG/SVG con fondo blanco o transparente.</div><div class="sub" style="margin-top:4px">INE depositario: {{ $project->depositario_ine_front_path ? 'frente cargado' : 'frente pendiente' }} · {{ $project->depositario_ine_back_path ? 'reverso cargado' : 'reverso pendiente' }}</div></div>
    </div>
@endif
@php
    $manzanas = $project->manzanaList ?? collect();
    $allLotes = $manzanas->flatMap(fn ($m) => $m->loteList ?? collect());
    $totalLotes = $allLotes->count();
    $disponibles = $allLotes->where('estado', 'Disponible')->count();
    $apartados = $allLotes->where('estado', 'Apartado')->count();
    $vendidos = $allLotes->where('estado', 'Vendido')->count();
    $valorTotal = (float) $allLotes->sum(fn ($l) => (float) ($l->precio ?? 0));
    $estadoBadge = fn ($e) => $e === 'Vendido' ? 'blue' : ($e === 'Apartado' ? 'amber' : 'green');
@endphp

<div class="sub" style="margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:600">
    <a href="{{ route('projects.index') }}" style="color:inherit;text-decoration:none"><i class="fa-solid fa-layer-group text-gold"></i> Proyectos</a>
    <i class="fa-solid fa-chevron-right" style="font-size:9px;opacity:.5"></i>
    <span style="color:var(--text)">{{ $project->name }}</span>
    <i class="fa-solid fa-chevron-right" style="font-size:9px;opacity:.4"></i> Manzanas y lotes
</div>

<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-layer-group"></i><div class="metric-val">{{ $project->name }}</div><div class="metric-label">{{ $project->location ?: 'Sin ubicación' }}{{ $project->depositario_nombre ? ' · Dep.: '.$project->depositario_nombre : '' }}</div></div>
    <div class="metric"><i class="fa-solid fa-th-large"></i><div class="metric-val">{{ $manzanas->count() }}</div><div class="metric-label">Manzanas</div></div>
    <div class="metric"><i class="fa-solid fa-border-all"></i><div class="metric-val">{{ $totalLotes }}</div><div class="metric-label">Lotes</div></div>
    <div class="metric"><i class="fa-solid fa-coins"></i><div class="metric-val text-gold">${{ number_format($valorTotal,0) }}</div><div class="metric-label">Valor de lotes</div></div>
</div>

<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $disponibles }}</div><div class="metric-label">Disponibles</div></div>
    <div class="metric"><i class="fa-solid fa-clock"></i><div class="metric-val text-gold">{{ $apartados }}</div><div class="metric-label">Apartados</div></div>
    <div class="metric"><i class="fa-solid fa-handshake"></i><div class="metric-val">{{ $vendidos }}</div><div class="metric-label">Vendidos</div></div>
    <div class="metric"><i class="fa-solid fa-chart-simple"></i><div class="metric-val">{{ $totalLotes ? round(($vendidos / $totalLotes) * 100) : 0 }}%</div><div class="metric-label">Avance de venta</div></div>
</div>

@forelse($manzanas as $manzana)
    <div class="card" style="margin-bottom:14px">
        <div class="card-head">
            <div>
                <div class="card-title"><i class="fa-solid fa-th-large text-gold"></i> Manzana {{ $manzana->nombre }}</div>
                <div class="sub">{{ $manzana->loteList->count() }} lote(s){{ $manzana->notas ? ' · '.$manzana->notas : '' }}</div>
            </div>
            <div class="row" style="gap:6px">
                <button class="btn btn-sm btn-primary" type="button" data-modal-open="modal-add-lote-{{ $manzana->id }}"><i class="fa-solid fa-plus"></i> Agregar lote</button>
                <form method="post" action="{{ route('manzanas.destroy', $manzana) }}" onsubmit="return confirm('¿Eliminar la manzana {{ $manzana->nombre }} y sus lotes?')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-danger" type="submit" data-tip="Eliminar manzana"><i class="fa-solid fa-trash"></i></button>
                </form>
            </div>
        </div>

        @if($manzana->loteList->count())
            <div class="table-wrap">
                <table>
                    <thead>
                    <tr>
                        <th>Lote</th>
                        <th>Medidas</th>
                        <th>Uso</th>
                        <th>Precio</th>
                        <th>Estado</th>
                        <th style="width:1%;text-align:right">Acciones</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($manzana->loteList as $lote)
                        <tr>
                            <td><strong>{{ $lote->numero }}</strong>@if($lote->notas)<div class="sub" style="font-size:10px">{{ $lote->notas }}</div>@endif</td>
                            <td>
                                {{ $lote->superficie_m2 ? number_format((float) $lote->superficie_m2, 2).' m²' : '—' }}
                                @if($lote->frente || $lote->fondo)
                                    <div class="sub" style="font-size:10px">{{ $lote->frente ?: '—' }} × {{ $lote->fondo ?: '—' }} m{{ $lote->orientacion ? ' · '.$lote->orientacion : '' }}</div>
                                @endif
                            </td>
                            <td>{{ $lote->uso_suelo ?: '—' }}</td>
                            <td>${{ number_format((float) $lote->precio, 2) }}</td>
                            <td><span class="badge {{ $estadoBadge($lote->estado) }}">{{ $lote->estado }}</span></td>
                            <td style="text-align:right">
                                <div class="row" style="gap:6px;justify-content:flex-end">
                                    <button class="btn btn-sm" type="button" data-modal-open="modal-edit-lote-{{ $lote->id }}" data-tip="Editar"><i class="fa-solid fa-pen"></i></button>
                                    <form method="post" action="{{ route('lotes.destroy', $lote) }}" onsubmit="return confirm('¿Eliminar el lote {{ $lote->numero }}?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-sm btn-danger" type="submit" data-tip="Eliminar"><i class="fa-solid fa-trash"></i></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="sub" style="padding:14px;text-align:center">Esta manzana aún no tiene lotes.</div>
        @endif
    </div>
@empty
    <div class="card">
        <div class="sub" style="text-align:center;padding:34px">
            <i class="fa-solid fa-th-large" style="font-size:40px;opacity:.3;display:block;margin-bottom:10px"></i>
            Este proyecto no tiene manzanas. Crea la primera manzana y luego agrega sus lotes.
        </div>
    </div>
@endforelse
@endsection

@php
    $maxManzanasProyecto = max(1, min(26, (int) ($project->manzanas ?? 1)));
    $letrasPermitidas = collect(range('A', chr(ord('A') + $maxManzanasProyecto - 1)));
    $letrasUsadas = $manzanas->pluck('letra')->filter()->map(fn($l) => mb_strtoupper((string) $l))->values();
    $letrasDisponibles = $letrasPermitidas->reject(fn($l) => $letrasUsadas->contains($l))->values();
@endphp

@section('modals')
<div class="modal-backdrop" id="modal-add-manzana">
    <div class="modal narrow">
        <div class="modal-head"><h3><i class="fa-solid fa-th-large text-gold"></i> Nueva manzana</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('manzanas.store', $project) }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Letra de manzana *
                        <select name="letra" required>
                            <option value="">— Selecciona letra —</option>
                            @foreach($letrasDisponibles as $letra)
                                <option value="{{ $letra }}">{{ $letra }}</option>
                            @endforeach
                        </select>
                    </label>
                    <input type="hidden" name="numero" value="">
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit" @disabled($letrasDisponibles->isEmpty())><i class="fa-solid fa-floppy-disk"></i> Crear manzana</button>
            </div>
        </form>
    </div>
</div>

@foreach($manzanas as $manzana)
<div class="modal-backdrop" id="modal-add-lote-{{ $manzana->id }}">
    <div class="modal narrow">
        <div class="modal-head"><h3><i class="fa-solid fa-border-all text-gold"></i> Nuevo lote · Manzana {{ $manzana->nombre }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('lotes.store', $manzana) }}">
            @csrf
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Número de lote *<input name="numero" required inputmode="numeric" pattern="[0-9]+" placeholder="Ej. 12" title="Solo números"></label>
                    <label>Frente (m)<input name="frente" type="number" step="0.01" min="0" placeholder="Sobre calle" oninput="loteCalc(this)"></label>
                    <label>Fondo (m)<input name="fondo" type="number" step="0.01" min="0" placeholder="Profundidad" oninput="loteCalc(this)"></label>
                    <label>Superficie (m²)<input name="superficie_m2" type="number" step="0.01" min="0" placeholder="Frente × fondo"></label>
                    <label>Precio del lote *<input name="precio" type="number" step="0.01" min="0.01" placeholder="Obligatorio" required></label>
                    <label>Estado<select name="estado">@foreach($estados as $estado)<option value="{{ $estado }}">{{ $estado }}</option>@endforeach</select></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i> Agregar lote</button>
            </div>
        </form>
    </div>
</div>

@foreach($manzana->loteList as $lote)
<div class="modal-backdrop" id="modal-edit-lote-{{ $lote->id }}">
    <div class="modal narrow">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar lote {{ $lote->numero }}</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('lotes.update', $lote) }}">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid two">
                    <label>Número de lote *<input name="numero" value="{{ $lote->numero }}" required inputmode="numeric" pattern="[0-9]+" title="Solo números"></label>
                    <label>Frente (m)<input name="frente" type="number" step="0.01" min="0" value="{{ $lote->frente }}" oninput="loteCalc(this)"></label>
                    <label>Fondo (m)<input name="fondo" type="number" step="0.01" min="0" value="{{ $lote->fondo }}" oninput="loteCalc(this)"></label>
                    <label>Superficie (m²)<input name="superficie_m2" type="number" step="0.01" min="0" value="{{ $lote->superficie_m2 }}"></label>
                    <label>Precio del lote *<input name="precio" type="number" step="0.01" min="0.01" value="{{ $lote->precio }}" required></label>
                    <label>Estado<select name="estado">@foreach($estados as $estado)<option value="{{ $estado }}" @selected($lote->estado === $estado)>{{ $estado }}</option>@endforeach</select></label>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar lote</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endforeach
@endsection

@push('scripts')
<script>
function loteCalc(el){
    const form = el.closest('form');
    if (!form) return;
    const frente = parseFloat(form.querySelector('[name=frente]')?.value) || 0;
    const fondo = parseFloat(form.querySelector('[name=fondo]')?.value) || 0;
    const sup = form.querySelector('[name=superficie_m2]');
    if (sup && frente > 0 && fondo > 0) sup.value = (frente * fondo).toFixed(2);
}
</script>
@endpush