@extends('adminlte::page')

@section('title', 'CRUD de PCs')

@section('plugins.Datatables', true)
@section('plugins.DatatablesPlugin', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Administración de PCs</h1>
        <small class="text-muted">Hora actual: <span id="relojActual"></span></small>
    </div>
@stop

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="fas fa-exclamation-triangle mr-1"></i>
        <strong>Revisa los datos ingresados:</strong>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
@endif

<div class="card">
    <div class="card-header">
        <div class="d-flex align-items-center flex-wrap gap-2">

            <a href="{{ route('dashboard') }}" class="btn btn-dark btn-sm mr-1">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>

            <a href="{{ route('pcs.create') }}" class="btn btn-primary btn-sm mr-1">
                <i class="fas fa-plus"></i> Registrar PC
            </a>

            <form id="formEscanearRed" action="{{ route('pcs.escanear') }}" method="POST" class="d-inline-flex mr-1">
                @csrf
                <input type="text"
                       id="baseRedInput"
                       name="base_red"
                       placeholder="Ej: 172.16.100"
                       class="form-control form-control-sm"
                       style="width:150px"
                       pattern="^\d{1,3}\.\d{1,3}\.\d{1,3}$"
                       title="Ingrese solo los tres primeros bloques. Ejemplo: 172.16.100"
                       required>

                <button id="btnEscanearRed" type="submit" class="btn btn-warning btn-sm ml-1">
                    <i class="fas fa-satellite-dish"></i> Escanear
                </button>
            </form>

            <span id="estadoAutoPing" class="badge badge-light border ml-1">
                <i class="fas fa-sync-alt"></i> Auto ping cada 60 s
            </span>

            <div class="btn-group ml-auto">
                <a href="{{ route('pcs.export.excel') }}" class="btn btn-success btn-sm">
                    <i class="fas fa-file-excel"></i> Excel
                </a>
                <a href="{{ route('pcs.export.csv') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-file-csv"></i> CSV
                </a>
            </div>

        </div>
    </div>

    <div class="card-body">
        <table id="tablaPcs" class="table table-bordered table-hover table-striped table-sm">
            <thead>
                <tr>
                    <th>Nombre PC</th>
                    <th>IP</th>
                    <th>Hostname</th>
                    <th>Área</th>
                    <th>Responsable</th>
                    <th>Estado</th>
                    <th>Ping</th>
                    <th>Último ping</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach($pcs as $pc)
                    <tr>
                        <td><a href="{{ route('pcs.show', $pc) }}">{{ $pc->nombre_pc }}</a></td>
                        <td><code>{{ $pc->ip }}</code></td>
                        <td class="text-muted small">{{ $pc->hostname ?? '—' }}</td>
                        <td>{{ $pc->area ?? '—' }}</td>
                        <td>{{ $pc->responsable ?? '—' }}</td>
                        <td>
                            @if($pc->estado === 'online')
                                <span class="badge badge-success">ONLINE</span>
                            @else
                                <span class="badge badge-danger">OFFLINE</span>
                            @endif
                        </td>
                        <td>
                            @if($pc->tiempo_respuesta)
                                <span class="{{ $pc->tiempo_respuesta < 20 ? 'text-success' : ($pc->tiempo_respuesta < 50 ? 'text-warning' : 'text-danger') }}">
                                    {{ $pc->tiempo_respuesta }} ms
                                </span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td class="small text-muted">{{ $pc->ultimo_ping ? \Carbon\Carbon::parse($pc->ultimo_ping)->diffForHumans() : '—' }}</td>
                        <td>
                            <a href="{{ route('pcs.show', $pc) }}" class="btn btn-info btn-xs" title="Ver detalle">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ route('pcs.edit', $pc) }}" class="btn btn-warning btn-xs" title="Editar">
                                <i class="fas fa-edit"></i>
                            </a>
                            <form action="{{ route('pcs.destroy', $pc) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('¿Dar de baja a {{ $pc->nombre_pc }}?')">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger btn-xs" title="Dar de baja">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalEscaneando" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow">
            <div class="modal-body text-center p-4">
                <div class="spinner-border text-warning mb-3" style="width: 3rem; height: 3rem;" role="status">
                    <span class="sr-only">Escaneando...</span>
                </div>
                <h5 class="mb-2">Escaneando red</h5>
                <p class="mb-1">
                    Buscando equipos activos en el rango:
                    <strong id="textoRangoEscaneo">---</strong>
                </p>
                <p class="text-muted mb-0">
                    Este proceso puede tardar algunos segundos. No cierre ni recargue esta ventana.
                </p>
            </div>
        </div>
    </div>
