@extends('layouts.app')

@section('title', 'Detalles del Plan de Internet')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">📶 {{ $planInternet->nombre }}</h1>
                <div>
                    <a href="{{ route('planes-internet.edit', $planInternet) }}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                    <a href="{{ route('planes-internet.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <!-- Información del Plan -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Información del Plan</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="40%">Nombre:</th>
                                    <td>{{ $planInternet->nombre }}</td>
                                </tr>
                                <tr>
                                    <th>Tipo:</th>
                                    <td>
                                        <span class="badge bg-{{ $planInternet->tipo == 'residencial' ? 'info' : ($planInternet->tipo == 'empresarial' ? 'warning' : 'primary') }}">
                                            {{ ucfirst($planInternet->tipo) }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Velocidad de Bajada:</th>
                                    <td>
                                        <i class="fas fa-download text-success"></i> 
                                        {{ number_format($planInternet->velocidad_bajada, 1) }} Mbps
                                    </td>
                                </tr>
                                <tr>
                                    <th>Velocidad de Subida:</th>
                                    <td>
                                        <i class="fas fa-upload text-info"></i> 
                                        {{ number_format($planInternet->velocidad_subida, 1) }} Mbps
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <th width="40%">Precio Mensual:</th>
                                    <td><strong class="text-success">Bs. {{ number_format($planInternet->precio, 2) }}</strong></td>
                                </tr>
                                <tr>
                                    <th>Costo de Instalación:</th>
                                    <td><span class="text-warning">Bs. {{ number_format($planInternet->instalacion, 2) }}</span></td>
                                </tr>
                                <tr>
                                    <th>Clientes Activos:</th>
                                    <td><span class="badge bg-secondary">{{ $planInternet->activos ?? 0 }}</span></td>
                                </tr>
                                <tr>
                                    <th>Estado:</th>
                                    <td>
                                        @if($planInternet->activo)
                                            <span class="badge bg-success">Activo</span>
                                        @else
                                            <span class="badge bg-secondary">Inactivo</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-12">
                            <h6>Descripción:</h6>
                            <p class="text-muted">{{ $planInternet->descripcion }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Clientes con este Plan -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Clientes con este Plan ({{ $clientes->total() }})</h5>
                </div>
                <div class="card-body">
                    @if($clientes->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Cliente</th>
                                        <th>Teléfono</th>
                                        <th>Zona</th>
                                        <th>Estado</th>
                                        <th>Fecha de Registro</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($clientes as $cliente)
                                        <tr>
                                            <td>
                                                <strong>{{ $cliente->nombre }} {{ $cliente->apellido }}</strong>
                                                <br>
                                                <small class="text-muted">{{ $cliente->email }}</small>
                                            </td>
                                            <td>{{ $cliente->telefono }}</td>
                                            <td>
                                                @if($cliente->zona)
                                                    <span class="badge bg-info">{{ $cliente->zona->nombre }}</span>
                                                @else
                                                    <span class="text-muted">Sin zona</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($cliente->estado)
                                                    <span class="badge bg-success">Activo</span>
                                                @else
                                                    <span class="badge bg-secondary">Inactivo</span>
                                                @endif
                                            </td>
                                            <td>{{ $cliente->fecha_registro ?? $cliente->created_at->format('d/m/Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Paginación -->
                        @if($clientes->hasPages())
                            <div class="mt-3">
                                {{ $clientes->links() }}
                            </div>
                        @endif
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No hay clientes con este plan actualmente</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- Estadísticas del Plan -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">Estadísticas</h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h4 class="text-primary">{{ $planInternet->activos ?? 0 }}</h4>
                                <small class="text-muted">Clientes Activos</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h4 class="text-success">Bs. {{ number_format(($planInternet->activos ?? 0) * $planInternet->precio, 0) }}</h4>
                                <small class="text-muted">Ingresos Mensuales</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Comparación con otros planes -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Comparación</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Relación Precio/Velocidad</label>
                        <div class="progress" style="height: 20px;">
                            @php
                                $ratio = $planInternet->velocidad_bajada > 0 ? ($planInternet->precio / $planInternet->velocidad_bajada) : 0;
                                $percentage = min(100, max(10, 100 - ($ratio * 2)));
                            @endphp
                            <div class="progress-bar" role="progressbar" style="width: {{ $percentage }}%;">
                                {{ number_format($ratio, 1) }} Bs/Mbps
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Relación Bajada/Subida</label>
                        <div class="progress" style="height: 20px;">
                            @php
                                $ratioUpDown = $planInternet->velocidad_subida > 0 ? ($planInternet->velocidad_bajada / $planInternet->velocidad_subida) : 0;
                                $percentageUpDown = min(100, max(10, $ratioUpDown * 20));
                            @endphp
                            <div class="progress-bar bg-info" role="progressbar" style="width: {{ $percentageUpDown }}%;">
                                {{ number_format($ratioUpDown, 1) }}:1
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <small>
                            <strong>Análisis:</strong><br>
                            @if($ratio < 20)
                                Este plan tiene una excelente relación precio/velocidad.
                            @elseif($ratio < 40)
                                Este plan tiene una buena relación precio/velocidad.
                            @else
                                Este plan podría tener un precio elevado para su velocidad.
                            @endif
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection