@extends('backend.layouts.app')

@section('title',__('label.listing_user_page_title').' | '.env('APP_NAME'))

@push('after-styles')
    <!-- DataTables -->
    <link href="{{ asset('public/js/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css"/>
@endpush

@section('breadcrumb')
    {{-- <div class="subheader py-2 py-lg-4 subheader-solid" id="kt_subheader">
        <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-1">
                <!--begin::Page Heading-->
                <div class="d-flex align-items-baseline mr-5">
                    <!--begin::Page Title-->
                    <!--end::Page Title-->
                    <!--begin::Breadcrumb-->
                    <!-- <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                        <li class="breadcrumb-item active">
                            <a href="{{ route('admin.admin.user.index') }}"
                               class="text-muted">{{ __('breadcrumb.users') }}</a>
                        </li>
                    </ul> -->
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page Heading-->
            </div>
            <!--end::Info-->
        </div>
    </div> --}}
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-custom">
                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                        <div class="card-title">
                            <h3>{{ __('label.listing_user_table_title') }}</h3>
                        </div>

                        <div class="card-toolbar">
                            <!--begin::Button-->
                            <a href="{{ route('admin.admin.user.create') }}" class="btn btn-primary font-weight-bolder">
                                <i class="fas fa-plus fa-sm"></i> {{ __('buttons.create_user') }}
                            </a>
                            <!--end::Button-->
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="mb-7">
                            <div class="row align-items-center">
                                <div class="col-lg-12 col-xl-12">
                                    <div class="row align-items-center">
                                        <div class="col-md-3 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                <label class="mr-3 mb-0 d-none d-md-block">{{ __('label.admin_search_name')}}:</label>
                                                {{ Form::text('name',null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'name','title' => __('placeholder.admin_search_name_placeholder')]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-3 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                <label class="mr-3 mb-0 d-none d-md-block">{{ __('label.admin_search_email')}}:</label>
                                                {{ Form::text('email',null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'email','title' => __('placeholder.admin_search_email_placeholder')]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-3 my-2 my-md-0">
                                            <div class="d-flex align-items-center">
                                                <label class="mr-3 mb-0 d-none d-md-block">{{ __('label.status')}}:</label>
                                                {{ Form::select('status',['1' => 'Active','0' => 'Inactive'],null,['class' => 'form-control selectpicker datatable-input change-action','id' => 'status','title' => __('placeholder.select_status')]) }}
                                            </div>
                                        </div>
                                        <div class="col-md-3 my-md-0">
                                            <button class="btn btn-secondary btn-secondary--icon" id="kt_reset" style="display: none">
                                                <span>
                                                    <i class="la la-close"></i>
                                                    <span>{{ __('buttons.reset') }}</span>
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--begin: Selected Rows Group Action Form-->
                        <div class="mb-2 multiple-actions" id="checkboxActionDropdown">
                            <div class="d-flex align-items-center">
                                <div class="font-weight-bold text-danger mr-3">Selected
                                    <span id="datatableSelectedRecords">0</span> records:</div>
                                <div class="dropdown mr-2">
                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">{{ __('label.update_action') }}</button>
                                    <div class="dropdown-menu dropdown-menu-sm">
                                        <ul class="nav nav-hover flex-column">
                                            <li class="nav-item">
                                                <a href="javascript:void(0);" data-value="active" class="nav-link action-type">
                                                    <span class="nav-text">{{ __('label.active') }}</span>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a href="javascript:void(0);" data-value="inactive" class="nav-link action-type">
                                                    <span class="nav-text">{{ __('label.inactive') }}</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <a href="javascript:void(0);" class="btn btn-sm btn-danger mr-2 action-type" data-value="delete">Delete All</a>
                            </div>
                        </div>
                        <!--end: Selected Rows Group Action Form-->
                        <div id="kt_datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer admin-table">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="datatable datatable-default datatable-bordered datatable-loaded">
                                        <table class="datatable-bordered datatable-head-custom datatable-table table-hover"
                                               id="users-table">
                                            <thead>
                                            <tr>
                                                <th>
                                                    <span style="width: 20px;">
                                                        <label class="checkbox checkbox-single">
                                                            <input type="checkbox"
                                                                   name="checkbox_action[]" id="checkbox-all"/>&nbsp;<span></span>
                                                        </label>
                                                    </span>
                                                </th>
                                                <th>{{ __('label.name') }}</th>
                                                <th>{{ __('label.email') }}</th>
                                                {{-- <th>{{ __('label.status') }}</th> --}}
                                                {{-- <th>{{ __('label.account_verified_at') }}</th> --}}
                                                <th>{{ __('label.created_at') }}</th>
                                                <th>{{ __('label.action') }}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after-scripts')
    <!-- DataTables -->
    <script src="{{ asset('public/js/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('public/js/datatable/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('public/js/datatable/datatable-skeleton.js?v='.time()) }}"></script>
    <script>

        $(document).on('keyup', '#name', function () {
            if ($('#name').val() == '' && $('#email').val() == '' && $('#status').val() == '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('keyup', '#email', function () {
            if ($('#name').val() == '' && $('#email').val() == '' && $('#status').val() == '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('change', '#status', function () {
            if ($('#name').val() == '' && $('#email').val() == '' && $('#status').val() == '') {
                $('#kt_reset').hide();
            } else {
                $('#kt_reset').show();
            }
        });

        $(document).on('click', '#kt_reset', function () {
            $('#kt_reset').hide();
        });

        customDataTableWidget.configuration({
            element: '#users-table',
            listingUrl: "{{ route('admin.admin.user.get-listing') }}",
            deleteUrl: "{{ route("admin.admin.user.destroy", ":id") }}",
            multipleActionUrl: "{{ route('admin.admin.user.grid.records.action') }}",
            columns: [
                {
                    data: 'checkbox_action',
                    name: 'checkbox_action',
                    sortable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    searchable: true
                },
                {
                    data: 'email',
                    name: 'email',
                    searchable: true
                },
                // {
                //     data: 'status',
                //     name: 'status'
                // },
                // {
                //     data: 'email_verified_at',
                //     name: 'email_verified_at',
                // },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: 'action',
                    name: 'action',
                    sortable: false,
                    class:'text-right ws-nowrap action-col'
                }
            ],
            search: [
                {
                    key: 'status',
                    type: 'select'
                },
                {
                    key: 'email',
                    type: 'text'
                },
                {
                    key: 'name',
                    type: 'text'
                }
            ],
            defaultSortingIndex: 1,
            defaultSortingOrder: 'desc'
        });
    </script>
@endsection