@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">Edit Category</h2>
            </div>
            <div id="form-validation" class="p-5">
                <div class="preview">
                    <!-- BEGIN: Validation Form -->
                    <form 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" value="{{ $category->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"> {{ $category->description }}</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">
                                     Parent Category
                                </label>
                                <select id="parent" class="form-select sm:mr-2" aria-label="Default select example">
                                    <option value="">Select</option>
                                    @foreach ($parentCategories as $parentCategory)
                                    @if ($parentCategory->id != $category->id)
                                        <option value="{{ $parentCategory->id }}" @selected ($category->parent_id ==
                                            $parentCategory->id)>
                                            {{ $parentCategory->name }}</option>
                                        @if(count($parentCategory->children))
                                            @foreach ($parentCategory->children as $child)
                                                @if ($child->id != $category->id)
                                                <option value="{{ $child->id }}" @selected($category->parent_id ==
                                                    $child->id)>--{{ $child->name }}</option>
                                                @endif
                                            @endforeach
                                        @endif
                                    @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"
                                    value="{{$category->sort}}">
                                <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">
                                            @if (!empty($category->category_image))
                                            <div class="w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer zoom-in"
                                                id='0'>
                                                <img src="{{ $category->category_image }}" class="rounded-md">
                                                <div title="Remove this image?"
                                                    class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                                    <i data-lucide="x" class="w-4 h-4" onclick='deleteImage("lfm")'></i>
                                                </div>
                                            </div>
                                            @endif
                                        </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" value="{{$category->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">
                                            @if (!empty($category->icon))
                                                <div
                                                    class="w-24 h-24 relative image-fit mb-5 mr-5 cursor-pointer zoom-in">
                                                    <img src="{{ $category->icon }}" class="rounded-md">
                                                    <div title="Remove this image?"
                                                        class="tooltip w-5 h-5 flex items-center justify-center absolute rounded-full text-white bg-danger right-0 top-0 -mr-2 -mt-2">
                                                        <i data-lucide="x" class="w-4 h-4"
                                                            onclick='deleteImage("lfm2")'></i>
                                                    </div>
                                                </div>
                                                @endif
                                        </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" value={{$category->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</label>
                            <div class="block flex flex-nowrap">
                                <a id="category_banner_lfm"
                                    data-input="banner" data-thumb="0" data-preview="holder"
                                    class="btn btn-primary text-white rounded-none">
                                    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" type="text" name="banner"
                                    value="{{$category->banner}}" readonly>
                            </div>
                            <div class="image_preview" id="holder" style="margin-top:15px;">
                                @if (!empty($category->banner))
                                <img width="300px" src="{{ $category->banner }}">
                                @endif
                            </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>
                        <button type="submit" id="btn-submit" class="btn btn-primary w-24 mr-1 mb-2">Update</button>
                        <a href="{{ route('category.index') }}"
                            class="btn btn-outline-secondary w-24 inline-block mr-1 mb-2">Back</a>

                    </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 updateCategoryRoute = '{{ route('category.update', $category->id) }}';
    others_lfm('lfm', 'image')
    others_lfm('lfm2', 'svg')
    others_lfm('category_banner_lfm', 'image')
</script>
<script src="{{ asset(mix('js/backend/pages/category/edit.js')) }}"></script>
@endsection