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

@section('subhead')
<title>Category</title>
@endsection
<style>
    #holder img {
        width: 300px;
    }
</style>
@section('subcontent')
<div class="grid grid-cols-12 gap-6 mt-5">
    <div class="intro-y col-span-12">
        <!-- BEGIN: Form Validation -->
        <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 Category</h2>
            </div>
            <div id="form-validation" class="p-5">
                <div class="preview ">
                    <!-- BEGIN: Validation Form -->
                    <form id="myForm" class="validate-form" action="javascript:;">
                        <div class="grid grid-cols-2 gap-x-5">
                            <div class="input-form mb-2 col-span-2">
                                <label for="name" class="form-label w-full flex flex-col sm:flex-row">
                                    Name <span class="text-danger">*</span>
                                </label>
                                <input id="name" type="text" name="name" class="form-control form__input" minlength="3"
                                required data-pristine-required-message="Please enter category name">
                                <div id="error-name" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-2 col-span-2">
                                <label for="description" class="form-label w-full flex flex-col sm:flex-row">
                                    Description
                                </label>
                                <textarea id="description" type="text" name="description"
                                    class="form-control form__input"></textarea>
                                <div id="error-description" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-4">
                                <label for="parent" class="form-label w-full flex flex-col sm:flex-row">
                                    <!-- Select Parent  -->
                                    Parent Category<span class="text-danger">*</span>
                                </label>
                                <select id="parent" class="form-select sm:mr-2" aria-label="Default select example" >
                                <!-- required data-pristine-required-message="Please select any category"> -->
                                    <option value="">Select</option>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @if(count($category->children))
                                        @foreach ($category->children as $child)
                                        <option value="{{ $child->id }}">--{{ $child->name }}</option>
                                        @endforeach
                                    @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="input-form mb-2">
                                <label for="name" class="form-label w-full flex flex-col sm:flex-row">
                                    Sort
                                </label>
                                <input id="sort" type="number" name="sort" class="form-control form__input">
                                <div id="error-sort" class="form__input-error text-danger"></div>
                            </div>
                            <div class="input-form mb-4">

                                <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Category
                                    Image&nbsp;</label>
                                <div class="preview">
                                    <div class="container mx-auto flex flex-wrap">
                                        <div id="img-preview">
                                        </div>
                                        <div class="d-flex justify-content-center w-24 h-24 align-items-center productImg"
                                            id="lfm" data-input="category_image" data-preview="img-preview"
                                            style="border: 1px dashed #000; cursor: pointer;">
                                            <i data-lucide="image" class="mx-auto mt-8"></i>
                                        </div>
                                        <input type="hidden" name="category_image" id="category_image">
                                        
                                    </div>
                                    <div id="error-category_image" class="form__input-error text-danger"></div>
                                </div>
                                <span class="text-danger mb-5"><small class="my-auto"><b>Note:</b>
                                        <br> Dimension must be of
                                        125X125.
                                        <br> First select an image then go to settings of file manager. <br> On that
                                        list you will find resize option in that you can change the dimension of
                                        image</small></span>
                            </div>
                            <div class="input-form mb-4">

                                <label for="regular-form-1"
                                    class="form-label w-full flex flex-col sm:flex-row">Icon&nbsp;</label>
                                <div class="preview pb-5">

                                    <div class="container mx-auto flex flex-wrap">
                                        <div id="img-preview2">
                                        </div>
                                        <div class="d-flex justify-content-center align-items-center productImg w-24 h-24"
                                            id="lfm2" data-input="icon" data-preview="img-preview2"
                                            style="border: 1px dashed #000; cursor: pointer;">
                                            <i data-lucide="image" class="mx-auto mt-8"></i>
                                        </div>
                                        <input type="hidden" name="category_icon" id="icon">
                                    </div>
                                </div>
                                <div id="error-icon" class="form__input-error text-danger"></div>
                                <span class="text-danger"><small class="my-auto"><b>Note:</b> Upload SVG format file here</small></span>
                            </div>
                        </div>

                        <div class="input-form mb-4">
                            <label for="regular-form-1" class="form-label w-full flex flex-col sm:flex-row">Category
                                Banner&nbsp;</label>
                            <div class="block flex flex-nowrap">
                                <a id="category_banner_lfm" data-input="banner" data-preview="holder" data-thumb="0"
                                    class="btn btn-primary text-white rounded-none flex-1">
                                    Choose
                                </a>
                                <a class="btn btn-outline-primary rounded-none text-primary" onclick='deleteImage("category_banner_lfm")'>
                                    Clear
                                </a>
                                <input id="banner" class="form-control shrink" type="text" name="banner" readonly>
                            </div>
                            <div class="image_preview" id="holder" style="margin-top:15px;">

                            </div>
                            <span class="text-danger"><small class="my-auto"><b>Note:</b>Image you can upload
                                Horizontal or Vertical.<br> First select an image then go to settings of file
                                manager.<br> On that list you will find crop option in that you can crop the image
                                or change the aspect ratio on that list</small></span>
                        </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">Clear</button>
                </form>
                <!-- END: Validation Form -->
            </div>
        </div>
    </div>
    <!-- END: Form Validation -->
</div>
</div>
@endsection

@section('script')
<script src="{{ asset(mix('js/backend/pages/file-manager/others-file-manager.js'))}}"></script>
<script>
    const store_category_route = '{{ route('category.store') }}'
         others_lfm('lfm', 'image')
         others_lfm('lfm2', 'svg')
         others_lfm('category_banner_lfm', 'image')
</script>
<script src="{{ asset(mix('js/backend/pages/category/create.js')) }}"></script>
@endsection