@extends('layouts.app')

@section('titulo', 'Agregar Dispositivo')

@section('contenido')
    <div class="container">
        <h1>Agregar Dispositivo</h1>

        <form action="{{ route('dispositivos.store') }}" method="POST">
            @csrf

            <!-- Campo Nombre -->
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="nombre" name="nombre" required
                       value="{{ old('nombre') }}" placeholder="Nombre">
                <label for="nombre">Nombre</label>
            </div>

            <!-- Campo MAC -->
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="mac" name="mac" required
                       value="{{ old('mac') }}" placeholder="MAC">
                <label for="mac">MAC</label>
            </div>

            <!-- Campo Lugar (Select) -->
            <div class="form-floating mb-3">
                <select class="form-select" id="lugar_id" name="lugar_id" required>
                    <option value="" disabled {{ old('lugar_id') ? '' : 'selected' }}>Seleccione un lugar</option>
                    @foreach ($lugares as $lugar)
                        <option value="{{ $lugar->id }}" {{ old('lugar_id') == $lugar->id ? 'selected' : '' }}>
                            {{ $lugar->nombre }}
                        </option>
                    @endforeach
                </select>
                <label for="lugar_id">Lugar</label>
            </div>

            <!-- Botón de envío -->
            <button type="submit" class="btn btn-primary">Guardar</button>
        </form>
    </div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.9/inputmask.min.js" integrity="sha512-eD+19OyeG3GbJ6QGk9uI7TfTozYXAVPz6/Va/YVVuBz7ZFvAeiFzol0whJplf9l6cNQcA8sVxVXvCFW489cAVA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var macInput = document.getElementById("mac");
        // Máscara para permitir letras (A-F) y números (0-9) en el formato MAC
        Inputmask("**:**:**:**:**:**", {
            "autoUnmask": true
        }).mask(macInput);
    });
</script>


@endsection