pago_servicios.html

{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container mt-4">
    <h2><i class="fas fa-cash-register"></i> Cobro de Servicios</h2>

    <!-- BUSCAR CLIENTE -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5><i class="fas fa-search"></i> Buscar Cliente</h5>
        </div>
        <div class="card-body">
            <div class="input-group">
                <input type="text" id="buscarCliente" class="form-control" placeholder="Buscar por nombre o documento...">
                <button class="btn btn-danger" id="btnBuscarCliente"><i class="fas fa-search"></i> Buscar</button>
            </div>
        </div>
    </div>

    <!-- DATOS DEL CLIENTE -->
    <div class="card mt-3 shadow-sm">
        <div class="card-header bg-secondary text-white">
            <h5><i class="fas fa-user"></i> Datos del Cliente</h5>
        </div>
        <div class="card-body">
            <p><strong>Nombre:</strong> <span id="nombreCliente">-</span></p>
            <p><strong>Dirección:</strong> <span id="direccionCliente">-</span></p>
            <p><strong>Teléfono:</strong> <span id="telefonoCliente">-</span></p>
            <p><strong>Servicio:</strong> <span id="servicioCliente">-</span></p>
        </div>
    </div>

    <!-- PAGOS PENDIENTES - SELECCIONAR MESES -->
    <div class="card mt-3 shadow-sm">
        <div class="card-header bg-warning">
            <h5><i class="fas fa-calendar-alt"></i> Seleccionar Meses a Pagar</h5>
        </div>
        <div class="card-body">
            <div id="listaPagosPendientes">
                <p class="text-muted">No hay pagos pendientes.</p>
            </div>
        </div>
    </div>

    <!-- SELECCIÓN DE FORMA DE PAGO -->
    <div class="mt-3">
        <label><strong>Forma de Pago:</strong></label>
        <select id="formaPago" class="form-control">
            <option value="">-- Seleccione una forma de pago --</option>
            <option value="efectivo">Efectivo</option>
            <option value="tarjeta">Tarjeta</option>
            <option value="transferencia">Transferencia</option>
        </select>
    </div>

    <!-- TOTAL A COBRAR -->
    <div class="alert alert-success mt-3">
        <h4><strong>Total a Cobrar: $<span id="totalCobrar">0</span></strong></h4>
    </div>

    <!-- BOTÓN COBRAR -->
    <button class="btn btn-primary mt-3 w-100" id="btnCobrar">
        <i class="fas fa-hand-holding-usd"></i> COBRAR
    </button>
</div>

<!-- MODAL PARA INGRESAR NÚMERO DE BOLETA -->
<div class="modal fade" id="modalBoleta" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ingresar Número de Boleta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <label><strong>Número de Boleta:</strong></label>
                <input type="text" id="numeroBoleta" class="form-control" placeholder="Ingrese número de boleta">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="confirmarCobro"><i class="fas fa-check"></i> Confirmar Pago</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}