@extends('layouts.app')

@section('content')
<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 text-danger">
                    Confirmar Anulación de Contrato
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Proceso de reversión para el contrato <span class="fw-bold text-dark">#{{ $contrato->id }}</span>
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('devoluciones.index') }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Volver
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    @if(auth()->user()->tipo != 1)
        <div class="alert alert-danger d-flex align-items-center justify-content-between" role="alert">
            <div class="flex-grow-1">
                <p class="mb-0 fw-bold"><i class="fa fa-lock me-2"></i>Acceso Denegado</p>
                <p class="mb-0 fs-sm">Solo el administrador principal tiene privilegios para ejecutar esta acción.</p>
            </div>
        </div>
    @else

    {{-- Panel de Advertencia Crítica --}}
    <div class="block block-rounded bg-danger-light border-start border-danger border-4">
        <div class="block-content block-content-full">
            <div class="d-flex">
                <div class="flex-shrink-0 me-3">
                    <i class="fa fa-exclamation-triangle fa-2x text-danger"></i>
                </div>
                <div class="flex-grow-1">
                    <h4 class="fw-bold text-danger mb-1">¡Acción Irreversible!</h4>
                    <p class="fs-sm text-body mb-0">
    La ejecución de este proceso tendrá las siguientes consecuencias inmediatas:
</p>
<ul class="fs-xs text-body mt-2 mb-0">
    <li>El lote <strong>{{ $contrato->idlote }}</strong> pasará a estado <strong>DISPONIBLE</strong> automáticamente.</li>
    <li>Se anularán todos los <strong>extractos de pago</strong> vinculados.</li>
    <li>Los recibos serán trasladados al historial de <strong>documentos anulados</strong>.</li>
    <li>Cualquier trámite legal (minutas, protocolos) quedará <strong>sin efecto</strong>.</li>
</ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {{-- Resumen Técnico --}}
        <div class="col-xl-7">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Resumen del Contrato</h3>
                </div>
                <div class="block-content p-0">
                    <table class="table table-vcenter table-sm fs-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="fw-semibold bg-body-light" style="width: 35%;">ID Sistema</td>
                                <td class="fw-bold text-primary">#{{ $contrato->id }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Cliente Titular</td>
                                <td>
                                    <div class="fw-bold">{{ $cliente->nombre ?? '—' }}</div>
                                    <div class="text-muted fs-xs">C.I.: {{ $cliente->ci ?? 'N/A' }}</div>
                                </td>
                            </tr>
                            @foreach($codeudores as $cod)
                            <tr>
                                <td class="fw-semibold bg-body-light">Codeudor</td>
                                <td>{{ $cod->nombre }} <span class="text-muted small ms-1">(C.I. {{ $cod->ci }})</span></td>
                            </tr>
                            @endforeach
                            <tr>
                                <td class="fw-semibold bg-body-light text-danger">Monto Total</td>
                                <td class="fw-bold fs-base text-danger">$us {{ number_format($contrato->total, 2) }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Vendedor</td>
                                <td>{{ $vendedor->nombre ?? 'Desconocido' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Datos del Inmueble --}}
        <div class="col-xl-5">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Datos del Lote</h3>
                </div>
                <div class="block-content p-0">
                    <table class="table table-vcenter table-sm fs-sm mb-0">
                        <tbody>
                            <tr>
                                <td class="fw-semibold bg-body-light" style="width: 40%;">Urbanización</td>
                                <td>{{ $urbanizacion->nombre ?? $contrato->urbanizacion }}</td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Manzano / Lote</td>
                                <td>
                                    <span class="badge bg-dark">Mzo: {{ $contrato->manzano }}</span>
                                    <span class="badge bg-primary">Lote: {{ $contrato->lote }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td class="fw-semibold bg-body-light">Superficie</td>
                                <td>{{ number_format($contrato->superficie, 2) }} m²</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Bloque de Ejecución --}}
    @if($contrato->anul == 0)
        <div class="block block-rounded block-bordered border-danger">
            <div class="block-header block-header-default bg-danger-light">
                <h3 class="block-title text-danger fw-bold">
                    <i class="fa fa-ban me-1"></i> Formulario de Anulación
                </h3>
            </div>
            <div class="block-content">
                <form method="POST" action="{{ route('devoluciones.destroy', $contrato->id) }}" id="formAnular">
                    @csrf
                    @method('DELETE')

                    <div class="mb-4">
                        <label class="form-label fw-bold" for="obsanul">
                            Justificación Técnica / Motivo de Anulación <span class="text-danger">*</span>
                        </label>
                        <textarea name="obsanul" id="obsanul"
                                  class="form-control form-control-alt @error('obsanul') is-invalid @enderror"
                                  rows="4" 
                                  placeholder="Explique detalladamente por qué se anula este contrato..."
                                  maxlength="200">{{ old('obsanul') }}</textarea>
                        @error('obsanul')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div class="form-text fs-xs">Mínimo 5 caracteres. Este texto será visible en el historial del lote.</div>
                    </div>

                    <div class="block-content block-content-full bg-body-light mx-n4 mb-n4 text-end">
                        <a href="{{ route('contratos.show', $contrato->id) }}" class="btn btn-alt-info me-2">
                            <i class="fa fa-eye me-1"></i> Revisar Contrato
                        </a>
                        <button type="submit" class="btn btn-danger" onclick="return confirmarAnulacion()">
                            <i class="fa fa-check-circle me-1"></i> Ejecutar Anulación Definitiva
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @else
        <div class="block block-rounded bg-warning-light border-start border-warning border-4">
            <div class="block-content block-content-full d-flex justify-content-between align-items-center">
                <div>
                    <p class="mb-1 fw-bold text-warning-dark">
                        <i class="fa fa-info-circle me-1"></i> Registro Anulado
                    </p>
                    <p class="mb-0 fs-sm">Motivo registrado: <span class="font-italic">"{{ $contrato->obsanul ?: 'Sin motivo especificado' }}"</span></p>
                </div>
                <a href="{{ route('devoluciones.index') }}" class="btn btn-sm btn-alt-warning">
                    Volver al Listado
                </a>
            </div>
        </div>
    @endif

    @endif
</div>

@endsection

@section('js')
<script>
function confirmarAnulacion() {
    const obs = document.getElementById('obsanul').value.trim();
    if (obs.length < 5) {
        One.helpers('jq-notify', {type: 'danger', icon: 'fa fa-times me-1', message: 'Debe ingresar una justificación válida (min. 5 caracteres).'});
        document.getElementById('obsanul').focus();
        return false;
    }
    
    return confirm(
        "⚠️ ADVERTENCIA DE SEGURIDAD\n\n" +
        "Está a punto de ANULAR el contrato #{{ $contrato->id }}.\n" +
        "Esta acción es permanente y liberará el lote para la venta.\n\n" +
        "¿Desea proceder con la eliminación de los registros financieros?"
    );
}
</script>
@endsection