@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 {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}" style="text-align: end;">
                            <form action="{{ url('jabatan/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('jabatan/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="jabatantable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>{{ Session::get('SiteId') != 171 ? 'Nama Jabatan' : 'Nama' }}</th>
                                <th>{{ Session::get('SiteId') != 171 ? 'Tugas Pokok' : 'Nip' }}</th>
                                <th>{{ Session::get('SiteId') != 171 ? 'Uraian Tugas' : 'Jabatan' }}</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection

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

            let jabatantable = $("#jabatantable").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: "{{ Session::get('SiteId') != 171 ? 'Jabatan' : 'Nama' }}",
                    },
                    {
                        data: "{{ Session::get('SiteId') != 171 ? 'TugasPokok' : 'Nip' }}",
                        render: function(data, type, row, meta) {
                            if ({{ Session::get('SiteId') }} != 171) {
                                var tanpaHTML = data.replace(/<[^>]+>/g, '')
                                return tanpaHTML;
                            } else {
                                return data;
                            }
                        }
                    },
                    {
                        data: "{{ Session::get('SiteId') != 171 ? 'UraianTugas' : 'Jabatan' }}",
                        render: function(data, type, row, meta) {
                            if ({{ Session::get('SiteId') }} != 171) {
                                var tanpaHTML = data.replace(/<[^>]+>/g, '')
                                return tanpaHTML;
                            } else {
                                return data;
                            }
                        }
                    },
                    {
                        data: "Id",
                        render: function(data, type, row, meta) {
                            return `
                            <a href="{{ url('jabatan/edit') }}/${row.Id}" class="text-body"><i class="ti ti-edit ti-sm me-2"></i></a>
                            <a class="text-body delete-record {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}" data-jabatan-id="${data}"><i class="ti ti-trash ti-sm me-2"></i></a>
                    `
                        }
                    }
                ],
                ajax: {
                    url: '{{ url('jabatan/_list') }}',
                    method: 'POST',
                    "data": function(d) {}
                },
                drawCallback: function(settings) {
                    $('.delete-record').each(function(i) {
                        $('.delete-record:eq(' + i + ')').click(function(e) {
                            var jabatanId = $(this).data('jabatan-id');
                            var deleteRow = $(this).closest('tr');
                            var deleteUrl = "{{ url('jabatan/delete') }}/" + jabatanId;

                            if (confirm( 'Apakah anda yakin?') == 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() {
                                            jabatantable.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
            });

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