@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-header d-flex justify-content-between align-items-center">
                <h1><i class="fas fa-credit-card me-3"></i>Formas de Pago</h1>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNuevaFormaPago">
                    <i class="fas fa-plus me-2"></i>Nueva Forma de Pago
                </button>
            </div>
        </div>
    </div>

    <!-- Estadísticas de formas de pago -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">Efectivo</h5>
                    <h3 class="mb-0">{{ $estadisticas['efectivo']['cantidad'] }}</h3>
                    <small>${{ number_format($estadisticas['efectivo']['monto'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Transferencia</h5>
                    <h3 class="mb-0">{{ $estadisticas['transferencia']['cantidad'] }}</h3>
                    <small>${{ number_format($estadisticas['transferencia']['monto'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Tarjeta</h5>
                    <h3 class="mb-0">{{ $estadisticas['tarjeta']['cantidad'] }}</h3>
                    <small>${{ number_format($estadisticas['tarjeta']['monto'], 2) }}</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">Otros</h5>
                    <h3 class="mb-0">{{ $estadisticas['otros']['cantidad'] }}</h3>
                    <small>${{ number_format($estadisticas['otros']['monto'], 2) }}</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Configuración de formas de pago -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-cog me-2"></i>Configuración de Formas de Pago</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Forma de Pago</th>
                                    <th>Estado</th>
                                    <th>Cuenta/Número</th>
                                    <th>Observaciones</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($formasPago as $forma)
                                    <tr>
                                        <td>
                                            <i class="fas fa-{{ $forma['icono'] }} me-2"></i>
                                            {{ $forma['nombre'] }}
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $forma['activo'] ? 'success' : 'secondary' }}">
                                                {{ $forma['activo'] ? 'Activo' : 'Inactivo' }}
                                            </span>
                                        </td>
                                        <td>{{ $forma['cuenta'] ?? '-' }}</td>
                                        <td>{{ $forma['observaciones'] ?? '-' }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-primary" type="button" onclick="editarFormaPago('{{ $forma['id'] }}')">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm btn-{{ $forma['activo'] ? 'warning' : 'success' }}" type="button"
                                                    onclick="toggleEstado('{{ $forma['id'] }}')">
                                                <i class="fas fa-{{ $forma['activo'] ? 'pause' : 'play' }}"></i>
                                            </button>
                                            <button class="btn btn-sm btn-danger" type="button" onclick="eliminarFormaPago('{{ $forma['id'] }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráfico de distribución -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-chart-bar me-2"></i>Distribución de Pagos por Método - Último Mes</h5>
                </div>
                <div class="card-body">
                    <canvas id="distribucionChart" height="100"></canvas>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-chart-pie me-2"></i>Participación por Método</h5>
                </div>
                <div class="card-body">
                    <canvas id="participacionChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nueva Forma de Pago -->
<div class="modal fade" id="modalNuevaFormaPago" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nueva Forma de Pago</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formNuevaFormaPago">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre *</label>
                        <input type="text" name="nombre" id="nombre" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="icono" class="form-label">Icono FontAwesome</label>
                        <input type="text" name="icono" id="icono" class="form-control" placeholder="money-bill">
                        <small class="text-muted">Ej: money-bill, credit-card, qrcode, exchange-alt</small>
                    </div>
                    <div class="mb-3">
                        <label for="cuenta" class="form-label">Cuenta/Número</label>
                        <input type="text" name="cuenta" id="cuenta" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label for="observaciones" class="form-label">Observaciones</label>
                        <textarea name="observaciones" id="observaciones" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" name="activo" id="activo" class="form-check-input" checked>
                        <label for="activo" class="form-check-label">Activo</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Editar Forma de Pago -->
<div class="modal fade" id="modalEditarFormaPago" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editar Forma de Pago</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formEditarFormaPago">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_nombre" class="form-label">Nombre *</label>
                        <input type="text" name="nombre" id="edit_nombre" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="edit_icono" class="form-label">Icono FontAwesome</label>
                        <input type="text" name="icono" id="edit_icono" class="form-control" placeholder="money-bill">
                        <small class="text-muted">Ej: money-bill, credit-card, qrcode, exchange-alt</small>
                    </div>
                    <div class="mb-3">
                        <label for="edit_cuenta" class="form-label">Cuenta/Número</label>
                        <input type="text" name="cuenta" id="edit_cuenta" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label for="edit_observaciones" class="form-label">Observaciones</label>
                        <textarea name="observaciones" id="edit_observaciones" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" name="activo" id="edit_activo" class="form-check-input">
                        <label for="edit_activo" class="form-check-label">Activo</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Actualizar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Gráfico de distribución
    const ctxDistribucion = document.getElementById('distribucionChart').getContext('2d');
    new Chart(ctxDistribucion, {
        type: 'bar',
        data: {
            labels: {!! json_encode($distribucionLabels) !!},
            datasets: [{
                label: 'Cantidad de Pagos',
                data: {!! json_encode($distribucionData) !!},
                backgroundColor: ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1'],
                borderColor: ['#0056b3', '#1e7e34', '#d39e00', '#c82333', '#5a32a3'],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Gráfico de participación
    const ctxParticipacion = document.getElementById('participacionChart').getContext('2d');
    new Chart(ctxParticipacion, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($participacionLabels) !!},
            datasets: [{
                data: {!! json_encode($participacionData) !!},
                backgroundColor: ['#007bff', '#28a745', '#ffc107', '#dc3545', '#6f42c1']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

    function editarFormaPago(id) {
        // Obtener datos de la forma de pago
        fetch(`/finanzas/formas-pago/${id}`)
            .then(response => response.json())
            .then(data => {
                const config = JSON.parse(data.configuracion || '{}');
                
                // Rellenar modal con datos
                document.getElementById('formEditarFormaPago').dataset.id = id;
                document.getElementById('edit_nombre').value = data.nombre;
                document.getElementById('edit_icono').value = config.icono || '';
                document.getElementById('edit_cuenta').value = config.cuenta || '';
                document.getElementById('edit_observaciones').value = data.descripcion || '';
                document.getElementById('edit_activo').checked = data.activo;
                
                // Mostrar modal
                new bootstrap.Modal(document.getElementById('modalEditarFormaPago')).show();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al cargar los datos');
            });
    }

    function toggleEstado(id) {
        if (!confirm('¿Está seguro de cambiar el estado de esta forma de pago?')) {
            return;
        }

        fetch(`/finanzas/formas-pago/${id}/toggle`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cambiar el estado');
        });
    }

    function eliminarFormaPago(id) {
        if (!confirm('¿Está seguro de eliminar esta forma de pago? Esta acción no se puede deshacer.')) {
            return;
        }

        fetch(`/finanzas/formas-pago/${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al eliminar');
        });
    }

    document.getElementById('formNuevaFormaPago').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            nombre: formData.get('nombre'),
            icono: formData.get('icono'),
            cuenta: formData.get('cuenta'),
            observaciones: formData.get('observaciones'),
            activo: formData.get('activo') ? true : false
        };

        fetch('{{ route("finanzas.formas-pago.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al guardar');
        });
    });

    document.getElementById('formEditarFormaPago').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const id = this.dataset.id;
        const formData = new FormData(this);
        const data = {
            nombre: formData.get('nombre'),
            icono: formData.get('icono'),
            cuenta: formData.get('cuenta'),
            observaciones: formData.get('observaciones'),
            activo: formData.get('activo') ? true : false
        };

        fetch(`/finanzas/formas-pago/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al actualizar');
        });
    });
</script>
@endpush
@endsection