@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-plus-circle me-3"></i>Otros Ingresos</h1>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNuevoIngreso">
                    <i class="fas fa-plus me-2"></i>Nuevo Ingreso
                </button>
            </div>
        </div>
    </div>

    <!-- Resumen -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Total del Mes</h5>
                    <h3 class="mb-0">${{ number_format($totalMes, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">Total del Año</h5>
                    <h3 class="mb-0">${{ number_format($totalAnio, 2) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Promedio Mensual</h5>
                    <h3 class="mb-0">${{ number_format($promedioMensual, 2) }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label for="categoria" class="form-label">Categoría</label>
                            <select name="categoria" id="categoria" class="form-select">
                                <option value="">Todas las categorías</option>
                                <option value="instalacion" {{ request('categoria') == 'instalacion' ? 'selected' : '' }}>Instalaciones</option>
                                <option value="reconexion" {{ request('categoria') == 'reconexion' ? 'selected' : '' }}>Reconexiones</option>
                                <option value="multa" {{ request('categoria') == 'multa' ? 'selected' : '' }}>Multas y Penalidades</option>
                                <option value="venta_equipo" {{ request('categoria') == 'venta_equipo' ? 'selected' : '' }}>Venta de Equipos</option>
                                <option value="servicio_tecnico" {{ request('categoria') == 'servicio_tecnico' ? 'selected' : '' }}>Servicio Técnico</option>
                                <option value="capacitacion" {{ request('categoria') == 'capacitacion' ? 'selected' : '' }}>Capacitación</option>
                                <option value="alquiler" {{ request('categoria') == 'alquiler' ? 'selected' : '' }}>Alquiler</option>
                                <option value="otro" {{ request('categoria') == 'otro' ? 'selected' : '' }}>Otros</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="fecha_desde" class="form-label">Desde</label>
                            <input type="date" name="fecha_desde" id="fecha_desde" class="form-control" value="{{ request('fecha_desde') }}">
                        </div>
                        <div class="col-md-2">
                            <label for="fecha_hasta" class="form-label">Hasta</label>
                            <input type="date" name="fecha_hasta" id="fecha_hasta" class="form-control" value="{{ request('fecha_hasta') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="buscar" class="form-label">Buscar</label>
                            <input type="text" name="buscar" id="buscar" class="form-control" placeholder="Descripción o cliente" value="{{ request('buscar') }}">
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">Filtrar</button>
                            <a href="{{ route('finanzas.otros-ingresos') }}" class="btn btn-secondary">Limpiar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de ingresos -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if($ingresos->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Categoría</th>
                                        <th>Descripción</th>
                                        <th>Cliente</th>
                                        <th>Monto</th>
                                        <th>Método de Pago</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($ingresos as $ingreso)
                                        <tr>
                                            <td>{{ $ingreso->fecha_ingreso ? \Carbon\Carbon::parse($ingreso->fecha_ingreso)->format('d/m/Y') : '-' }}</td>
                                            <td>
                                                <span class="badge 
                                                    @if($ingreso->tipo_ingreso == 'instalacion') bg-success
                                                    @elseif($ingreso->tipo_ingreso == 'reconexion') bg-warning
                                                    @elseif($ingreso->tipo_ingreso == 'multa') bg-danger
                                                    @elseif($ingreso->tipo_ingreso == 'venta_equipo') bg-info
                                                    @elseif($ingreso->tipo_ingreso == 'servicio_tecnico') bg-primary
                                                    @else bg-secondary
                                                    @endif">
                                                    {{ ucfirst(str_replace('_', ' ', $ingreso->tipo_ingreso)) }}
                                                </span>
                                            </td>
                                            <td>{{ $ingreso->concepto }}</td>
                                            <td>{{ $ingreso->cliente ? $ingreso->cliente->nombre . ' ' . $ingreso->cliente->apellido : '-' }}</td>
                                            <td class="text-end"><strong>Bs {{ number_format($ingreso->monto, 2) }}</strong></td>
                                            <td>{{ ucfirst($ingreso->metodo_pago) }}</td>
                                            <td>
                                                <button class="btn btn-sm btn-primary" type="button" onclick="editarIngreso({{ $ingreso->id }})">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-sm btn-danger" type="button" onclick="eliminarIngreso({{ $ingreso->id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="table-info">
                                        <th colspan="4" class="text-end">Total:</th>
                                        <th class="text-end">${{ number_format($ingresos->sum('monto'), 2) }}</th>
                                        <th colspan="2"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        {{ $ingresos->appends(request()->query())->links() }}
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-plus-circle fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No hay otros ingresos registrados</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Nuevo Ingreso -->
<div class="modal fade" id="modalNuevoIngreso" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nuevo Ingreso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="formNuevoIngreso">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="categoria" class="form-label">Categoría *</label>
                        <select name="categoria" id="categoria_modal" class="form-select" required>
                            <option value="">Seleccionar categoría</option>
                            <option value="instalacion">Instalaciones</option>
                            <option value="reconexion">Reconexiones</option>
                            <option value="multa">Multas y Penalidades</option>
                            <option value="venta_equipo">Venta de Equipos</option>
                            <option value="servicio_tecnico">Servicio Técnico</option>
                            <option value="capacitacion">Capacitación</option>
                            <option value="alquiler">Alquiler</option>
                            <option value="otro">Otros</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="descripcion" class="form-label">Descripción *</label>
                        <input type="text" name="descripcion" id="descripcion" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="cliente_id" class="form-label">Cliente (Opcional)</label>
                        <select name="cliente_id" id="cliente_id_modal" class="form-select">
                            <option value="">Seleccionar cliente</option>
                            @foreach($clientes as $cliente)
                                <option value="{{ $cliente->id }}">{{ $cliente->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="monto" class="form-label">Monto *</label>
                        <input type="number" name="monto" id="monto_modal" class="form-control" step="0.01" required>
                    </div>
                    <div class="mb-3">
                        <label for="metodo_pago" class="form-label">Método de Pago *</label>
                            <select name="metodo_pago" id="metodo_pago_modal" class="form-select" required>
                            <option value="">Seleccionar método</option>
                            <option value="efectivo">Efectivo</option>
                            <option value="transferencia">Transferencia</option>
                            <option value="deposito">Depósito</option>
                            <option value="tarjeta">Tarjeta</option>
                            <option value="qr">QR</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="fecha" class="form-label">Fecha *</label>
                        <input type="date" name="fecha" id="fecha_modal" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </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>

@push('scripts')
<script>
    function eliminarIngreso(id) {
        if (confirm('¿Está seguro de eliminar este ingreso?')) {
            fetch(`/finanzas/otros-ingresos/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            }).then(() => location.reload());
        }
    }

    document.getElementById('formNuevoIngreso').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        
        fetch('{{ route("finanzas.otros-ingresos.store") }}', {
            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(data.message);
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al guardar el ingreso');
        });
    });
</script>
@endpush
@endsection