@extends('layouts.boxes')

@section('content')
<div class="card my-4">
    <div class="card-header bg-dark text-light">
        <ul class="nav nav-tabs card-header-tabs" id="mikrotikTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="form-tab" data-bs-toggle="tab" href="#formulario" role="tab" aria-controls="formulario" aria-selected="true">Crear Modelo</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="list-tab" data-bs-toggle="tab" href="#listado" role="tab" aria-controls="listado" aria-selected="false">Listado</a>
            </li>
        </ul>
    </div>

    <div class="card-body">
        {{-- Mensajes de éxito --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Errores de validación --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                       <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="tab-content" id="mikrotikTabsContent">
            {{-- TAB: FORMULARIO --}}
            <div class="tab-pane fade show active" id="formulario" role="tabpanel" aria-labelledby="form-tab">
                <form method="POST" action="{{ route('mikrotik.store') }}">
                    @csrf
                    <div class="form-group">
                        <label for="nombre" class="form-label">Nombre:</label>
                        <input type="text" name="nombre" class="form-control" value="{{ old('nombre') }}" required>
                    </div>

                    <div class="form-check form-switch my-3">
                        <input class="form-check-input" type="checkbox" id="estado" name="estado" value="1" {{ old('estado', '1') ? 'checked' : '' }}>
                        <label class="form-check-label" for="estado">Estado</label>
                    </div>

                    <button type="submit" class="btn btn-dark">Guardar</button>
                </form>
            </div>

            {{-- TAB: LISTADO --}}
            <div class="tab-pane fade" id="listado" role="tabpanel" aria-labelledby="list-tab">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>Estado</th>
                            <th>Creado</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($mikrotiks as $m)
                            <tr>
                                <td>{{ $m->id }}</td>
                                <td>{{ $m->nombre }}</td>
                                <td>
                                    <div class="form-check form-switch">
                                        <input 
                                            type="checkbox" 
                                            class="form-check-input toggle-estado" 
                                            data-id="{{ $m->id }}" 
                                            {{ $m->estado ? 'checked' : '' }}>
                                    </div>
                                </td>
                                <td>{{ $m->created_at->format('d/m/Y H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center">No hay modelos registrados.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection