@extends('layouts/page')
@section('page-styles')
@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('organization/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">
                                <input type="hidden" id="typeOrganization" name="typeOrganization">
                            </form>

                            <a href="{{ url('organization/add/') }}" type="button" class="btn btn-primary waves-effect waves-light ms-2">+Tambah</a>
                        </div>
                    </div>
                </div>

                <div class="card-datatable table-responsive m-3">
                    <table id="organizationtable" class="datatables-users table border-top ">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Nama</th>
                                <th>Parent</th>
                                <th>Foto</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <!-- / Content -->
    </div>
@endsection

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

            let organizationtable = $("#organizationtable").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: "ParentName",
                    },
                    {
                        data: "Media",
                        render: function(data, type, row, meta) {
                            var urlApi = "{{ Config::get('app.url_api') }}";
                            if (data) {
                                return '<img src="' + urlApi + '/api/Master/Image/image/' + data +
                                    '" alt="" height="100" width"100">';
                            } else {
                                // Tambahkan class "row-no-image" ke baris saat tidak ada gambar
                                return '<div class="" style="height:auto;">Image</div>';
                            }
                        }
                    },
                    {
                        data: "Id",
                        render: function(data, type, row, meta) {
                            return `
                    <a href="{{ url('organization/edit') }}/${row.Id}" class="text-body"><i class="ti ti-edit ti-sm me-2"></i></a>
                    <a class="text-body delete-record" onclick="return confirm('Apakah anda yakin?')" data-organization-id="${data}"><i class="ti ti-trash ti-sm me-2"></i></a>
                    `
                        }
                    }
                ],
                ajax: {
                    url: '{{ url('organization/_list') }}',
                    method: 'POST',
                    "data": function(d) {}
                },
                drawCallback: function(settings) {
                    $('.delete-record').each(function(i) {
                        $('.delete-record:eq(' + i + ')').click(function(e) {
                            var organizationId = $(this).data('organization-id');
                            var deleteRow = $(this).closest('tr');
                            var deleteUrl = "{{ url('organization/delete') }}/" +
                                organizationId;

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

            // $('.filters').on('change', function() {
            //     slidertable.ajax.reload();
            // });
        });

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