@extends('layouts.app', ['title' => 'Proyectos'])

@section('header_actions')
<button class="btn btn-primary" type="button" data-modal-open="modal-add-project"><i class="fa-solid fa-layer-group"></i> Nuevo proyecto</button>
@endsection


@push('styles')
<style>
.project-file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.project-file-grid label{min-width:0}
.project-file-grid input[type="file"]{width:100%;max-width:100%}
.project-file-grid .sub{display:block;margin-top:6px;line-height:1.32}
@media(max-width:900px){.project-file-grid{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
@php
    $sumSold = (float) $projects->sum(fn ($p) => (float) ($p->sold_amount ?? 0));
    $sumManzanas = (int) $projects->sum(fn ($p) => (int) ($p->manzanas_reales_count ?? $p->manzanas ?? 0));
    $sumLotes = (int) $projects->sum(fn ($p) => (int) ($p->lotes_reales_count ?? $p->lotes ?? $p->units_total ?? 0));
    $sumDisponibles = (int) $projects->sum(fn ($p) => (int) ($p->lotes_disponibles_count ?? 0));
    $sumVendidos = (int) $projects->sum(fn ($p) => (int) ($p->lotes_vendidos_count ?? $p->units_sold ?? 0));
@endphp

<div class="sub" style="margin-bottom:14px;display:flex;align-items:center;gap:8px;font-weight:600">
    <i class="fa-solid fa-layer-group text-gold"></i> Proyectos
    <i class="fa-solid fa-chevron-right" style="font-size:9px;opacity:.5"></i> Manzanas
    <i class="fa-solid fa-chevron-right" style="font-size:9px;opacity:.5"></i> Lotes
    <span class="sub" style="margin-left:auto;font-weight:500">Crea un proyecto y administra sus manzanas y lotes desde una sola sección.</span>
</div>

<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-layer-group"></i><div class="metric-val">{{ $projects->count() }}</div><div class="metric-label">Proyectos</div></div>
    <div class="metric"><i class="fa-solid fa-th-large"></i><div class="metric-val">{{ $sumManzanas }}</div><div class="metric-label">Manzanas registradas</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">{{ $sumDisponibles }}</div><div class="metric-label">Lotes disponibles</div></div>
    <div class="metric"><i class="fa-solid fa-handshake"></i><div class="metric-val text-gold">{{ $sumVendidos }}</div><div class="metric-label">Lotes vendidos</div></div>
</div>

@if($projects->isEmpty())
    <div class="card">
        <div class="card-body" style="text-align:center;padding:38px">
            <i class="fa-solid fa-layer-group" style="font-size:42px;opacity:.28;margin-bottom:12px"></i>
            <div class="card-title">Aún no hay proyectos</div>
            <div class="sub" style="margin-top:6px">Crea el primer proyecto para después agregar manzanas y lotes.</div>
            <button class="btn btn-primary" type="button" data-modal-open="modal-add-project" style="margin-top:16px"><i class="fa-solid fa-plus"></i> Crear proyecto</button>
        </div>
    </div>
@else
<div class="grid g3">
@foreach($projects as $project)
    @php
        $manzanasCount = (int) ($project->manzanas_reales_count ?? $project->manzanas ?? 0);
        $lotesCount = (int) ($project->lotes_reales_count ?? $project->lotes ?? $project->units_total ?? 0);
        $lotesDisponibles = (int) ($project->lotes_disponibles_count ?? 0);
        $lotesVendidos = (int) ($project->lotes_vendidos_count ?? $project->units_sold ?? 0);
        $propertiesCount = (int) ($project->properties_count ?? 0);
        $progress = $lotesCount > 0 ? (int) round(($lotesVendidos / $lotesCount) * 100) : 0;
    @endphp
    <div class="card">
        <div class="card-head">
            <div style="display:flex;gap:10px;align-items:center;min-width:0">
                @if($project->logo_path)
                    <img src="{{ project_logo_url($project->logo_path) }}" alt="Logo {{ $project->name }}" style="width:44px;height:44px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:5px;flex:0 0 auto">
                @else
                    <div style="width:44px;height:44px;border-radius:12px;background:rgba(201,168,76,.12);border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);flex:0 0 auto"><i class="fa-solid fa-layer-group"></i></div>
                @endif
                <div style="min-width:0">
                <div class="card-title">{{ $project->name }}</div>
                <div class="sub">
                    {{ $project->location ?: 'Sin ubicación' }}
                    @if($project->depositario_nombre ?? null) · Depositario: {{ $project->depositario_nombre }} @endif
                    @if($propertiesCount) · {{ $propertiesCount }} inmueble(s) @endif
                </div>
                </div>
            </div>
            <div class="row" style="gap:6px;align-items:center">
                <span class="badge {{ $project->status === 'Activo' ? 'green' : ($project->status === 'Finalizado' ? 'blue' : 'amber') }}">{{ $project->status }}</span>
                <div class="kebab">
                    <button class="kebab-trigger" type="button" data-kebab data-tip="Más"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                    <div class="kebab-menu">
                        <a href="{{ route('projects.show', $project) }}"><i class="fa-solid fa-diagram-project"></i> Abrir proyecto</a>
                        <button type="button" data-modal-open="modal-edit-project-{{ $project->id }}"><i class="fa-solid fa-pen"></i> Editar proyecto</button>
                        <hr>
                        <form method="post" action="{{ route('projects.destroy', $project) }}" onsubmit="return confirm('¿Eliminar este proyecto?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="danger"><i class="fa-solid fa-trash"></i> Eliminar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="grid g2">
                <div><div class="sub">Manzanas</div><strong>{{ $manzanasCount }}</strong></div>
                <div><div class="sub">Lotes totales</div><strong>{{ $lotesCount }}</strong></div>
                <div><div class="sub">Disponibles</div><strong class="text-success">{{ $lotesDisponibles }}</strong></div>
                <div><div class="sub">Vendidos</div><strong class="text-gold">{{ $lotesVendidos }}</strong></div>
            </div>

            <div style="margin:12px 0">
                <div class="row between sub"><span>Avance comercial</span><span>{{ $progress }}%</span></div>
                <div class="progress"><div class="bar" style="width:{{ $progress }}%"></div></div>
            </div>

            @if($project->description)
                <div class="sub">{{ \Illuminate\Support\Str::limit($project->description,140) }}</div>
            @endif

            <a class="btn btn-sm" href="{{ route('projects.show', $project) }}" style="margin-top:12px;width:100%;justify-content:center"><i class="fa-solid fa-diagram-project"></i> Administrar manzanas y lotes</a>
        </div>
    </div>
@endforeach
</div>
@endif
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-add-project">
    <div class="modal wide">
        <div class="modal-head"><h3><i class="fa-solid fa-layer-group text-gold"></i> Nuevo proyecto</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('projects.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <div class="form-grid three">
                    <label>Nombre del proyecto *<input name="name" required placeholder="Ej. Residencial Valle"></label>
                    <label>Depositario responsable *
                        <select name="depositario_puesto_id">
                            <option value="">— Selecciona desde Puestos —</option>
                            @foreach(($puestos ?? collect()) as $puesto)
                                <option value="{{ $puesto->id }}">{{ $puesto->nombre }}{{ $puesto->area ? ' · '.$puesto->area : '' }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Número de manzanas *<input name="manzanas" type="number" min="1" max="26" value="1" required placeholder="Ej. 10"></label>
                    <label>Ubicación legal (parcela/ejido)<input name="ubicacion_legal" placeholder="Ej. Parcela 239 Z-3 P1/1, Ejido de Mora, Tepic, Nayarit"></label>
                    <label>N° de título de propiedad<input name="numero_titulo_propiedad" placeholder="Ej. 3512"></label>
                    <label>N° de título de propiedad (con letras)<input name="numero_titulo_propiedad_letras" placeholder="Ej. tres mil quinientos doce"></label>
                </div>
                <div class="project-file-grid">
                    <label>Logotipo del proyecto<input name="logo" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml"><span class="sub">Portada: recomendado 1600 x 1200 px (4:3), fondo blanco o transparente.</span></label>
                    <label>INE del depositario - frente<input name="depositario_ine_front" type="file" accept="image/png,image/jpeg,image/webp"><span class="sub">Imagen clara, horizontal, sin recortes.</span></label>
                    <label>INE del depositario - reverso<input name="depositario_ine_back" type="file" accept="image/png,image/jpeg,image/webp"><span class="sub">Se usa en la identificación oficial del asociante.</span></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> Crear proyecto</button>
            </div>
        </form>
    </div>
</div>

@foreach($projects as $project)
<div class="modal-backdrop" id="modal-edit-project-{{ $project->id }}">
    <div class="modal wide">
        <div class="modal-head"><h3><i class="fa-solid fa-pen text-gold"></i> Editar proyecto</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" action="{{ route('projects.update', $project) }}" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-grid three">
                    <label>Nombre del proyecto *<input name="name" value="{{ $project->name }}" required></label>
                    <label>Depositario responsable
                        <select name="depositario_puesto_id">
                            <option value="">— Selecciona desde Puestos —</option>
                            @foreach(($puestos ?? collect()) as $puesto)
                                <option value="{{ $puesto->id }}" @selected((int)($project->depositario_puesto_id ?? 0) === (int)$puesto->id)>{{ $puesto->nombre }}{{ $puesto->area ? ' · '.$puesto->area : '' }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label>Número de manzanas *<input name="manzanas" type="number" min="1" max="26" value="{{ max(1, (int) ($project->manzanas ?? 1)) }}" required></label>
                    <label>Ubicación legal (parcela/ejido)<input name="ubicacion_legal" value="{{ $project->ubicacion_legal ?? '' }}" placeholder="Ej. Parcela 239 Z-3 P1/1, Ejido de Mora, Tepic, Nayarit"></label>
                    <label>N° de título de propiedad<input name="numero_titulo_propiedad" value="{{ $project->numero_titulo_propiedad ?? '' }}" placeholder="Ej. 3512"></label>
                    <label>N° de título de propiedad (con letras)<input name="numero_titulo_propiedad_letras" value="{{ $project->numero_titulo_propiedad_letras ?? '' }}" placeholder="Ej. tres mil quinientos doce"></label>
                </div>
                <div class="project-file-grid">
                    <label>Logotipo del proyecto<input name="logo" type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml"><span class="sub">{{ $project->logo_path ? 'Logo cargado. Sube otro para reemplazarlo.' : 'Sin logotipo cargado.' }} Portada: 1600 x 1200 px (4:3).</span></label>
                    <label>INE del depositario - frente<input name="depositario_ine_front" type="file" accept="image/png,image/jpeg,image/webp"><span class="sub">{{ $project->depositario_ine_front_path ? 'Frente cargado. Sube otro para reemplazarlo.' : 'Sin frente de INE cargado.' }}</span></label>
                    <label>INE del depositario - reverso<input name="depositario_ine_back" type="file" accept="image/png,image/jpeg,image/webp"><span class="sub">{{ $project->depositario_ine_back_path ? 'Reverso cargado. Sube otro para reemplazarlo.' : 'Sin reverso de INE cargado.' }}</span></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 cambios</button>
            </div>
        </form>
    </div>
</div>
@endforeach
@endsection