@extends('layouts/page')
@section('page-styles')
    <style>
        i {
            font-size: 16px;
        }
    </style>
@endsection
@section('content')
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->

        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            <div class="card">

                <div class="px-3 pt-3 border-bottom d-flex justify-content-between align-items-center">

                    <div class="col-md-6">
                        <div class="card-title" style="text-align: start;">
                            <h4 class="fw-bold">{{ $title }}</h4>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card-title d-flex justify-content-end">
                            <form action="{{ url('magang/export') }}" method="post">
                                @csrf
                                <div class="btn-group">
                                    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-outline-secondary waves-effect dropdown-toggle">
                                        <i class="fa-solid fa-print"></i>&nbsp;&nbsp; Export
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <h6 class="dropdown-header">Tipe File</h6>
                                        </li>
                                        <li><a class="dropdown-item" href="javascript:void(0);" data-type="pdf">PDF</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0);" data-type="excel">Excel</a>
                                        </li>
                                    </ul>
                                </div>
                                <input type="hidden" id="typefile" name="typefile">
                            </form>
                        </div>
                    </div>
                </div>

                <div class="card-datatable table-responsive">
                    <table id="verifikasitable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Username</th>
                                <th>Instansi</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <div class="modal" id="verifikasiModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Verifikasi Akun</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="overflow-x-auto">

                        <input type="hidden" id="id_verifikasi">
                        <input type="hidden" id="emailTo" name="emailTo">
                        <input type="hidden" id="fullnameEmail" name="fullnameEmail">

                        <div class="col-12 mb-1">
                            <select id="active" name="active" class="select2 form-select"
                                data-placeholder="Pilih Status" disabled>
                            </select>
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button id="updateRole" type="button" onclick="edit_status()"
                        class="btn btn-primary waves-effect waves-light m-2">Simpan</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-scripts')
    <script>
        let verifikasitable = $("#verifikasitable").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "bFilter": false,
            "searching": true,
            "processing": true,
            "serverSide": true,
            "aaSorting": [],
            columns: [{
                    "data": null,
                    "sortable": false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: "Name",
                },
                {
                    data: "Email",
                },
                {
                    data: "Username",
                },
                {
                    data: "Instansi",
                },
                {
                    data: "Status",
                    render: function(data, type, row) {
                        var badgeClass = '';
                        var status = '';

                        if (data === 'Yes') {
                            badgeClass = 'badge bg-label-success';
                            status = 'Disetujui';
                        } else if (data === 'No') {
                            badgeClass = 'badge bg-label-warning';
                            status = 'Verifikasi';
                        } else {
                            badgeClass = 'badge bg-label-danger';
                            status = 'Ditolak';
                        }

                        return '<span class="' + badgeClass + '" text-capitalized>' +
                            status + '</span>';
                    }

                },
                {
                    data: "Id",
                    render: function(data, type, row, meta) {
                        return `
                                <a href="#" data-bs-toggle="modal" id="aksiStatus" data-verifikasi-status-id="${data}" data-status-id="${row.Status}"  data-email="${row.Email}" data-username="${row.Username}" data-bs-target="#verifikasiModal" class="text-body"><i class="ti ti-info-circle ti-sm me-2"></i></a>
                                <a class="text-body delete-record icon-link" onclick="return confirm('Apakah anda yakin?')" data-verifikasi-id="${data}"><i class="ti ti-trash "></i></a>
                            `;
                    }
                }
            ],
            ajax: {
                url: '{{ url('magang/_list') }}',
                method: 'POST',
                "data": function(d) {}
            },
            drawCallback: function(settings) {
                $('.delete-record').each(function(i) {
                    $('.delete-record:eq(' + i + ')').click(function(e) {
                        var magangId = $(this).data('verifikasi-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('magang/delete') }}/" +
                            magangId;


                        $.ajax({
                            url: deleteUrl,
                            type: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                    .attr(
                                        'content')
                            },
                            beforeSend: function() {
                                $(".spinnerloader").show()
                            },
                            success: function(response) {
                                var responseData = JSON.parse(response);
                                if (responseData === "Delete Success") {
                                    $(".spinnerloader").hide()
                                    Swal.fire({
                                        title: "Berhasil",
                                        icon: "success",
                                        text: "Data Berhasil Di Hapus",
                                        showClass: {
                                            popup: 'animate__animated animate__bounceIn'
                                        },
                                        customClass: {
                                            confirmButton: 'btn btn-primary'
                                        },
                                        allowOutsideClick: false,
                                        buttonsStyling: false
                                    }).then(function() {
                                        verifikasitable.ajax.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Oops...',
                                        text: 'Failed to delete record.',
                                        customClass: {
                                            confirmButton: 'btn btn-danger'
                                        }
                                    });
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error(error);
                            }
                        });
                    })
                })
            },
            pagingType: "simple_numbers",
            pageLength: 10,
            fixedColumns: true
        });

        $(document).on('click', '#aksiStatus', function(e) {
            e.preventDefault();

            $('#active').empty();
            $("#active").prop("disabled", true);

            var verifikasiId = $(this).data('verifikasi-status-id');
            var email = $(this).data('email');
            var username = $(this).data('username');

            $('#id_verifikasi').val(verifikasiId);
            $('#emailTo').val(email);
            $('#fullnameEmail').val(username);

            $.ajax({
                url: "{{ url('magang/_status') }}",
                method: "POST",
                data: {},
                success: function(data) {
                    let d = JSON.parse(data);
                    let status = d.status

                    let typeId = $(this).data('status-id');

                    let statusHtml = '<option value="">Pilih Status..</option>';

                    for (let i = 0; i < status.length; i++) {
                        statusHtml += '<option value="' + status[i] + '"' +
                            `>` + status[i] +
                            '</option>';
                    }

                    $("#active").prop("disabled", false);
                    $("#active").html(statusHtml);

                },

                error: function(xhr, status, error) {
                    console.error(error);
                }
            });

        });

        function edit_status() {
            let formData = new FormData();
            formData.append("active", $('#active').val());
            formData.append("id", $('#id_verifikasi').val());
            formData.append("emailTo", $('#emailTo').val());
            formData.append("fullnameEmail", $('#fullnameEmail').val());

            if ($('#active').val().trim() == '') {
                $('#active').focus();
                alert('Menu Wajib Diisi');
                return false;
            }

            if (!confirm('Apakah anda yakin?')) {
                return false;
            }

            $.ajax({
                url: "{{ url('magang/_edit') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response) {
                    var responseData = JSON.parse(response);
                    if (responseData.Status === 200) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            verifikasitable.ajax.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });

        }
         $(".dropdown-menu .dropdown-item").on("click", function() {
            $(".dropdown-menu .dropdown-item").removeClass("active");
            $(this).addClass("active");

            $("#typefile").val($(this).attr("data-type"));
            $("form").submit();
        });
    </script>


@endsection