@extends('layouts.admin')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent p-0 mb-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.saas.dashboard') }}">SaaS SuperAdmin</a></li>
                <li class="breadcrumb-item active">Gestión de Pagos SaaS</li>
            </ol>
        </nav>
        <h3 class="font-weight-bold text-dark mb-0">
            <i class="bi bi-cash-coin text-success mr-2"></i>
            Control y Gestión de Pagos de Licencias SaaS
        </h3>
        <p class="text-muted small mb-0">Administre los cobros de suscripciones, pagos pendientes de empresas y comprobantes de pago SaaS.</p>
    </div>
    <div class="mt-2 mt-md-0">
        <button type="button" class="btn btn-success font-weight-bold shadow-sm" data-toggle="modal" data-target="#modalRegistrarPagoSaas">
            <i class="bi bi-plus-circle mr-1"></i> Registrar Nuevo Pago de Licencia
        </button>
    </div>
</div>

<!-- KPIs Financieros SaaS -->
<div class="row mb-4">
    <div class="col-md-4 mb-2">
        <div class="card border-0 shadow-sm" style="border-radius: 12px; border-left: 4px solid #10b981 !important;">
            <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                    <span class="text-muted small font-weight-bold text-uppercase">Total Cobrado Histórico</span>
                    <h3 class="font-weight-bold text-success mb-0 mt-1">${{ number_format($totalCobrado, 2) }}</h3>
                </div>
                <i class="bi bi-wallet2 text-success" style="font-size: 2rem;"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-2">
        <div class="card border-0 shadow-sm" style="border-radius: 12px; border-left: 4px solid #2563eb !important;">
            <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                    <span class="text-muted small font-weight-bold text-uppercase">Recaudado Este Mes</span>
                    <h3 class="font-weight-bold text-primary mb-0 mt-1">${{ number_format($cobradoEsteMes, 2) }}</h3>
                </div>
                <i class="bi bi-calendar2-check text-primary" style="font-size: 2rem;"></i>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-2">
        <div class="card border-0 shadow-sm" style="border-radius: 12px; border-left: 4px solid #f59e0b !important;">
            <div class="card-body p-3 d-flex justify-content-between align-items-center">
                <div>
                    <span class="text-muted small font-weight-bold text-uppercase">Pagos Pendientes por Cobrar</span>
                    <h3 class="font-weight-bold text-warning mb-0 mt-1">${{ number_format($totalPendiente, 2) }}</h3>
                </div>
                <i class="bi bi-hourglass-split text-warning" style="font-size: 2rem;"></i>
            </div>
        </div>
    </div>
</div>

<div class="card card-outline card-success shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table id="tablaPagosSaas" class="table table-bordered table-hover align-middle">
                <thead class="bg-light">
                    <tr>
                        <th>Nro. Comprobante</th>
                        <th>Empresa / Clínica</th>
                        <th>Plan / Licencia</th>
                        <th>Concepto</th>
                        <th>Fecha Pago</th>
                        <th>Método / Ref.</th>
                        <th class="text-right">Monto Total</th>
                        <th class="text-center">Estado</th>
                        <th class="text-center" style="width: 130px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($pagos as $pago)
                        <tr>
                            <td>
                                <span class="font-weight-bold text-dark">{{ $pago->numero_comprobante }}</span>
                            </td>
                            <td>
                                @if($pago->empresa)
                                    <a href="{{ route('admin.saas.empresas.show', $pago->empresa_id) }}" class="font-weight-bold text-dark">
                                        {{ $pago->empresa->nombre }}
                                    </a>
                                    <div class="small text-muted">RUC: {{ $pago->empresa->ruc }}</div>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                <span class="badge badge-light border">{{ $pago->plan->nombre ?? 'General' }}</span>
                                @if($pago->licencia)
                                    <div class="small"><code>{{ $pago->licencia->codigo_licencia }}</code></div>
                                @endif
                            </td>
                            <td class="small">{{ $pago->concepto }}</td>
                            <td class="small">
                                <b>{{ $pago->fecha_pago->format('d/m/Y') }}</b>
                                @if($pago->periodo_inicio && $pago->periodo_fin)
                                    <div class="text-muted">{{ $pago->periodo_inicio->format('d/m/y') }} - {{ $pago->periodo_fin->format('d/m/y') }}</div>
                                @endif
                            </td>
                            <td class="small">
                                <span class="badge badge-info">{{ $pago->metodo_pago }}</span>
                                @if($pago->referencia)
                                    <div class="text-muted">Ref: {{ $pago->referencia }}</div>
                                @endif
                            </td>
                            <td class="text-right font-weight-bold text-success">${{ number_format($pago->monto_total, 2) }}</td>
                            <td class="text-center">
                                @if($pago->estado === 'PAGADO')
                                    <span class="badge badge-success px-2 py-1">PAGADO</span>
                                @elseif($pago->estado === 'PENDIENTE')
                                    <span class="badge badge-warning text-dark px-2 py-1">PENDIENTE</span>
                                @else
                                    <span class="badge badge-secondary px-2 py-1">ANULADO</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('admin.saas.pagos.pdf', $pago->id) }}" target="_blank" class="btn btn-outline-primary" title="Imprimir Comprobante PDF">
                                        <i class="bi bi-printer"></i>
                                    </a>
                                    @if($pago->estado === 'PENDIENTE')
                                        <form action="{{ route('admin.saas.pagos.marcar_pagado', $pago->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-success" title="Marcar como Pagado">
                                                <i class="bi bi-check-lg"></i>
                                            </button>
                                        </form>
                                    @endif
                                    @if($pago->estado !== 'ANULADO')
                                        <form action="{{ route('admin.saas.pagos.anular', $pago->id) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Anular este comprobante de pago?');">
                                            @csrf
                                            <button type="submit" class="btn btn-outline-danger" title="Anular Comprobante">
                                                <i class="bi bi-x-circle"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Registrar Nuevo Pago SaaS -->
