@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">Gallery</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('gallery/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="typeGallery" name="typeGallery">
                            </form>
                            <a href="{{ url('gallery/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-6">
                            <select id="selectpickerType" class="selectpicker w-100 filters" data-style="btn-default"
                                disabled>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <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="gallerytable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Judul</th>
                                <th>Type</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal fade" id="modalAttachment" tabindex="-1" aria-labelledby="exampleModalLabel"
                aria-hidden="true" data-bs-backdrop="static">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Slide Gallery</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>
        <!-- / Content -->
    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {
            type_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 gallerytable = $("#gallerytable").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: 'Type',
                    className: '',
                    orderable: true,
                },
                {
                    data: "GalleryId",
                    className: "text-center",
                    orderable: false,
                    render: function(data, type, row, meta) {

                        let PinData = row.Pin;

                        let pinnedLink = '';

                        if (PinData == 1) {
                            pinnedLink =
                                ` <a class="text-body pin-record icon-link" onclick="return confirm('Apakah anda yakin?')" data-unpin-id="${row.Pin}" data-pinned-id="${data}"> <i style="font-size:20px; color:#4635f2" class='bx bx-pin'></i> </a> `
                        } else {
                            pinnedLink =
                                ` <a class="text-body pin-record icon-link {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}" onclick="return confirm('Apakah anda yakin?')" data-unpin-id="${row.Pin}" data-pinned-id="${data}"> <i style="font-size:20px;" class='bx bx-pin'></i> </a> `
                        }

                        let updateLink =
                            `<a href="{{ url('gallery/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-gallery-id="${data}"><i class="ti ti-trash ti-sm mx-2"></i></a>`;

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

                        return pinnedLink + updateLink + deleteLink + attachmentCarousel;
                    }
                }
            ],

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

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

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

                $('.pin-record').each(function(i) {
                    $('.pin-record:eq(' + i + ')').click(function(e) {
                        var pinnedId = $(this).data(
                            'pinned-id');
                        var unpin = $(this).data(
                            'unpin-id');
                        var pushRow = $(this).closest('tr');
                        var pushUrl = "{{ url('gallery/_edit_pin') }}";

                        if (unpin == 1) {
                            Pinned = 0
                        } else {
                            Pinned = 1
                        }

                        $.ajax({
                            url: pushUrl,
                            type: 'POST',
                            data: {
                                pin: Pinned,
                                id: pinnedId
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]')
                                    .attr(
                                        'content')
                            },
                            beforeSend: function() {
                                $(".spinnerloader").show()
                            },
                            success: function(response) {
                                var responseData = JSON.parse(response);
                                if (responseData.Status === 200) {
                                    $(".spinnerloader").hide()
                                    gallerytable.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
        });

        $("#gallerytable").on('click', '.attachment-gallery', function() {
            $("#modalAttachment").modal("show")
            let data = $("#gallerytable").DataTable().row($(this).closest('tr')).data();
            $.ajax({
                url: `{{ url('gallery/_attachment') }}`,
                method: "POST",
                data: {
                    id: data.GalleryId
                },
                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() {
            gallerytable.ajax.reload();
        });
        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
            gallerytable.ajax.reload();
        });
        $('#date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            gallerytable.ajax.reload();
        });

        function type_option() {
            $.ajax({
                url: "{{ url('gallery/_gallery_list') }}",
                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].Type;
                        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);
                }
            });
        }

        $(".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());
            $('#typeGallery').val($('#selectpickerType').val());
            $("form").submit();
        });
    </script>
@endsection