@extends('layouts.seller.app')
@section('title', 'Store Category | Chemical Wholesale')
@section('content')
    <div class="cw-content">
        <div class="container-fluid">
            <div class="cw-content-inner">
                <div class="cw-content-body">
                    <div class="cw-block-head cw-block-head-sm">
                        <div class="cw-block-between d-flex justify-content-between align-items-center">
                            <div class="cw-block-head-content">
                                <h3 class="cw-block-title page-title">@if(@$category->id) Edit @else Add @endif Category</h3>
                                <div class="cw-block-des text-soft">
                                    <p>Manage all your categories.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @include('layouts.seller.flash')
                    <div class="card">
                        <div class="card-body cw-form px-3">
                            <form action="{{ route('seller.category.store') }}" method="post" enctype="multipart/form-data" id="categoryForm">
                                <input type="hidden" name="id" id="cid" class="cid" value="{{ @$category->uuid }}"/>
                                <input type="hidden" name="business_id" id="bid" class="bid" value="{{ Common::getBusiness() }}"/>
                                @csrf
                                <div class="row">
                                    <div class="col-lg-4 mb-3">
                                        <label class="form-label">Parent Category:</label>
                                        <select name="parent_id" id="parent_id" class="form-control form-select parent_id">
                                            <option value="0">Select Parent Category</option>
                                            @foreach($allCate as $cate)
                                                @php 
                                                    if($cate->uuid == @$category->uuid){
                                                        continue;
                                                    }
                                                @endphp
                                                <option value="{{ @$cate->id }}" {{ @$category->parent_id == $cate->id ? 'selected="true"':'' }}>{{ ucfirst($cate->name) }}</option>
                                                @if (count($cate->childs) > 0)
                                                    @include('admin.category.subcategories', ['subcategories' => $cate->childs, 'parent' => $cate->name, 'parentId' => @$category->parent_id, 'categoryId' => @$category->id])
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4 mb-3">
                                        <label class="form-label">Category Name:</label>
                                        <input type="text" name="name" id="name" value="{{ ucfirst(@$category->name) }}" class="form-control name" placeholder="Category Name" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-6">
                                        <label class="form-label onboarding-label">Upload Image:</label>
                                        <input type="file" name="categoryimage" id="categoryimage" data-prvid="categoryimg" class="form-control onboarding-input categoryimg" onchange="readURL(this);" accept="image/jpeg, image/png">
                                            
                                        <span class="upload-file-msg">Recommended size: 500 x 500 | Supported File types - PNG, JPG</span>
                                    </div>
                                    <div class="col-4 m-auto" style="border-left:2px solid #eee;">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="imgpreview-container">
                                                    <img src="{{ @$category->getimage->path }}" alt="" id="categoryimg" class="imgpreview-img" onerror="src='/assets/img/noimg.jpg'">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3 col-6 mb-3">
                                        <label class="form-label">Featured:</label>
                                        <select name="display_on_home" id="display_on_home" class="form-control form-select display_on_home">
                                            <option selected="" disabled="">Select</option>
                                            <option value="1" {{ (@$category->display_on_home == 1) ? 'selected="selected"' : '' }}>Yes</option>
                                            <option value="0" {{ (@$category->display_on_home == 0) ? 'selected="selected"' : '' }}>No</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-6 mb-3">
                                        <label class="form-label">Sort Ordering:</label>
                                        <input type="number" name="order_number" min="1" value="{{ (@$category->order_number) ? @$category->order_number : 1}}" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Description:</label>
                                    <textarea class=" editor p-4" rows="10" id="description" name="description">{{ old('description') ? old('description') : @$category->description }}</textarea>
                                </div>
                                <div>
                                    <button type="submit" class="btn-formpage-submit">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link href="{{ asset('assets/dashboard/css/lib/summernote.min.css') }}" rel="stylesheet">
    <style>
        .note-editor.note-airframe.fullscreen,
        .note-editor.note-frame.fullscreen {
            z-index: 1067;
            background: #fff;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('assets/dashboard/js/form-validation.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/lib/summernote.min.js') }}"></script>
    <script>
         $(document).ready(function() {
            $('#description').summernote({
                height: 400,
                toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']]
                ]
            });
            var noteBar = $('.note-toolbar');
            noteBar.find('[data-toggle]').each(function() {
                $(this).attr('data-bs-toggle', $(this).attr('data-toggle')).removeAttr('data-toggle');
            });
            $('form').submit(function(e) {
                var submitBtn = $(this).find('button[type="submit"]');
                submitBtn.html('<span class="spinner me-2"></span>Saving');
                setTimeout(function() {
                    submitBtn.removeAttr('disabled');
                    submitBtn.html('Save');
                }, 1000);
            });
        });
    </script>
@endpush