@extends('adminlte::page')

@section('title', 'Agregar categoría')

@section('content_header')
    <h1>Dashboard</h1>
@endsection

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">Agregar categoría</h3>
        </div>

        <form autocomplete="off" action="{{ Route('storeCategory') }}" method="POST" id="form-category"
            enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                <div class="form-group">
                    <label for="name">Nombre:</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                        name="name" placeholder="Ingresa el nombre" value="{{ old('name') }}" minlength="3"
                        maxlength="25" pattern="^\S.*" required>
                    <span id="error-name" class="text-danger"></span>
                    @if ($errors->has('name'))
                        <span class="text-danger">{{ $errors->first('name') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    <label for="description">Descripción:</label>
                    <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror"
                        rows="3" minlength="10" maxlength="200" placeholder="Ingresa una descripcion" pattern="^\S.*"
                        style="resize: none;" required>{{ old('description') }}</textarea>
                    <span id="counter">0/200</span>
                    <span id="error-description" class="text-danger"></span>
                    @if ($errors->has('description'))
                        <span class="text-danger">{{ $errors->first('description') }}</span>
                    @endif
                </div>

                <div class="form-group">
                    <label for="slug">Etiqueta:</label>
                    <input readonly type="text" class="form-control @error('slug') is-invalid @enderror" id="slug"
                        value="{{ old('slug') }}" minlength="5" maxlength="25" pattern="^\S.*" required>
                    <span id="error-slug" class="text-danger"></span>
                    @if ($errors->has('slug'))
                        <span class="text-danger">{{ $errors->first('slug') }}</span>
                    @endif
                </div>

                {{-- Esto puede ser mejorable --}}
                <div class="form-group" id="imageCategory">
                    <label for="image" class="form-label" style="display: block;">Imagen:</label>
                    <input type="file" class="form-control" id="image" name="image" accept="image/*">
                    <small>Tipo de archivo: imagen | Extensiones permitidas: jpeg, png, jpg | max: 2MB</small>
                    <small>Dimensiones recomendadas: 0px X 0px</small>
                    <span id="error-image" class="text-danger"></span>
                    @if ($errors->has('image'))
                        <span class="text-danger">{{ $errors->first('image') }}</span>
                    @endif
                </div>
                @if ($categories->count() != 0)
                    {{-- Subcategory --}}
                    <div class="form-group mt-3" style="display: none;" id="categorySelect">
                        <label for="subcategory">Categoría padre</label>
                        <select class="form-control @error('subcategory') is-invalid @enderror" id="subcategory"
                            name="subcategory">
                            <option value="" disabled selected>*Selecciona una*</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected(old('subcategory') == $category->id)>
                                    {{ $category->display_name }}
                                </option>
                            @endforeach
                        </select>
                        @if ($errors->has('subcategory'))
                            <span class="text-danger">{{ $errors->first('subcategory') }}</span>
                        @endif
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="subcategoryCheck">
                        <label class="form-check-label" for="subcategoryCheck">
                            Subcategoría?
                        </label>
                    </div>
                @endif

                <div class="card-footer mt-3">
                    <button type="submit" class="btn btn-success" id="submitCategory">Agregar categoria</button>
                    <button type="submit" class="btn btn-info" id="addOtherCat">Agregar otra categoria</button>
                </div>

        </form>
    </div>
@endsection

@section('js')
    @vite('resources/js/categories/addCategories.js')
    @vite('resources/js/categories/validationsCategory.js')
@endsection