@extends('admin.layout.master')
@push('css')
    <style>
        /* =========== PRODUCTS ============ */
        .prod-box{border:1px solid #E1E1E1; overflow:hidden; margin-bottom:15px; margin-top:15px;}
        .prod-box .img-holder{ height:200px; position:relative; overflow:hidden;text-align:center;  }
        .prod-box .img-holder img{max-width:100%; min-height:100%}
        .prod-box .anons{background-color:#fff; border-top:1px solid #E1E1E1; padding:15px 10px}

        .prod-box .anons .title{margin:0; font-size:15px;  padding-bottom:10px; color:#333}
        .prod-box .price{ font-size:18px; display:block; color:#333 }

        .btn-order{ background-color:#3498DB; color:#fff;}
        .btn-order:hover{ background-color:#2980B9; color:#fff;}

        .prod-box:hover .item-hover{opacity:1; bottom:0; }
        .prod-box .item-hover{position:absolute; text-align:left; opacity:0;  bottom:-50%; left:0; width:100%; height:50%; color:#fff; background-color:rgba(0,0,0,.7);  z-index:99; transition: all 200ms ease-in-out 0s; padding:7px; font-size:13px;}

        .prod-box .item-hover p{margin:0;font-size:13px; }
        .prod-box .item-hover p a{color:aqua; display:inline-block; padding:3px;}
        .prod-box .item-hover p a:hover{ }

        .inventory{
            border: 1px solid #ddd;
            padding-left: 30px;
            padding-right: 28px;
        }
        .place {
            background: green;
            color: white;
            padding: 4px;
            border-radius: 25px;
        }
        #i-have-a-tooltip {
            font-family:Helvetica,Arial,sans-serif;
            font-weight:100;
            font-size:20px;
            text-align:center;
            margin:40px auto;
            background:white;
            position:relative;
            border-radius:5px;
            box-shadow:10px 10px 0px rgba(0,0,0,.05);
        }

        #i-have-a-tooltip:before {
            content:attr(data-description);
            box-sizing:border-box;
            display:block;
            background:rgba(0,0,0,.7);
            color:white;
            padding:20px;
            position:absolute;
            left:50%;
            top:-30px;
            margin-left:-100px;
            width:200px;
            height:65px;
            line-height:25px;
            border-radius:5px;
            opacity:0;
            transition:.25s ease-in-out;
        }

        #i-have-a-tooltip:after {
            content:'';
            display:block;
            position:absolute;
            top:35px;
            left:50%;
            margin-left:-8px;
            height:0;
            width:0;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            border-top:8px solid rgba(0,0,0,.7);
            transition:.25s ease-in-out;
            opacity:0;
        }

        #i-have-a-tooltip:hover:before {
            opacity:1;
            top:-50px;
        }

        #i-have-a-tooltip:hover:after {
            opacity:1;
            top:15px;
        }

        .titleQ {
            font-size: 15px;
        }
    </style>

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

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

    <div class="promo">
        <div class="promo-body">
            <form action="{{route('get-inventory-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-4 col-sm-4 col-sm-offset-1"  style="float: right">
                        <div class="form-group">
                            <select class="form-control" name="inventory" id="inventory">
                                <option value=" ">اختر المخزن</option>
                                <option value="1" {{request()->inventroy == 1 ? "selected" :" "}}>المكتب</option>
                                <option value="2" {{request()->inventroy == 2 ? "selected" :" "}}>المخزن</option>
                                <option value="3" {{request()->inventroy == 3 ? "selected" :" "}}>الشقة</option>

                            </select>
                        </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="panel panel-default">
                <div class="panel-heading bg-white">
                    <p class="panel-title text-muted"></p>
                </div>
                <div class="panel-body">

                    <section class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">منتجات المخزن</h3>
                        </div>
                        <div class="panel-body">

                            <div class="row" id="table_data">

                                @include('admin.inventory.data')

                            </div><!-- //row -->
                        <span id="RequestSearch" style="display: none"></span>
                        <span id="invent" style="display: none"></span>
                        </div><!-- panel-body // -->
                    </div>
            </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