@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 rel="stylesheet" href="{{ asset('assets/js/image-uploader/image-uploader.min.css') }}">

    <style>
        .form-select{

            display: flex!important;
            justify-content: space-around!important;
            flex-wrap: wrap !important;
        }

        .dselect-tag{
            margin: 2px 8px;
            border: .5px solid black;
            padding: 2px 5px;
            border-radius: 5px;
        }

        .dselect-tag-remove{
            margin:0 0 0  3px ;
        }

        .dropdown-menu.show{
            right: 0!important;
            left: 0!important;
        }
    </style>
@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-7  ">
                    <div class="card">
                        <div class="card-body" >
                            <form action="{{ route('discount.store') }}" id="productStore"  method="post"  enctype="multipart/form-data" >
                                @csrf
                                <h3 class="text-center ">Create Discount</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">Discount Percentage ( % )</label>
                                        <input type="number" class="form-control" name="discount" value="{{ old('discount') }}">
                                        @error('discount')
                                        <span class="text-danger small">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="basiInput" class="form-label">Discount Product</label>
                                            <select  id="products" name="products[]" multiple>
                                                @foreach(\App\Models\Product::select('id','name')->get() as $product)
                                                    <option {{ in_array($product->id,old('products',[])) ? 'selected' : '' }} value="{{ $product->id }}">{{ $product->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="basiInput" class="form-label">Discount Brands</label>
                                            <select  id="brands" name="brands[]" multiple>
                                                @foreach(\App\Models\Brand::select('id','name')->get() as $brand)
                                                    <option {{ in_array($brand->id,old('brands',[])) ? 'selected' : '' }}  value="{{ $brand->id }}">{{ $brand->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-3 " >
                                    <label for="images"> Discount Banner
                                        @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-5">--}}
{{--                    <div class="card">--}}
{{--                        <div class="card-body">--}}


{{--                           <div class="" id="productVariation">--}}
{{--                               <div class="row ">--}}
{{--                                   <div class="mb-3 col-4 ">--}}
{{--                                       <label for="basiInput" class="form-label">Size</label>--}}
{{--                                       <input form="productStore" type="text" class="form-control" name="sizes[]" >--}}
{{--                                   </div>--}}
{{--                                   <div class="mb-3 col-4 ">--}}
{{--                                       <label for="basiInput" class="form-label">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">Price</label>--}}
{{--                                       <input form="productStore" type="number" class="form-control" name="prices[]" >--}}
{{--                                   </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\StoreDiscountRequest','#productStore') !!}

    <script src="{{ asset('assets/js/deselect.js') }}"></script>
    <script src="{{ asset('assets/js/image-uploader/image-uploader.min.js') }}"></script>
{{--    <script src="{{ asset('assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>--}}
    <script>

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

                 <div class="row position-relative" id="${uniqueId}">
                                <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-4 ">
                                    <label for="basiInput" class="form-label">Size</label>
                                    <input form="productStore" type="text" class="form-control" name="sizes[]" >
                                </div>
                                    <div class="mb-3 col-4 ">
                                       <label for="basiInput" class="form-label">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">Price</label>
                                    <input form="productStore" type="number" class="form-control" name="prices[]" >

                                </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: 1,
        });

        $(document).ready(function() {

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

            var products = document.querySelector('#products');
            dselect(products, {
                placeholder:'Discount Products',
                search: true,
            });

            var brands = document.querySelector('#brands');
            dselect(brands, {
                placeholder:'Discount Products',
                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