@extends('admin.layout')

@section('title',__('products'))

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/js/datatables/datatables.min.css') }}">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <style>
        dl {
            display: flex;
            margin-bottom: 5px;
        }
        dt {
            width: 20%;
        }
        dd {
            margin-right: auto;
            width: 80%;
            text-align: start;
        }

        div.actions{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;

        }
        div.actions a{
            margin-bottom: 3px;
        }


        .dker {
    background-color: rgba(0, 0, 0, 0.035);
}

.box-tool {
    left: 1rem;
    right: auto;
    position: absolute;
    top: 14px;
}

.inline {
    display: inline-block !important;
}

.text-success, .text-success-hover a:hover {
    color: #6cc788 !important;
}
.b-success {
    border-color: #6cc788;
}

.p-a {
    padding: 1rem !important;
}

.b-success:hover {
    background: #6cc788;
    color: white !important;
}
.displayNone {
    display: none;
}
    </style>
@endsection

@section('content')
    <div class="padding">
        <div class="box">
            <div class="box-header dker">
                <h3>{!! __('Products') !!}</h3>
                <small>
                    <a href="{{ url('admin/dashboard') }}">{{ __('backend.home') }}</a> /
                    <a>{!! __('Products') !!}</a>
                </small>
            </div>
            <div class="box-tool">
                <ul class="nav">
                    <li class="nav-item inline">
                        <a href="{{route('products.create')}}" class="btn btn-primary">
                            {{__('Create')}}
                        </a>
                    </li>

                    @can('export_product')
                    <li class="nav-item inline">
                        <a class="btn btn-info" href="{{route('lastProducts')}}">
                            <i class="material-icons"></i>{{__('Export')}}
                        </a>
                    </li>
                    @endcan

                    <li class="nav-item inline">
                        <a type="button" class="btn btn-success" id="filter_btn"><i class="fa fa-search"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <div>
                <div class="dker b-b displayNone" id="filter_div">
                    <div class="p-a">
                        <form method="GET" action="{{route('productQ')}}" id="filter_form">

                        <div class="filter_div">
                            <div class="row">
                                <div class="col-md-3 col-xs-6 m-b-5p">
                                    <input type="text" name="find_q" value="{{@$_GET['find_q']}}" placeholder="{{__('backend.searchFor')}}" class="form-control" id="find_q" autocomplete="off">
                                </div>
                                <div class="col-md-3 col-xs-6 m-b-5p">
                                    <select name="status" class="form-control" id="status">
                                        <option value="" selected disabled>@lang('Status')</option>
                                        <option value="1">{{__('Active')}}</option>
                                        <option value="0">{{__('Unactive')}}</option>
                                    </select>
                                </div>
                                <div class="col-md-3 col-xs-6 m-b-5p">
                                    <select name="storehouse" class="form-control" id="storehouse">
                                        <option value="" selected disabled>@lang('Storehouse')</option>
                                        <option value="main">{{__('main')}}</option>
                                        <option value="private">{{__('private')}}</option>
                                    </select>
                                </div>


                                <div class="col-md-1 col-xs-6 m-b-5p">
                                    <button class="btn white w-full" id="search-btn" type="submit"><i
                                            class="fa fa-search"></i>
                                    </button>

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


                <div class="table-responsive">
                    <table class="table table-bordered" style="width: 100%"  id="products">
                        <thead class="dker">
                            <th style="width:10px;">#</th>
                            <th style="width:10px;">id</th>
                            <th>{{ __('Merchant') }}</th>
                            <th>{{ __('Name') }}</th>
                            <th>{{ __('Serial Number') }}</th>
                            <th>{{ __('Type') }}</th>
                            <th>{{ __('Storehouse') }}</th>
                            <th>{{ __('Total Stock') }}</th>
                            <th>{{ __('Stock') }}</th>
                            <th>{{ __('Selling times') }}</th>
                            <th>{{ __('Hold times') }}</th>
                            <th>{{ __('Pending times') }}</th>
                            <th>{{ __('Canceled times') }}</th>
                            <th>{{ __('Provider') }}</th>
                            <th>{{ __('Price') }}</th>
                            <th>{{ __('Offer') }}</th>
                            <th>{{ __('Change status') }}</th>
                            <th>{{ __('Actions')}}</th>
                        </thead>
                    </table>
                </div>

                <footer class="p-x p-b light dk">
                    <div class="row">
                        <div class="col-sm-12 hidden-xs">
                            <!-- .modal -->
                            <div id="m-all" class="modal fade" data-backdrop="true">
                                <div class="modal-dialog" id="animate">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{{ __('backend.confirmation') }}</h5>
                                        </div>
                                        <div class="modal-body text-center p-lg">
                                            <p>
                                                {{ __('backend.confirmationDeleteMsg') }}
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn dark-white p-x-md"
                                                    data-dismiss="modal">{{ __('backend.no') }}</button>
                                            <button type="submit"
                                                    class="btn danger p-x-md">{{ __('backend.yes') }}</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div>
                            </div>
                            <!-- / .modal -->

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

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

    <!-- .modal -->
    <div id="delete-personal" class="modal fade" data-backdrop="true">
        <div class="modal-dialog" id="animate">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('backend.confirmation') }}</h5>
                </div>
                <div class="modal-body text-center p-lg">
                    <p>
                        {{ __('backend.confirmationDeleteMsg') }}
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark-white p-x-md"
                            data-dismiss="modal">{{ __('backend.no') }}</button>
                    <button type="button" id="personal_delete_btn" row-id=""
                            class="btn danger p-x-md">{{ __('backend.yes') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
@endsection
@section('scripts')
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script src="{{ asset('assets/js/datatables/datatables.min.js') }}"></script>
    <script type="text/javascript">
        $("#checkAll").click(function () {
            $('input:checkbox').not(this).prop('checked', this.checked);
        });
        $("#action").change(function () {
            if (this.value == "delete") {
                $("#submit_all").css("display", "none");
                $("#submit_show_msg").css("display", "inline-block");
            } else {
                $("#submit_all").css("display", "inline-block");
                $("#submit_show_msg").css("display", "none");
            }
        });

        $(document).ready(function () {

                        var table_name = "#products";
            var dataTable = $(table_name).DataTable({
                "processing": true,
                "serverSide": true,
                "searching": false,
                "responsive": true,
                "pageLength":  {{ 15 }},
                "lengthMenu": [[10, 20, 30, 50, 75, 100, 200, -1], [10, 20, 30, 50, 75, 100, 200, "All"]],
                "ajax": {
                    "url": "{{ route('productQList') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": function (data) {
                        data._token = "{{csrf_token()}}";
                        data.find_q = $('#find_q').val();
                        data.find_date = $('#find_date').val();
                        data.status = $('#status').val();
                        data.storehouse = $('#storehouse').val();
                    }

                },
                "dom": '<"dataTables_wrapper"<"col-sm-12 col-md-9"i><"col-sm-12 col-md-3"l><"col-sm-12 col-md-12"r><"row"t><"row b-t p-x p-t light dk"<"col-sm-12"p>>>',
                "fnDrawCallback": function () {
                    if ($(table_name + '_paginate .paginate_button').size() > 3) {
                        $(table_name + '_paginate')[0].style.display = "block";
                    } else {
                        $(table_name + '_paginate')[0].style.display = "none";
                    }
                    $('[data-toggle="tooltip"]').tooltip({html: true});
                    $('.toggle-class').bootstrapToggle();
                    $('.toggle-class').change(function() {
                        $(this).parent().parent().append("<img class='spinner' src=\"{{ asset('assets/dashboard/images/loading.gif') }}\" style=\"height: 25px\"/>").fadeIn();
                        var status = $(this).prop('checked') == true ? 1 : 0;
                        var personal_id = $(this).data('id');

                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "{{ route('changeMerchantQStatus') }}",
                            data: {
                                '_token': "{{csrf_token()}}",
                                'active': status,
                                'personal_id': personal_id
                            },
                            success: function(data){
                                $('.spinner').hide();
                            }
                        });
                    });
                },
                "language": {!! json_encode(__("backend.dataTablesTranslation")) !!},
                "columns": [
                    // {
                    //     "data": "check", "class": "dker", "orderable": false
                    // },
                    {"data": "i",     "orderable": false},
                    {"data": "id",     "orderable": true},
                    {"data": "merchant" ,     "orderable": false},
                    {"data": "name_ar" },
                    {"data": "serial_number" },
                    {"data": "type" },
                    {"data": "storehouse" },
                    {"data": "total_stock" ,     "orderable": false},
                    {"data": "stock" },
                    {"data": "selling_times" ,     "orderable": false},
                    {"data": "hold_times" ,     "orderable": false},
                    {"data": "pending_times" ,     "orderable": false},
                    {"data": "canceled_times" ,     "orderable": false},
                    {"data": "provider" },
                    {"data": "price" },
                    {"data": "offer" },
                    {"data": "change_status" },
                    {"data": "actions" ,     "orderable": false},
                ]
                @if(@Auth::user()->permissionsGroup->edit_status)
                , "order": [[1, "desc"]]
                @else
                , "order": [[0, "desc"]]
                @endif

            });
            dataTable.on('page.dt', function () {
                $('html, body').animate({
                    scrollTop: $(".dataTables_wrapper").offset().top
                }, 'slow');
            });
            $.fn.dataTable.ext.errMode = 'none';

            $("#filter_form").submit(function (event) {
                event.preventDefault();
                dataTable.draw();
            });
        });

        $("#filter_btn").click(function () {
            $("#filter_div").slideToggle();
        });

        function DeletePersonal(id) {
            $("#personal_delete_btn").attr("row-id", id);
            $("#delete-personal").modal("show");
        }


        $("#personal_delete_btn").click(function () {
            $(this).html("<img src=\"{{ asset('assets/dashboard/images/loading.gif') }}\" style=\"height: 25px\"/> {!! __('backend.yes') !!}");
            var row_id = $(this).attr('row-id');
            if (row_id != "") {
                $.ajax({
                    type: "GET",
                    url: "{{ route('productQDestroy') }}/" + row_id,
                    success: function (result) {
                        var obj_result = jQuery.parseJSON(result);
                        if (obj_result.stat == 'success') {
                            $('#personal_delete_btn').html("{!! __('backend.yes') !!}");
                            $('#products').DataTable().ajax.reload();
                        }
                        $('#delete-personal').modal('hide');
                        $('.modal-backdrop').hide();
                    }
                });
            }
        });

        $(document).ready(function(){

            $('.toggler').on("click", function(e) {
                $(this).parent().children().toggle();  //swaps the display:none between the two spans
                $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action

            });

        });
    </script>
    <script src="{{URL::asset('assets/js/select2.js')}}" type="text/javascript"></script>

    @include('admin.pages.products.product_index_js')

@endsection