@extends('admin.layouts.master')
@section('content')
<div class="col-12">
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.usefulllinks.update', $useFullLinks->id) }}">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <label for="inputTitle" class="form-label">Título</label>
                            <input type="text" class="form-control" id="inputTitle" name="title" value="{{ old('title', $useFullLinks->title) }}" required>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mb-3">
                            <label for="inputUrl" class="form-label">URL</label>
                            <input type="url" class="form-control" id="inputUrl" name="url" value="{{ old('url', $useFullLinks->url) }}" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="mb-3">
                            <label for="inputIcon" class="form-label">Ícone (Font Awesome)</label>
                            <input type="text" class="form-control" id="inputIcon" name="icon" placeholder="Ex: fa-solid fa-user" value="{{ old('icon', $useFullLinks->icon) }}" required>
                            <small class="form-text text-muted">
                                Consulte os ícones em <a href="https://fontawesome.com/icons" target="_blank">Font Awesome</a>
                            </small>
                            <div class="mt-2">
                                <i id="previewIcon" class="{{ old('icon', $useFullLinks->icon) }}"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="mb-3">
                            <label for="inputCategory" class="form-label">Categoria</label>
                            <select class="form-control" id="inputCategory" name="categories_id" required>
                                <option value="">Selecione uma categoria</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @if(old('categories_id', $useFullLinks->categories_id) == $category->id) selected @endif>{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Salvar registro</button>
                <a href="{{ route('admin.usefulllinks.index') }}" class="btn btn-secondary">Cancelar</a>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const inputIcon = document.getElementById('inputIcon');
    const previewIcon = document.getElementById('previewIcon');

    inputIcon.addEventListener('input', () => {
        previewIcon.className = inputIcon.value;
    });
</script>
@endpush
@endsection