@extends('layouts.app')

@section('title', 'Actualizar Trámite #' . $tramite->id)

@section('content')
@php
    // $f  → para MOSTRAR en texto (show): Y-m-d → d/m/Y
    $f  = fn($v) => ($v && $v !== '0000-00-00') ? \App\Helpers\FechaHelper::bdToLocal($v) : '';
    // $fd → para inputs type="date": Y-m-d permanece Y-m-d (el browser lo muestra en local)
    $fd = fn($v) => ($v && $v !== '0000-00-00') ? $v : '';
@endphp

<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-pencil-alt text-primary me-2"></i>Actualizar Trámite #{{ $tramite->id }}
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Gestión de hitos legales, administrativos y técnicos del contrato.
                </h2>
            </div>
            <div class="mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('tramites.show', $tramite->id) }}" class="btn btn-sm btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver al Trámite
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row justify-content-center">
        <div class="col-xl-10">

            {{-- Resumen del Contrato --}}
            <div class="block block-rounded block-bordered shadow-sm border-start border-primary border-4">
                <div class="block-content block-content-full">
                    <div class="row fs-sm">
                        <div class="col-md-3 border-end">
                            <div class="text-muted text-uppercase fw-bold fs-xs">Contrato / Fecha</div>
                            <div class="fw-bold fs-base">#{{ $tramite->idcontrato }} <span class="text-muted fw-normal ms-2">{{ $f($tramite->fecha) }}</span></div>
                        </div>
                        <div class="col-md-3 border-end">
                            <div class="text-muted text-uppercase fw-bold fs-xs">Ubicación</div>
                            <div>{{ $urbanizacion->nombre ?? '—' }}</div>
                            <div class="fw-semibold text-primary">{{ $distrito->nomcorto ?? '—' }}</div>
                        </div>
                        <div class="col-md-2 border-end text-center">
                            <div class="text-muted text-uppercase fw-bold fs-xs">Mz / Lote</div>
                            <div class="fs-base fw-bold">{{ $tramite->manzano }} - {{ $tramite->lote }}</div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-muted text-uppercase fw-bold fs-xs">Cliente</div>
                            <div class="fw-bold">{{ $cliente->nombre ?? $tramite->idcliente }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <form method="POST" action="{{ route('tramites.update', $tramite->id) }}" id="form-tramite">
                @csrf
                @method('PUT')

                {{-- 1. Elaboración de Minuta --}}
                <div class="block block-rounded block-themed mb-4">
                    <div class="block-header block-header-default bg-dark-op">
                        <h3 class="block-title">1. Elaboración de Minuta</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                        </div>
                    </div>
                    <div class="block-content pb-3">
                        <div class="row">
                            <div class="col-lg-7">
                                <x-tramite-row label="Inicio Minuta" name="inicio_minuta" :value="$fd($tramite->iniciominuta ?? '')"/>
                                <x-tramite-row label="Elaboración / Firma adj." name="fminuta2" :value="$fd($tramite->fminuta2 ?? '')" obs="ominuta2" :obsval="$tramite->ominuta2 ?? ''"/>
                                <x-tramite-row label="Envío a abogado" name="fminuta3" :value="$fd($tramite->fminuta3 ?? '')" obs="ominuta3" :obsval="$tramite->ominuta3 ?? ''"/>
                                <x-tramite-row label="Retorno de abogado" name="fminuta4" :value="$fd($tramite->fminuta4 ?? '')" obs="ominuta4" :obsval="$tramite->ominuta4 ?? ''"/>
                                <x-tramite-row label="Firma del adjudicatario" name="fminuta5" :value="$fd($tramite->fminuta5 ?? '')" obs="ominuta5" :obsval="$tramite->ominuta5 ?? ''"/>
                            </div>
                            <div class="col-lg-5 bg-body-light p-3 rounded">
                                <div class="mb-3">
                                    <label class="form-label fs-xs fw-bold text-uppercase">Abogado Asignado</label>
                                    <select name="cboAbogados" class="form-select" onchange="toggleNuevo(this, 'nombreabogado')">
                                        <option value="0">— Seleccione —</option>
                                        @foreach($abogados as $ab)
                                            <option value="{{ $ab->id }}" {{ ($tramite->idabogado == $ab->id) ? 'selected' : '' }}>{{ $ab->nombre }}</option>
                                        @endforeach
                                        <option value="nuevo" class="text-primary fw-bold">+ Nuevo abogado</option>
                                    </select>
                                    <input type="text" name="nombreabogado" id="nombreabogado" class="form-control mt-2 bg-white" placeholder="Escriba nombre del abogado" style="display:none">
                                </div>
                                <div class="mb-0">
                                    <label class="form-label fs-xs fw-bold text-uppercase">Notas Generales de Minuta</label>
                                    <textarea name="observaciontra" class="form-control" rows="3">{{ $tramite->observaciones ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 2. Transferencia --}}
                <div class="block block-rounded block-themed block-mode-hidden mb-4 border-top border-info">
                    <div class="block-header bg-info">
                        <h3 class="block-title">2. Impuestos de Transferencia</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                        </div>
                    </div>
                    <div class="block-content pb-3">
                        <div class="row">
                            <div class="col-md-7">
                                <x-tramite-row label="Fecha transferencia" name="ftransferencia" :value="$fd($transferencia->ftransferencia ?? '')" obs="otransferencia" :obsval="$transferencia->otransferencia ?? ''"/>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fs-xs fw-bold text-uppercase">Observaciones de Transferencia</label>
                                <textarea name="observaciontrans" class="form-control bg-body-light" rows="2">{{ $transferencia->observaciones ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 3. Protocolización --}}
                <div class="block block-rounded block-themed mb-4 border-top border-amethyst">
                    <div class="block-header bg-amethyst">
                        <h3 class="block-title">3. Protocolización</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                        </div>
                    </div>
                    <div class="block-content pb-3">
                        <div class="row mb-3 bg-body-light py-3 rounded m-1">
                            <div class="col-md-4">
                                <label class="form-label fs-xs fw-bold">NRO. INICIO PROTOCOLO</label>
                                <input type="text" name="inicio_p" class="form-control border-amethyst" value="{{ $protocolo->inicioprotocolo ?? '' }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fs-xs fw-bold">NRO. TESTIMONIO</label>
                                <input type="text" name="testimonio" class="form-control border-amethyst" value="{{ $protocolo->testimonio ?? '' }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fs-xs fw-bold">NOTARIO</label>
                                <select name="cboNotarios" class="form-select border-amethyst">
                                    <option value="0">— Seleccione —</option>
                                    @foreach($notarios as $n)
                                        <option value="{{ $n->id }}" {{ ($protocolo->notario ?? 0) == $n->id ? 'selected' : '' }}>{{ $n->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-7">
                                <x-tramite-row label="Envío a notaría" name="fprotocolo1" :value="$fd($protocolo->fprotocolo1 ?? '')" obs="oprotocolo1" :obsval="$protocolo->oprotocolo1 ?? ''"/>
                                <x-tramite-row label="Retorno de notaría" name="fprotocolo2" :value="$fd($protocolo->fprotocolo2 ?? '')" obs="oprotocolo2" :obsval="$protocolo->oprotocolo2 ?? ''"/>
                                <x-tramite-row label="Envío para firma" name="fprotocolo3" :value="$fd($protocolo->fprotocolo3 ?? '')" obs="oprotocolo3" :obsval="$protocolo->oprotocolo3 ?? ''"/>
                                <x-tramite-row label="Retorno firmado" name="fprotocolo4" :value="$fd($protocolo->fprotocolo4 ?? '')" obs="oprotocolo4" :obsval="$protocolo->oprotocolo4 ?? ''"/>
                                <x-tramite-row label="Envío Derechos Reales" name="fprotocolo5" :value="$fd($protocolo->fprotocolo5 ?? '')" obs="oprotocolo5" :obsval="$protocolo->oprotocolo5 ?? ''"/>
                                <x-tramite-row label="Retorno D.R." name="fprotocolo6" :value="$fd($protocolo->fprotocolo6 ?? '')" obs="oprotocolo6" :obsval="$protocolo->oprotocolo6 ?? ''"/>
                                <x-tramite-row label="Entrega al cliente" name="fprotocolo7" :value="$fd($protocolo->fprotocolo7 ?? '')" obs="oprotocolo7" :obsval="$protocolo->oprotocolo7 ?? ''"/>
                            </div>
                            <div class="col-lg-5">
                                <label class="form-label fs-xs fw-bold text-uppercase">Observaciones de Protocolización</label>
                                <textarea name="observacionpro" class="form-control" rows="4">{{ $protocolo->observaciones ?? '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Secciones secundarias colapsadas --}}
                <div class="row">
                    <div class="col-md-6">
                        {{-- 4. Planos --}}
                        <div class="block block-rounded block-bordered block-mode-hidden mb-4">
                            <div class="block-header block-header-default">
                                <h3 class="block-title fs-sm">4. Planos de Lote</h3>
                                <div class="block-options">
                                    <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                                </div>
                            </div>
                            <div class="block-content pb-3">
                                <x-tramite-row label="Envío a arquitecto" name="fplano1" :value="$fd($plano->fplano1 ?? '')" obs="oplano1" :obsval="$plano->oplano1 ?? ''"/>
                                <x-tramite-row label="Retorno" name="fplano2" :value="$fd($plano->fplano2 ?? '')" obs="oplano2" :obsval="$plano->oplano2 ?? ''"/>
                                <x-tramite-row label="Visado" name="fplano3" :value="$fd($plano->fplano3 ?? '')" obs="oplano3" :obsval="$plano->oplano3 ?? ''"/>
                                <div class="mt-3 p-2 bg-body-light rounded">
                                    <label class="form-label fs-xs">Arquitecto</label>
                                    <select name="cboArquitectos" class="form-select form-select-sm" onchange="toggleNuevo(this, 'nombrearq')">
                                        <option value="0">— Seleccione —</option>
                                        @foreach($arquitectos as $arq)
                                            <option value="{{ $arq->id }}" {{ ($plano->idarquitecto ?? 0) == $arq->id ? 'selected' : '' }}>{{ $arq->nombre }}</option>
                                        @endforeach
                                        <option value="nuevo">+ Nuevo arquitecto</option>
                                    </select>
                                    <input type="text" name="nombrearq" id="nombrearq" class="form-control form-control-sm mt-1" style="display:none">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        {{-- 5. Visados --}}
                        <div class="block block-rounded block-bordered block-mode-hidden mb-4">
                            <div class="block-header block-header-default">
                                <h3 class="block-title fs-sm">5. Visados Municipales</h3>
                                <div class="block-options">
                                    <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                                </div>
                            </div>
                            <div class="block-content pb-3">
                                <x-tramite-row label="Visado 1" name="fvisado1" :value="$fd($visado->fvisado1 ?? '')" obs="ovisado1" :obsval="$visado->ovisado1 ?? ''"/>
                                <x-tramite-row label="Visado 2" name="fvisado2" :value="$fd($visado->fvisado2 ?? '')" obs="ovisado2" :obsval="$visado->ovisado2 ?? ''"/>
                                <x-tramite-row label="Visado 3" name="fvisado3" :value="$fd($visado->fvisado3 ?? '')" obs="ovisado3" :obsval="$visado->ovisado3 ?? ''"/>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 7. Derechos Reales --}}
                <div class="block block-rounded block-themed border-top border-smooth mb-5">
                    <div class="block-header bg-smooth">
                        <h3 class="block-title">7. Derechos Reales (DDRR)</h3>
                        <div class="block-options">
                            <button type="button" class="btn-block-option" data-toggle="block-option" data-action="content_toggle"></button>
                        </div>
                    </div>
                    <div class="block-content pb-4">
                        <div class="row">
                            <div class="col-md-7 border-end">
                                <x-tramite-row label="Fecha de envío" name="fddrr1" :value="$fd($ddrr->fddrr1 ?? '')" obs="oddrr1" :obsval="$ddrr->oddrr1 ?? ''"/>
                                <x-tramite-row label="Fecha de retorno" name="fddrr2" :value="$fd($ddrr->fddrr2 ?? '')" obs="oddrr2" :obsval="$ddrr->oddrr2 ?? ''"/>
                                <hr>
                                <div class="row mb-3 align-items-center">
                                    <div class="col-sm-4"><label class="form-label fs-xs fw-bold">FOLIO REAL</label></div>
                                    <div class="col-sm-8"><input type="text" name="ddrr" class="form-control" value="{{ $ddrr->ddrr ?? '' }}"></div>
                                </div>
                                <x-tramite-row label="Fecha Folio Real" name="fddrr3" :value="$fd($ddrr->fddrr3 ?? '')" obs="oddrr3" :obsval="$ddrr->oddrr3 ?? ''"/>
                                <x-tramite-row label="Fecha de entrega" name="fddrr4" :value="$fd($ddrr->fddrr4 ?? '')" obs="oddrr4" :obsval="$ddrr->oddrr4 ?? ''"/>
                            </div>
                            <div class="col-md-5">
                                <div class="mb-3">
                                    <label class="form-label fs-xs fw-bold text-uppercase">Entregado a:</label>
                                    <input type="text" name="entregadoddrr" class="form-control border-smooth" value="{{ $ddrr->entregadoa ?? '' }}">
                                </div>
                                <div class="mb-0">
                                    <label class="form-label fs-xs fw-bold text-uppercase">Observaciones DDRR</label>
                                    <textarea name="observaciondr" class="form-control" rows="5">{{ $ddrr->observaciones ?? '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Botones de Acción --}}
                <div class="block block-rounded bg-body-extra-light border-top border-4 border-success">
                    <div class="block-content block-content-full text-center">
                        <button type="button" class="btn btn-alt-secondary px-4 me-1" onclick="window.history.back()">
                            Cancelar y Salir
                        </button>
                        <button type="submit" class="btn btn-success px-5 fw-bold" onclick="return confirm('¿Confirma guardar los cambios en el trámite?')">
                            <i class="fa fa-save me-1"></i> GUARDAR CAMBIOS
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
/**
 * Alterna la visibilidad de inputs para nuevos registros (Abogados/Arquitectos)
 */
function toggleNuevo(sel, inputId) {
    const inp = document.getElementById(inputId);
    if(sel.value === 'nuevo') {
        inp.style.display = 'block';
        inp.focus();
    } else {
        inp.style.display = 'none';
        inp.value = '';
    }
}
</script>
@endpush

{{-- 
    COMPONENT MACRO (Inline para el ejemplo)
    Puedes crear este componente en components/tramite-row.blade.php
--}}
{{-- 
<div class="row mb-2 align-items-center g-2">
    <div class="col-sm-4 text-muted fs-sm fw-semibold">{{ $label }}</div>
    <div class="col-sm-4">
        <div class="input-group">
            <span class="input-group-text bg-white" onclick="this.nextElementSibling.showPicker()" style="cursor:pointer">
                <i class="fa fa-calendar-alt text-primary"></i>
            </span>
            <input type="date" name="{{ $name }}" class="form-control form-control-sm" value="{{ $value }}">
        </div>
    </div>
    @if(isset($obs))
    <div class="col-sm-4">
        <input type="text" name="{{ $obs }}" class="form-control form-control-sm bg-body-light" 
               placeholder="Observación..." value="{{ $obsval ?? '' }}">
    </div>
    @endif
</div>
--}}