@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('discount.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.update',$discount->id) }}" id="discountUpdate"  method="post"  enctype="multipart/form-data" >
                                    @csrf @method('PATCH')
                                    <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',$discount->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',$discount->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 $discountroduct)
                                                        <option {{ in_array($discountroduct->id,old('products',$discount->products->pluck('id')->toArray())) ? 'selected' : '' }} value="{{ $discountroduct->id }}">{{ $discountroduct->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',$discount->brands->pluck('id')->toArray())) ? '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="m-4 d-flex flex-column " id="photo{{ $discount->id }}">
                        <img src="{{ asset('storage/discount_photos/'.$discount->image) }}" width="100%" style="object-fit: contain " alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- container-fluid -->
    </div>
    @include('Dashboard.Alert.imageModal')

@endsection


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

    <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('discountVariation');
        function createNewVaris()
        {
            let uniqueId = Math.ceil(Math.random() * 100000000);
            $('#discountVariation').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="editProduct" 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="editProduct" min="0" max="100" 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="editProduct" 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,
            });
        });

        function confirm(id){
            Swal.fire({
                title: "Are you sure?",
                text: `photo will be delete!`,
                icon: "warning",
                showCancelButton: !0,
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel!",
                confirmButtonClass: "btn btn-primary w-xs me-2 mt-2",
                cancelButtonClass: "btn btn-danger w-xs mt-2",
                buttonsStyling: !1,
                showCloseButton: !0,
            }).then(function (t) {
                t.value
                    ?
                    fetch('/discount_photo/'+id, {
                        method: 'GET', // or 'PUT'
                        headers: {
                            'Content-Type': 'application/json',
                        },

                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log('Success:', data);
                            document.getElementById('photo'+id).remove();
                            Swal.fire({
                                title: "Success",
                                text: "Successfully Deleted!",
                                icon: "success",
                                confirmButtonClass: "btn btn-primary mt-2",
                                buttonsStyling: !1,
                            });
                        })
                        .catch((error) => {
                            console.error('Error:', error);
                        })

                    : t.dismiss === Swal.DismissReason.cancel &&
                    Swal.fire({
                        title: "Cancelled",
                        text: "Your imaginary file is safe",
                        icon: "error",
                        confirmButtonClass: "btn btn-primary mt-2",
                        buttonsStyling: !1,
                    });
            });
        }


    </script>
@endsection