@extends('layoutsV2.master')

@push('plugin-styles')
    {!! Html::style('/assets/plugins/select2/select2.min.css') !!}
    {!! Html::style('/assets/plugins/select2/css/select2-bootstrap4.css') !!}
    {!! Html::style('/assets/plugins/owl-carousel/assets/owl.carousel.min.css') !!}
    {!! Html::style('/assets/plugins/owl-carousel/assets/owl.theme.default.min.css') !!}
    {!! Html::style('/assets/plugins/animate-css/animate.min.css') !!}
    {!! Html::style('/assets/plugins/datatables-net/dataTables.bootstrap4.css') !!}
    {!! Html::style('/assets/plugins/dropify/css/dropify.min.css') !!}
    {!! Html::style('/assets/plugins/sweetalert2/sweetalert2.min.css') !!}
    <link rel="stylesheet" href="{{ asset('https://use.fontawesome.com/releases/v5.8.1/css/all.css') }}">
@endpush

@section('content')
    <div class="row mb-3">
        <div class="col-lg-6">
            <h5 class="mb-3 mb-md-0">{{ENV('APP_TITLE')}}</h5>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header text-uppercase">Master Pengguna</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dataTableExample" class="table table-bordered table-hover table-striped table-condensed table-sm">
                            <thead class="table">
                            <tr>
                                <th class="text-center p-3">No</th>
                                <th class="text-center p-3">Username</th>
                                <th class="text-center p-3">Email</th>
                                <th class="text-center p-3">Role</th>
                                <th class="text-center p-3">Satuan Kerja</th>
                                <th class="text-center p-3">Aksi</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($users as $x => $user)
                                <tr>
                                    <td class="text-center">{{ $x+=1 }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td class="text-center">
                                        @foreach($user->roles->pluck('display_name') as $name)
                                            <span class="badge badge-info text-white">{{ $name }}</span>
                                        @endforeach
                                    </td>
                                    <td>{{ $user->kode_organisasi.' - '.$user->skpd }}</td>
                                    <td class="text-center">
                                        <button class="btn btn-md btn-block btn-warning" data-id="{{ $user->id }}" onclick="edit(this)">Edit</button>
                                        <button class="btn btn-md btn-block btn-danger" data-id="{{ $user->id }}" onclick="remove(this)">Hapus</button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav class="settings-sidebar">
        <div class="sidebar-body">
            <a
                href="#"
                onclick="add(this)"
                class="settings-sidebar-toggler settings-open text-white"
                style="border-radius: 25px;border-color:darkblue; border:1px">
                <i data-feather="plus-circle" style="color:white"></i>
            </a>
        </div>
    </nav>

    @include('pagesV2.adminKab.master.pengguna.form')
@endsection

@push('plugin-scripts')
    {!! Html::script('/assets/plugins/select2/select2.min.js') !!}
    {!! Html::script('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js') !!}
    {!! Html::script('/assets/plugins/owl-carousel/owl.carousel.min.js') !!}
    {!! Html::script('/assets/plugins/jquery-mousewheel/jquery.mousewheel.js') !!}
    {!! Html::script('/assets/plugins/datatables-net/jquery.dataTables.js') !!}
    {!! Html::script('/assets/plugins/datatables-net-bs4/dataTables.bootstrap4.js') !!}
    {!! Html::script('/assets/plugins/dropify/js/dropify.min.js') !!}
    {!! Html::script('/assets/plugins/sweetalert2/sweetalert2.min.js') !!}
    {!! Html::script('/assets/plugins/promise-polyfill/polyfill.min.js') !!}
@endpush

@push('custom-scripts')
    {!! Html::script('/assets/js/select2.js') !!}
    {!! Html::script('/assets/js/carousel.js') !!}
    {!! Html::script('/assets/js/dropify.js') !!}
    {!! Html::script('/assets/js/sweet-alert.js') !!}
    <script>
        function add(self) {
            $('#add').modal({
                show: true,
                backdrop: 'static'
            });
        }
        function save(self) {
            axios.post(window.location.origin + '/v2/adminKab/master/pengguna', {
                'roles' : $('#input_role').val(),
                'username' : $('#input_username').val(),
                'name' : $('#input_name').val(),
                'email' : $('#input_email').val(),
                'kode_organisasi' : $('#input_skpd').val(),
                'nama_organisasi' : $('#input_skpd').select2('data')[0].text,
                'password' : $('#input_password').val(),
                'password_confirmation' : $('#input_confirm_password').val(),
            }).then(r => {
                $('#form_add')[0].reset();
                $('#add').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Berhasil menambahkan data pengguna!',
                }).then(r=>{
                    window.location.reload();
                })
            }).catch(e => {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Tidak berhasil menambahkan data pengguna!',
                })
            })
        }

        function edit(self) {
            Swal.fire({
                icon: 'info',
                title: 'Nantikan!',
                text: 'Pembaruan Terbaru dengan Fitur Edit Pengguna!',
            })
        }

        function remove(self) {
            const id = $(self).data('id');
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: "btn btn-success",
                    cancelButton: "btn btn-danger mr-2"
                },
                buttonsStyling: false
            });
            swalWithBootstrapButtons.fire({
                title: "Apakah anda yakin?",
                text: "Anda tidak akan dapat mengembalikan ini!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Tidak, batalkan!",
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    axios.delete(window.location.origin + '/v2/adminKab/master/pengguna/' + id)
                            .then(r => {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: 'Berhasil menghapus data pengguna!',
                                }).then(r=>{
                                    window.location.reload();
                                })
                            })
                            .catch(e => {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Tidak berhasil menghapus data pengguna!',
                                })
                            })

                } else if (
                        /* Read more about handling dismissals below */
                        result.dismiss === Swal.DismissReason.cancel
                ) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Tidak berhasil menghapus data pengguna!',
                    })
                }
            });
        }

        $(document).ready(()=>{
            $('#input_role').select2({
                placeholder: 'Pilih',
            })
            $('#input_skpd').select2({
                placeholder: 'Pilih',
            })
            $('#dataTableExample').DataTable();
        })

    </script>
@endpush