@extends('layout.store_layout.master')
@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-100px" style="margin-left: 15px!important;">
                        <button type="button" class="btn btn-light me-3 mw-mc" data-bs-toggle="collapse" data-bs-target="#extra_filter" aria-expanded="false" aria-controls="extra_filter">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
                            <span class="svg-icon svg-icon-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z" fill="currentColor" />
                                    </svg>
                                </span>
                            <!--end::Svg Icon-->
                            @lang('general.filter')
                        </button>
                    </div>
                    <div class="w-100 mw-200px">

                    <!--begin::Add customer-->
                    {{--<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer">Add Customer</button>--}}
                    <a  class="btn btn-primary text-nowrap mw-mc" data-bs-toggle="modal" href="#add_transaction_modal" aria-expanded="false" aria-controls="extra_filter">@lang('general.add_new')</a>
                    <!--end::Add customer-->
                </div>
                <!--end::Toolbar-->
            </div>
            <!--end::Card toolbar-->

            <!--extra filter-->
        </div>
        <!--end::Card header-->
            <div class="w-100 py-4 base accordion-collapse collapse" id="extra_filter"  >
                <div class="border p-3">
                    <div class="row">
                        <form action="" id="search_form"  method="get">
                        <div class="col-lg-4">
                            <div class="mb-10">
                                <label class="form-label fs-5 fw-semibold mb-3">خيار المنتج:</label>
                                <select class="form-select form-select-solid" data-control="select2" id="main_category_filter" name="product_variant_id"  data-hide-search="false" data-placeholder="اختر خيار المنتج" data-filter="category" >
                                    <option value="">@lang('general.all')</option>
                                    @foreach($product_variants as $product_variant)
                                        <option {{!is_null( request()->get('product_variant_id')) && request()->get('product_variant_id') == $product_variant->id ? 'selected':''}} value="{{$product_variant->id}}">{{$product_variant->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <!--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;">
            <!--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">
                       #
                    </th>
                    <th class="text-center min-w-150px">المنتج</th>
                    <th class="text-center min-w-80px">السعر</th>
                    <th class="text-center min-w-80px">نوع الحركة</th>
                    <th class="text-center min-w-70px">رقم الطلب</th>
                    <th class="text-center min-w-70px">وقت الحركة</th>
                    <th class="text-center min-w-70px">الكمية</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 >
                                {{$item->productVariant?$item->productVariant->name:$item->product->name}}
                            </div>
                        </td>

                        <td class="text-center">
                            <div >
                                {{$item->price}} {{getStoreDefaultCurrency()}}
                            </div>
                        </td>

                        <td class="text-center">
                            <div >
                                @if($item->operation_type == 'AddToStock')
                                    @if($item->order_id )
                                        <span class="badge badge-light-success fs-7 fw-bold"> اعادة مخزون </span>
                                    @else
                                        <span class="badge badge-light-success fs-7 fw-bold"> اضافة منتج </span>
                                    @endif
                                    {{--                                                @elseif($item->type == 'GetFromStock')--}}
                                    {{--                                                    <span class="m--font-danger"> سحب منتج </span>--}}
                                @else
                                    <span class="badge badge-light-danger fs-7 fw-bold"> شراء منتج </span>
                                @endif
                            </div>
                        </td>

                        <td class="text-center">
                            @if($item->order_id )
                                @if($item->order)
                                {{$item->order->order_number}}
                                @else
                                {{'#'.$item->order_id}}
                                @endif

                            @else
                                -
                            @endif
                        </td>
                        <td class="text-center">{{getFormattedTime($item->created_at)}}</td>
                        <td class="text-center">
                            @if(is_null($item->amount))
                                <span class="badge badge-light-success fs-7 fw-bold"> كمية غير محدودة </span>
                            @else
                                @if($item->amount > 0 && $item->operation_type == 'AddToStock')
                                    <span class="badge badge-light-success fs-7 fw-bold"> {{$item->amount}}</span>
                                @else
                                    <span class="badge badge-light-danger fs-7 fw-bold"> {{$item->amount * -1}} </span>
                                @endif

                            @endif

                        </td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center">
                            لا يوجد بيانات لعرضها
                        </td>
                    </tr>
                @endforelse


                <!--end::Table body-->
            </table>
            <!--end::Table-->
                </div>
            </div>
            <div class="row">
                @if($out->total() > 10)
                    <div
                        class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start">
                        <div class="dataTables_length" id="cs_datatable_length"><label><select name="cs_datatable_length"
                                                                                               id="page_filter"
                                                                                               aria-controls="cs_datatable"
                                                                                               class="form-select form-select-sm form-select-solid">
                                    <option value="10" {{request()->get('per_page',10) == 10?'selected':''}}>10</option>
                                    <option value="25" {{request()->get('per_page',10) == 25?'selected':''}}>25</option>
                                    <option value="50" {{request()->get('per_page',50) == 10?'selected':''}}>50</option>
                                    <option value="100" {{request()->get('per_page',10) == 100?'selected':''}}>100</option>
                                </select></label></div>
                    </div>
                @endif
                <div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end">
                    {{$out->onEachSide(1)->links('partials.paginator')}}
                </div>
            </div>
        </div>
        <!--end::Card body-->
    </div>
    <!--end::Card-->
    <!--add new Modal-->
    <div class="modal fade" tabindex="-1" id="add_transaction_modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">اضافة حركة للمخزن</h3>

                    <!--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 x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <form action="{{route('admin.products.create-stock')}}" id="form" method="post">
                <div class="modal-body">

                        <div class="fv-row">
                        @csrf
                        <input name="product_id" type="hidden" value="{{$product->id}}">
                        @if(count($product->variants) > 1)
                            <div class="mb-10 fv-row">
                                <div class="mb-5">
                                    <label class="required form-label">خيار المنتج</label>
                                    <select  class="form-select" data-control="select2"  data-hide-search="false" data-placeholder="اختر خيار المنتج" name="product_variant_id" id="product_variant_id" required>
                                        @forelse($product_variants as $parent)
                                            <option value="{{ $parent->id }}"  {{ old('product_variant_id')==$parent->id?'selected':'' }}>{{ $parent->name }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        @endif
                        <div class="mb-10 fv-row">
                            <div class="mb-5">
                                <label class="required form-label">نوع الحركة</label>
                                <select class="form-select" data-control="select2"  data-hide-search="false" data-placeholder="اختر نوع الحركة" name="operation_type" id="operation_type" required>
                                    @if(!is_null($product->qty))
                                        <option value="AddToStock">اضافة كمية</option>
                                    @endif
                                    <option value="BuyFromStock">بيع كمية</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-10 fv-row">
                            <div class="mb-5">
                                <label class="required form-label">الكمية</label>
                                <input required min="1" type="number" name="qty" id="qty"  value="{{old('qty')}}" class="form-control mb-2" placeholder="الكمية" >
                            </div>
                        </div>
                        <div class="mb-10 fv-row">
                            <div class="mb-5">
                                <label class="required form-label">سعر الشراء</label>
                                <input required min="1" type="number" name="price" id="price"  value="{{old('price')}}" class="form-control mb-2" placeholder="سعر الشراء" >
                            </div>
                        </div>
                        </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">الغاء</button>
                    <button type="button" class="btn btn-primary" id="save_transaction">حفظ</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!--add new Modal-->
@endsection

@push('custom_js')
    <script src="{{asset('store_admin/js/shared_script.js')}}"></script>

    <script>
        $(document).ready(function(){
            $('#page_filter').on('change',function(){
                var value = $(this).val();
                $('#per_page').val(value);
                $('#search_form').submit();
            });
            $('#main_category_filter').on('change',function(){
                $('#search_form').submit();
            });
        });

    </script>
            <script>
                var rules = {
                    @if(count($product->variants) > 1)
                    'product_variant_id': {
                        validators: {
                            notEmpty: {
                                message: 'خيار المنتج مطلوب'
                            },
                        }
                    },
                    @endif
                    'operation_type': {
                        validators: {
                            notEmpty: {
                                message: 'نوع الحركة حقل مطلوب'
                            }

                        },
                    },
                    'qty': {
                        validators: {
                            notEmpty: {
                                message: 'الكمية حقل مطلوب'
                            },
                        }
                    } ,
                    'price': {
                        validators: {
                            notEmpty: {
                                message: 'السعر حقل مطلوب'
                            },
                        }
                    }
                };
                // Define variables
                let validator;

                // Get elements
                const form = document.getElementById('form');
                const submitButton = document.getElementById('save_transaction');

                // Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
                validator = FormValidation.formValidation(
                    form,
                    {
                        locale: 'ar_MA',
                        localization: FormValidation.locales.en_US,
                        fields: rules,
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger(),
                            bootstrap: new FormValidation.plugins.Bootstrap5({
                                rowSelector: '.fv-row',
                                eleInvalidClass: '',
                                eleValidClass: ''
                            })
                        }
                    }
                );

                // Handle submit button
                submitButton.addEventListener('click', e => {
                    e.preventDefault();

                    // Validate form before submit
                    if (validator) {
                        validator.validate().then(function (status) {
                            console.log('validated!');

                            if (status == 'Valid') {
                                var form_data = new FormData($('#form')[0]);
                                console.log(form_data);

                                submitButton.setAttribute('data-kt-indicator', 'on');
                                // Disable submit button whilst loading
                                submitButton.disabled = true;
                                $.ajax({
                                    type: "POST",
                                    url: "{{route('admin.products.create-stock')}}",
                                    data: form_data,
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    headers: {
                                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                    },
                                    success: function (data) {

                                        if (data.status === 0) {
                                            // Enable submit button after loading
                                            submitButton.setAttribute('data-kt-indicator', 'off');
                                            submitButton.disabled = false;
                                            if (data.errors && data.errors.length > 0) {
                                                var errors = data.errors;
                                                for (var error = 0; error < errors.length; error++) {
                                                    var input_name = errors[error].input_name;
                                                    var input_error = errors[error].errors;
                                                    console.log(input_name, input_error);
                                                    $('#' + input_name + '_error').html(input_error).show();

                                                }
                                            }
                                            // Swal.fire({
                                            //     text: "عذرا! يجب معالجة بعض الأخطاء",
                                            //     icon: "error",
                                            //     buttonsStyling: false,
                                            //     confirmButtonText: "تم!",
                                            //     customClass: {
                                            //         confirmButton: "btn btn-primary"
                                            //     }
                                            // });
                                        } else {
                                            setTimeout(function () {
                                                submitButton.removeAttribute('data-kt-indicator');

                                                Swal.fire({
                                                    text: "تمت عملية الاضافة بنجاح!",
                                                    icon: "success",
                                                    buttonsStyling: false,
                                                    confirmButtonText: "تم!",
                                                    customClass: {
                                                        confirmButton: "btn btn-primary"
                                                    }
                                                }).then(function (result) {
                                                    if (result.isConfirmed) {
                                                        // Enable submit button after loading
                                                        submitButton.setAttribute('data-kt-indicator', 'off');
                                                        submitButton.disabled = false;

                                                        // Redirect to customers list page
                                                        window.location = data.route ? data.route : form.getAttribute("data-kt-redirect");
                                                    }
                                                });
                                            }, 2000);
                                        }
                                    },
                                    error: function (data) {
                                        // Enable submit button after loading
                                        submitButton.setAttribute('data-kt-indicator', 'off');
                                        submitButton.disabled = false;
                                        Swal.fire({
                                            icon: "error",
                                            title: 'حدثت خلل أثناء العملية',
                                            timer: 4000
                                        });
                                    }
                                });


                            } else {
                                // Enable submit button after loading
                                submitButton.setAttribute('data-kt-indicator', 'off');
                                submitButton.disabled = false;
                                // Swal.fire({
                                //     text: "عذرا! يجب ملئ الحقول الفارغة",
                                //     icon: "error",
                                //     buttonsStyling: false,
                                //     confirmButtonText: "تم!",
                                //     customClass: {
                                //         confirmButton: "btn btn-primary"
                                //     }
                                // });
                            }
                        });
                    }
                })
            </script>


    {{--<script src="{{ asset('/') }}assets/js/custom/apps/products/list/list.js"></script>--}}
@endpush