@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
@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-4">
                        <div class="card-title" style="text-align: start;">
                            <h4 class="fw-bold">{{ ucfirst($kanal) }}</h4>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card-title d-flex justify-content-end {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}"
                            style="text-align: end;">
                            <form action="{{ url('content/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="typeAuthor" name="typeAuthor">
                                <input type="hidden" id="typeKategori" name="typeKategori">
                                <input type="hidden" id="typeDate" name="typeDate">
                                <input type="hidden" value="{{ $typeId }}" name="typeId">
                            </form>

                            <a href="{{ url('content/add/' . $typeId . '/' . $kanal) }}" 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 {{Session::get("SiteId") == 171 && $typeId == 'K014' ? ' d-none' : '' }}">
                            <input type="text" class="form-control filter-log filters" placeholder="YYYY-MM-DD to YYYY-MM-DD"
                                id="date" name="date" disabled/>
                        </div>
                        <div class="{{Session::get("SiteId") == 171 && $typeId == 'K014' ? 'col-md-6' : 'col-md-4' }}">
                            <select id="selectpickerAuthor" class="selectpicker w-100 filters" data-style="btn-default" disabled>
                            </select>
                        </div>
                        <div class="{{Session::get("SiteId") == 171 && $typeId == 'K014' ? 'col-md-6' : 'col-md-4' }}">
                            <select id="selectpickerKategori" class="selectpicker w-100 filters" data-style="btn-default" disabled>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="card-datatable table-responsive">
                    <table id="contenttable" data-type-id="{{ $typeId }}" data-kanal="{{ $kanal }}"
                        class="datatables-content table border-top">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Judul</th>
                                <th>Penulis</th>
                                <th>Kategori</th>
                                <th class="{{Session::get("SiteId") == 171 && $typeId == 'K014' ? ' d-none' : '' }}">Status</th>
                                <th class="{{Session::get("SiteId") == 171 && $typeId == 'K014' ? ' d-none' : '' }}">Tanggal</th>
                                <th>Aksi</th>
                            </tr>
                        <tbody>

                        </tbody>
                        </thead>
                    </table>
                </div>

            </div>
        </div>

    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {
            category_option();
            author_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 typeId = $('#contenttable').data('typeId');
        let kanal = $('#contenttable').data('kanal');

        let contenttable = $("#contenttable").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "bFilter": true,
            "searching": true,
            "processing": true,
            "serverSide": true,
            "aaSorting": [2],

            columns: [{
                    data: null,
                    className: 'text-center',
                    orderable: true,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                }, {

                    data: "Title",
                    className: "",
                    orderable: false
                }, {
                    data: "Author",
                    className: "",
                    orderable: false
                }, {
                    data: "Category",
                    className: "",
                    orderable: false
                },

                @if (Session::get("SiteId") == 171 && $typeId != 'K014' || Session::get("SiteId") != 171) 
                {
                    data: "Status",
                    className: "text-center",
                    render: function(data, type, row) {

                        var statusCode = data;
                        var badgeClass = '';
                        var description = '';

                        if (data === 'ST01') {
                            badgeClass = 'badge bg-label-success';
                            data = 'Aktif';
                        } else if (data === 'ST02') {
                            badgeClass = 'badge bg-label-danger';
                            data = 'Tidak Aktif';
                        } else if (data === 'ST03') {
                            badgeClass = 'badge bg-label-warning';
                            data = 'Draft';
                        }
                        return '<span class="' + badgeClass + '" text-capitalized>' +
                            data + '</span>';
                    }
                },
                {
                    data: "TglPublish",
                    orderable: false,
                    render: function(data, type, row, meta) {
                        let momentDate = moment(data);
                        let formattedDate = momentDate.format('DD-MM-YYYY HH:mm:ss');
                        return formattedDate;
                    }
                },
                @endif
                {
                    data: "ContentId",
                    className: "",
                    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 {{ 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; 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('content/edit/' . $typeId . '/' . $kanal . '/') }}/${data}" class="text-body"><i class="ti ti-edit ti-sm"></i></a>`;
                        let deleteLink =
                            `<a href="#" class="text-body delete-record {{ Session::get('TypeRole') == 'eksekutif' ? ' d-none' : '' }}" data-content-id="${data}"><i class="ti ti-trash ti-sm"></i></a>`;


                        return pinnedLink + updateLink + deleteLink;
                    }
                }

            ],

            ajax: {
                url: "{{ url('content/_list_content') }}",
                method: "POST",
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                    d.kategori = $('#selectpickerKategori').val();
                    d.author = $('#selectpickerAuthor').val();
                    d.date = $('#date').val();
                    d.typeId = typeId;
                    d.kanal = kanal;
                }
            },
            drawCallback: function(settings) {
                $("#date").prop("disabled", false);
                $('.delete-record').each(function(i) {
                    $('.delete-record:eq(' + i + ')').click(function(e) {
                        var contentId = $(this).data('content-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('content/_delete_content') }}/" +
                            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) {
                                if ('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() {
                                        contenttable.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('content/_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()
                                    contenttable.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() {
            contenttable.ajax.reload();
        });
        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
            contenttable.ajax.reload();
        });
        $('#date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            contenttable.ajax.reload();
        });

        function category_option() {
            $.ajax({
                url: "{{ url('content/_category_list') }}",
                method: "POST",
                data: {
                    kanal: typeId
                },
                success: function(data) {
                    let d = JSON.parse(data);

                    let categoryHtml = '<option value="">Kategori</option>';

                    for (let i = 0; i < d.data.length; i++) {
                        categoryHtml += '<option value="' + d.data[i].Description + '">' + d.data[i]
                            .Description +
                            '</option>';
                    }

                    $("#selectpickerKategori").prop("disabled", false);
                    $("#selectpickerKategori").html(categoryHtml);
                    $("#selectpickerKategori").selectpicker('refresh');
                },

                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function author_option() {
            $.ajax({
                url: "{{ url('content/_list_author') }}",
                method: "POST",
                data: {
                    kanal: kanal
                },
                success: function(data) {
                    let d = JSON.parse(data);

                    let authors = {};
                    for (let i = 0; i < d.data.length; i++) {
                        let author = d.data[i].Author;
                        authors[author] =
                            true;
                    }

                    let authorHTML = '<option value="">Penulis</option>';

                    for (let author in authors) {
                        authorHTML += '<option value="' + author + '">' + author + '</option>';
                    }

                    $("#selectpickerAuthor").prop("disabled", false);
                    $("#selectpickerAuthor").html(authorHTML);
                    $("#selectpickerAuthor").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"));
            $('#typeAuthor').val($('#selectpickerAuthor').val());
            $('#typeKategori').val($('#selectpickerKategori').val());
            $('#typeDate').val($('#date').val());
            $("form").submit();
        });
    </script>
@endsection