@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('product.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">
                        @if ($errors->any())
                            <div class="errors">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li class="text-danger">{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="card-body">
                            <form action="{{ route('product.update', $product->id) }}" id="editProduct" method="post"
                                enctype="multipart/form-data">
                                @csrf @method('PUT')
                                <h3 class="text-center ">Edit 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', $product->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 {{ $product->stock == '1' ? 'selected' : '' }} value="1">In Stock</option> --}}
                                    {{--                                            <option {{ $product->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', $product->brand_id) == $b->id ? 'selected' : '' }}>
                                                    {{ $b->name }}</option>
                                            @empty
                                                <option value="">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 your product category</option>
                                            @forelse(\App\Models\Category::all() as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ old('category_id', $product->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 your product sub category
                                            </option>
                                            @forelse(\App\Models\SubCategory::all() as $c)
                                                @if ($c->category_id == $product->category_id)
                                                    <option value="{{ $c->id }}"
                                                        {{ old('sub_category_id', $product->sub_category_id) == $c->id ? 'selected' : '' }}>
                                                        {{ $c->name }}</option>
                                                @endif
                                            @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="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 }}"
                                                        {{ in_array($color->english_name, json_decode($product->english_colors)) ? 'selected' : '' }}>
                                                        {{ $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"
                                                value="{{ $product->point }}">
                                            @error('point')
                                                <span class="text-danger small">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- <div class="mb-3 form-check form-switch ms-3">
                                        <input name="is_redeemable" class="form-check-input" type="checkbox" role="switch"
                                            id="flexSwitchCheckDefault" {{$product->is_redeemable == 1 ? 'checked' : ''}}>
                                        <label class="form-check-label" for="flexSwitchCheckDefault">Redeemable</label>
                                    </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',$product->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="mb-3 ">
                                    <label for="basiInput" class="form-label">Detail</label>
                                    <textarea name="detail" class="form-control" id="" cols="30" rows="10">{{ old('detail', $product->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 class="d-flex flex-wrap justify-content-between">
                                        @foreach ($product->Photos as $p)
                                            <div class="m-4 d-flex flex-column " id="photo{{ $p->id }}">
                                                <img src="{{ $p->name }}" height="80" alt="">
                                                <button class="btn mt-2  btn-outline-danger btn-sm " type="button"
                                                    onclick="confirm('{{ $p->id }}')"> <i
                                                        class="ri ri-delete-bin-2-fill"></i></button>
                                            </div>
                                        @endforeach
                                    </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">
                                @foreach ($product->variations as $variation)
                                    <div class="card border card-body">
                                        <div class="row position-relative">
                                            <form action="{{ route('product_variation.destroy', $variation->id) }}"
                                                id="variation_id{{ $variation->id }}" method="post" class="">
                                                @method('delete') @csrf
                                                <button class="btn btn-sm position-absolute  btn-outline-danger"
                                                    style="right: 15px;z-index: 9999" type="button"
                                                    onclick="this.form.submit()">
                                                    <i class="bx bx-trash "></i>
                                                </button>
                                            </form>
                                            <div class="mb-3 col-3 ">
                                                <img src="{{ $variation->photo }}" alt="" width="100%"
                                                    style="object-fit: cover">
                                            </div>
                                            <div class="mb-3 col-9 ">
                                                <label for="basiInput" class="form-label"
                                                    style="font-size: 10px">Photo</label>
                                                <input form="editProduct" 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="editProduct" type="text" class="form-control"
                                                    style="font-size: 10px" name="sizes[]"
                                                    value="{{ $variation->size }}">
                                            </div>
                                            {{--                                        <div class="mb-3 col-3 "> --}}
                                            {{--                                            <label for="basiInput" class="form-label"  style="font-size: 10px">Discount (% only)</label> --}}
                                            {{--                                            <input form="editProduct" min="0" max="100" type="number"   style="font-size: 10px" class="form-control" value="{{ $variation->getRawOriginal('discount') }}" name="discounts[]" > --}}
                                            {{--                                        </div> --}}
                                            <div class="mb-3 col-4">
                                                <label for="basiInput" class="form-label"
                                                    style="font-size: 10px">Stock</label>
                                                <input type="hidden" name="variation_ids[]" form="editProduct"
                                                    value="{{ $variation->id }}">
                                                <input type="number" form="editProduct" name="stocks[]"
                                                    value="{{ $variation->stock }}" class="form-control"
                                                    style="font-size: 10px">
                                            </div>
                                            <div class="mb-3 col-4">
                                                <label for="basiInput" class="form-label"
                                                    style="font-size: 10px">Price</label>
                                                <input form="editProduct" type="number" class="form-control"
                                                    style="font-size: 10px" name="prices[]"
                                                    value="{{ $variation->price }}">
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </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\UpdateProductRequest', '#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
            });
        });
        $(".input-images").imageUploader({
            maxSize: 2 * 1024 * 1024,
            maxFiles: 10,
        });

        $(document).ready(function() {
            document.querySelector('input[type="file"]').setAttribute('form', 'editProduct');
        });

        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-12 ">
                                       <label for="basiInput" class="form-label" style="font-size: 10px">Photo</label>
                                       <input form="editProduct" 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="editProduct" type="text" class="form-control"  style="font-size: 10px" name="sizes[]" >
                                </div>
                                <div class="mb-3 col-4">
                                            <label for="basiInput" class="form-label"
                                                style="font-size: 10px">Stock</label>
                                            <input form="editProduct" 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="editProduct" type="number"  style="font-size: 10px" 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,
        // });

        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
        });

        var select_box_element_three = document.querySelector('#select_box_three');

        dselect(select_box_element_three, {
            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('/product_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,
                    });
            });
        }

        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
                    });
                }
            })
        }
    </script>
@endsection