@extends('adminlte::page')

@section('title', 'Freecia')

@section('content_header')
    <h1>{{ $module_name }}</h1>
@stop

@section('content')

    <div class="box">
        <div class="box-header">
            @if($permissions['can_add'])
                <a href="{{ route('user.create') }}" class="btn btn-primary">Create</a>
            @endif
        </div>
        <div class="box-body">

            <!--Search Filters Start-->
            <div class="panel-group">
                <div class="panel panel-danger panel-advance-filters">
                    <div class="panel-heading" data-toggle="collapse" data-target="#advance-filters" style="color: #3c8dbc"
                         aria-expanded="false">
                        <h4 class="panel-title">
                            <i class="fa fa-filter"></i> Advance Filters
                        </h4>
                    </div>
                    <form id="gridFilterForm">
                        <div id="advance-filters" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="row form-group">

                                    {{-- Order ID--}}
                                    <div class="col-md-2">
                                        <label>ID</label>
                                        <input type="text" id="userId-filter" pattern="[0-9]" class="form-control">
                                    </div>


                                    {{-- Choice Status--}}
                                    <div class="col-md-2">
                                        <label>Status</label>
                                        <select id="activefilter" data-placeholder="Select status"
                                                class="form-control select2Filter  filter-field">
                                            <option value=""></option>
                                            <option value="1">Yes</option>
                                            <option value="0">No</option>
                                        </select>
                                    </div>

                                    {{--Created At--}}
                                    <div class="col-md-2">
                                        <label>From - Create At</label>
                                        <input autocomplete="off" id="created_at_start" class="form-control datePicker">
                                    </div>

                                    <div class="col-md-2">
                                        <label>To - Create At</label>
                                        <input autocomplete="off" id="created_at_end" class="form-control datePicker">
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <div class="col-md-2">
                                        <label>Email</label>
                                        <input type="email" id="emailFilter" placeholder="Email" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <button type="button"
                                        class="btn btn-default pull-right margin-r-5  clearFilterDataTable"><i
                                        class="fa fa-times-circle"></i> Clear
                                </button>
                                <button type="button"
                                        class="btn btn-primary pull-right margin-r-5  submitFilterDataTable"><i
                                        class="fa fa-filter"></i> Filter
                                </button>
                                <div class="clearfix"></div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
            <!-- Search Filter End -->

            @include('admin.users.partials.user-list',['permissions'=>$permissions,'rows'=>$rows])
        </div>
    </div>

    <div class="modal fade" id="user-detail-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">User Detail</h4>
                </div>
                <div class="modal-body">
                    <span id="user-detail-placeholder"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@stop

@section('javascript')
    <script>
        $(function () {
            // $('.dataTable1').DataTable({
            //     "order": [[ 0, "desc" ]]
            // });

            $(document).off('click', '.user-details').on('click', '.user-details', function (e) {
                e.preventDefault();
                $('.pace-activity').show();
                var url = $(this).attr('href');
                $.ajax({
                    type: 'GET',
                    url: url,
                    data: {'_token': '{{ csrf_token() }}'},
                    success: function (response) {
                        $('#user-detail-placeholder').html(response.user_detail);
                        $('.pace-activity').hide();
                        $('#user-detail-modal').modal('show');
                    }
                });


            });

            $(document).off('click', '.remove-user').on('click', '.remove-user', function (e) {
                e.preventDefault();
                var action_url = $(this).attr('href');
                var verify_before_delete = $(this).attr('verify-url');


                Swal.fire({
                    title: 'Warning',
                    type: 'warning',
                    text: 'Do you really want to remove this user?',
                    confirmButtonText: 'Confirm',
                    showCancelButton: true,
                }).then((result) => {
                    if (result.value) {
                        window.location.href = action_url;

                    }
                });
            });
        });

        var table;
        $(function () {

            table = initDataTable();

            $('.clearFilterDataTable').click(function () {
                var gridFilterForm = document.getElementById('gridFilterForm');
                gridFilterForm.reset();

                if ($(gridFilterForm).find('select').length > 0) {
                    $(gridFilterForm).find('select').val('');
                    $(gridFilterForm).find('select').change();
                }
                table = initDataTable();
            });

            $('.submitFilterDataTable').click(function () {

                table = initDataTable();
            });

        });


        function initDataTable() {
            if (table) {
                table.destroy();
            }

            var userIdFilter = document.getElementById('userId-filter').value,
                createdAtStart = document.getElementById('created_at_start').value,
                emailFilter = document.getElementById('emailFilter').value,
                createdAtEnd = document.getElementById('created_at_end').value;

            var requestData = {
                _token: "{{csrf_token()}}",
                user_id: userIdFilter,
                email: emailFilter,
                created_at_start: createdAtStart,
                created_at_end: createdAtEnd
            };

            var datatable = $('.userDataTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ route('user.data') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data": requestData
                },
                "columns": [
                    {"data": "id"},
                    {
                        "data": 'profile_picture', "render": function (data, type, full, meta) {
                            return "<img src=\"" + data + "\" width=\"48\"/>";
                        }
                    },
                    {"data": "name"},
                    {"data": "email"},
                    {"data": "contact_no_1"},
                    {"data": "created_at"},
                    {"data": "updated_at"},
                        @if ($permissions['can_view'] || $permissions['can_edit'] || $permissions['can_delete'])
                    {
                        "data": "action", "render": function (data, type, full, meta) {
                            var $columnData = '';

                            @if ($permissions['can_view'])
                                $columnData += '<a href = "' + data.show + '" style="margin-right: 5px;" class="btn btn-primary btn-sm user-details"  mod = "detail-modal" placeholder = "detail-placeholder" ><i class="fa fa-eye" ></i > </a>';
                            @endif
                                @if ($permissions['can_edit'])
                                $columnData += '<a href = "' + data.edit + '" style="margin-right: 5px;" class="btn btn-primary btn-sm" ><i class="fa fa-edit" ></i > </a >';
                            @endif
                                @if ($permissions['can_delete'])
                                $columnData += '<a href = "' + data.delete + '" style="margin-right: 5px;" class="btn btn-danger btn-sm remove-size" ><i class="fa fa-trash" ></i ></a >';
                            @endif

                                return $columnData;
                        }
                    }
                    @endif
                ]

            });

            return datatable;
        }
    </script>
@stop