</div>

@stop

@section('js')
<script>
$(function () {

    let escaneoManualEnProceso = false;
    let actualizandoPing = false;

    function actualizarEstadoAutoPing(texto, clase = 'badge-light') {
        $('#estadoAutoPing')
            .removeClass('badge-light badge-info badge-success badge-warning badge-danger')
            .addClass(clase)
            .html(texto);
    }

    function actualizarPingsCrud() {
        if (escaneoManualEnProceso || actualizandoPing) {
            return;
        }

        actualizandoPing = true;

        actualizarEstadoAutoPing('<i class="fas fa-spinner fa-spin"></i> Actualizando ping...', 'badge-info');

        $.ajax({
            url: "{{ route('pcs.ping.actualizar') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
            timeout: 120000,
            success: function (resp) {
                actualizarEstadoAutoPing(
                    '<i class="fas fa-check-circle"></i> Ping actualizado: ' + resp.online + ' online / ' + resp.offline + ' offline',
                    'badge-success'
                );

                setTimeout(function () {
                    location.reload();
                }, 1200);
            },
            error: function () {
                actualizarEstadoAutoPing('<i class="fas fa-exclamation-triangle"></i> Error al actualizar ping', 'badge-danger');
            },
            complete: function () {
                actualizandoPing = false;
            }
        });
    }


    function actualizarRelojActual() {
        const ahora = new Date();

        const dia = String(ahora.getDate()).padStart(2, '0');
        const mes = String(ahora.getMonth() + 1).padStart(2, '0');
        const anio = ahora.getFullYear();

        const hora = String(ahora.getHours()).padStart(2, '0');
        const minuto = String(ahora.getMinutes()).padStart(2, '0');
        const segundo = String(ahora.getSeconds()).padStart(2, '0');

        $('#relojActual').text(`${dia}/${mes}/${anio} ${hora}:${minuto}:${segundo}`);
    }

    actualizarRelojActual();
    setInterval(actualizarRelojActual, 1000);

    $('#tablaPcs').DataTable({
        responsive: true,
        autoWidth: false,
        pageLength: 15,
        order: [[5, 'asc']],
        language: {
            search: "Buscar:",
            lengthMenu: "Mostrar _MENU_ registros",
            zeroRecords: "No se encontraron resultados",
            info: "Mostrando _START_ a _END_ de _TOTAL_ PCs",
            infoEmpty: "No hay registros",
            infoFiltered: "(filtrado de _MAX_)",
            paginate: { first:"«", last:"»", next:"›", previous:"‹" }
        }
    });

    $('#formEscanearRed').on('submit', function () {
        escaneoManualEnProceso = true;

        const baseRed = $('#baseRedInput').val().trim();

        $('#textoRangoEscaneo').text(baseRed + '.1 - ' + baseRed + '.254');

        $('#btnEscanearRed')
            .prop('disabled', true)
            .html('<i class="fas fa-spinner fa-spin"></i> Escaneando...');

        $('#baseRedInput').prop('readonly', true);
        $('#modalEscaneando').modal('show');

        return true;
    });
    setInterval(actualizarPingsCrud, 60000);
});
</script>
@stop