@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('strukturorganisasi/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="typeDate" name="typeDate">
                                <input type="hidden" id="typeStrukturorganisasi" name="typeStrukturorganisasi">
                            </form>
                            <a href="{{ url('strukturorganisasi/add/') }}" type="button"
                                class="btn btn-primary waves-effect waves-light ms-2">+Tambah</a>
                        </div>
                    </div>
                </div>
                <div class="card-header border-bottom">
                    <div class="d-flex justify-content-between align-items-center row pb-2 gap-3 gap-md-0">
                        <div class="col-md-12">
                            <input type="text" class="form-control filter-log filters" placeholder="Tanggal Dibuat"
                                id="date" name="date" disabled />
                        </div>
                    </div>
                </div>
                <div class="card-datatable table-responsive">
                    <table id="strukturorganisasitable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th class="{{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">Nama</th>
                                <th class="{{ Session::get('SiteId') == 171 ? 'd-none' : '' }}">Jabatan</th>
                                <th class="{{ Session::get('SiteId') != 171 ? 'd-none' : '' }}">Foto</th>
                                <th>Deskripsi</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

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

@section('page-scripts')
    <script>
        $(document).ready(function() {
            $("#date").daterangepicker({
                autoUpdateInput: false,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            });

            $('#date').val('');
        });

        let strukturorganisasitable = $("#strukturorganisasitable").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;
                    }
                },
                @if (Session::get('SiteId') != 171)
                    {
                        data: "Nama",
                    }, {
                        data: "Jabatan",
                    },
                @else
                    {
                        data: "Foto",
                        render: function(data, type, row, meta) {
                            return `<img class="d-block" height="100px" width="200px" src="{{ Config::get('app.url_api') . '/api/Master/Image/png/' }}${data}" alt="Foto" />`;
                        }
                    },
                @endif {
                    data: "Deskripsi",
                },
                {
                    data: "Id",
                    render: function(data, type, row, meta) {
                        return `
                    <a href="{{ url('strukturorganisasi/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-strukturorganisasi-id="${data}"><i class="ti ti-trash ti-sm me-2"></i></a>
                    `
                    }
                }
            ],
            ajax: {
                url: '{{ url('strukturorganisasi/_list') }}',
                method: 'POST',
                "data": function(d) {
                    d.date = $('#date').val();
                }
            },
            drawCallback: function(settings) {
                $("#date").prop("disabled", false);
                $('.delete-record').each(function(i) {
                    $('.delete-record:eq(' + i + ')').click(function(e) {
                        var strukturorganisasiId = $(this).data('strukturorganisasi-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('strukturorganisasi/delete') }}/" +
                            strukturorganisasiId;

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

        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
            strukturorganisasitable.ajax.reload();
        });
        $('#date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            strukturorganisasitable.ajax.reload();
        });

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

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