@extends('admin.layout')

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

@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;
            align-items: center;
            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;
        }
        .whatsApp{
            padding: 1px 3rem;
            background: #40bf50;
            color: white;
            font-size: 17px;
        }


        .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>{!! __('Users') !!}</h3>
                <small>
                    <a href="{{ url('admin/dashboard') }}">{{ __('backend.home') }}</a> /
                    <a>{!! __('Users') !!}</a>
                </small>
            </div>
            <div class="box-tool">
                <ul class="nav">
                    @can('create_user')
                        <li class="nav-item inline">
                            <a class="btn btn-primary" href="javascript:void(0)" onclick="create_user()">
                                <i class="material-icons"></i>{{__('Create')}}
                            </a>

                        </li>
                    @endcan
                    @can('export_user')
                    <li class="nav-item inline">
                        <a class="btn btn-info" href="{{route('lastUsers')}}">
                            <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('usersQ')}}" 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="state" class="form-control" id="state_list">
                                        <option value="" selected disabled>@lang('states')</option>
                                        @foreach($states as $state)
                                            <option value="{{$state->id}}">{{$state->name}}</option>
                                        @endforeach
                                    </select>
                                </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-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="users">
                        <thead class="dker">
                            <th style="width:10px;">#</th>
                            <th>{{ __('id') }}</th>
                            <th style="width:80px;">{{ __('name') }}</th>
                            <th>{{ __('Change status') }}</th>
                            <th>{{ __('Orders count') }}</th>
                            <th>{{ __('Store commission') }}</th>
                            <!-- <th>{{ __('Pickup points') }}</th> -->
                            <th>{{ __('Store outlet') }}</th>
                            <!-- <th>{{ __('Meta title') }}</th> -->
                            <th>{{ __('Store active') }}</th>
                            <th>{{ __('Paid balance') }}</th>
                            <th>{{ __('Total Sales')}}</th>
                            <th>{{ __('Total balance')}}</th>
                            <th>{{ __('Action')}}</th>
                            <!-- <th>{{ __('Created at') }}</th> -->

                            <!--

                            <th style="width:80px;">{{ __('backend.status') }}</th>
                            <th class="text-center" style="max-width:150px;min-width: 146px;">{{ __('backend.options') }}</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>
    @include('admin.pages.users._form')
@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 = "#users";
            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('userQList') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": function (data) {
                        data._token = "{{csrf_token()}}";
                        data.find_q = $('#find_q').val();
                        data.find_date = $('#find_date').val();
                        data.state = $('#state_list').val();
                        data.status = $('#status').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('changeUserQStatus') }}",
                            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": "name",   "orderable": false},

                    {"data" : "change_status" },
                    {"data" : "orders_count" },
                    {"data" : "store_commission" },
                    // {"data" : "pickup_points" },
                    {"data" : "store_outlet" },
                    // {"data" : "meta_title" },
                    {"data" : "store_active" },
                    {"data" : "paid_balance" ,   "orderable": false},
                    {"data" : "total_sales" ,   "orderable": false},
                    {"data" : "total_balance" ,   "orderable": false},
                    {"data": "actions",   "orderable": false}
                    // {"data" : "created_at" },
                ]
                @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('userQDestroy') }}/" + row_id,
                    success: function (result) {
                        var obj_result = jQuery.parseJSON(result);
                        if (obj_result.stat == 'success') {
                            $('#personal_delete_btn').html("{!! __('backend.yes') !!}");
                            $('#users').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.users.users_index_js')

@endsection