@extends('master')
@section('title', 'User')
@push('script')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/dataTables.bootstrap4.min.css') }}" />
    <link rel="stylesheet" type="text/css"
        href="{{ asset('asset/admin/src/plugins/datatables/css/responsive.bootstrap4.min.css') }}" />
@endpush
@section('content')


    <div class="card-box mb-30">
        <div class="pd-20">
            <h4 class="h4">Manajemen User</h4>
            <p class="mb-0">
                <button type="button" class="btn btn-sm btn-dark addButton"><i class="icon-copy bi bi-plus-circle"></i>
                    Add Data</button>
            </p>
        </div>
        <div class="pb-20 p-4 table-responsive">
            <table class="table hover nowrap data" id="data">
                <thead style="background-color: #142127!important;color:#fff; ">
                    <tr>
                        <th class="table-plus datatable-nosort">No</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Position</th>
                        <th>Role</th>
                        <th width=30px>Action</th>
                    </tr>
                </thead>

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


    <!-- Modal add-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">
                        Add @yield('title')
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="form" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>Name</label>
                            <input class="form-control" type="text" name="name" />
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" name="email" />
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input class="form-control" type="password" name="password" />
                        </div>
                        <div class="form-group">
                            <label>Position</label>
                            <select class="form-control" name="position">
                                <option value="" disabled selected hidden>Select Position</option>
                                <option value="Kepala Sekolah">Kepala Sekolah</option>
                                <option value="Kepala Tata Usaha">Kepala Tata Usaha</option>
                                <option value="Guru">Guru</option>
                                <option value="Staff Tata Usaha">Staff Tata Usaha</option>
                                <option value="Siswa">Siswa</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Role</label>
                            <select class="form-control" name="role">
                                <option value="" disabled selected hidden>Select Role User</option>
                                <option value="1">Admin</option>
                                <option value="2">Editor</option>
                                <option value="3">User</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary addSaveButton">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal edit-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">
                        Edit @yield('title')
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="formedit" method="post">
                        <div class="form-group">
                            <label>Name</label>
                            <input class="form-control" type="text" name="id" id="id" hidden  />
                            <input class="form-control" type="text" name="name" id="name" />
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input class="form-control" type="email" name="email" id="email" />
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input class="form-control" type="password" name="password" />
                        </div>
                        <div class="form-group">
                            <label>Position</label>
                            <select class="form-control" name="position" id="position">
                                <option value="" disabled selected hidden>Select Position</option>
                                <option value="Kepala Sekolah">Kepala Sekolah</option>
                                <option value="Kepala Tata Usaha">Kepala Tata Usaha</option>
                                <option value="Guru">Guru</option>
                                <option value="Staff Tata Usaha">Staff Tata Usaha</option>
                                <option value="Siswa">Siswa</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Role</label>
                            <select class="form-control" name="role" id="role">
                                <option value="" disabled selected hidden>Select Role User</option>
                                <option value="1">Admin</option>
                                <option value="2">Editor</option>
                                <option value="3">User</option>

                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary editSaveButton">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('javascript')
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('asset/admin/src/plugins/datatables/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('asset/admin/vendors/scripts/datatable-setting.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


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

            $('body').on('click', '.addButton', function() {
                $('#addModal').modal('show');
            });

            $('body').on('click', '.addSaveButton', function() {
                var form = new FormData($('#form')[0]);
                $('.addSaveButton').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');

                $.ajax({
                    url: '{{ route('user.store') }}',
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: form,
                    success: function(result) {
                        $('.addSaveButton').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Save changes');
                        if (result.status == 'success') {
                            $('#form')[0].reset();
                            Swal.fire({
                                title: "Info !!",
                                text: result.message,
                                icon: "success"
                            }).then(function() {
                                $('#addModal').modal('hide');
                                table.draw();
                            });

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })
            });

            $('body').on('click', '.edit', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: 'user/' + id + '/edit',
                    type: 'get',
                    success: function(result_show) {
                        $('#editModal').modal('show');
                        $('#id').val(result_show.id);
                        $('#name').val(result_show.name);
                        $('#email').val(result_show.email);
                        $('#position').val(result_show.position);
                        $('#role').val(result_show.role);
                    }
                })

            })

            $('body').on('click', '.editSaveButton', function() {
                var id = $('#id').val();
                $('.editSaveButton').removeClass('btn-primary').addClass('btn-primary disabled').text(
                    'Loading....');

                var formedit = new FormData($('#formedit')[0]);
                $.ajax({
                    url: '{{ url("panel/updateuser") }}/'+id,
                    enctype: 'multipart/form-data',
                    type: 'post',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formedit,
                    success: function(result) {
                        $('.editSaveButton').removeClass('btn-primary disabled ').addClass(
                                'btn-primary')
                            .text('Save changes');
                        if (result.status == 'success') {
                            $('#form')[0].reset();
                            Swal.fire({
                                title: "Info !!",
                                text: result.message,
                                icon: "success"
                            }).then(function() {
                                $('#editModal').modal('hide');
                                table.draw();
                            });

                        } else {
                            $.each(result.message, function(prefix, val) {
                                toastr.error(val);
                            });
                        }
                    }
                })


            })



            $('body').on('click', '.delete', function() {
                var id = $(this).data('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('user.destroy', '') }}/' + id,
                            type: 'DELETE',
                            cache: false,
                            success: function(result) {
                                if (result.status == 'success') {
                                    Swal.fire({
                                        title: "Info !!",
                                        text: "Your data has been deleted.",
                                        icon: "success"
                                    }).then(function() {
                                        table.draw();
                                    });
                                }
                            }
                        });
                    }
                });
            });


            var table = $('.data').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('user.create') }}",
                },
                order: [0, 'asc'],
                columns: [{
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        },
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'position',
                        name: 'position'
                    },
                    {
                        data: 'role',
                        render: function(data){
                            if(data == '1'){
                                return 'Admin';
                            }else if(data == '2'){
                                return 'Editor';
                            }else if(data == '3'){
                                return 'User';
                            }
                        }
                    },
                    {
                        data: 'id',
                        render: function(data) {
                            return '<div class="dropdown"><a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown"><i class="dw dw-more"></i> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list"><a class="dropdown-item edit" href="#" data-id="' +
                                data +
                                '"><i class="dw dw-edit2"></i> Edit</a><a class="dropdown-item delete" href="#" data-id="' +
                                data + '"><i class="dw dw-delete-3"></i> Delete</a></div></div>';
                        },
                    },
                ]
            });


        })
    </script>
@endpush