@extends('layouts/app')
@section('tituloModulo', 'CRÉDITOS')
@section('contenido')

<link rel="stylesheet" href="{{ asset('assets/css/datatables.min.css') }}">

@role('Cliente')
{{-- Vista para Cliente: Solo sus créditos --}}
<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-credit-card mr-2"></i> Mis Créditos</h5>
    </div>
    <div class="card-body">
        @if(isset($creditosCliente) && count($creditosCliente) > 0)
            {{-- Resumen --}}
            <div class="row mb-4 mt-2">
                @php
                    $totalPendiente = 0;
                    $totalPagos = 0;
                    foreach($creditosCliente as $cred) {
                        $totalPendiente += $cred['saldo_pendiente'];
                        foreach($cred['pagos'] as $p) {
                            if($p['estatus'] === 'pendiente') $totalPagos++;
                        }
                    }
                @endphp
                <div class="col-md-4">
                    <div class="card bg-warning text-dark">
                        <div class="card-body text-center mt-3">
                            <h6>Saldo Pendiente</h6>
                            <h3>${{ number_format($totalPendiente, 2) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-info text-white">
                        <div class="card-body text-center mt-3">
                            <h6>Pagos Pendientes</h6>
                            <h3>{{ $totalPagos }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-success text-white">
                        <div class="card-body text-center mt-3">
                            <h6>Créditos Activos</h6>
                            <h3>{{ count($creditosCliente) }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tabla de créditos --}}
            <div class="table-responsive">
                <table class="table table-bordered table-hover datatable">
                    <thead>
                        <tr>
                            <th>Código Compra</th>
                            <th>Semanas</th>
                            <th>Total Crédito</th>
                            <th>Saldo Pendiente</th>
                            <th>Progreso</th>
                            <th>Estatus</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($creditosCliente as $credito)
                        <tr>
                            <td><strong>{{ $credito['codigo_compra'] }}</strong></td>
                            <td class="text-center">{{ $credito['semanas'] }}</td>
                            <td class="text-right">${{ number_format($credito['total_credito'], 2) }}</td>
                            <td class="text-right text-danger">${{ number_format($credito['saldo_pendiente'], 2) }}</td>
                            <td>
                                <div class="progress" style="height: 20px;">
                                    @php
                                        $porcent = ($credito['pagos_realizados'] / $credito['semanas']) * 100;
                                    @endphp
                                    <div class="progress-bar bg-success" style="width: {{ $porcent }}%;">
                                        {{ $credito['pagos_realizados'] }}/{{ $credito['semanas'] }}
                                    </div>
                                </div>
                            </td>
                            <td class="text-center">
                                @if($credito['estatus_credito'] === 'liquidado')
                                    <span class="badge bg-success">Liquidado</span>
                                @else
                                    <span class="badge bg-warning">Activo</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-primary btn-ver-pagos-cliente"
                                        data-codigo="{{ $credito['codigo_compra'] }}"
                                        data-semanas="{{ $credito['semanas'] }}"
                                        data-total="{{ $credito['total_credito'] }}"
                                        data-pagos='@json($credito["pagos"])'>
                                    <i class="fas fa-list"></i> Ver Pagos
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-credit-card fa-4x text-muted mb-3"></i>
                <h5 class="text-muted">No tienes créditos registrados</h5>
                <p class="text-muted">Cuando realices una compra a crédito, aparecerá aquí.</p>
            </div>
        @endif
    </div>
</div>

{{-- Modal para ver pagos del cliente --}}
<div class="modal fade" id="modalPagosCliente" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-list mr-2"></i> Detalle de Pagos - <span id="modalCodigoCompraCliente"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 text-center">
                    <span class="badge bg-info p-2" style="font-size: 14px;">
                        <i class="fas fa-calendar-alt mr-1"></i> <span id="modalSemanasCliente"></span> SEMANAS
                    </span>
                    <span class="badge bg-success p-2 ms-2" style="font-size: 14px;">
                        Total: $<span id="modalTotalCliente"></span>
                    </span>
                </div>
                <input type="hidden" id="codigoClienteActual" value="{{ $cliente->codigo_clie ?? '' }}">
                <input type="hidden" id="codigoCompraClienteActual" value="">>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">No. Pago</th>
                                <th class="text-center">Fecha de Pago</th>
                                <th class="text-center">Monto</th>
                                <th class="text-center">Estatus</th>
                                <th class="text-center">Fecha Pagado</th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="tablaPagosCliente"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@else
{{-- Vista para Administrador: Todos los clientes con créditos --}}
<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-credit-card mr-2"></i> Gestión de Créditos</h5>
    </div>
    <div class="card-body">
        @if(isset($clientesData) && count($clientesData) > 0)
            <div class="table-responsive">
                <table class="table table-bordered table-hover datatable">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Cliente</th>
                            <th>Email</th>
                            <th>Teléfono</th>
                            <th>Créditos</th>
                            <th>Saldo Pendiente</th>
                            <th>Pagos Pend.</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($clientesData as $cliente)
                        <tr>
                            <td>{{ $cliente['codigo_clie'] }}</td>
                            <td><strong>{{ $cliente['nombre'] }}</strong></td>
                            <td>{{ $cliente['email'] }}</td>
                            <td>{{ $cliente['telefono'] ?? 'N/A' }}</td>
                            <td class="text-center">
                                <span class="badge bg-info">{{ $cliente['total_creditos'] }}</span>
                            </td>
                            <td class="text-right text-danger">
                                <strong>${{ number_format($cliente['saldo_pendiente'], 2) }}</strong>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-warning">{{ $cliente['pagos_pendientes'] }}</span>
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-primary btn-ver-creditos"
                                        data-codigo="{{ $cliente['codigo_clie'] }}"
                                        data-nombre="{{ $cliente['nombre'] }}"
                                        data-creditos='@json($cliente["creditos"])'>
                                    <i class="fas fa-eye"></i> Ver Créditos
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-users fa-4x text-muted mb-3"></i>
                <h5 class="text-muted">No hay clientes con créditos activos</h5>
            </div>
        @endif
    </div>
</div>

{{-- Modal para ver créditos del cliente (Admin) --}}
<div class="modal fade" id="modalCreditosAdmin" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-credit-card mr-2"></i> Créditos de: <span id="modalNombreCliente"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Código Compra</th>
                                <th>Semanas</th>
                                <th>Total Crédito</th>
                                <th>Saldo Pendiente</th>
                                <th>Progreso</th>
                                <th>Estatus</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="tablaCreditosAdmin"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal para ver pagos del crédito (Admin) --}}
