@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3 class="m-0"> Master Data</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Admin</a></li>
                        <li class="breadcrumb-item active">Users</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
        <div class="container" style="display: contents">
            <div class="card">
                <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                <div class="card-header mt-0 pt-0">
                    <div class="d-flex">
                        <h4>Daftar User</h4>
                        <!-- Button trigger modal -->
                        <div class="ml-auto">
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#modal-default-add">
                                Tambah User
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{-- <h5 class="card-title">Form List Data</h5> --}}
                    <div class="table-responsive mt-3">
                        <table id="tabelku" class="table table-hover display" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th>Nama User</th>
                                    <th>Email User</th>
                                    <th>Role</th>
                                    <th>Terakhir Diupdate</th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Menu -->
    <div class="modal fade" id="modal-default-add">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-tambah-user" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="user-name" class="col-form-label">Nama User:</label>
                            <input type="text" class="form-control" id="user-name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="user-email" class="col-form-label">Email User:</label>
                            <input type="text" class="form-control" id="user-email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="password-input" class="col-form-label">Password User:</label>
                            <input type="text" class="form-control" id="password-input" name="password" required>
                        </div>
                        <div class="form-group">
                            <label for="konfirmasi-password-input" class="col-form-label">Konfirmasi Password User:</label>
                            <input type="text" class="form-control" id="konfirmasi-password-input"
                                name="password_confirmation" required>
                        </div>
                        <div class="form-group">
                            <label for="role-text" class="col-form-label">Role:</label>
                            <div class="form-group select2-primary">
                                <select class="select2" multiple="multiple" data-placeholder="Pilih role user" required
                                    name="role_id[]" style="width: 100%;">
                                    @foreach ($roles as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-edit">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-edit-user" method="put" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="user-name-edit" class="col-form-label">Nama User:</label>
                            <input type="text" class="form-control" id="user-name_edit" name="name_edit" required>
                        </div>
                        <div class="form-group">
                            <label for="user-email_edit" class="col-form-label">Email User:</label>
                            <input type="text" class="form-control" id="user-email_edit" name="email_edit" required>
                        </div>
                        <div class="form-group">
                            <label for="password-input_edit" class="col-form-label">Password User:</label>
                            <input type="text" class="form-control" id="password-input_edit" name="password_edit"
                                placeholder="Kosongkan jika tidak ingin mengubah password">
                        </div>
                        <div class="form-group" id="password_confirm_edit" style="display: none">
                            <label for="konfirmasi-password-input_edit" class="col-form-label">Konfirmasi Password
                                User:</label>
                            <input type="text" class="form-control" id="konfirmasi-password-input_edit"
                                placeholder="Kosongkan jika tidak ingin mengubah password"
                                name="password_confirmation_edit">
                        </div>
                        <div class="form-group">
                            <label for="role-text" class="col-form-label">Role:</label>
                            <div class="form-group select2-primary">
                                <select class="edit_select2" multiple="multiple" data-placeholder="Pilih role user"
                                    required name="role_id_edit[]" style="width: 100%;">
                                    @foreach ($roles as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-hapus">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Hapus User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="title-terhapus">&hellip;</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger button-hapus">Hapus</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
@endpush

@push('scripts')
    <!-- Toastr -->
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });
        // check password dan konfirmasi password
        $('#konfirmasi-password-input').on('keyup', function() {
            if ($('#password-input').val() == $('#konfirmasi-password-input').val()) {
                $('#konfirmasi-password-input').removeClass('is-invalid')
                $('#konfirmasi-password-input').addClass('is-valid')
            } else {
                $('#konfirmasi-password-input').removeClass('is-valid')
                $('#konfirmasi-password-input').addClass('is-invalid')
            }
        })

        //Initialize Select2 Elements
        $('.select2').select2({
            dropdownParent: $("#modal-default-add")
        })
        $('.edit_select2').select2({
            dropdownParent: $("#modal-default-edit")
        })

        $(document).ready(function() {
            $('#tabelku').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('users.getDataUser') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'rolenya',
                        name: 'rolenya'
                    },
                    {
                        data: 'updated_atnya',
                        name: 'updated_atnya',
                        className: 'text-center'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'text-center'
                    },
                ]
            })
        })

        // handle password edit user keyup
        $('#password-input_edit').on('keyup', function() {
            if ($('#password-input_edit').val() != '') {
                $('#password_confirm_edit').show()
                if ($('#password-input_edit').val() == $('#konfirmasi-password-input_edit').val()) {
                    $('#konfirmasi-password-input_edit').removeClass('is-invalid')
                    $('#konfirmasi-password-input_edit').addClass('is-valid')
                } else {
                    $('#konfirmasi-password-input_edit').removeClass('is-valid')
                    $('#konfirmasi-password-input_edit').addClass('is-invalid')
                }
            } else {
                $('#password_confirm_edit').hide()
            }
        })

        $('#konfirmasi-password-input_edit').on('keyup', function() {
            if ($('#password-input_edit').val() == $('#konfirmasi-password-input_edit').val()) {
                $('#konfirmasi-password-input_edit').removeClass('is-invalid')
                $('#konfirmasi-password-input_edit').addClass('is-valid')
            } else {
                $('#konfirmasi-password-input_edit').removeClass('is-valid')
                $('#konfirmasi-password-input_edit').addClass('is-invalid')
            }
        })


        $(document).ready(function() {
            // ajax tambah user
            $('#form-tambah-user').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('users.store') }}",
                    type: "POST",
                    dataType: "json",
                    data: $(this).serialize(),
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-add').modal('hide')
                        $('#form-tambah-user')[0].reset()
                        $('.select2').val(null).trigger('change')
                        $('#konfirmasi-password-input').removeClass('is-valid')
                        $('#tabelku').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax edit user
            $(document).on('click', '.btn-edit-user', function() {
                var data = JSON.parse($(this).attr('data-user'));
                $('#user-name_edit').val(data.name)
                $('#user-email_edit').val(data.email)
                $('.edit_select2').val(data.role.map(x => x.id)).trigger('change')
                $('#modal-default-edit').modal('show')
                $('#form-edit-user').on('submit', function(e) {
                    // disable button submit
                    $('#simpan-form-tambah').attr('disabled', true)

                    e.preventDefault();
                    $.ajax({
                        url: "{{ url('users/update') }}" + '/' + data.id,
                        type: "PUT",
                        dataType: "json",
                        data: $(this).serialize(),
                        cache: false,
                        async: false,
                        success: function(response) {
                            // enable button submit on interval 1 detik
                            setTimeout(function() {
                                $('#simpan-form-tambah').attr('disabled', false)
                            }, 500);
                            toastr.success(response.meta.message)
                            $('#modal-default-edit').modal('hide')
                            $('#form-edit-user')[0].reset()
                            $('.edit_select2').val(null).trigger('change')
                            $('#konfirmasi-password-input_edit').removeClass('is-valid')
                            $('#tabelku').DataTable().ajax.reload()
                        },
                        error: function(response) {
                            // enable button submit on interval 1 detik
                            setTimeout(function() {
                                $('#simpan-form-tambah').attr('disabled', false)
                            }, 500);
                            toastr.error(response.responseJSON.meta.message)
                        }
                    })
                })
            })

            // ajax hapus user
            $(document).on('click', '.btn-hapus-user', function() {
                var data = JSON.parse($(this).attr('data-user'));
                var dataAppend = '<p>Apakah anda yakin ingin menghapus user <b>' + data.name +
                    '</b> email <b>' +
                    data.email + '</b> ?</p>';
                $('#title-terhapus').html(dataAppend);
                $('.button-hapus').attr('data-id', data.id);
                $('#modal-default-hapus').modal('show');
            })

            $(document).on('click', '.button-hapus', function() {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('users/delete') }}" + '/' + id,
                    type: "DELETE",
                    dataType: "json",
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-hapus').modal('hide')
                        $('#tabelku').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })
        })
    </script>
@endpush