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

@section('subhead')
<title>Attributes</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</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 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="attribute_group" class="form-label w-full flex flex-col sm:flex-row">
                                Attribute Group
                            </label>
                            <select id="attribute_group_id" class="form-control form__input" name="attribute_group_id"
                            required data-pristine-required-message="Please select attribute group">
                                <option value="">Select</option>
                                @foreach ($attributeGroups as $attributeGroup)
                                <option value="{{ $attributeGroup->id }}">{{ $attributeGroup->name }}</option>
                                @endforeach
                            </select>

                            <!-- <select data-placeholder="Select Categories" class="tom-select w-full" id="attribute_group_id"
                                    name="attribute_group_id" required>
                                    @foreach ($attributeGroups as $attributeGroup)
                                        <option value="{{ $attributeGroup->id }}">{{ $attributeGroup->parent_id ? $attributeGroup->parent->name .'->'. $attributeGroup->name : $attributeGroup->name }}</option>
                                    @endforeach
                                </select> -->

                            <div id="error-attribute_group_id" class="form__input-error text-danger"></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>
                        <div class="grid grid-cols-2 gap-4">
                        <div class="input-form mb-4">
                            <label for="attribute_type"> Attribute Type</label>
                            <div class="flex justify-start">
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer"
                                        type="radio" name="attribute_type" id="attribute_type" value="0" checked>
                                    <label class="form-check-label inline-block text-gray-800" for="attribute_type">{{ config('constant.attribute_type.0')}}
                                        &nbsp;</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer"
                                        type="radio" name="attribute_type" id="attribute_type" value="1">
                                    <label class="form-check-label inline-block text-gray-800" for="attribute_type">{{ config('constant.attribute_type.1')}}
                                        &nbsp;</label>
                                </div>
                            </div>
                        </div>
                        <div class="input-form mb-4">
                            <label for="attribute_type"> Is filterable?</label>
                            <div class="flex justify-start">
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer"
                                        type="radio" name="is_filter" id="is_filter" value="1">
                                    <label class="form-check-label inline-block text-gray-800" for="is_filter">Yes
                                        &nbsp;</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input
                                        class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left cursor-pointer"
                                        type="radio" name="is_filter" id="is_filter" value="0" checked>
                                    <label class="form-check-label inline-block text-gray-800" for="is_filter">No
                                        &nbsp;</label>
                                </div>
                            </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_route = '{{ route('attribute.store') }}';
</script>
<script src="{{ asset(mix('js/backend/pages/attribute/create.js')) }}"></script>
@endsection