@extends('../backend/layout/' . $layout)

@section('subhead')
    <title>Attribute Groups</title>
@endsection

@section('subcontent')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12">
            <!-- BEGIN: Input -->
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Add New Attribute Group</h2>
                </div>
                <div id="form-validation" class="p-5">
                    <div class="preview">
                        <form id="attribute_form" class="validate-form" action="javascript:;" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="input-form mb-4">
                                <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Name <span
                                        class="text-danger">*</span></label>
                                <input id="name" name="name" type="text" class="form-control form__input" minlength="3"
                                required data-pristine-required-message="Please enter attribute group name">
                                <div id="error-name" class="form__input-error text-danger"></div>
                            </div>
                            <div class="grid grid-cols-2 gap-4">
                            <div class="input-form mb-4">
                                <label for="crud-form-3" class="form-label">Categories <span
                                    class="text-danger">*</span></label>
                                <select data-placeholder="Select Categories" class="tom-select w-full" id="category_id"
                                    name="category_id" required data-pristine-required-message="Please select any categories">
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}">{{ $category->parent_id ? $category->parent->name .'->'. $category->name : $category->name }}</option>
                                    @endforeach
                                </select>
                                <div id="error-category_id" class="form__input-error text-danger mt-1"></div>
                            </div>
                            <div class="input-form mb-4">
                                <label for="sort" class="form-label w-full flex flex-col sm:flex-row">Sort Order </label>
                                <input id="sort" name="sort" type="number" class="form-control form__input">
                                <div id="error-sort" class="form__input-error text-danger"></div>
                            </div>
                            </div>
                            <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2">Submit</button>
                            <button type="reset" id="btn-clear" class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2"
                                id="clear">Clear</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const store_attribute_group_route = '{{ route('attribute_group.store') }}';
    </script>
    <script src="{{ asset(mix('js/backend/pages/attribute_group/create.js')) }}"></script>
@endsection