@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-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('agenda/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="typeAgenda" name="typeAgenda">
                        </form>
                        <a href="{{ url('agenda/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 {{ Session::get('SiteId') == 171 ? ' d-none' : '' }}">
                            <select id="selectpickerType" class="selectpicker w-100 filters" data-style="btn-default">
                            </select>
                        </div>
                        <div class="{{ Session::get('SiteId') == 171 ? 'col-md-12' : 'col-md-6' }}">
                            <input type="text" class="form-control filter-log filters" placeholder="{{ Session::get('SiteId') == 171 ? 'Tanggal' : 'Tanggal Awal' }}"
                                id="date" name="date" disabled/>
                        </div>
                    </div>
                </div>
                <div class="card-datatable table-responsive">
                    <table id="agendatable" class="datatables-users table border-top">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>{{ Session::get('SiteId') == 171 ? 'Nama Kegiatan' : 'Judul' }}</th>
                                <th>{{ Session::get('SiteId') == 171 ? 'Tanggal' : 'Tanggal Mulai' }}</th>
                                @if (Session::get('SiteId') != 171)
                                    <th>Tanggal Selesai</th>
                                    <th>Tipe</th>
                                @endif
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script>
        $(document).ready(function() {
            @if (Session::get('SiteId') != 171)
                type_option();
            @endif

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

                    data: "{{ Session::get('SiteId') == 171 ? 'Deskripsi' : 'Title' }}",
                    className: "",
                    orderable: true,
                },

                {
                    data: 'TanggalAwal',
                    className: '',
                    orderable: true,
                    render: function(data, type, row) {
                        if (data) {
                            var date = new Date(data);
                            var formattedDate = date.toLocaleDateString('en-US', {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit'
                            }).replace(/\//g, '-');
                            var formattedTime = date.toLocaleTimeString('en-US', {
                                hour12: false,
                                hour: '2-digit',
                                minute: '2-digit',
                                second: '2-digit'
                            });
                            var formattedDateTime = formattedDate + ' ' + formattedTime;

                            return formattedDateTime;
                        }
                        return data;
                    }
                },
                @if (Session::get('SiteId') != 171)
                    {
                        data: "TanggalAkhir",
                        className: "",
                        orderable: true,
                        render: function(data, type, row) {
                            if (data) {
                                var formattedDate = data.replace(/[TZ]/g, ' ');
                                return formattedDate;
                            }
                            return data;
                        }
                    },

                    {
                        data: 'TypeAgenda',
                        className: '',
                        orderable: true,
                    },
                @endif

                {
                    data: "AgendaId",
                    className: "text-center",
                    orderable: false,
                    render: function(data, type, row, meta) {
                        let updateLink =
                            `<a href="{{ url('agenda/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-agenda-id="${data}"><i class="ti ti-trash ti-sm me-2"></i></a>`;

                        return updateLink + deleteLink;
                    }
                },
            ],

            ajax: {
                url: "{{ url('agenda/_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);
                $('.delete-record').each(function(i) {
                    $('.delete-record:eq(' + i + ')').click(function(e) {
                        var contentId = $(this).data('agenda-id');
                        var deleteRow = $(this).closest('tr');
                        var deleteUrl = "{{ url('agenda/_delete') }}/" + 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 (response.Status == '200') {
                                    $(".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() {
                                        agendatable.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() {
            agendatable.ajax.reload();
        });
        $('#date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                'MM/DD/YYYY'));
            agendatable.ajax.reload();
        });
        $('#date').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            agendatable.ajax.reload();
        });

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

                    let types = {};
                    for (let i = 0; i < d.data.length; i++) {
                        let type = d.data[i].TypeAgenda;
                        if (type === "Agenda Umum" || type === "Agenda Khusus") {
                            types[type] = true;
                        }
                    }

                    let typeHTML = '<option value="">Type</option>';
                    for (let type in types) {
                        typeHTML += '<option value="' + type + '">' + type + '</option>';
                    }

                    $("#selectpickerType").html(typeHTML);
                    $("#selectpickerType").selectpicker('refresh');
                },

                error: function(xhr, status, error) {
                    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());
            $('#typeAgenda').val($('#selectpickerType').val());
            $("form").submit();
        });
    </script>
@endsection