@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
    <style>
        .spinner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
    </style>
@endsection
@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('slider/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="typeSlider" name="typeSlider">
                                <input type="hidden" id="typeDate" name="typeDate">
                                <input type="hidden" id="typeStatus" name="typeStatus">
                            </form>
                            <a href="{{ url('slider/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-4">
                            <select id="selectpickerType" class="selectpicker w-100 filters" data-style="btn-default" disabled>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select id="selectpickerStatus" class="selectpicker w-100 filters" data-style="btn-default" disabled>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <input type="text" class="form-control filter-log filters" placeholder="Tanggal Diubah"
                                id="date" name="date" disabled />
                        </div>
                    </div>
                </div>

                <div class="card-datatable table-responsive">
                    <table id="slidertable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Judul</th>
                                <th>Type</th>
                                <th>Urutan Tampil</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div data-bs-backdrop="static" class="modal fade" id="modalAttachment" 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">Slide Slider</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() {
            type_option();
            status_option();

            $("#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 slidertable = $("#slidertable").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "bFilter": true,
            "searching": true,
            "processing": true,
            "serverSide": true,
            "aaSorting": [2],
            order: [
                [0, 'asc']
            ],
            columns: [{
                    data: null,
                    className: 'text-center',
                    orderable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    data: "Title",
                    className: "",
                    orderable: true
                },

                {
                    data: 'TypeReference',
                    className: '',
                    orderable: true,
                },
                {
                    data: "Sorting",
                    className: "text-center",
                    orderable: true
                },
                {
                    data: 'StatusReference',
                    className: '',
                    orderable: true,
                    render: function(data, type, row) {
                        var statusCode = data;
                        var badgeClass = '';
                        var description = '';

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

                        return '<span class="' + badgeClass + '" text-capitalized>' +
                            description + '</span>';
                    }
                },
                {
                    data: "SliderId",
                    className: "text-center",
                    orderable: false,
                    render: function(data, type, row, meta) {
                        let updateLink =
                            `<a href="{{ url('slider/edit/') }}/${data}" class="text-body"><i class="ti ti-edit ti-sm mx-2"></i></a>`;

                        let deleteLink =
                            `<a href="#" class="text-body delete-record {{ Session::get('TypeRole') == "eksekutif" ? ' d-none' : '' }}" data-slider-id="${data}"><i class="ti ti-trash ti-sm mx-2"></i></a>`;

                        let attachmentCarousel =
                            `<a class="text-body attachment-slider"><i class="ti ti-album ti-sm mx-2"></i></a>`;

                        return updateLink + deleteLink + attachmentCarousel;
                    }
                }
            ],

            ajax: {
                url: "{{ url('slider/_list_slider') }}",
                method: "POST",
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                    d.status = $('#selectpickerStatus').val();
                    d.type = $('#selectpickerType').val();
                    d.date = $('#date').val();
                }
            },
            drawCallback: function(settings) {
                $("#date").prop("disabled", false);
                $("#selectpickerType").prop("disabled", false);
                $("#selectpickerStatus").prop("disabled", false);

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

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

        $("#slidertable").on('click', '.attachment-slider', function() {
            $("#modalAttachment").modal("show")
            let data = $("#slidertable").DataTable().row($(this).closest('tr')).data();
            $.ajax({
                url: `{{ url('slider/_attachment') }}`,
                method: "POST",
                data: {
                    id: data.SliderId
                },
                beforeSend: function() {
                    $("#bucket_modal").html(
                        `<div class="spinner-container">
                            <div class="spinner-border text-primary" role="status"></div>
                        </div>`
                    );
                },
                dataType: 'json',
                success: function(d) {
                    $("#bucket_modal").html(d.modal)
                }
            });

        });

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

        function type_option() {
            $.ajax({
                url: "{{ url('slider/_list_slider') }}",
                method: "POST",
                data: {},
                success: function(data) {
                    let d = JSON.parse(data);
                    console.log(d);

                    let types = {}; // Objek untuk menyimpan data type yang unik
                    for (let i = 0; i < d.data.length; i++) {
                        let type = d.data[i].TypeReference;
                        types[type] = true; // Tandai type sebagai true untuk menandakan bahwa sudah ditambahkan
                    }

                    let typeHTML = '<option value="">Type</option>';

                    // Buat opsi untuk setiap type yang unik
                    for (let type in types) {
                        typeHTML += '<option value="' + type + '">' + type + '</option>';
                    }

                    $("#selectpickerType").html(typeHTML);

                    // Panggil metode refresh dari Selectpicker untuk menginisialisasi ulang pilihan
                    $("#selectpickerType").selectpicker('refresh');
                },

                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }

        function status_option() {
            $.ajax({
                url: "{{ url('slider/_list_slider') }}",
                method: "POST",
                data: {},
                success: function(data) {
                    let d = JSON.parse(data);
                    console.log(d);

                    let statuss = {}; // Objek untuk menyimpan data type yang unik
                    for (let i = 0; i < d.data.length; i++) {
                        let status = d.data[i].StatusReference;
                        statuss[status] =
                        true; // Tandai status sebagai true untuk menandakan bahwa sudah ditambahkan
                    }

                    let statusHTML = '<option value="">Status</option>';

                    // Buat opsi untuk setiap status yang unik
                    for (let status in statuss) {
                        statusHTML += '<option value="' + status + '">' + status + '</option>';
                    }

                    $("#selectpickerStatus").html(statusHTML);

                    // Panggil metode refresh dari Selectpicker untuk menginisialisasi ulang pilihan
                    $("#selectpickerStatus").selectpicker('refresh');
                },

                error: function(xhr, status, error) {
                    // Handle the error if necessary
                    console.error(error);
                }
            });
        }
        $(".dropdown-menu .dropdown-item").on("click", function() {
            $(".dropdown-menu .dropdown-item").removeClass("active");
            $(this).addClass("active");

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