@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">

        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Editar categoria</div>
                <div class="azp-page-subtitle">
                    {{ $category->name }}
                </div>
            </div>

            <a href="{{ route('admin.categories.index') }}" class="btn outline">
                Voltar à lista
            </a>
        </div>

        @if (session('ok'))
            <div class="flash success">
                {{ session('ok') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="flash error">
                <strong>Revê os campos:</strong>
                <ul style="margin:6px 0 0 18px;font-size:13px;">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="azp-card azp-form-card">
            <form action="{{ route('admin.categories.update', $category) }}" method="POST" autocomplete="off" novalidate>
                @csrf
                @method('PUT')

                <div class="azp-form-grid">
                    <div class="field-group">
                        <div class="azp-section-title">Dados da categoria</div>

                        <div class="field">
                            <label class="label">Nome <span style="color:#d33">*</span></label>
                            <input type="text"
                                   name="name"
                                   id="cat-name"
                                   value="{{ old('name', $category->name) }}"
                                   required>
                            @error('name')
                            <div class="error" style="font-size:12px;color:#b33a3a;margin-top:2px;">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="field" style="margin-top:10px;">
                            <label class="label">Slug</label>
                            <div style="display:flex; gap:8px;">
                                <input type="text"
                                       name="slug"
                                       id="cat-slug"
                                       value="{{ old('slug', $category->slug) }}">
                                <button type="button" class="btn outline" onclick="window.azpSlugFromName()">
                                    Gerar
                                </button>
                            </div>
                            <div class="hint">Opcional. Máx. 150 caracteres.</div>
                            @error('slug')
                            <div class="error" style="font-size:12px;color:#b33a3a;margin-top:2px;">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <a href="{{ route('admin.categories.index') }}" class="btn outline">Cancelar</a>
                    <button type="submit" class="btn primary">Guardar alterações</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        window.azpSlugify = function (str) {
            return (str || '')
                .toString()
                .normalize('NFD').replace(/[\u0300-\u036f]/g,'')
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g,'')
                .trim()
                .replace(/\s+/g,'-')
                .replace(/-+/g,'-')
                .substring(0,150);
        };
        window.azpSlugFromName = function () {
            var name = document.getElementById('cat-name')?.value || '';
            var slug = window.azpSlugify(name);
            var input = document.getElementById('cat-slug');
            if (input) input.value = slug;
        };
    </script>
@endsection