@extends('admin.layout.master')
@push('css')


    @endpush
@section('content')
    <main id="app-main" class="app-main">

    <div class="wrap">
        <section class="app-content">
            <h3>@lang('admin.RefundPolicy')</h3>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

    <div class="promo">
        <div class="promo-body">
            <form action="{{route('get-refund-search')}}" method="get" id="searchInventory">
                @method('get')
                @csrf
                <div class="row">
                    <div class="col-xs-6 col-sm-4 col-sm-offset-1"  style="float: right">
                        <div class="form-group">
                            <input type="text" class="form-control promo-search-field" id="search" placeholder="ابحث هنا .............">
                        </div>
                    </div>



                    <div class="col-xs-12 col-sm-2" style="float: left">
                        <input type="submit" class="btn btn-primary btn-block promo-search-submit" value="بجث">
                    </div>
                </div>
            </form>
        </div>

    </div>

<div class="wrap">
    <section class="app-content">
        <div class="row" id="table_data">


            @include('admin.refundPolices.data')



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

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">اضافات المنتج</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" >
                    <div class="row" id="inventoryOption">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{{--                    <button type="button" class="btn btn-primary">Save changes</button>--}}
                </div>
            </div>
        </div>
    </div>
    </main>
@endsection
@push('js')
    <script>

        $('body').on('change','#inventory',function (e) {
                e.preventDefault();
            var val = $(this).val();
            $('#invent').html(val);
        });


        $(document).on('click', '.pagination a', function(event){
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
                var search =$('#RequestSearch').html();
               var inventory = $('#invent').html();

            fetch_data(page,search,inventory);
        });

        function fetch_data(page,search,inventory)
        {
            $.ajax({
                url:"{{route('get-inventory-page')}}" + "?page="+page,
                data : {
                    search : search,
                    inventory : inventory
                },
                success:function(data)
                {
                    $('#table_data').html(data);
                }
            });
        }



        $('body').on('submit','#searchInventory',function (e) {
            e.preventDefault();

            var url = $(this).attr('action');
            var search = $('#search').val();
            var inventory = $('#inventory').val();

            $('#RequestSearch').html(search);

            // alert(url);

            $.ajax({
                url: url,
                method: "get",
                data: {
                    search : search,
                    inventory : inventory,
                },

                success: function (response) {
                        $('#table_data').html(response);
                    // console.log(response);
                    // window.location.reload();
                }
            });
        });

        $('body').on('click','#get_feat_inv',function (e) {
            e.preventDefault();

            var url = $(this).data('url');
            var id = $(this).data('id');


            // alert(url);

            $.ajax({
                url: url,
                method: "get",
                data: {
                    id : id,
                },

                success: function (response) {
                    console.log(response);
                    if(response.status == 'false'){
                        var html = `<div class="col-md-12">
                            <div id="i-have-a-tooltip" data-description="Sorry !!">
                                    لايوجد لهذا المنتج اضافات
                            </div>
                        </div>`;

                        $('#inventoryOption').empty();
                        $('#inventoryOption').html(html);


                    }else{
                        $('#inventoryOption').empty();

                        for (var i=0 ; i< response.data.length ; i++){
                            var html = `<div class="col-md-4">
                            <div id="i-have-a-tooltip" data-description="${response.data[i].feature}">
                                ${response.data[i].option} <br>
                                <span class="titleQ">كمية المخزن : </span>${response.data[i].qyt}
<br>
                                <span class="titleQ">سعر التكلفة : </span>${response.data[i].price}
                            </div>
                        </div>
                        `
                            $('#inventoryOption').append(html);

                        }


                    }

                        // $('#table_data').html(response);
                    // console.log(response);
                    // window.location.reload();
                }
            });
        })

    </script>


    @endpush