@extends('layouts/page')
@section('content')
    <div class="content-wrapper">
        <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" style="text-align: end;">
                            <form action="{{ url('grub/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>
                            <a href="{{ url('grub/add/') }}" type="button"
                                class="btn btn-primary waves-effect waves-light ms-2">+Tambah</a>
                         </div>
                    </div>

                 </div>


                <div class="card-datatable table-responsive">
                    <table id="grubtable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nama Grub</th>
                                <th>Icon</th>
                                <th>Nama Parent</th>
                                <th>Status</th>
                                <th>Urutan</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="modalGrub" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Gambar Grub</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            </button>
                        </div>
                        <div class="modal-body" id="bucket_modal">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {

            let grubtable = $("#grubtable").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: "NameGrup",
                    },
                    {
                        data: "Icon",
                        render: function(data, type, row, meta) {
                            var urlApi = "{{ Config::get('app.url_api') }}";
                            return '<img src="' + urlApi + '/api/Master/Image/image/' + data +
                                '" alt="" height="100" width"100">';
                        }
                    },
                    {
                        data: "ParentName",
                    },
                    {
                        data: "RefDesc",
                        render: function(data, type, row, meta) {
                            var badgeClass = '';
                            var description = '';

                            if (data === 'Aktif') {
                                badgeClass = 'badge bg-label-success';
                                description = 'Aktif';
                            } else if (data === 'Tidak Aktif') {
                                badgeClass = 'badge bg-label-danger';
                                description = 'Tidak Aktif';
                            } else if (data === 'Draft') {
                                badgeClass = 'badge bg-label-warning';
                                description = 'Draft';
                            }

                            return '<span class="' + badgeClass + '">' + description + '</span>';
                        }
                    },
                    {
                        data: "Urutan",
                    },
                    {
                        data: "IdGrup",
                        render: function(data, type, row, meta) {
                            return `
                    <a href="{{ url('grub/edit') }}/${row.IdGrup}" class="text-body"><i class="ti ti-edit ti-sm me-1"></i></a>
                    <a class="text-body delete-record" onclick="return confirm('Apakah anda yakin?')" data-grub-id="${data}"><i class="ti ti-trash ti-sm me-1"></i></a>
                    <a class="text-body attachment-grub"><i class="ti ti-album ti-sm me-1"></i></a>
                    `
                        }
                    }
                ],

                ajax: {
                    url: '{{ url('grub/_list') }}',
                    method: 'POST',
                    "data": function(d) {}
                },

                drawCallback: function(settings) {
                    $('.delete-record').each(function(i) {
                        $('.delete-record:eq(' + i + ')').click(function(e) {
                            var idGrup = $(this).data('grub-id');
                            var deleteRow = $(this).closest('tr');
                            var deleteUrl = "{{ url('grub/delete') }}/" + idGrup;

                            if (confirm(
                                    'Are you sure you want to delete this record?') ==
                                false
                            ) {
                                return false;
                            }

                            $.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() {
                                            grubtable.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
            });

            $("#grubtable").on('click', '.attachment-grub', function() {
                let data = $("#grubtable").DataTable().row($(this).closest('tr')).data();

                $.ajax({
                    url: `{{ url('grub/_attachment') }}`,
                    method: "POST",
                    data: {
                        id: data.IdGrup
                    },
                    beforeSend: function() {
                        $("#bucket_modal").html(
                            `<div class="spinner-border text-primary" role="status"></div>`)
                        $("#modalGrub").modal("show")

                    },
                    async: false,
                    dataType: 'json',
                    success: function(d) {
                        $("#bucket_modal").html(d.modal)
                    }
                });

            });

        });
         $(".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