@extends("admin.layout.app",["page_title" => "Admin | User List "])
@push('style')
    <link href="{{ asset('admin-assets/css/quill.snow.css') }}" rel="stylesheet">
@endpush
@section('admin-content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center">
                <h4 class="mb-sm-0 font-size-18"></h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item "><a
                                href="{{route('admin.dashboard')}}">{{__('admin.dashboard')}}</a></li>
                        <li class="breadcrumb-item active">{{__('admin.user')}}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="main-title mb-0">
                        <div class="row">
                            <div class="col-12">
                                <div
                                    class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    <h3 class="text-black">{{__('admin.user')}}</h3>
                                    <div style="float: right;display: flex">
                                        <form method="get" id="per-page-dropdown" class="choose-search-box">
                                            <input type="hidden" name="search" id="hidden_search_value"
                                                   value="{{$keyword}}">
                                            <div class="search-input custom-pagination-dropdown">
                                                <select class="select2  bg-transparent input-custom"
                                                        name="per_page" id="per_page">
                                                    <option value="{{10}}" {{request('per_page') == 10 ? "selected" : ''}}>{{ 10 }}</option>
                                                    <option value="{{25}}" {{request('per_page') == 25 ? "selected" : ''}}>{{ 25 }}</option>
                                                    <option value="{{50}}" {{request('per_page') == 50 ? "selected" : ''}}>{{ 50 }}</option>
                                                    <option value="{{100}}" {{request('per_page') == 100 ? "selected" : ''}}>{{ 100 }}</option>
                                                </select>
                                            </div>
                                        </form>
                                        <form method="get" id="level-2-dropdown" class="choose-search-box">
                                            <div class="input-group search-input">
                                                <input type="text" name="search" class="form-control bg-transparent" placeholder="{{ __('admin.search') }}" value="{{ $keyword }}" id="search_value">
                                                <input type="hidden" name="per_page" value="{{request('per_page') ?? 10}}">
                                                <button type="submit" class="btn btn-success " style="margin: 0px;">{{ __('admin.go') }}</button>
                                            </div>
                                        </form>
                                        <div class="reset-button">
                                            <a href="{{route('admin.user.index')}}" class="btn btn-success"
                                               style="margin-left: 10px;">{{ __('admin.reset') }}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    @include('admin.paginate', [
                        'records' => $users,
                        'no_data' => 'No records found',
                        'columns' => [
                            [
                                'name' => __('admin.name'),
                                'field' => function(App\Models\user $user){
                                        return  $user !== null ? ($user->name !== null ? $user->name : "N/A") : "N/A";
                                },
                                'align' => 'text-center',
                                 'sortField' => 'name',
                                 'isSortable' => 1,
                            ],
                            [
                                'name' => __('admin.email'),
                                'field' => function(App\Models\user $user){
                                        return $user !== null ? ($user->email !== null ? $user->email : "N/A") : "N/A";
                                },
                                'align' => 'text-center',
                                  'sortField' => 'email',
                                 'isSortable' => 1,
                            ],
                            [
                                'name' => __('admin.phone'),
                                'field' => function(App\Models\user $user){
                                        return $user !== null ? ($user->phone !== null ? $user->phone : "N/A") : "N/A";
                                },
                                'align' => 'text-center',
                                'sortField' => 'phone',
                                'isSortable' => 1,
                            ],
                            [
                               'name' => 'Action',
                               'field' => function(App\Models\user $user) {
                                           $button = '
                                                       <a href="javascript:void(0);"
                                                       onclick="openUserModal(`'.route("get.user.popup").'`,`'.$user->id.'`)"
                                                       style="margin-left:5px;"
                                                       class="btn btn-outline-secondary btn-sm edit" title="Edit"><i class="fa fa-edit"></i></a>';
                                            $button .= '
                                                <a href="'.route('admin.user.delete' , $user->id).'"
                                                    class="btn btn-outline-danger btn-sm delete delete-record delete_data"
                                                    title="Delete">
                                                        <i class="fas fa-trash"></i>
                                                </a>';
                                           return $button;
                               },
                                'isSortable' => 0,
                                'align' => 'text-center action-heading',
                            ],
                        ]
                    ])
                </div>
            </div>
        </div>
    </div> 
    <div id="user_popup"></div>                      
@endsection

@push('script')
    <script>
        // Check Unique Communicate Way
        jQuery(document).ready(function () {

        window.openUserModal = function(action, id = null) {
            $.ajax({
                method: "post",
                url: action,
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    id: id
                },
                success: function (result) {
                    $('#user_popup').html(result);

                    const user_modal = $('#user_modal');
                    user_modal.modal('show');

                    validator = $('#user_form').validate({
                        ignore: [],
                        rules: {
                            rules: {
                                name :{
                                    required: true,
                                },
                                email: {
                                    required: true,
                                    email: true,
                                },
                                phone: {
                                    required: true,
                                }
                            },
                        },
                        onkeyup: false,
                        onfocusout: false,
                        onclick: false,
                        submitHandler: function (form) {
                            $(form).find(':input[type=submit]').prop('disabled', true)
                            form.submit();
                        },
                        messages: {
                            name :{
                                required: "Name is required",
                            },
                            email: {
                                required: "Email is required",
                                email: "Enter valid Email",
                            },
                            phone: {
                                required: "Phone no. is required",
                            }
                        },
                        showErrors: function(errorMap, errorList) {
                            if (errorList.length) {
                                flasher.error(errorList[0].message); // show first error
                            }
                        },
                    });

                    //Destroy Validation when modal is closed
                    $("#user_modal").on('hidden.bs.modal', function () {
                        validator.destroy();
                    })
                },
                error: function (error) {

                }
            });
        }
    });
    </script>
@endpush