@extends('layouts.app')

@section("user-image")
    <img src="{{ $user->gambar_profile_url }}" onerror="this.src = `{{ asset('images/hipp.jpeg') }}`" alt="profile" />
@endsection

@section("user")
    <div class="user-name">{{ $user->name }}</div>
    <div class="user-level">{{ $user->role_name }}</div>
@endsection

@section('menu')
    <li class="nav-item"><a href="{{ route('home') }}" class="active"><i class="fa-solid fa-house"></i>Home</a></li>
    <li class="nav-item"><a href="{{ route('mitra.info') }}" class=""><i class="fa-solid fa-circle-info"></i>Informasi Mitra</a></li>
    <li class="nav-item"><a href="{{ route('pengaturan.index') }}"><i class="fa-solid fa-gear"></i>Pengaturan</a></li>
    <li class="nav-item"><a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();"><i class="fa-solid fa-power-off"></i>Keluar</a></li>

    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
        @csrf
    </form>
@endsection

@section('body')
    <div class="content border">
        <div class="fw-bold">Buat akun Pembimbing Mitra</div>
        <div class="panel">
            <div class="row mb-3">
                <label for="mitra" class="col-md-4 col-form-label">1. Masukkan nama mitra:</label>
                <div class="col-sm-6">
                    <select name="mitra" id="mitra" class="form-select mitra"></select>
                </div>
            </div>

            <div class="row mb-3">
                <label for="nama" class="col-md-4 col-form-label">2. Masukkan nama:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control nama" name="nama" id="nama" placeholder="Nama pembimbing mitra" />
                </div>
            </div>

            <div class="row mb-3">
                <label for="username" class="col-md-4 col-form-label">3. Masukkan username:</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control username" name="username" id="username" placeholder="Masukkan username mitra" />
                </div>
            </div>

            <div class="row mb-3">
                <label for="password" class="col-md-4 col-form-label">4. Masukkan password:</label>
                <div class="col-sm-6">
                    <input type="password" class="form-control password" name="password" id="password" placeholder="Password untuk akun mitra" />
                </div>

                <div class="text-end mt-4">
                    <button type="button" class="btn btn-success btn-save">Simpan</button>
                </div>
            </div>
        </div>

        <div class="fw-bold mt-4">Daftar pembimbing mitra yang sudah dibuat</div>
        <div class="panel">
            <div class="panel-header">Daftar admin yang sudah dibuat</div>
            <div class="panel-body">
                <table class="data table table-sm table-striped table-bordered"></table>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(function() {
            // datatable
            var datatable = $('table.data').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('user.list') }}",
                "columns":[
                    {
                        "title": "No",
                        "data": null,
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row, meta) {
                            return parseInt(meta.row) + 1
                        }
                    },
                    {
                        "title": "Nama",
                        "data": "name",
                    },
                    {
                        "title": "Username",
                        "data": "username",
                    },
                    {
                        "title": "Mitra",
                        "data": null,
                        "searchable": false,
                        "orderable": false,
                        "render": function(data, type, row) {
                            let mitra = ''
                            if (row.mitra && row.mitra.length > 0) {
                                mitra = row.mitra.map(function(item) {
                                    return item.nama_mitra
                                })
                                mitra = mitra.join(',')
                            }
                            return mitra
                        }
                    },
                    {
                        "title":"Action",
                        "orderable": false,
                        "searchable": false,
                        "render": function(data, type, row) {
                            return '<button class="btn btn-sm btn-delete-user"><i class="fa-solid fa-trash-can"></i></button>'
                        }
                    },
                ],
                "order": [[ 1, "asc" ]],
                // "columnDefs": [
                //     { className: "text-right", "targets": [3] }
                // ],
            });

            // dropdown mitra
            $('.mitra').select2({
                ajax: {
                    url: '{{ route("mitra.list_dropdown") }}',
                    dataType: 'json',
                    data: function (params) {
                        var query = {
                            search: params.term,
                        }
                        return query;
                    },
                    processResults: function (data) {
                        const response = data.data
                        const result = response.map(function(item) {
                            return {
                                id: item.id,
                                text: item.nama_mitra,
                                ...item
                            }
                        })

                        return {
                            results: result
                        };
                    }
                },
            })

            // save mitra
            $('.btn-save').click(function() {
                const params = {
                    _token: '{{ csrf_token() }}',
                    mitra: $('.mitra').val(),
                    nama: $('.nama').val(),
                    username: $('.username').val(),
                    password: $('.password').val(),
                }

                $.ajax({
                    url: '{{ route("user.create") }}',
                    method: 'POST',
                    data: params,
                    success: function(response) {
                        const data = response
                        if (data.status === "success") {
                            swal.fire({
                                title: '',
                                icon: 'success',
                                text: data.message,
                                showConfirmButton: false
                            })
                            datatable.ajax.reload(null, false)
                        } else {
                            swal.fire({
                                title: '',
                                icon: 'warning',
                                text: data.message,
                                showConfirmButton: false
                            })
                        }
                    }
                })
            })

            // on delete user btn clicked
            $('table.data').on('click', '.btn-delete-user', function() {
                const rowData = datatable.row( $(this).parents('tr') ).data();

                swal.fire({
                    title: '',
                    icon: 'success',
                    text: 'Yakin data akan dihapus?',
                    showCancelButton: true,
                    confirmButtonText: 'Hapus',
                    reverseButtons: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        const params = {
                            _token: '{{ csrf_token() }}',
                            user: rowData.id,
                        }

                        $.ajax({
                            url: '{{ route("user.delete") }}',
                            method: 'POST',
                            data: params,
                            success: function(response) {
                                const data = response
                                if (data.status === "success") {
                                    swal.fire({
                                        title: '',
                                        icon: 'success',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                    datatable.ajax.reload(null, false)
                                } else {
                                    swal.fire({
                                        title: '',
                                        icon: 'warning',
                                        text: data.message,
                                        showConfirmButton: false
                                    })
                                }
                            }
                        })
                    }
                })
            })
        });
    </script>
@endsection