@extends('admin.layouts.admin')

@section('title')
    محصولات چندتایی
@endsection
@section('style')
    <style>
        .img-thumbnail {
            width: 150px;
            height: auto;
        }

        th {
            vertical-align: middle !important;
        }

        #overlay {
            display: none;
        }

        .sale_img {
            position: absolute;
            width: 40px;
            height: auto;
            left: 0;
            top: 0;
        }

        #success_alert {
            width: 300px;
            height: 100px;
            background-color: green;
            color: white;
            position: fixed;
            bottom: 50px;
            left: 50px;
            text-align: center;
            border-radius: 5%;
            display: none;
        }

        .text-inherit {
            color: inherit !important;
        }

        input {
            text-align: center !important;
        }
    </style>
@endsection

@section('script')
    <script>
        $(document).ready(function () {
            //get localStorage
            let multi_products = JSON.parse(localStorage.getItem("multi_products"));
            let multi_products_brand=localStorage.getItem('multi_products_brand');
            let multi_products_category=localStorage.getItem('multi_products_category');
            let multi_products_search_input=localStorage.getItem('multi_products_search_input');
            if (multi_products !=null){
                $('#SearchInput').val(multi_products_search_input);
                $('#category option[value="'+multi_products_category+'"]').prop('selected',true);
                $('#brand option[value="'+multi_products_brand+'"]').prop('selected',true);
                filter();
            }else {
                $('#category option:first').prop('selected',true);
                $('#brand option:first').prop('selected',true);
            }
        });
        function update_multi_product_quantity(variation_id, tag) {
            let quantity = $(tag).val();
            console.log(variation_id,quantity);
            $.ajax({
                url: "{{ route('admin.products.multi.update.quantity') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    variation_id: variation_id,
                    quantity: quantity,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    if (msg) {
                        if (msg[0] == 1) {
                            $('#success_alert').show(500);
                            setTimeout(function () {
                                $('#success_alert').hide(500);
                            }, 3000);
                        }
                    }

                },
                fail: function (error) {
                    console.log(error);
                }
            })
        }

        function update_multi_price(variation_id, tag) {
            let price = $(tag).val();
            $.ajax({
                url: "{{ route('admin.products.multi.update.update_multi_price') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    variation_id: variation_id,
                    price: price,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    if (msg) {
                        if (msg[0] == 1) {
                            $('#success_alert').show(500);
                            setTimeout(function () {
                                $('#success_alert').hide(500);
                            }, 3000);
                        }
                    }

                },
                fail: function (error) {
                    console.log(error);
                }
            })
        }

        function price_format(tag) {
            let price = $(tag).val();
            $(tag).val(number_format(price));
        }

        function filter() {
            let brand = $('#brand').val();
            let category = $('#category').val();
            let name = $('#SearchInput').val();
            let multi_products_ids =@json($multi_products_ids);
            $.ajax({
                url: "{{ route('admin.products.multi.search') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    name: name,
                    brand: brand,
                    category: category,
                    multi_products_ids: multi_products_ids,
                },
                dataType: "json",
                type: "POST",
                beforeSend: function () {
                    $("#overlay").fadeIn();
                },
                success: function (msg) {
                    if (msg[0] == 1) {
                        //clear localStorage
                        localStorage.removeItem('multi_products');
                        localStorage.removeItem('multi_products_brand');
                        localStorage.removeItem('multi_products_category');
                        localStorage.removeItem('multi_products_search_input');
                        //save in localStorage
                        localStorage.setItem("multi_products", JSON.stringify(msg[1]));
                        localStorage.setItem('multi_products_brand',brand);
                        localStorage.setItem('multi_products_category',category);
                        localStorage.setItem('multi_products_search_input',name);
                        //
                        $('#insertRow').html(msg[1]);
                        $('.paginate').hide();
                        $("#overlay").fadeOut();
                    } else {
                        console.error(msg);
                    }
                },
                fail: function (error) {
                    console.log(error);
                }
            })
        }
        $('#clearFactorBtn').click(function () {
            //clear localStorage
            localStorage.removeItem('multi_products');
            localStorage.removeItem('multi_products_brand');
            localStorage.removeItem('multi_products_category');
            localStorage.removeItem('multi_products_search_input');
            window.location.reload();
        })

        function custom_pagination(tag){
            let per_page=$(tag).val();
            let url='{{ route('admin.products.multi.update.pagination',['show_per_page'=>':per_page']) }}';
            url=url.replace(':per_page',per_page);
            window.location.href=url;
        }

    </script>
@endsection

@section('content')
    <!-- Content Row -->
    <div class="row">
        <div class="col-xl-12 col-md-12 mb-4 p-4 bg-white">
            <div class="d-flex flex-column text-center flex-md-row justify-content-md-between mb-4">
                <h5 class="font-weight-bold mb-3 mb-md-0">لیست محصولات چندتایی ({{ $variations->total() }})</h5>
            </div>
            <div class="row d-lg-flex justify-content-between align-items-center">
                <div class="col-md-8 col-12 d-flex align-items-center">
                    <div class="form-group">
                        <label> جست و جو : </label>
                        <div class="input-group input-group-md d-flex flex-row-reverse border-radius">
                            <input type="text" class="form-control form-control-sm"
                                   aria-label="Sizing example input"
                                   aria-describedby="inputGroup-sizing-lg" placeholder="جست و جو..."
                                   id="SearchInput" autocomplete="off">
                            <div class="input-group-prepend border-radius">
                    <span class="input-group-text" id="basic-addon2"><i class="fa fa-search"
                                                                        aria-hidden="true"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mr-2">
                        <label> دسته بندی : </label>
                        <select id="category" class="form-control form-control-sm">
                            <option value="0">نمایش همه</option>
                            @foreach($categories as $cat)
                                <option style="font-size: 13pt;font-weight: bold" value="{{ $cat->id }}">{{ $cat->name }}</option>