{% extends 'base_materio.html.twig' %}

{% block title %}Liquidación y Cobros - {{ convenioClienteLegacy.cliente.nombre }} {{ convenioClienteLegacy.cliente.apellido }}{% endblock %}

{% block header_title %}Liquidación de Cliente y Gestión de Pacto Cuota Litis{% endblock %}

{% block body %}
<div class="container-fluid px-0">
    <!-- Header Card -->
    <div class="card card-materio mb-4">
        <div class="card-body">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                <div>
                    <div class="d-flex align-items-center gap-2 mb-1">
                        <span class="badge badge-soft-primary px-3 py-2 rounded-pill fs-7">
                            <i class="bx bx-folder me-1"></i> Caso: {{ convenioClienteLegacy.convenio.caso.caratula }}
                        </span>
                        {% if convenioCliente.estaCapitalTotalmentePagado() %}
                            <span class="badge badge-soft-success px-3 py-2 rounded-pill fs-7">
                                <i class="bx bx-check-circle me-1"></i> CAPITAL TOTALMENTE PAGADO
                            </span>
                        {% else %}
                            <span class="badge badge-soft-warning px-3 py-2 rounded-pill fs-7">
                                <i class="bx bx-time-five me-1"></i> CAPITAL PENDIENTE
                            </span>
                        {% endif %}

                        {% if convenioCliente.estaPclTotalmenteCobrado() %}
                            <span class="badge badge-soft-success px-3 py-2 rounded-pill fs-7">
                                <i class="bx bx-check-double me-1"></i> PCL COBRADO 100%
                            </span>
                        {% endif %}
                    </div>
                    <h3 class="mb-1 text-dark fw-bold">
                        <i class="bx bx-user me-2 text-primary"></i>
                        {{ convenioClienteLegacy.cliente.nombre }} {{ convenioClienteLegacy.cliente.apellido }}
                    </h3>
                    <p class="text-muted mb-0 small">
                        DNI: {{ convenioClienteLegacy.cliente.dni | default('S/D') }} | 
                        Tel: {{ convenioClienteLegacy.cliente.telefono | default('S/D') }}
                    </p>
                </div>

                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-outline-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalRegistrarPagoCapital">
                        <i class="bx bx-minus-circle me-1"></i> Pagar Capital a Cliente
                    </button>
                    <button type="button" class="btn btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#modalRegistrarCobroPacto">
                        <i class="bx bx-plus-circle me-1"></i> Cobrar PCL / Gastos
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation Tabs (Capital vs PCL & Gastos) -->
    <ul class="nav nav-tabs nav-fill mb-4 card-materio p-2" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active fw-bold py-3" id="capital-tab" data-bs-toggle="tab" data-bs-target="#capital-section" type="button" role="tab">
                <i class="bx bx-money-withdraw me-2 fs-5"></i> 1. Capital del Cliente (Pagos / Entregas)
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link fw-bold py-3" id="pacto-tab" data-bs-toggle="tab" data-bs-target="#pacto-section" type="button" role="tab">
                <i class="bx bx-receipt me-2 fs-5"></i> 2. Pacto Cuota Litis & Gastos (Honorarios Estudio)
            </button>
        </li>
    </ul>

    <div class="tab-content px-0">
        <!-- SECCIÓN 1: CAPITAL DEL CLIENTE -->
        <div class="tab-pane fade show active" id="capital-section" role="tabpanel">
            <div class="row g-4 mb-4">
                <div class="col-12 col-sm-6 col-xl-4">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">Monto Acordado Capital</span>
                            <h3 class="fw-bold mb-0 text-dark">{{ convenioCliente.montoAcordadoCliente.formatear() }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-4">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">Capital Pagado al Cliente</span>
                            <h3 class="fw-bold mb-0 text-success">{{ convenioCliente.totalCapitalPagado().formatear() }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-4">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">Saldo Capital Pendiente</span>
                            <h3 class="fw-bold mb-0 {{ convenioCliente.saldoPendienteCapital().esCero() ? 'text-muted' : 'text-warning' }}">
                                {{ convenioCliente.saldoPendienteCapital().formatear() }}
                            </h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabla Pagos Capital -->
            <div class="card card-materio">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold"><i class="bx bx-history me-2 text-primary"></i> Entregas de Capital al Cliente</h5>
                    <span class="badge badge-soft-primary rounded-pill">{{ pagosCapital | length }} registro(s)</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Fecha</th>
                                <th>Monto Entregado</th>
                                <th>Medio de Pago</th>
                                <th>Observaciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pago in pagosCapital %}
                                <tr>
                                    <td class="ps-4 fw-medium text-dark"><i class="bx bx-calendar me-1 text-muted"></i>{{ pago.fecha | date('d/m/Y') }}</td>
                                    <td class="fw-bold text-success">{{ pago.monto.formatear() }}</td>
                                    <td>
                                        {% if pago.medioPagoId == 1 %}
                                            <span class="badge badge-soft-success"><i class="bx bx-money me-1"></i> Efectivo</span>
                                        {% else %}
                                            <span class="badge badge-soft-info"><i class="bx bx-transfer me-1"></i> Transferencia</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-muted small">{{ pago.observaciones | default('-') }}</td>
                                </tr>
                            {% else %}
                                <tr><td colspan="4" class="text-center py-4 text-muted">Sin entregas de capital registradas.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- SECCIÓN 2: PACTO CUOTA LITIS Y GASTOS -->
        <div class="tab-pane fade" id="pacto-section" role="tabpanel">
            <div class="row g-4 mb-4">
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">PCL Acordado</span>
                            <h3 class="fw-bold mb-0 text-dark">{{ convenioCliente.montoAcordadoPactoCuotaLitis.formatear() }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">PCL Cobrado</span>
                            <h3 class="fw-bold mb-0 text-success">{{ convenioCliente.totalPclCobrado().formatear() }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">Gastos Recaudados</span>
                            <h3 class="fw-bold mb-0 text-info">{{ convenioCliente.totalGastosCobrados().formatear() }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="card card-materio h-100">
                        <div class="card-body">
                            <span class="fw-medium text-muted d-block mb-1">Saldo PCL Pendiente</span>
                            <h3 class="fw-bold mb-0 {{ convenioCliente.saldoPendientePcl().esCero() ? 'text-muted' : 'text-warning' }}">
                                {{ convenioCliente.saldoPendientePcl().formatear() }}
                            </h3>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabla Cobros PCL y Gastos -->
            <div class="card card-materio">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold"><i class="bx bx-receipt me-2 text-primary"></i> Cobros de PCL y Gastos Recibidos</h5>
                    <span class="badge badge-soft-primary rounded-pill">{{ pagosPacto | length }} registro(s)</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Fecha</th>
                                <th>Cobrado PCL</th>
                                <th>Cobrado Gastos</th>
                                <th>Total Recibido</th>
                                <th>Medio de Pago</th>
                                <th>Observaciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pago in pagosPacto %}
                                <tr>
                                    <td class="ps-4 fw-medium text-dark"><i class="bx bx-calendar me-1 text-muted"></i>{{ pago.fecha | date('d/m/Y') }}</td>
                                    <td class="fw-bold text-success">{{ pago.montoPcl.formatear() }}</td>
                                    <td class="fw-bold text-info">{{ pago.montoGastos.formatear() }}</td>
                                    <td class="fw-bold text-dark">{{ pago.totalCobrado().formatear() }}</td>
                                    <td>
                                        {% if pago.medioPagoId == 1 %}
                                            <span class="badge badge-soft-success">Efectivo</span>
                                        {% else %}
                                            <span class="badge badge-soft-info">Transferencia</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-muted small">{{ pago.observaciones | default('-') }}</td>
                                </tr>
                            {% else %}
                                <tr><td colspan="6" class="text-center py-4 text-muted">Sin cobros de PCL/Gastos registrados.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Registrar Pago de Capital -->
<div class="modal fade" id="modalRegistrarPagoCapital" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content card-materio border-0">
            <div class="modal-header border-bottom">
                <h5 class="modal-title fw-bold text-dark"><i class="bx bx-minus-circle me-2 text-primary"></i> Entregar Capital al Cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ path('liquidacion_cliente_show', {'convenioClienteId': convenioClienteLegacy.id}) }}">
                <input type="hidden" name="tipoForm" value="capital" />
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Monto Entregado ($)</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" step="0.01" min="0.01" max="{{ convenioCliente.saldoPendienteCapital().valor }}" name="monto" class="form-control form-control-lg" value="{{ convenioCliente.saldoPendienteCapital().valor }}" required />
                        </div>
                        <small class="text-muted">Saldo restante: {{ convenioCliente.saldoPendienteCapital().formatear() }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Medio de Pago</label>
                        <select name="medioPagoId" class="form-select">
                            <option value="1">Efectivo</option>
                            <option value="3">Transferencia Bancaria</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Fecha</label>
                        <input type="date" name="fecha" class="form-control" value="{{ "now"|date("Y-m-d") }}" required />
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Observaciones</label>
                        <textarea name="observaciones" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Confirmar Entregas</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Registrar Cobro de PCL / Gastos -->
<div class="modal fade" id="modalRegistrarCobroPacto" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content card-materio border-0">
            <div class="modal-header border-bottom">
                <h5 class="modal-title fw-bold text-dark"><i class="bx bx-plus-circle me-2 text-primary"></i> Registrar Cobro de PCL y Gastos</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{{ path('liquidacion_cliente_show', {'convenioClienteId': convenioClienteLegacy.id}) }}">
                <input type="hidden" name="tipoForm" value="pacto" />
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Monto PCL ($)</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" step="0.01" min="0" name="montoPcl" class="form-control" value="{{ convenioCliente.saldoPendientePcl().valor }}" />
                        </div>
                        <small class="text-muted">Saldo PCL pendiente: {{ convenioCliente.saldoPendientePcl().formatear() }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Monto Gastos Recaudados ($)</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" step="0.01" min="0" name="montoGastos" class="form-control" value="0.00" />
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Medio de Pago</label>
                        <select name="medioPagoId" class="form-select">
                            <option value="1">Efectivo</option>
                            <option value="3">Transferencia / Depósito</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Fecha de Cobro</label>
                        <input type="date" name="fecha" class="form-control" value="{{ "now"|date("Y-m-d") }}" required />
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Observaciones</label>
                        <textarea name="observaciones" class="form-control" rows="2" placeholder="Nro de recibo o detalle..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Confirmar Cobro</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}