@extends('backend.layouts.app')
@section('main')
@section('title', 'Users')


    <div class="row">
        <div class="col-lg-12">
            <div class="card card-header-actions h-100">
                <div class="card-header">
                    <div class="h5 col-auto">USER</div>
                </div>
                <div class="row ms-3 me-3">
                    <div class="col-lg-6 mt-4">
                        @if (auth()->user()->role === 'Admin')
                            <button class="btn btn-primary text-light me-2  mb-2" type="button" data-bs-toggle="modal"
                                data-bs-target="#create">
                                <i class="fas fa-plus me-2"></i>CREATE&nbsp
                            </button>
                        @endif
                    </div>
                </div>
               
                @include('backend.user.modal.create')
                @include('backend.user.modal.edit')
                <div class="card-body table-responsive">
                    <table id="myTable" class="table table-hover display nowrap" width="100%">
                        <thead>
                            <tr>
                                <th style="text-align:left!important">NO</th>
                                <th>NAMA LENGKAP</th>
                                <th>EMAIL</th>
                                <th style="text-align:left!important">USERNAME</th>
                                <th>PASSWORD</th>
                                <th>LEVEL</th>
                                <th>STATUS</th>
                                <th>AKSI</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


@endsection
@push('scripts')
    <script type="text/javascript">
        let table = $('#myTable').DataTable({
            processing: true,
            serverSide: true,
            // scrollX: true,
            ajax: '{{ url()->current() }}',
            columns: [{
                    data: null,
                    'sortable': false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'username',
                    name: 'username'
                },
                {
                    data: 'null',
                    name: 'password',
                    serachable: 'false',
                    orderable : 'false',
                    render: function(data) {
                        return '*******';
                    }
                },
                {
                    data: 'role',
                    name: 'role'
                },
                {
                    data: 'status',
                    name: 'status',
                    render: function(data) {
                        if (data === 0) {
                            return '<span class="badge bg-danger">Disabled</span>'
                        } else if (data === 1) {
                            return '<span class="badge bg-success">Aktif</span>'
                        } else if (data === 2){
                            return '<span class="badge bg-warning">New</span>'
                        } else if (data === 3) {
                            return '<span class="badge bg-danger">Expired</span>'
                        }
                    },
                },
                {
                    data: 'action',
                    name: 'action'
                }
            ]
        });

        $('#myTable').on('click', '#delete', function() {

            let id = $(this).data('id');

            Swal.fire({
                title: "Apakah anda yakin?",
                icon: 'warning',
                text: "Data yang sudah dihapus tidak dapat dikembalikan",
                showCancelButton: !0,
                reverseButtons: !0,
                confirmButtonText: "Yes, delete!",
                cancelButtonText: "Cancel",
                confirmButtonColor: "#d33",
                // cancelButtonColor: "#d33",
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $(
                                    'meta[name="csrf-token"]'
                                )
                                .attr('content')
                        }
                    });

                    $.ajax({
                        url: `/area/${id}`,
                        type: "POST",
                        cache: false,
                        data: {
                            _method: "DELETE"
                        },
                        dataType: "json",

                        // tampilkan pesan Success
                        success: function(data) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: `${data.message}`,
                                showConfirmButton: false,
                                timer: 1500
                            });
                            setTimeout(
                                function() {
                                    table.ajax.reload()
                                });
                        },

                        error: function(err) {
                            $("#message").html(
                                "Some Error Occurred!"
                            )
                        }

                    });
                }
            });
        });

        // action create
        $('#store').click(function(e) {
            e.preventDefault();
            var error_ele = document.getElementsByClassName('form-text text-danger');
            if (error_ele.length > 0) {
                for (var i = error_ele.length - 1; i >= 0; i--) {
                    error_ele[i].remove();
                }
            }

            // collect data by id
            var data = {
                'name': $('#name').val(),
                'role': $('#role').val(),
                'username': $('#username').val(),
                'password': $('#password').val(),
                'email': $('#email').val(),
                'whatsapp': $('#whatsapp').val(),
                'reseller_id': $('#reseller').val(),
            }
            

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // ajax proses
            $.ajax({
                url: `/user`,
                type: "POST",
                cache: false,
                data: data,
                dataType: "json",

                // tampilkan pesan Success

                success: function(data) {
                    if (data.success) {
                        Swal.fire({
                            
                            icon: 'success',
                            title: 'Success',
                            text: `${data.message}`,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            table.ajax.reload(),
                            $('input, textarea').val('');
                            $('#create').modal('hide');
                        });
                    } else {
                        $.each(data.error, function(key, value) {
                            var el = $(document).find('[name="' + key + '"]');
                            el.after($('<div class="form-text text-danger">' + value[0] +
                                '</div>'));
                        });
                    }
                },

                error: function(err) {
                    $("#message").html("Some Error Occurred!")
                }

            });
        });

        $('#myTable').on('click', '#edit', function() {

            let user_id = $(this).data('id');

            //fetch detail post with ajax
            $.ajax({
                url: `/user/${user_id}`,
                type: "GET",
                cache: false,
                success: function(response) {

                    //fill data to form
                    $('#user_id').val(response.data.id),
                        $('#name_edit').val(response.data.name),
                        $('#email_edit').val(response.data.email),
                        $('#whatsapp_edit').val(response.data.whatsapp),
                        $('#username_edit').val(response.data.username),
                        // $('#password_edit').val(response.data.password),
                        $('#reseller_edit').val(response.data.reseller_id).trigger('change');
                        $('#role_edit').val(response.data.role);
                        if(response.data.role === 'Admin'){
                            $('#role_edit_admin').val(response.data.role);
                        }else if(response.data.role === 'Reseller') {
                            $('#show_reseller_edit').show()
                        }else{
                            $('#show_reseller_edit').hide()
                        }


                        //open modal
                        $('#edit').modal('show');
                }
            });
        });

        $('#update').click(function(e) {
            e.preventDefault();
            var error_ele = document.getElementsByClassName('form-text text-danger');
            if (error_ele.length > 0) {
                for (var i = error_ele.length - 1; i >= 0; i--) {
                    error_ele[i].remove();
                }
            }
            let user_id = $('#user_id').val();

            // collect data by id
            var data = {
                'name': $('#name_edit').val(),
                'email': $('#email_edit').val(),
                'username': $('#username_edit').val(),
                'whatsapp': $('#whatsapp_edit').val(),
                'password': $('#password_edit').val(),
                'reseller_id': $('#reseller_edit').val(),
                'role': $('#role_edit').val(),
                'role_admin': $('#role_edit_admin').val(),

            }            

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: `/user/${user_id}`,
                type: "PUT",
                cache: false,
                data: data,
                dataType: "json",

                success: function(data) {
                    if (data.success) {
                        Swal.fire({
                            
                            icon: 'success',
                            title: 'Success',
                            text: `${data.message}`,
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            table.ajax.reload()
                            $('input, textarea').val('');
                            $('#edit').modal('hide');
                        });
                    } else {
                        $.each(data.error, function(key, value) {
                            var el = $(document).find('[name="' + key + '"]');
                            el.after($('<div class="form-text text-danger">' + value[0] +
                                '</div>'));
                        });
                    }
                },

                error: function(err) {
                    $("#message").html("Some Error Occurred!")
                }

            });

        });

        $('#myTable').on('click', '#disable', function() {
            let id = $(this).data('id');
            Swal.fire({
                title: "Nonaktifkan User",
                icon: 'warning',
                text: 'Apakah Anda yakin ingin menonaktifkan user ini?',
                showCancelButton: !0,
                confirmButtonText: "Ya, Nonaktifkan",
                cancelButtonText: "Batal",
                reverseButtons: !0,
            }).then(function(result) {
                if (result.isConfirmed) {
                    var data = {
                        'id': id
                    };

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $(
                                    'meta[name="csrf-token"]'
                                )
                                .attr('content')
                        }
                    });

                    // ajax proses
                    $.ajax({
                        url: `/user/disable/${id}`,
                        type: "PUT",
                        cache: false,
                        data: data,
                        dataType: "json",

                        // tampilkan pesan Success

                        success: function(data) {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: `${data.message}`,
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                setTimeout(function() {
                                    table.ajax.reload()
                                });
                            } else {

                            }
                        },

                        error: function(err) {
                            $("#message").html(
                                "Some Error Occurred!"
                            )
                        }

                    });
                }
            });
        });

        $('#myTable').on('click', '#enable', function() {
            let id = $(this).data('id');
            Swal.fire({
                title: "Aktifkan Reseller",
                icon: 'warning',
                text: 'Apakah Anda yakin ingin mengaktifkan reseller ini?',
                showCancelButton: !0,
                confirmButtonText: "Ya, Aktifkan",
                cancelButtonText: "Batal",
                reverseButtons: !0,
            }).then(function(result) {
                if (result.isConfirmed) {
                    var data = {
                        'id': id
                    };

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $(
                                    'meta[name="csrf-token"]'
                                )
                                .attr('content')
                        }
                    });

                    // ajax proses
                    $.ajax({
                        url: `/user/enable/${id}`,
                        type: "PUT",
                        cache: false,
                        data: data,
                        dataType: "json",

                        // tampilkan pesan Success

                        success: function(data) {
                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: `${data.message}`,
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                                setTimeout(function() {
                                    table.ajax.reload()
                                });
                            } else {

                            }
                        },

                        error: function(err) {
                            $("#message").html(
                                "Some Error Occurred!"
                            )
                        }

                    });
                }
            });
        });

        $('#role').change(function() {
        let role = $(this).val(); //Get selected option value
        if (role == 'Reseller') {
            $('#show_reseller').show()
        } else {
            $('#show_reseller').hide()
        }
        });
        $('#role_edit').change(function() {
        let role = $(this).val(); //Get selected option value
        if (role == 'Reseller') {
            $('#show_reseller_edit').show()
        } else {
            $('#show_reseller_edit').hide()
        }
        });


        $('#reseller').select2({
        // allowClear: true,
        dropdownParent: $("#create .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        });

        $('#reseller_edit').select2({
        // allowClear: true,
        dropdownParent: $("#edit .modal-content"),
        width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        placeholder: $(this).data('placeholder'),
        });

    </script>
@endpush