@extends('layout.store_layout.master')
@section('custom_css')
    <style>
        .image-outer-container{
            width: 50px!important;
            margin: auto!important;
        }
        .image-container {
            position: relative;
            /*width: 50px;*/
        }
        .image-preview {
            opacity: 1;
            display: block;
            width: 100%;
            height: auto;
            transition: .5s ease;
            backface-visibility: hidden;
        }

        .middle {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
        }

        .image-container:hover .image-preview {
            opacity: 0.3;
        }

        .image-container:hover .middle {
            opacity: 1;
        }
    </style>
@endsection


@section('content')
    <!--begin::Card-->
    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">

            </div>
            <!--end::Card title-->

            <!--begin::Card toolbar-->
            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                <!--begin::Toolbar-->

                `<div class="d-flex justify-content-end base" data-kt-customer-table-toolbar="base">
                    <div class="w-100 mw-200px">

                    </div>
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Card toolbar-->

        </div>
        <!--end::Card header-->
        <!--begin::Card body-->
        <div class="card-body pt-0">
            <div id="kt_customers_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                <div class="table-responsive" style=" border-radius: 12px;">
                    <form id="form"  method="post" action="{{ route('admin.product_variants.editVariantsQty') }}">
                        @csrf
                        <input type="hidden"  name="product_id" id="product_id" value="{{$product->id}}">
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_products_table">
                <!--begin::Table head-->
                <thead>
                <!--begin::Table row-->
                <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0" style=" background: #f1f9ff;">
                    <th class="text-center w-10px pe-2 pr-10">
                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                            <input class="form-check-input" type="checkbox" data-kt-check="true"
                                   data-kt-check-target="#kt_products_table .form-check-input.selector"
                                   value="1"/>
                        </div>
                    </th>
                    <th class="text-center min-w-150px">الإسم</th>
                    <th class="text-center min-w-80px">السعر</th>
                    @if($product->is_limited == 1)
                    <th class="text-center min-w-80px">الكمية</th>
                    @endif
                    <th class="text-center min-w-80px">الصورة</th>
                    <th class="text-center min-w-70px">@lang('admin.actions')</th>
                </tr>
                <!--end::Table row-->
                </thead>
                <!--end::Table head-->
                <!--begin::Table body-->
                <tbody class="fw-semibold text-gray-600">
                @forelse($out as $item)
                    <tr id="TR_{{$item->id}}">
                        <td class="text-center pr-10">
                            {{$loop->iteration}}
                        </td>
                        <td class="text-center">
                            <div class="d-flex align-items-center">
                                <!--begin::Thumbnail-->
                                <a href="{{ route('admin.products.show',['id'=>$item->id]) }}" class="symbol symbol-50px">
                                    <span class="symbol-label" style="background-image:url('{{$item->productImage ?asset($item->productImage->image_url):image("stock/ecommerce/1.gif")}}');"></span>
                                </a>
                                <!--end::Thumbnail-->
                                <div class="ms-5">
                                    <input type="hidden" name="ids[]" value="{{$item->id}}">
                                    <!--begin::Title-->
                                    <a href="javascript:;" class="text-gray-800 text-hover-primary fs-5 fw-bold" >{{$item->name}}</a>
                                    <!--end::Title-->
                                </div>
                            </div>
                        </td>
                        <td class="text-center"><input type="number" class="form-control price" placeholder="السعر"
                                                       name="prices[]" min="0" value="{{$item->price}}"></td>
                        @if($product->is_limited == 1)
                        <td class="text-center"> <input type="number" class="form-control qty" placeholder="الكمية"
                                                        name="qty[]" min="0" value="{{$item->qty}}"></td>
                        @endif
                        <td class="text-center">
                            <div class="image-outer-container">
                                <div class="input-group">
                                    <div class="m-card-profile__pic">
                                        <div class="m-card-profile__pic-wrapper">
                                            <div class="image-container" style="">
                                                <img class="image-preview" id="image_preview_{{$item->id}}" src="{{$item->productImage?$item->productImage->image_url:url('avatar.png')}}" style="height: 50px;width: 50px;" alt="" />
                                                <div class="middle">
                                                    <a style="color:#777;height: 50px;width: 50px;" class="show_choose_images" data-id="{{$item->id}}" data-name="{{$item->name}}"  href="javascript:;">
                                                        <i class="fa fa-3x fa-plus-circle"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="images[]" id="image_{{$item->id}}" value="{{$item->productImage->id}}">
                            </div>
                        </td>

                        <td class="text-center">
                            <a href="#"  data-id="{{$item->id}}"
                               data-url="{{route('admin.product_variants.delete')}}"
                               data-token="{{csrf_token()}}" class="btn btn-icon btn-sm btn-light-danger btn-del" > <i class="fas fa-trash fs-8"></i> </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">
                            لا يوجد بيانات لعرضها
                        </td>
                    </tr>
                @endforelse


                <!--end::Table body-->
            </table>
            <!--end::Table-->
                        <!--end::Tab content-->
                        <div class="d-flex justify-content-end">
                            <!--begin::Button-->
                            <button type="submit" id="kt_ecommerce_add_product_submit" style="display: none;" class="btn btn-primary">
                                <span class="indicator-label">حفظ</span>
                                <span class="indicator-progress">الرجاء الانتظار ...
													<span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <!--end::Button-->
                            <!--begin::Button-->
                            <button type="button" id="confirm" class="btn btn-primary">
                                <span class="indicator-label">حفظ</span>
                                <span class="indicator-progress">الرجاء الانتظار ...
													<span
                                                        class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            </button>
                            <!--end::Button-->
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
    <!--begin::Modal - customers_add_user_group-->
    <div class="modal fade" id="choose_images" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title">اختر صورة المنتج(<span id="product_name_choose"></span>)</h2>
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                        </svg>
                    </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">



                        <div class="mb-10 fv-row">
                            <input id="product_id_choose" type="hidden">
                            <div class="row" id="preview_images_cont">

                            </div>
                            <br>
                        </div>


                        <div class="justify-content-end d-flex align-items-center">
                            <button type="button" id="cancel_image_addition" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
                            <button type="button" id="confirm_image_addition" class="btn btn-primary ms-2">تأكيد</button>
                        </div>


                </div>
            </div>
        </div>
    </div>

@endsection

@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>
    <script src="{{asset('store_admin/js/jquery-validation/js/jquery.validate.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('store_admin/js/jquery-validation/js/additional-methods.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('store_admin/js/jquery-validation/js/localization/messages_ar.min.js')}}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            @if($product->is_limited == 1)
            $('#confirm').on('click', function () {
                var qty = 0;
                $('.qty').each(function () {
                    qty += parseInt($(this).val());
                });
                if(qty < 1){
                    Swal.fire({ text: 'الرجاء توزيع الكمية المضافة على المنتجات', icon: "warning", confirmButtonText: "تم!", buttonsStyling: !1, customClass: { confirmButton: "btn btn-light-primary" } })

                }else{
                    var has_zero_price = 0;
                    $('.price').each(function () {
                       if($(this).val() == 0){
                           has_zero_price = 1;
                           return false; // breaks
                       }

                    });
                    if (has_zero_price == 0) {
                        $('#kt_ecommerce_add_product_submit').click();
                    }else{
                        Swal.fire({ text: 'الرجاء اضافة الأسعار للمنتجات', icon: "warning", confirmButtonText: "تم!", buttonsStyling: !1, customClass: { confirmButton: "btn btn-light-primary" } })

                    }
                }



            });
             @else
             $('#confirm').on('click', function () {
                 var has_zero_price = 0;
                 $('.price').each(function () {
                     if($(this).val() == 0){
                         has_zero_price = 1;
                         return false; // breaks
                     }

                 });
                 if (has_zero_price == 0) {
                     $('#kt_ecommerce_add_product_submit').click();
                 }else{
                     Swal.fire({ text: 'الرجاء اضافة الأسعار للمنتجات', icon: "warning", confirmButtonText: "تم!", buttonsStyling: !1, customClass: { confirmButton: "btn btn-light-primary" } })

                 }


             });
            @endif
        });

        $(document).ready(function () {
            var image_url = '';
            var image_id = 0;
            $(document).on('click','.show_choose_images',function(e){
                e.preventDefault();
                var id = $(this).attr('data-id');
                var name = $(this).attr('data-name');
                $('#product_name_choose').empty().html(name);
                $('#product_name_upload').empty().html(name);
                $('#product_id_choose').val(id);
                $('#product_id_upload').val(id);
                loadImages({{$product->id}});
                console.log('ddddd');
                $('#choose_images').modal('show');
            });

            $('#confirm_image_addition').click(function(e){
                e.preventDefault();
                var id = $('#product_id_choose').val();
                $('#image_'+id).val(image_id);
                $('#image_preview_'+id).attr('src',image_url);


                $('div.added-on-image').map(function() {
                    if($(this).hasClass('deleted')) {
                        $(this).remove();
                    }
                });
                $('#choose_images').modal('hide');
            });
            $('#cancel_image_addition').click(function(e){
                e.preventDefault();
                $('a.choose_image').map(function() {
                    $(this).parent('div.middle').siblings('img.image-preview').css('border', 'none');
                });
                $('#choose_images').modal('hide');

            });
            $(document).on('click','.choose_image', function(e) {
                var id = $(this).data('id');
                var src = $(this).data('url');
                image_id=id;
                image_url=src;
                $(this).parent('div.middle').siblings('img.image-preview').css('border','#19708a solid 3px');
                $('a.choose_image').map(function() {
                    if($(this).attr('data-id') != id) {
                        $('#image_'+$(this).attr('data-id')).val();
                        $(this).parent('div.middle').siblings('img.image-preview').css('border', 'none');

                    }
                });
            });



            function loadImages(id){
                if(id != 0){
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: "get",
                        url: '{{ route('admin.getProductImages') }}',
                        data: {id:id},
                        cache: false,
                        success: function(data, textStatus, xhr){
                            if(data.error){
                                swal({
                                    title: 'حدث خطأ ما',
                                    text: 'حدث خطأ ما',
                                    type: 'error',
                                    timer: 4000,
                                    showConfirmButton: false
                                })
                            }else{
                                if(xhr.status == 200){
                                    var images_api = data.images;
                                    var preview_images_cont = $('#preview_images_cont');
                                    preview_images_cont.empty();

                                    if(images_api.length>0){
                                        preview_images_cont.empty();
                                        for(var i = 0;i<images_api.length;i++){
                                            var div = '<div class="col-md-2" style="margin-bottom:10px;padding:5px;">\n' +
                                                '                                <div class="image-container" >\n' +
                                                '                                    <img class="image-preview" src="'+images_api[i].image_url+'" style="width: 100px;height: 100px;" alt="" />\n' +
                                                '                                    <div class="middle">\n' +
                                                '                                        <a style="color:#777;width: 100px;height: 100px;" class="choose_image"  href="javascript:;" data-id="'+images_api[i].id+'" data-url="'+images_api[i].image_url+'">\n' +
                                                '                                            <i class="fa fa-3x fa-plus-circle"></i>\n' +
                                                '                                        </a>\n' +
                                                '                                    </div>\n' +
                                                '                                </div>\n' +
                                                '                            </div>';
                                            preview_images_cont.append(div);
                                        }
                                        var old_image_id = $('#image_'+$('#product_id_choose').val()).val();
                                        if(old_image_id>0){
                                            $('a.choose_image').map(function() {
                                                if($(this).attr('data-id')===old_image_id){
                                                    $(this).parent('div.middle').siblings('img.image-preview').css('border','#19708a solid 3px');
                                                }
                                            });
                                        }
                                    }else{
                                        preview_images_cont.empty().html('<h5 style="width:100%;">لا يوجد صور مضافة للمنتج</h5>')
                                    }

                                }
                            }

                        },

                    });
                }
            }
        });
    </script>
@endpush