@extends('backend.layouts.app')
@section('title', $title)
@section('content')
    @include('backend.variations.partials.edit-variation-modal', ['sizes' => $sizes, 'colors' => $colors, 'product' => $product])
    @foreach ($variations as $key => $variation)
        <x-danger-modal :id="$variation->id" header="Danger" message="Are you sure deleted it?!"
                        link="{{ route('admin.variations.destroy', $variation->id) }}"/>
    @endforeach
    <x-back-button :route="route('admin.products.index')">Back to products</x-back-button>


    @include('backend.variations.partials.upload-images-modal')

    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        Create new variation of product: {{ $product->name }}
                    </h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.variations.store', $product->slug) }}" method="post"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row mb-3">
                            <div class="col-4 mb-2">
                                <label class="form-label" for="size_id">Size <span class="text-info">*</span></label>
                                <select class='form-control form-select select2 @error("size_id") is-invalid @enderror'
                                        data-toggle="select2" id="size_id" name="size_id" required>
                                    <option value="" selected>N/A</option>
                                    @foreach($sizes as $size)
                                        <option
                                            value="{{ $size->id }}" {{ old('size_id') == $size->id ? 'selected' : '' }}>{{ $size->size . " " . $size->unit }}</option>
                                    @endforeach
                                </select>
                                @error("size_id")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-4 mb-2">
                                <label class="form-label" for="color_id">Color <span
                                        class="text-danger">*</span></label>
                                <select class='form-control form-select select2 @error("color_id") is-invalid @enderror'
                                        data-toggle="select2" id="color_id" name="color_id" required>
                                    @foreach($colors as $color)
                                        <option
                                            value="{{ $color->id }}" {{ old('color_id') == $color->id ? 'selected' : '' }}>{{ $color->name . "($color->hexa)" }}</option>
                                    @endforeach
                                </select>
                                @error("color_id")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-4 mb-2">
                                <label class="form-label" for="quantity">Quantity <span
                                        class="text-danger">*</span></label>
                                <input class='form-control @error(" quantity") is-invalid @enderror' type="number"
                                       min="0" id="quantity" name="quantity" value="{{ old('quantity', 0) }}" required/>
                                @error("quantity")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-4 mb-2 ">
                                <label class="form-label" for="sale_price">Sale price <span class="text-danger">*</span></label>
                                <input class='form-control @error("sale_price") is-invalid @enderror' type="number"
                                       min="0" id="sale_price" name="sale_price"
                                       value="{{ old('sale_price', $product->sale_price) }}" required/>
                                @error("sale_price")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                                <span class="text-info">Price in AED</span>
                            </div>
                            <div class="col-12 align-self-center">
                                <input class="form-check-input @error("is_default") is-invalid @enderror"
                                       type="checkbox" id="is_default" name="is_default" value="true"
                                       required @checked((bool)old('is_default') === true) />
                                <label class="form-check-label mx-1" for="is_default">Default variation</label>
                                @error("is_default")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col">
                                <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card overflow-scroll">
                <form action="{{ route('admin.variations.bulk-delete') }}" method="get" id="bulkForm">
                    <div class="card-body">
                        <div class="pb-4">
                            <div class="card-widgets">
                                <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                   id="animated-preview"><i class="ri-more-2-fill fs-3"></i></a>
                                <div class="dropdown btn-group">
                                    <div class="dropdown-menu dropdown-menu-animated">
                                        <a class="dropdown-item" href="#"
                                           onclick="document.querySelector('#bulkForm').submit();">
                                            <i class="ri-delete-bin-line text-danger"></i>
                                            <span class="text-danger">Bulk Delete</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <h5 class="header-title mb-0">
                                {{ $title }}
                            </h5>
                        </div>
                        <div id="yearly-sales-collapse" class="collapse show">
                            <div class="">
                                <table class="table table-nowrap table-hover mb-0" id="variations-table">
                                    <thead>
                                    <tr>
                                        <th>
                                            <div class="d-flex align-items-center gap-2 form-checkbox-success">
                                                <input type="checkbox" class="form-check-input check-all"
                                                       id="variationIds">
                                                <label class="form-check-label" for="variationIds">ID</label>
                                            </div>
                                        </th>
                                        <th>Color</th>
                                        <th>Size</th>
                                        <th>Quantity</th>
                                        <th>Sale price</th>
                                        <th>Default</th>
                                        <th>Show</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div> <!-- end card-->
        </div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        $(function () {

            var table = $('#variations-table').DataTable({
                processing: true
                , serverSide: true
                , ajax: "{{ route('admin.variations.index', $product->slug) }}"
                , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                }
                    , {
                        data: 'color_id'
                        , name: 'color_id'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'size_id'
                        , name: 'size_id'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'quantity'
                        , name: 'quantity'
                        , orderable: false
                        , searcheable: false
                    }
                    , {
                        data: 'sale_price'
                        , name: 'sale_price'
                        , orderable: true
                        , searcheable: true
                    }
                    , {
                        data: 'is_default'
                        , name: 'is_default'
                        , orderable: true
                        , searcheable: false
                    }
                    , {
                        data: 'is_show'
                        , name: 'is_show'
                        , orderable: true
                        , searcheable: false
                    }
                    , {
                        data: 'action'
                        , name: 'action'
                        , orderable: false
                        , searcheable: false
                    }
                    ,]
                , order: []
            });

        });

    </script>



    <script>

        function changeVariationShow(variation) {
            $.get(`{{ url()->to('/') }}/admin/variations/change-show/${variation.id}`,)
                .done(function (response) {
                    successNotification(`${response.message}`)
                })
                .fail(function (xhr, status, error) {
                    errorNotification(error);
                });
        }

        function openUploadImages(variation) {
            // إظهار النافذة المنبثقة
            $("#variationUploadImagesModal").modal('show');
            getVariationMedia(variation);

            // استهداف عنصر الإدخال
            const inputElement = document.querySelector('#image');

            // تهيئة FilePond
            const pond = FilePond.create(inputElement, {
                name: 'image',
                labelIdle: `Drag & Drop Pictures of this variation or <span class="filepond--label-action">Browse</span>`,
                imagePreviewHeight: 170,
                imageCropAspectRatio: '1:1',
                required: true,
                allowMultiple: true,
                allowReplace: true,
                checkValidity: true,
            });

            // إعداد خيارات FilePond
            FilePond.setOptions({
                server: {
                    process: `{{ url()->to('/') }}/admin/variations/upload-images/${variation.id}`,
                    revert: `{{ url()->to('/') }}/admin/variations/revert-image/${variation.id}`,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                },
                // إزالة الصور بعد الرفع
                onprocessfiles: () => {
                    setTimeout(() => {
                        pond.removeFiles();
                        successNotification("Uploaded successfully, please refresh page to show new images");
                    }, 500);
                },
            });
        }


        function getVariationMedia(variation) {
            $.get(`{{ url()->to('/') }}/admin/variations/get-media/${variation.id}`)
                .done(function (response) {
                    $("#media-content").html(response.html_content)
                })
                .fail(function (xhr, error) {
                    errorNotification(error);
                });
        }

        // after close modal re add loading
        var myModalEl = document.getElementById('variationUploadImagesModal')
        myModalEl.addEventListener('hidden.bs.modal', function (event) {
            $("#media-content").html("<div class='spinner-grow text-success m-2' role='status'></div>")
        });

        function removeMediaFromVariation(element, mediaId) {
            if (confirm('Are you sure remove this picture?!')) {
                element.disabled = true;
                $.ajax({
                    url: "{{ route('admin.variations.remove-media') }}"
                    , type: 'DELETE'
                    , headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                    , data: {
                        'media_id': mediaId,
                    }
                    , success: function (response) {
                        element.parentNode.remove();
                        successNotification(response.message);
                    }
                    , error: function (xhr, error) {
                        errorNotification(xhr);
                    }
                });
            }
        }

    </script>

@endsection