<div class="modal fade" id="modalPagosAdmin" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-list mr-2"></i> Pagos - <span id="modalCodigoCompraAdmin"></span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="codigoClienteActual" value="">
                <div class="table-responsive">
                    <table class="table table-sm table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">No. Pago</th>
                                <th class="text-center">Fecha de Pago</th>
                                <th class="text-center">Monto</th>
                                <th class="text-center">Estatus</th>
                                <th class="text-center">Fecha Pagado</th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="tablaPagosAdmin"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endrole

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Variables globales para admin
            var codigoClienteActual = '';
            var creditosClienteActual = [];

            // ========== FUNCIONES PARA CLIENTE ==========
            document.querySelectorAll('.btn-ver-pagos-cliente').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    var codigo = this.dataset.codigo;
                    var semanas = this.dataset.semanas;
                    var total = parseFloat(this.dataset.total).toFixed(2);
                    var pagos = JSON.parse(this.dataset.pagos);

                    document.getElementById('modalCodigoCompraCliente').textContent = codigo;
                    document.getElementById('modalSemanasCliente').textContent = semanas;
                    document.getElementById('modalTotalCliente').textContent = total;

                    document.getElementById('codigoCompraClienteActual').value = codigo;

                    var html = '';
                    pagos.forEach(function(pago) {
                        var fechaPago = new Date(pago.fecha_pago).toLocaleDateString('es-MX');
                        var vencido = pago.estatus === 'pendiente' && new Date(pago.fecha_pago) < new Date();
                        var rowClass = pago.estatus === 'pagado' ? 'table-success' : (vencido ? 'table-danger' : '');
                        var estatusBadge = pago.estatus === 'pagado'
                            ? '<span class="badge bg-success"><i class="fas fa-check-circle"></i> Pagado</span>'
                            : '<span class="badge bg-warning"><i class="fas fa-clock"></i> Pendiente</span>' + (vencido ? ' <span class="badge bg-danger">Vencido</span>' : '');
                        var fechaPagado = pago.fecha_pagado ? new Date(pago.fecha_pagado).toLocaleDateString('es-MX') : '-';

                        var accion = pago.estatus === 'pendiente'
                            ? '<button class="btn btn-sm btn-info btn-pagar-mp" data-numero="' + pago.numero_pago + '" data-monto="' + pago.monto + '"><i class="fas fa-credit-card"></i> Pagar</button>'
                            : '<i class="fas fa-check-circle text-success"></i>';

                        html += '<tr class="' + rowClass + '">';
                        html += '<td class="text-center">' + pago.numero_pago + '</td>';
                        html += '<td class="text-center">' + fechaPago + '</td>';
                        html += '<td class="text-center">$' + parseFloat(pago.monto).toFixed(2) + '</td>';
                        html += '<td class="text-center">' + estatusBadge + '</td>';
                        html += '<td class="text-center">' + fechaPagado + '</td>';
                        html += '<td class="text-center">' + accion + '</td>';
                        html += '</tr>';
                    });

                    document.getElementById('tablaPagosCliente').innerHTML = html;

                    // Event listeners para pagar con MercadoPago
                    document.querySelectorAll('.btn-pagar-mp').forEach(function(btnMP) {
                        btnMP.addEventListener('click', function() {
                            var codigoCompra = document.getElementById('codigoCompraClienteActual').value;
                            var numeroPago = this.dataset.numero;
                            var monto = this.dataset.monto;
                            pagarCuotaMercadoPago(codigoCompra, numeroPago, monto);
                        });
                    });
                    var modal = new bootstrap.Modal(document.getElementById('modalPagosCliente'));
                    modal.show();
                });
            });

            // ========== FUNCIONES PARA ADMIN ==========
            document.querySelectorAll('.btn-ver-creditos').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    codigoClienteActual = this.dataset.codigo;
                    var nombre = this.dataset.nombre;
                    creditosClienteActual = JSON.parse(this.dataset.creditos);

                    document.getElementById('modalNombreCliente').textContent = nombre;
                    document.getElementById('codigoClienteActual').value = codigoClienteActual;

                    var html = '';
                    creditosClienteActual.forEach(function(credito) {
                        var porcent = (credito.pagos_realizados / credito.semanas) * 100;
                        var estatusBadge = credito.estatus_credito === 'liquidado'
                            ? '<span class="badge bg-success">Liquidado</span>'
                            : '<span class="badge bg-warning">Activo</span>';

                        html += '<tr>';
                        html += '<td><strong>' + credito.codigo_compra + '</strong></td>';
                        html += '<td class="text-center">' + credito.semanas + '</td>';
                        html += '<td class="text-right">$' + parseFloat(credito.total_credito).toFixed(2) + '</td>';
                        html += '<td class="text-right text-danger">$' + parseFloat(credito.saldo_pendiente).toFixed(2) + '</td>';
                        html += '<td><div class="progress" style="height: 20px;"><div class="progress-bar bg-success" style="width: ' + porcent + '%;">' + credito.pagos_realizados + '/' + credito.semanas + '</div></div></td>';
                        html += '<td class="text-center">' + estatusBadge + '</td>';
                        html += '<td class="text-center"><button class="btn btn-sm btn-success btn-ver-pagos-admin" data-codigo="' + credito.codigo_compra + '" data-pagos=\'' + JSON.stringify(credito.pagos) + '\'><i class="fas fa-list"></i> Ver Pagos</button></td>';
                        html += '</tr>';
                    });

                    document.getElementById('tablaCreditosAdmin').innerHTML = html;

                    // Agregar event listeners a los nuevos botones
                    document.querySelectorAll('.btn-ver-pagos-admin').forEach(function(btnPagos) {
                        btnPagos.addEventListener('click', function() {
                            mostrarPagosAdmin(this.dataset.codigo, JSON.parse(this.dataset.pagos));
                        });
                    });

                    var modal = new bootstrap.Modal(document.getElementById('modalCreditosAdmin'));
                    modal.show();
                });
            });

            function mostrarPagosAdmin(codigoCompra, pagos) {
                document.getElementById('modalCodigoCompraAdmin').textContent = codigoCompra;

                var html = '';
                pagos.forEach(function(pago) {
                    var fechaPago = new Date(pago.fecha_pago).toLocaleDateString('es-MX');
                    var vencido = pago.estatus === 'pendiente' && new Date(pago.fecha_pago) < new Date();
                    var rowClass = pago.estatus === 'pagado' ? 'table-success' : (vencido ? 'table-danger' : '');
                    var estatusBadge = pago.estatus === 'pagado'
                        ? '<span class="badge bg-success"><i class="fas fa-check-circle"></i> Pagado</span>'
                        : '<span class="badge bg-warning"><i class="fas fa-clock"></i> Pendiente</span>' + (vencido ? ' <span class="badge bg-danger">Vencido</span>' : '');
                    var fechaPagado = pago.fecha_pagado ? new Date(pago.fecha_pagado).toLocaleDateString('es-MX') : '-';

                    var accion = pago.estatus === 'pendiente'
                        ? '<button class="btn btn-sm btn-success btn-marcar-pagado" data-codigo="' + codigoCompra + '" data-numero="' + pago.numero_pago + '"><i class="fas fa-check"></i> Marcar Pagado</button>'
                        : '<i class="fas fa-check-circle text-success"></i>';

                    html += '<tr class="' + rowClass + '">';
                    html += '<td class="text-center">' + pago.numero_pago + '</td>';
                    html += '<td class="text-center">' + fechaPago + '</td>';
                    html += '<td class="text-center">$' + parseFloat(pago.monto).toFixed(2) + '</td>';
                    html += '<td class="text-center">' + estatusBadge + '</td>';
                    html += '<td class="text-center">' + fechaPagado + '</td>';
                    html += '<td class="text-center">' + accion + '</td>';
                    html += '</tr>';
                });

                document.getElementById('tablaPagosAdmin').innerHTML = html;

                // Event listeners para marcar como pagado
                document.querySelectorAll('.btn-marcar-pagado').forEach(function(btnPagar) {
                    btnPagar.addEventListener('click', function() {
                        var codigoCliente = document.getElementById('codigoClienteActual').value;
                        var codigoCompra = this.dataset.codigo;
                        var numeroPago = this.dataset.numero;

                        marcarPagoComoRealizado(codigoCliente, codigoCompra, numeroPago);
                    });
                });

                var modal = new bootstrap.Modal(document.getElementById('modalPagosAdmin'));
                modal.show();
            }

            function marcarPagoComoRealizado(codigoCliente, codigoCompra, numeroPago) {
                Swal.fire({
                    title: '¿Confirmar pago?',
                    text: 'Se marcará el pago #' + numeroPago + ' como realizado',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, confirmar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch('{{ route("creditos.marcar.pagado") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                codigo_cliente: codigoCliente,
                                codigo_compra: codigoCompra,
                                numero_pago: parseInt(numeroPago)
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '¡Éxito!',
                                    text: data.message
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message
                                });
                            }
                        })
                        .catch(error => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Ocurrió un error al procesar la solicitud'
                            });
                        });
                    }
                });
            }
        });

        // Función para pagar cuota con MercadoPago
        function pagarCuotaMercadoPago(codigoCompra, numeroPago, monto) {
            var codigoCliente = document.getElementById('codigoClienteActual').value;

            Swal.fire({
                title: 'Procesando...',
                text: 'Redirigiendo a MercadoPago',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            fetch('{{ route("creditos.pagar.mercadopago") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    codigo_cliente: codigoCliente,
                    codigo_compra: codigoCompra,
                    numero_pago: numeroPago,
                    monto: monto
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.init_point) {
                    window.location.href = data.init_point;
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: data.message || 'Error al crear preferencia de pago'
                    });
                }
            })
            .catch(error => {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al conectar con MercadoPago'
                });
            });
        }
    </script>

@endsection