@extends('layouts.app')

@section('title', 'Gestión de Contratos')
@section('page-title', 'Gestión de Contratos')

@section('content')
<div class="container-fluid fade-in">
    <!-- Header con botones de acción -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-dark fw-bold">Gestión de Contratos</h1>
            <p class="text-muted mb-0">Administra todos los contratos de servicios de internet</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('contratos.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Nuevo Contrato
            </a>
        </div>
    </div>

    <!-- Estadísticas mejoradas -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card">
                <div class="card-body d-flex align-items-center">
                    <div class="stats-icon me-3">
                        <i class="fas fa-file-contract"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-label">Contratos Activos</div>
                        <h3 class="stats-number">{{ $contratos->where('estado', 'activo')->count() }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card warning">
                <div class="card-body d-flex align-items-center">
                    <div class="stats-icon warning me-3">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-label">En Mora</div>
                        <h3 class="stats-number">{{ $contratos->filter(function($c) { return $c->estaEnMora(); })->count() }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card danger">
                <div class="card-body d-flex align-items-center">
                    <div class="stats-icon danger me-3">
                        <i class="fas fa-pause-circle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-label">Suspendidos</div>
                        <h3 class="stats-number">{{ $contratos->where('estado', 'suspendido')->count() }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card success">
                <div class="card-body d-flex align-items-center">
                    <div class="stats-icon success me-3">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-label">Ingresos Mensuales</div>
                        <h3 class="stats-number">Bs. {{ number_format($contratos->where('estado', 'activo')->sum('mensualidad'), 0) }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Filtros y búsqueda -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" placeholder="Buscar por cliente, número de contrato..." id="searchInput">
                    </div>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="estadoFilter">
                        <option value="">Todos los estados</option>
                        <option value="activo">Activo</option>
                        <option value="suspendido">Suspendido</option>
                        <option value="terminado">Terminado</option>
                        <option value="pendiente">Pendiente</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" id="planFilter">
                        <option value="">Todos los planes</option>
                        @foreach($contratos->pluck('planInternet.nombre')->unique()->filter() as $plan)
                            <option value="{{ $plan }}">{{ $plan }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-outline-secondary w-100" onclick="limpiarFiltros()">
                        <i class="fas fa-times me-2"></i>Limpiar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de contratos mejorada -->
    <div class="card shadow">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="fas fa-list me-2"></i>Lista de Contratos
                </h5>
                <small class="text-muted">{{ $contratos->count() }} contratos registrados</small>
            </div>
        </div>
        <div class="card-body p-0">
            @if($contratos->count() > 0)
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="contratosTable">
                    <thead>
                        <tr>
                            <th class="ps-4">Contrato</th>
                            <th>Cliente</th>
                            <th>Plan</th>
                            <th>Mensualidad</th>
                            <th>Saldo Pendiente</th>
                            <th>Próximo Pago</th>
                            <th>Estado</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($contratos as $contrato)
                        <tr>
                            <td class="ps-4">
                                <div>
                                    <strong class="text-primary">{{ $contrato->numero_contrato }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $contrato->fecha_inicio->format('d/m/Y') }}</small>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <strong>{{ $contrato->cliente->nombre ?? 'N/A' }} {{ $contrato->cliente->apellido ?? '' }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $contrato->cliente->email ?? 'N/A' }}</small>
                                </div>
                            </td>
                            <td>
                                <div>
                                    <strong>{{ $contrato->planInternet->nombre ?? 'N/A' }}</strong>
                                    <br>
                                    <small class="text-muted">{{ $contrato->planInternet->velocidad_bajada ?? 'N/A' }}MB / {{ $contrato->planInternet->velocidad_subida ?? 'N/A' }}MB</small>
                                </div>
                            </td>
                            <td>
                                <span class="fw-bold">Bs. {{ number_format($contrato->mensualidad, 2) }}</span>
                            </td>
                            <td>
                                @if($contrato->saldo_pendiente > 0)
                                    <span class="badge bg-danger">Bs. {{ number_format($contrato->saldo_pendiente, 2) }}</span>
                                @else
                                    <span class="badge bg-success">Al día</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-{{ $contrato->fecha_proximo_pago < now() ? 'danger' : 'secondary' }}">
                                    {{ $contrato->fecha_proximo_pago->format('d/m/Y') }}
                                </span>
                            </td>
                            <td>
                                @php
                                    $estadoColors = [
                                        'activo' => 'success',
                                        'suspendido' => 'warning',
                                        'terminado' => 'danger',
                                        'pendiente' => 'secondary'
                                    ];
                                @endphp
                                <span class="badge bg-{{ $estadoColors[$contrato->estado] ?? 'secondary' }}">
                                    {{ ucfirst($contrato->estado) }}
                                </span>
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <a href="{{ route('contratos.show', $contrato) }}" 
                                       class="btn btn-sm btn-outline-primary" title="Ver Detalle">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('contratos.edit', $contrato) }}" 
                                       class="btn btn-sm btn-outline-secondary" title="Editar">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form method="POST" action="{{ route('contratos.destroy', $contrato) }}" 
                                          class="d-inline" onsubmit="return confirm('¿Está seguro de eliminar este contrato?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @else
            <div class="text-center py-5">
                <i class="fas fa-file-contract fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No hay contratos registrados</h4>
                <p class="text-muted mb-4">Comience creando su primer contrato</p>
                <a href="{{ route('contratos.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>Crear Primer Contrato
                </a>
            </div>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const estadoFilter = document.getElementById('estadoFilter');
    const planFilter = document.getElementById('planFilter');
    const table = document.getElementById('contratosTable');
    
    if (table) {
        function filtrarTabla() {
            const rows = table.querySelectorAll('tbody tr');
            const searchTerm = searchInput.value.toLowerCase();
            const estadoSeleccionado = estadoFilter.value.toLowerCase();
            const planSeleccionado = planFilter.value.toLowerCase();
            
            rows.forEach(row => {
                const texto = row.textContent.toLowerCase();
                const cumpleBusqueda = texto.includes(searchTerm);
                const cumpleEstado = !estadoSeleccionado || texto.includes(estadoSeleccionado);
                const cumplePlan = !planSeleccionado || texto.includes(planSeleccionado);
                
                row.style.display = (cumpleBusqueda && cumpleEstado && cumplePlan) ? '' : 'none';
            });
        }
        
        searchInput.addEventListener('input', filtrarTabla);
        estadoFilter.addEventListener('change', filtrarTabla);
        planFilter.addEventListener('change', filtrarTabla);
    }
});

function limpiarFiltros() {
    document.getElementById('searchInput').value = '';
    document.getElementById('estadoFilter').value = '';
    document.getElementById('planFilter').value = '';
    
    const rows = document.querySelectorAll('#contratosTable tbody tr');
    rows.forEach(row => row.style.display = '');
}
</script>
@endsection