@extends('layouts.layout-2')

@section('content')


    <h4 class="font-weight-bold py-2 mb-2">
        {{ __('User') }}
    </h4>


    <div class="card">
        <div class="card-datatable table-responsive">
            <table class="datatables-users table table-striped table-bordered">

                <thead>
                <tr>
                    <th>{{__('edit')}}</th>
                    <th>{{__('First name')}}</th>
                    <th>{{__('Last name')}}</th>
                    <th>{{__('E-Mail')}}</th>
                    <th>{{__('Zugang')}}</th>
                    <th>{{__('verified')}}</th>
                    <th>{{__('active')}}</th>
                    <th>{{__('shop')}}</th>
                    <th>{{__('delete')}}</th>

                </tr>
                </thead>
            </table>
        </div>
    </div>




    <!-- Modal template -->
    <div class="modal fade" id="modals-default">
        <div class="modal-dialog">
            <form class="modal-content" action="{{ route('admin_user_store') }}" method="post">
                @csrf
                <input type="hidden" class="form-control" name="id">

                <div class="modal-header">
                    <h5 class="modal-title">{{__('User')}}<span class="font-weight-light">{{__('create/edit')}}</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">

                    <div class="form-row">
                        <div class="form-group col">
                            <label for="email" class="form-label">{{__('E-Mail')}}</label>
                            <input type="text" class="form-control" name="email" placeholder="{{__('E-Mail')}}" readonly>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <label for="admin" class="form-label">{{__('Role')}}</label>
                            <select class="selectpicker" data-style="btn-default" name="admin">
                                {!!  HTMLHelper::getRolesOptions() !!}
                            </select>
                        </div>
                    </div>



                    <div class="form-group">
                        <label class="custom-control custom-checkbox m-0">
                            <input type="checkbox" class="custom-control-input" name="confirmed" checked>
                            <span class="custom-control-label">{{__('verified')}}</span>
                        </label>
                    </div>


                    <div class="form-group">
                        <label class="custom-control custom-checkbox m-0">
                            <input type="checkbox" class="custom-control-input" name="active" checked>
                            <span class="custom-control-label">{{__('active')}}</span>
                        </label>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{__('close')}}</button>
                    <button type="submit" class="btn btn-primary">{{__('save')}}</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            $('#modals-default').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                $(this).find(".modal-content input[name='id']").val(button.data('id'));
                $(this).find(".modal-body input[name='email']").val(button.data('email'));
                $(this).find(".modal-body select[name='admin']").val(button.data('admin'));
                $('.selectpicker').selectpicker('refresh');
                $(this).find(".modal-body input[name='active']").prop( "checked", button.data('active'));
                $(this).find(".modal-body input[name='confirmed']").prop( "checked", button.data('confirmed'));
            });

            $('.datatables-users').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": '{!! route('data_table_users') !!}',
                "columns": [
                    { data: 'action_edit', orderable: false, searchable: false},
                    { data: 'first_name', name: 'first_name' },
                    { data: 'last_name', name: 'last_name' },
                    { data: 'email', name: 'email' },
                    { data: 'admin', name: 'admin' },
                    { data: 'confirmed', name: 'confirmed' },
                    { data: 'active', name: 'active' },
                    { data: 'shop', name: 'shop' },
                    { data: 'action_delete', orderable: false, searchable: false},
                ],
                "bLengthChange": false,
                "iDisplayLength": 50,
                "language": {
                    "url": "/js/German.json"
                }
            });

        });
    </script>
@endsection