<?php

/**
 * Provide a public-facing view for the plugin
 *
 * @link       https://github.com/Andro2k
 * @since      1.0.0
 *
 * @package    Cotizado_Coac
 * @subpackage Cotizado_Coac/public/partials
 */
?>

<div class="coac-cotizador-wrapper">
    <div class="coac-tabs">
        <button class="coac-tab-btn active" data-target="tab-credito">Simulador de Crédito</button>
        <button class="coac-tab-btn" data-target="tab-inversion">Simulador de Inversión</button>
    </div>

    <div id="tab-credito" class="coac-tab-content active">
        <h2 class="coac-title">Simulador de Crédito</h2>

        <div class="coac-grid-top">
            
            <div class="coac-card">
                <form id="form-coac-credito">
                    <div class="coac-form-group">
                        <label for="tipo_credito">Tipo de Crédito:</label>
                        <select id="tipo_credito" required>
                            <option value="">Seleccione una opción</option>
                        </select>
                    </div>

                    <div class="coac-form-group">
                        <label for="monto_credito">Monto:</label>
                        <input type="number" id="monto_credito" step="0.01" placeholder="Ej: 2000" required>
                    </div>

                    <div class="coac-form-group">
                        <label for="plazo_credito">Plazo (meses):</label>
                        <input type="number" id="plazo_credito" placeholder="Ej: 24" required>
                    </div>

                    <div class="coac-form-group">
                        <label for="tipo_amortizacion">Tipo de Amortización:</label>
                        <select id="tipo_amortizacion">
                            <option value="Fija">Fija</option>
                            <option value="Variable">Variable</option>
                        </select>
                    </div>

                    <div class="coac-form-group">
                        <label for="fecha_inicio">Fecha de Inicio:</label>
                        <input type="date" id="fecha_inicio" required>
                    </div>

                    <button type="submit" class="coac-btn-primary">Enviar</button>
                </form>
            </div>

            <div class="coac-card">
                <h3 class="coac-card-title">Descripción del Crédito</h3>
                <ul class="coac-list-info">
                    <li><strong>Tipo:</strong> <span id="res_desc_tipo">-</span></li>
                    <li><strong>Monto:</strong> <span id="res_desc_monto">0.00 USD</span></li>
                    <li><strong>Tasa de Interés:</strong> <span id="res_desc_tasa">0.00% anual</span></li>
                    <li><strong>Plazo:</strong> <span id="res_desc_plazo">0 meses</span></li>
                    <li><strong>Seguro:</strong> <span id="res_desc_seguro">0.00%</span></li>
                    <li><strong>Tipo de Amortización:</strong> <span id="res_desc_amortizacion">-</span></li>
                </ul>
            </div>

            <div class="coac-card">
                <h3 class="coac-card-title">Totales</h3>
                <ul class="coac-list-info coac-list-spaced">
                    <li><strong>Subtotal (Monto):</strong> <span id="res_tot_subtotal">0.00 USD</span></li>
                    <li><strong>Total Interés:</strong> <span id="res_tot_interes">0.00 USD</span></li>
                    <li><strong>Total Seguro:</strong> <span id="res_tot_seguro">0.00 USD</span></li>
                    <li><strong>Total a Pagar (incluido seguro):</strong> <span id="res_tot_pagar">0.00 USD</span></li>
                </ul>
            </div>

        </div>

        <div class="coac-table-container">
            <h3 class="coac-table-title">Cuotas Mensuales</h3>
            <div class="coac-table-responsive">
                <table class="coac-table">
                    <thead>
                        <tr>
                            <th>NO CUOTA</th>
                            <th>FECHA DE PAGO</th>
                            <th>INTERÉS</th>
                            <th>CAPITAL</th>
                            <th>RUBRO</th>
                            <th>PAGO</th>
                            <th>SALDO</th>
                            <th>TOTAL A PAGAR</th>
                        </tr>
                    </thead>
                    <tbody id="tabla_cuotas_body">
                        <tr>
                            <td colspan="8" style="text-align: center; padding: 20px;">Llene el formulario y presione "Enviar" para ver la simulación.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="tab-inversion" class="coac-tab-content" style="display: none;">
        <h2 class="coac-title">Simulador de Inversión</h2>
        
        <div class="coac-grid-top" style="grid-template-columns: 1fr 1fr;"> <div class="coac-card">
                <form id="form-coac-inversion">
                    <div class="coac-form-group">
                        <label for="monto_inversion">Monto a Invertir ($):</label>
                        <input type="number" id="monto_inversion" step="0.01" required>
                    </div>

                    <div class="coac-form-group">
                        <label for="plazo_inversion">Plazo (días):</label>
                        <input type="number" id="plazo_inversion" required>
                    </div>

                    <button type="submit" class="coac-btn-primary">Simular Inversión</button>
                </form>
            </div>

            <div class="coac-card">
                <h3 class="coac-card-title">Resultado de Inversión</h3>
                <ul class="coac-list-info coac-list-spaced">
                    <li><strong>Tasa Aplicada:</strong> <span id="res_inv_tasa">0.00%</span></li>
                    <li><strong>Interés Ganado:</strong> <span id="res_inv_interes">0.00 USD</span></li>
                    <li><strong>Total a Recibir:</strong> <span id="res_inv_total">0.00 USD</span></li>
                </ul>
            </div>
        </div>
    </div>
</div>