<div class="modal fade" id="modalRegistrarPagoSaas" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('admin.saas.pagos.store') }}" method="POST">
            @csrf
            <div class="modal-content" style="border-radius: 14px;">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title font-weight-bold">
                        <i class="bi bi-cash-coin mr-1"></i> Registrar Pago de Licencia / Suscripción SaaS
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Empresa / Clínica *</label>
                            <select name="empresa_id" id="pagoEmpresaSelect" class="form-control font-weight-bold" required>
                                @foreach($empresas as $emp)
                                    <option value="{{ $emp->id }}"
                                            data-plan="{{ $emp->plan_id }}"
                                            data-monto="{{ $emp->plan->precio_mensual ?? '59.90' }}"
                                            data-concepto="Suscripción Mensual {{ $emp->plan->nombre ?? 'Plan SaaS' }}">
                                        {{ $emp->codigo }} — {{ $emp->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Plan Asociado</label>
                            <select name="plan_id" id="pagoPlanSelect" class="form-control">
                                @foreach($planes as $pl)
                                    <option value="{{ $pl->id }}">{{ $pl->nombre }} (${{ number_format($pl->precio_mensual, 2) }}/mes)</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-8 form-group">
                            <label class="font-weight-bold">Concepto del Pago *</label>
                            <input type="text" name="concepto" id="pagoConceptoInput" class="form-control" required>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold text-success">Monto Total ($) *</label>
                            <input type="number" step="0.01" name="monto_total" id="pagoMontoInput" class="form-control font-weight-bold" required>
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Fecha de Pago *</label>
                            <input type="date" name="fecha_pago" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Período Inicio</label>
                            <input type="date" name="periodo_inicio" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Período Fin (Nueva Vigencia)</label>
                            <input type="date" name="periodo_fin" class="form-control" value="{{ \Carbon\Carbon::today()->addMonth()->format('Y-m-d') }}">
                        </div>

                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Método de Pago *</label>
                            <select name="metodo_pago" class="form-control" required>
                                <option value="TRANSFERENCIA">Transferencia Bancaria</option>
                                <option value="TARJETA">Tarjeta de Crédito/Débito</option>
                                <option value="EFECTIVO">Efectivo</option>
                                <option value="DEPOSITO">Depósito</option>
                            </select>
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Referencia / Nro. Transacción</label>
                            <input type="text" name="referencia" class="form-control" placeholder="Ej: TRX-09821">
                        </div>
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Estado del Pago *</label>
                            <select name="estado" class="form-control font-weight-bold" required>
                                <option value="PAGADO">PAGADO</option>
                                <option value="PENDIENTE">PENDIENTE DE COBRO</option>
                            </select>
                        </div>
                    </div>

                    <div class="custom-control custom-checkbox mt-1">
                        <input type="checkbox" name="extender_licencia" value="1" class="custom-control-input" id="chkExtenderLicencia" checked>
                        <label class="custom-control-label font-weight-bold text-primary" for="chkExtenderLicencia">
                            Extender automáticamente la fecha de vencimiento de la licencia activa hasta "Período Fin"
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success font-weight-bold">
                        <i class="bi bi-check2-circle mr-1"></i> Guardar Pago SaaS
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
$(function () {
    $('#tablaPagosSaas').DataTable({
        responsive: true,
        autoWidth: false,
        order: [[0, 'desc']],
        language: {
            url: "//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json"
        }
    });

    function syncEmpresaPago() {
        var opt = $('#pagoEmpresaSelect option:selected');
        if (!opt.length) return;
        $('#pagoPlanSelect').val(opt.data('plan'));
        $('#pagoMontoInput').val(opt.data('monto'));
        $('#pagoConceptoInput').val(opt.data('concepto'));
    }

    $('#pagoEmpresaSelect').on('change', syncEmpresaPago);
    syncEmpresaPago();
});
</script>
@endsection