@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Detalles de la Deuda</h3>
                    <div class="card-tools">
                        <a href="{{ route('deudas.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-info">
                                    <i class="fas fa-user"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Cliente</span>
                                    <span class="info-box-number">{{ $deuda->nombre_cliente }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-success">
                                    <i class="fas fa-dollar-sign"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Monto</span>
                                    <span class="info-box-number">₡{{ number_format($deuda->monto, 2) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4>Información de la Deuda</h4>
                                </div>
                                <div class="card-body">
                                    <table class="table table-bordered">
                                        <tr>
                                            <td><strong>Concepto:</strong></td>
                                            <td>{{ $deuda->concepto }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Fecha de Vencimiento:</strong></td>
                                            <td>{{ $deuda->fecha_vencimiento->format('d/m/Y') }}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>Estado:</strong></td>
                                            <td>
                                                @if($deuda->estado == 'pendiente')
                                                    <span class="badge badge-warning">Pendiente</span>
                                                @elseif($deuda->estado == 'pagada')
                                                    <span class="badge badge-success">Pagada</span>
                                                @elseif($deuda->estado == 'vencida')
                                                    <span class="badge badge-danger">Vencida</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><strong>Tipo:</strong></td>
                                            <td>{{ ucfirst($deuda->tipo) }}</td>
                                        </tr>
                                        @if($deuda->observaciones)
                                        <tr>
                                            <td><strong>Observaciones:</strong></td>
                                            <td>{{ $deuda->observaciones }}</td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if($deuda->estado == 'pendiente')
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4>Opciones de Pago</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        @foreach($configuracionesPago as $config)
                                        <div class="col-md-4">
                                            <div class="card border-primary">
                                                <div class="card-header bg-primary text-white">
                                                    @if($config->metodo == 'efectivo')
                                                        <i class="fas fa-money-bill-wave"></i> Efectivo
                                                    @elseif($config->metodo == 'transferencia')
                                                        <i class="fas fa-university"></i> Transferencia Bancaria
                                                    @elseif($config->metodo == 'qr')
                                                        <i class="fas fa-qrcode"></i> QR / SINPE Móvil
                                                    @endif
                                                </div>
                                                <div class="card-body">
                                                    @if($config->metodo == 'efectivo')
                                                        <p>Pago en efectivo en nuestras oficinas.</p>
                                                        <p><strong>Verificación:</strong> Inmediata</p>
                                                    @elseif($config->metodo == 'transferencia')
                                                        <p>Transferencia a nuestra cuenta bancaria.</p>
                                                        <p><strong>Verificación:</strong> Manual</p>
                                                        <p><strong>Comprobante:</strong> Requerido</p>
                                                    @elseif($config->metodo == 'qr')
                                                        <p>Pago mediante SINPE Móvil.</p>
                                                        <p><strong>Teléfono:</strong> 8888-8888</p>
                                                        <p><strong>Verificación:</strong> Manual</p>
                                                    @endif
                                                    
                                                    <button class="btn btn-primary btn-block" onclick="pagarCon('{{ $config->tipo_pago }}')">
                                                        Pagar con {{ ucfirst(str_replace('_', ' ', $config->tipo_pago)) }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    
                    @if($deuda->pagos->count() > 0)
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4>Historial de Pagos</h4>
                                </div>
                                <div class="card-body">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Método</th>
                                                <th>Monto</th>
                                                <th>Estado</th>
                                                <th>Referencia</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($deuda->pagos as $pago)
                                            <tr>
                                                <td>{{ $pago->fecha_pago->format('d/m/Y H:i') }}</td>
                                                <td>{{ ucfirst(str_replace('_', ' ', $pago->tipo_pago)) }}</td>
                                                <td>₡{{ number_format($pago->monto, 2) }}</td>
                                                <td>
                                                    @if($pago->estado == 'pendiente')
                                                        <span class="badge badge-warning">Pendiente</span>
                                                    @elseif($pago->estado == 'verificado')
                                                        <span class="badge badge-success">Verificado</span>
                                                    @elseif($pago->estado == 'rechazado')
                                                        <span class="badge badge-danger">Rechazado</span>
                                                    @endif
                                                </td>
                                                <td>{{ $pago->numero_referencia ?? 'N/A' }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para procesar pago -->
<div class="modal fade" id="modalPago" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Procesar Pago</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="formPago">
                    <input type="hidden" name="deuda_id" value="{{ $deuda->id }}">
                    <input type="hidden" id="metodo_pago" name="tipo_pago">
                    
                    <div class="alert alert-info">
                        <h6>Información del Pago:</h6>
                        <p><strong>Cliente:</strong> {{ $deuda->nombre_cliente }}</p>
                        <p><strong>Concepto:</strong> {{ $deuda->concepto }}</p>
                        <p><strong>Monto:</strong> ₡{{ number_format($deuda->monto, 2) }}</p>
                    </div>
                    
                    <div class="form-group">
                        <label>Monto a Pagar:</label>
                        <input type="number" name="monto" class="form-control" value="{{ $deuda->monto }}" step="0.01" required>
                    </div>
                    
                    <!-- Campos para transferencia bancaria -->
                    <div id="campos_transferencia" style="display: none;">
                        <div class="form-group">
                            <label>Banco:</label>
                            <select name="banco" class="form-control">
                                <option value="">Seleccione banco</option>
                                <option value="banco_nacional">Banco Nacional</option>
                                <option value="banco_popular">Banco Popular</option>
                                <option value="bac">BAC San José</option>
                                <option value="banco_costa_rica">Banco de Costa Rica</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Número de Referencia:</label>
                            <input type="text" name="numero_referencia" class="form-control" placeholder="Número de transferencia">
                        </div>
                        <div class="form-group">
                            <label>Comprobante:</label>
                            <input type="file" name="comprobante" class="form-control-file" accept="image/*,application/pdf">
                        </div>
                    </div>
                    
                    <!-- Campos para QR -->
                    <div id="campos_qr" style="display: none;">
                        <div class="alert alert-info">
                            <h6>Información para SINPE Móvil:</h6>
                            <p><strong>Teléfono:</strong> 8888-8888</p>
                            <p><strong>Nombre:</strong> Internet Services CR</p>
                        </div>
                        <div class="form-group">
                            <label>Número de Referencia SINPE:</label>
                            <input type="text" name="numero_referencia" class="form-control" placeholder="Número de referencia">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>Observaciones:</label>
                        <textarea name="observaciones" class="form-control" rows="3"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" onclick="procesarPago()">Procesar Pago</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function pagarCon(metodo) {
    document.getElementById('metodo_pago').value = metodo;
    
    // Ocultar todos los campos adicionales
    document.getElementById('campos_transferencia').style.display = 'none';
    document.getElementById('campos_qr').style.display = 'none';
    
    // Mostrar campos específicos
    if (metodo === 'transferencia') {
        document.getElementById('campos_transferencia').style.display = 'block';
    } else if (metodo === 'qr') {
        document.getElementById('campos_qr').style.display = 'block';
    }
    
    // Mostrar modal
    $('#modalPago').modal('show');
}

function procesarPago() {
    const formData = new FormData(document.getElementById('formPago'));
    
    fetch('/pagos/procesar', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Pago procesado exitosamente!');
            $('#modalPago').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al procesar el pago');
    });
}
</script>
@endsection