<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10pt; 
    color: #000; 
    margin: 0 auto;
    width: 170mm; /* Ancho controlado como los recibos FPDF */
    padding: 5mm 0;
    line-height: 1.5;
}

.contenedor {
    width: 170mm;
    margin: 0 auto;
}

/* Encabezado estilo FPDF */
.hdr-empresa { 
    font-size: 6pt; 
    font-weight: bold; 
    margin-left: 2mm;
}
.hdr-subtitulo {
    font-size: 6pt;
    font-weight: bold;
    margin-left: 2mm;
    margin-bottom: 8px;
}
.hdr-titulo { 
    font-size: 16pt; 
    font-weight: bold; 
    text-align: center; 
    margin: 6px 0 2px;
    text-decoration: underline;
}
.hdr-fecha-contrato {
    font-size: 10pt;
    text-align: center;
    margin: 4px 0 8px;
}

/* Número de contrato (derecha) */
.nro-contrato { 
    font-size: 11pt; 
    font-weight: bold; 
    text-align: right;
    margin-right: 2mm;
    margin-bottom: 4px;
}

/* Bloque de datos del lote (con borde) */
.datos-lote { 
    border: 1px solid #000; 
    padding: 6px 8px; 
    margin: 8px 0 12px;
    background-color: #fafafa;
}
.datos-lote table { 
    width: 100%; 
    border-collapse: collapse; 
}
.datos-lote td { 
    padding: 2px 4px; 
    font-size: 10pt; 
}
.datos-lote .label { 
    font-weight: bold; 
    width: 18%; 
}

/* Texto general */
.bloque { 
    margin-bottom: 10px; 
    text-align: justify; 
    font-size: 10pt;
}
.bloque strong { 
    font-weight: bold; 
}

/* Cláusulas */
.clausulas { 
    margin-top: 10px; 
}
.clausula { 
    margin-bottom: 8px; 
    text-align: justify;
    font-size: 10pt;
}
.clausula .titulo-clausula { 
    font-weight: bold; 
    text-decoration: underline; 
    margin-right: 4px;
}

/* Codeudores */
.codeudores-box {
    margin: 6px 0;
    padding: 4px 0;
    font-size: 10pt;
    font-weight: bold;
}

/* Firmas */
.firmas { 
    margin-top: 40px; 
}
.firmas table { 
    width: 100%; 
    border-collapse: collapse;
}
.firmas td { 
    text-align: center; 
    padding: 4px 10px;
    vertical-align: top;
}
.firma-linea { 
    border-top: 1px solid #000; 
    margin: 0 15px; 
    margin-top: 40px;
    margin-bottom: 4px;
}
.firma-nombre { 
    font-size: 9pt; 
    margin-top: 2px;
    line-height: 1.3;
}
.firma-nombre strong {
    font-size: 10pt;
}

/* Pie de página */
.pie { 
    margin-top: 20px; 
    font-size: 7pt; 
    text-align: center; 
    color: #555; 
    font-style: italic;
    border-top: 1px solid #ccc;
    padding-top: 6px;
}

.footer { 
    position: fixed; 
    bottom: -20px; 
    width: 170mm; 
    text-align: center; 
    font-size: 8pt; 
    color: #666; 
    font-style: italic; 
}

/* Utilidades */
.clearfix { clear: both; }
</style>
</head>
<body>

<div class="contenedor">

<div class="footer">Página <span class="page"></span></div>

{{-- N° de contrato arriba a la derecha --}}
<div class="nro-contrato">Nro. Contrato: {{ $idContrato }}</div>
<div class="clearfix"></div>

{{-- Encabezado estilo recibo FPDF --}}
<div class="hdr-empresa">EMPRESA COMERCIAL TARAPACÁ</div>
<div class="hdr-subtitulo">LA PAZ — BOLIVIA</div>
<div class="hdr-titulo">CONTRATO DE COMPRAVENTA</div>
<div class="hdr-fecha-contrato">
    La Paz, {{ $dia }} de {{ $mesLiteral }} de {{ $anio }}
</div>

{{-- Datos del lote (con borde) --}}
<div class="datos-lote">
    <table>
        <tr>
            <td class="label">Urbanización:</td>
            <td>{{ $nomUrb }}</td>
            <td class="label">Distrito:</td>
            <td>{{ $nomDis }}</td>
        </tr>
        <tr>
            <td class="label">Manzano:</td>
            <td>{{ $manzano }}</td>
            <td class="label">Lote Nro.:</td>
            <td>{{ $nomLote }}</td>
        </tr>
        <tr>
            <td class="label">Superficie:</td>
            <td>{{ $superficie }} m²</td>
            <td class="label">Precio Total:</td>
            <td>$us {{ number_format($monto, 2) }} ({{ $literalMonto }})</td>
        </tr>
    </table>
</div>

