@extends('Dashboard.layouts.app')
@section('style')
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('assets/js/image-uploader/image-uploader.min.css') }}">
@endsection
@section('search')
    <!-- App Search-->
    <form class="app-search d-none " action="{{ route('user.index') }}" method="get">
        <div class="position-relative">
            <input type="text" name="keyword" class="form-control" placeholder="Search..." autocomplete="off"
                id="search-options" value="{{ request()->keyword ?? '' }}">
            <span class="mdi mdi-magnify search-widget-icon"></span>
            <span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none"
                id="search-close-options"></span>
        </div>
    </form>
@endsection
@section('main_content')
    <div class="page-content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('product.store') }}" id="productStore" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <h3 class="text-center ">Create Product</h3>

                                <div class="row ">
                                    <div class="mb-3 col-6">
                                        <label for="basiInput" class="form-label">Name</label>
                                        <input type="text" class="form-control" name="name"
                                            value="{{ old('name') }}">
                                        @error('name')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    {{--                                    <div class="mb-3 col-6 "> --}}
                                    {{--                                        <label for="basiInput" class="form-label">Stock</label> --}}
                                    {{--                                        <select name="stock" class="form-select"> --}}
                                    {{--                                            <option value="" selected disabled>choose your product stock</option> --}}
                                    {{--                                            <option {{ old('stock') == '1' ? 'selected' : '' }} value="1">In Stock</option> --}}
                                    {{--                                            <option {{ old('stock') == '0' ? 'selected' : '' }} value="0">Out Stock</option> --}}
                                    {{--                                        </select> --}}
                                    {{--                                        @error('stock') --}}
                                    {{--                                        <span class="text-danger small">{{ $message }}</span> --}}
                                    {{--                                        @enderror --}}
                                    {{--                                    </div> --}}
                                    <div class="mb-3 col-6 ">
                                        <label for="basiInput" class="form-label">Brand</label>
                                        <select name="brand_id" id="select_box_two" class="form-select">
                                            <option value="" selected disabled>choose your product brand</option>
                                            @forelse(\App\Models\Brand::all() as $b)
                                                <option value="{{ $b->id }}"
                                                    {{ old('brand_id') == $b->id ? 'selected' : '' }}> {{ $b->name }}
                                                </option>
                                            @empty
                                                <option value="" class="disabled">NO DATA FOUND</option>
                                            @endforelse
                                        </select>
                                        @error('brand_id')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="mb-3 col-6 ">
                                        <label for="basiInput" class="form-label">Category</label>
                                        <select name="category_id" id="select_box" class="form-select"
                                            onchange="fetchSubcategory(this)">
                                            <option value="" selected disabled>choose category</option>
                                            @forelse(\App\Models\Category::all() as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ old('category_id') == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }}</option>
                                            @empty
                                                <option value="">NO DATA FOUND</option>
                                            @endforelse
                                        </select>
                                        @error('category_id')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>


                                    <div class="mb-3 col-6 ">
                                        <label for="basiInput" class="form-label">Sub Category </label>
                                        <select name="sub_category_id" id="select_box_three" class="form-select">
                                            <option value="" selected disabled>choose sub category</option>
                                            @forelse(\App\Models\SubCategory::all() as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ old('sub_category_id') == $c->id ? 'selected' : '' }}>
                                                    {{ $c->name }} </option>
                                            @empty
                                                <option value="">NO DATA FOUND</option>
                                            @endforelse
                                        </select>
                                        <div class="col-md-3">&nbsp;</div>
                                        @error('sub_category_id')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    {{--                                    <div class="mb-3 col-6 "> --}}
                                    {{--                                        <label for="basiInput" class="form-label">Type</label> --}}
                                    {{--                                        <select name="type_id" id="select_box_four"  class="form-select"> --}}
                                    {{--                                            <option value="" selected disabled>choose your product type</option> --}}
                                    {{--                                            @forelse(\App\Models\Type::all() as $c) --}}
                                    {{--                                                <option value="{{ $c->id }}" {{ old('type_id') == $c->id ? 'selected' : '' }} > {{ $c->name }}</option> --}}
                                    {{--                                            @empty --}}
                                    {{--                                                <option value="">NO DATA FOUND</option> --}}
                                    {{--                                            @endforelse --}}

                                    {{--                                        </select> --}}
                                    {{--                                        <div class="col-md-3">&nbsp;</div> --}}
                                    {{--                                        @error('type_id') --}}
                                    {{--                                        <span class="text-danger small">{{ $message }}</span> --}}
                                    {{--                                        @enderror --}}
                                    {{--                                    </div> --}}
                                </div>
                                <div class="row">
                                    <div class="mb-3 col-6">
                                        <label for="colors" class="form-label">Colors</label>
                                        <select name="english_colors[]" class="colors w-100" multiple="multiple">
                                            @foreach ($colors as $color)
                                                <option value="{{ $color->english_name }}">
                                                    {{ $color->english_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('colors')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="mb-3 col-6">
                                        <label for="colors" class="form-label">Allow Point</label>
                                        <input type="number" name="point" class="form-control">
                                        @error('point')
                                            <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                {{-- <div class="mb-3 form-check form-switch">
                                    <input name="is_redeemable" class="form-check-input" type="checkbox" role="switch"
                                        id="flexSwitchCheckDefault">
                                    <label class="form-check-label" for="flexSwitchCheckDefault">Redeemable</label>
                                </div> --}}
                                <div class="mb-3 ">
                                    <label for="basiInput" class="form-label">Detail</label>
                                    <textarea name="detail" class="form-control" id="ckeditor-classic" cols="30" rows="10">{{ old('detail') }}</textarea>
                                    @error('detail')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group mb-3 ">
                                    <label for="images"> Product Photos
                                        @error('images')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </label>
                                    <div class="input-images" id="images"></div>
                                </div>

                                <div class="text-end">
                                    <button type="submit" class="btn btn-danger ">SUBMIT</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="" id="productVariation">
                                <div class="card card-body border ">
                                    <div class="row  ">

                                        <div class="mb-3 col-12 ">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Photo</label>
                                            <input form="productStore" type="file" class="form-control"
                                                accept="image/png,image/jpg,image/jpeg,image/webp" name="photos[]">
                                        </div>
                                        <div class="mb-3 col-4">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Size</label>
                                            <input form="productStore" type="text" class="form-control"
                                                name="sizes[]">
                                        </div>
                                        {{--                                   <div class="mb-3 col-3 "> --}}
                                        {{--                                       <label for="basiInput" class="form-label" style="font-size: 10px">Discount(% only)</label> --}}
                                        {{--                                       <input form="productStore" type="number" class="form-control" value="0" name="discounts[]" > --}}
                                        {{--                                   </div> --}}

                                        <div class="mb-3 col-4">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Stock</label>
                                            <input form="productStore" type="number" name="stocks[]"
                                                class="form-control">
                                        </div>
                                        <div class="mb-3 col-4">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Price</label>
                                            <input form="productStore" type="number" class="form-control"
                                                name="prices[]">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-end ">
                                <button class="btn btn-success " type="button" onclick="createNewVaris()">
                                    <i class="bx bx-plus-circle "></i>
                                </button>
                            </div>


                        </div>


                    </div>
                </div>
            </div>
        </div>
        <!-- container-fluid -->
    </div>
    @include('Dashboard.Alert.imageModal')
@endsection


@section('script')
    {!! JsValidator::formRequest('App\Http\Requests\StoreProductRequest', '#productStore') !!}

    <script src="{{ asset('assets/js/deselect.js') }}"></script>
    <script src="{{ asset('assets/js/image-uploader/image-uploader.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    {{--    <script src="{{ asset('assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script> --}}
    <script>
        $(document).ready(function() {
            $('.colors').select2({
                multiple: true
            });
        });

        let box = document.getElementById('productVariation');

        function createNewVaris() {
            let uniqueId = Math.ceil(Math.random() * 100000000);
            $('#productVariation').append(`

                 <div class="card card-body border" id="${uniqueId}">
<div class="row position-relative" >
                                <div class="">
                                    <button class="btn btn-sm position-absolute  btn-outline-danger" style="right: 15px;z-index: 9999" type="button" onclick="deleteBox('${uniqueId}')">
                                        <i class="bx bx-trash "></i>
                                    </button>
                                </div>
  <div class="mb-3 col-12 ">
                                       <label for="basiInput" class="form-label" style="font-size: 10px">Photo</label>
                                       <input form="productStore" type="file" class="form-control" accept="image/png,image/jpg,image/jpeg,image/webp" name="photos[]" >
                                   </div>
                                <div class="mb-3 col-4 ">
                                       <label for="basiInput" class="form-label" style="font-size: 10px">Size</label>
                                       <input form="productStore" type="text" class="form-control" name="sizes[]" >
                                   </div>
                                </div>
                                <div class="mb-3 col-4">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Stock</label>
                                            <input form="productStore" type="number" name="stocks[]"
                                                class="form-control">
                                </div>
                                <div class="mb-3 col-4">
                                       <label for="basiInput" class="form-label" style="font-size: 10px">Price</label>
                                       <input form="productStore" type="number" class="form-control" name="prices[]" >
                                </div>
                            </div>
</div>

            `)
        }

        function deleteBox(id) {
            document.getElementById(id).remove();
        }
        // $("#summernote").summernote({
        //     toolbar: [
        //         // [groupName, [list of button]]
        //         ["style", ["bold", "italic", "underline", "clear"]],
        //         ["font", ["strikethrough", "superscript", "subscript"]],
        //         ["fontsize", ["fontsize"]],
        //         ["color", ["color"]],
        //         ["para", ["ul", "ol", "paragraph"]],
        //         ["height", ["height"]],
        //     ],
        //     height: 200,
        // });

        $(".input-images").imageUploader({
            maxSize: 2 * 1024 * 1024,
            maxFiles: 10,
        });

        $(document).ready(function() {

            document.querySelector('input[type="file"]').setAttribute('form', 'productStore');
        });

        var select_box_element = document.querySelector('#select_box');

        dselect(select_box_element, {
            search: true
        });

        var select_box_element_two = document.querySelector('#select_box_two');

        dselect(select_box_element_two, {
            search: true
        });
        dselect(document.getElementById('select_box_three'), {
            search: true
        });
        dselect(document.getElementById('select_box_four'), {
            search: true
        });

        function fetchSubcategory(ele) {
            let subCategorySelect = document.getElementById('select_box_three')
            subCategorySelect.innerHTML = ''
            let id = ele.value;
            $.ajax({
                url: `/api/sub-category/${id}`,
                method: 'GET',
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}',
                },
            }).done(function(res) {
                let subcategories = res.data;
                if (subcategories.length > 0) {
                    subCategorySelect.closest('.col-6').querySelector('.dselect-wrapper').remove()
                    subcategories.forEach(subCategory => {
                        let option = document.createElement('option')
                        option.textContent = subCategory.name
                        option.value = subCategory.id
                        subCategorySelect.appendChild(option)
                    });
                    dselect(subCategorySelect, {
                        search: true
                    });
                } else {
                    option =
                        "<option selected hidden disabled>No subcategory</option>"
                    subCategorySelect.innerHTML = option
                    dselect(subCategorySelect, {
                        search: true
                    });
                }
            })
        }

        // document.querySelector("#ckeditor-classic") &&
        // ClassicEditor.create(document.querySelector("#ckeditor-classic"))
        //     .then(function (e) {
        //         e.ui.view.editable.element.style.height = "200px";
        //     })
        //     .catch(function (e) {
        //         console.error(e);
        //     });
    </script>
@endsection