{{-- Partes del contrato --}}
<div class="bloque">
    En la ciudad de La Paz, a los {{ $dia }} días del mes de {{ $mesLiteral }} del año {{ $anio }},
    entre <strong>EMPRESA COMERCIAL TARAPACÁ</strong>, representada por sus Directores,
    con domicilio en la ciudad de La Paz, que en adelante se denominará
    <strong>"LA EMPRESA"</strong>, y el señor(a) <strong>{{ $nomComprador }}</strong>,
    portador(a) del CI Nro. <strong>{{ $ciComprador }}</strong>,
    que en adelante se denominará <strong>"EL COMPRADOR"</strong>,
    se suscribe el presente contrato de compraventa de acuerdo a las siguientes cláusulas:
</div>

{{-- Codeudores (si existen) --}}
@if($codeudores && $codeudores->count() > 0)
<div class="codeudores-box">
    <strong>Codeudores solidarios:</strong>
    @foreach($codeudores as $cod)
        {{ $cod->nombre }} (CI: {{ $cod->ci }})@if(!$loop->last), @endif
    @endforeach
</div>
@endif

{{-- Cláusulas --}}
<div class="clausulas">

    <div class="clausula">
        <span class="titulo-clausula">PRIMERA (OBJETO):</span>
        LA EMPRESA vende en favor de EL COMPRADOR el lote N° <strong>{{ $nomLote }}</strong>
        del Manzano <strong>{{ $manzano }}</strong>, Distrito <strong>{{ $nomDis }}</strong>,
        de la Urbanización <strong>{{ $nomUrb }}</strong>, con una superficie de
        <strong>{{ $superficie }} m²</strong>, libre de toda carga y gravamen.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">SEGUNDA (PRECIO):</span>
        El precio total convenido del lote es de
        <strong>$us {{ number_format($monto, 2) }} ({{ $literalMonto }})</strong>.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">TERCERA (FORMA DE PAGO):</span>
        @if($noCuotas > 1)
            EL COMPRADOR pagará mediante cuotas, con una cuota inicial de
            <strong>$us {{ number_format($cuotaInicial, 2) }} ({{ $literalCuotaIni }})</strong>,
            y el saldo de <strong>$us {{ number_format($montoResto, 2) }} ({{ $literalResto }})</strong>
            será cancelado en <strong>{{ $noCuotas }} ({{ $literalNoCuotas }})</strong>
            cuotas mensuales de <strong>$us {{ number_format($cuotaMensual, 2) }}</strong> cada una.
        @else
            EL COMPRADOR pagará al contado la suma de
            <strong>$us {{ number_format($monto, 2) }} ({{ $literalMonto }})</strong>.
        @endif
    </div>

    <div class="clausula">
        <span class="titulo-clausula">CUARTA (ENTREGA):</span>
        LA EMPRESA se compromete a entregar el lote en las condiciones acordadas
        una vez realizado el pago correspondiente según las condiciones establecidas.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">QUINTA (OBLIGACIONES):</span>
        EL COMPRADOR se compromete a respetar las normas y reglamentos de la urbanización,
        así como a hacer buen uso del lote adquirido.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">SEXTA (INCUMPLIMIENTO):</span>
        En caso de incumplimiento del pago por más de 3 cuotas consecutivas,
        LA EMPRESA podrá resolver el presente contrato, reteniendo los montos pagados
        hasta ese momento en concepto de penalidad.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">SÉPTIMA (JURISDICCIÓN):</span>
        Ambas partes se someten a la jurisdicción de los tribunales de la ciudad de La Paz
        para cualquier controversia que pudiera surgir del presente contrato.
    </div>

    <div class="clausula">
        <span class="titulo-clausula">OCTAVA (CONFORMIDAD):</span>
        En señal de conformidad y aceptación de todas las cláusulas precedentes,
        las partes suscriben el presente documento en dos ejemplares de igual valor y efecto
        legal, en la ciudad de La Paz, a los {{ $dia }} días del mes de {{ $mesLiteral }}
        del año {{ $anio }}.
    </div>

</div>

{{-- Firmas --}}
<div class="firmas">
    <table>
        <tr>
            <td width="50%">
                <div class="firma-linea"></div>
                <div class="firma-nombre">
                    <strong>LA EMPRESA</strong><br>
                    EMPRESA COMERCIAL TARAPACÁ<br>
                    <span style="font-size:8pt;">Representante Legal</span>
                </div>
            </td>
            <td width="50%">
                <div class="firma-linea"></div>
                <div class="firma-nombre">
                    <strong>EL COMPRADOR</strong><br>
                    {{ $nomComprador }}<br>
                    CI: {{ $ciComprador }}
                </div>
            </td>
        </tr>
    </table>
</div>

{{-- Pie de página --}}
<div class="pie">
    Generado el {{ $fechaImpresion }} a horas {{ $horaImpresion }} | Usuario: {{ $usuarioImprime }} | Contrato #{{ $idContrato }}
</div>

</div>{{-- fin contenedor --}}

</body>
</html>