@php
    date_default_timezone_set('Asia/Bangkok');
@endphp
<link href="{{ asset('asset_dore/css/jquery.treegrid.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('report-new.css?version=_') . time() }}" />
<link rel="stylesheet" href="{{ asset('report-grid.css?version=_') . time() }}" />

<style>
    #btn-tampil {
        float: right;
        width: 130px;
    }

    #btn-tutup {
        float: right;
        width: 110px;
    }

    .info-table thead {
        background: #4286f5;
        color: white;
    }

    .table-header td {
        padding: 2px !important;
    }

    .bold {
        font-weight: bold;
    }

    .v-middle {
        vertical-align: middle !important;
    }

    th.dt-nowrap,
    td.dt-nowrap {
        white-space: nowrap;
    }

    #report-table th {
        padding: 4px 8px !important;
        border: none !important;
    }

    #report-table td,
    #report-table th {
        border: 1px solid #b7b7b7 !important;
    }

    .dataTables_scrollHeadInner,
    #report-table,
    .dataTables_scrollFootInner table {
        width: 3300px !important;
    }

    .dataTables_scrollBody #report-table thead th {
        height: 0px !important;
        padding: 0px 8px !important;
    }

    .DTFC_LeftBodyWrapper th,
    .DTFC_Cloned th {
        padding: 0px 8px !important;
        border-bottom: 0px !important;
        vertical-align: middle;
        text-align: center;
    }

    table.dataTable,
    .DTFC_LeftBodyWrapper,
    .DTFC_Cloned {
        border-collapse: collapse !important;
    }

    .DTFC_Cloned {
        border: 0px !important;
    }

    .DTFC_LeftHeadWrapper .DTFC_Cloned th {
        border-top: 1px solid #BABCBE !important;
    }

    .DTFC_LeftFootWrapper .DTFC_Cloned th {
        border-bottom: 1px solid #BABCBE !important;
    }

    td.dtfc-fixed-left,
    td.dtfc-fixed-right {
        background: white;
    }

    td .text-link {
        color: #006dd0 !important;
        text-decoration: underline !important;
        font-size: 0.75rem !important
    }

    @media print {

        body,
        html,
        main {
            background: none !important;
        }

        @page {
            size: A4
        }

        #report-table {
            overflow: unset !important;
        }

        .table th,
        .table td {
            border-color: #BABCBE !important;
            border: 1px solid #BABCBE !important;
        }
    }
</style>

<div class="row" id="saku-filter">
    <div class="col-12">
        <div class="card">
            <x-report-header judul="Laporan Data Aset" />
            <div class="separator"></div>
            <div class="row">
                <div class="col-12 col-sm-12">
                    <div class="collapse show" id="collapseFilter">
                        <div class="px-4 pb-4 pt-2">
                            <form id="form-filter">
                                <h6>Filter</h6>
                               <div id="inputFilter">
                                    <x-inp-filter kode="kode_gedung" nama="Gedung" selected="1" :option="['1', '3']" />
                                    <x-inp-filter kode="kode_ruang" nama="Ruang" selected="1" :option="['1', '3']" />
                                    <x-inp-filter kode="kode_aset" nama="Kode Aset" selected="1" :option="['1', '3']" />
                                </div>

                                <button id="btn-tampil" class="btn btn-primary ml-2 mb-3" type="submit">
                                    Tampilkan
                                </button>
                                <button type="button" id="btn-tutup" class="btn btn-light mb-3" type="button">
                                    Tutup
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <x-report-paging :option="[10, 25, 50, 100]" default="10" />
            </div>
        </div>
    </div>
</div>

<x-report-result judul="Data Laporan Aset" padding="px-4 py-4" />
<input type="hidden" name="page_start" id="page_start">

<div class="control-scroll">
    <a id="scroll-bottom" class="text-center" style="display:none;">
        <i class="simple-icon-arrow-down" style="font-size:20px;"></i>
    </a>
    <a id="scroll-top" style="display:none;" class="text-center">
        <i class="simple-icon-arrow-up" style="font-size:20px"></i>
    </a>
</div>

<button id="trigger-bottom-sheet" style="display:none;"></button>
<button id="trigger-bottom-sheet2" style="display:none;"></button>
<script src="{{ asset('asset_dore/js/vendor/jquery.validate/sai-validate-custom.js') }}"></script>
<script src="{{ asset('asset_baru/js/helper.js?version=_') . time() }}"></script>
<script src="{{ asset('asset_dore/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('asset_dore/js/jquery.treegrid.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        const bottomSheet = new BottomSheet("country-selector");
        document.getElementById("trigger-bottom-sheet").addEventListener("click", bottomSheet.activate);
        window.bottomSheet = bottomSheet;

        const bottomSheet2 = new BottomSheet('bs-selector-nodrag')
        document.getElementById("trigger-bottom-sheet2").addEventListener("click", bottomSheet2.activate)
        window.bottomSheet2 = bottomSheet2

        const $form_parent = "#saku-report #canvasPreview";
        window.$filter_rpt = {}

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="-token"]').attr('content')
            }
        });

        $('.selectize').selectize();

        $('#scroll-bottom').click(function() {
            $('html, body').animate({
                scrollTop: $("#saku-report tbody tr:last").offset().top
            }, 700);
        });

        $('#scroll-top').click(function() {
            $('html, body').animate({
                scrollTop: 0
            }, 700);
        });

        $(window).scroll(function() {
            if ($(window).scrollTop() == 0) {
                $('#scroll-top').hide();
                $('#scroll-bottom').show();
            } else if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                $('#scroll-top').show();
                $('#scroll-bottom').hide();
            }
        });

        $('#btn-filter').click(function(e) {
            $('#collapseFilter').show();
            $('#collapsePaging').hide();
            if ($(this).hasClass("btn-primary")) {
                $(this).removeClass("btn-primary");
                $(this).addClass("btn-light");
            }

            $('#btn-filter').addClass("hidden");
            $('#btn-export').addClass("hidden");
        });

        $('#btn-tutup').click(function(e) {
            $('#collapseFilter').hide();
            $('#collapsePaging').show();
            $('#btn-filter').addClass("btn-primary");
            $('#btn-filter').removeClass("btn-light");
            $('#btn-filter').removeClass("hidden");
            $('#btn-export').removeClass("hidden");
        });

        $('#btn-tampil').click(function(e) {
            $('#collapseFilter').hide();
            $('#collapsePaging').show();
            $('#btn-filter').addClass("btn-primary");
            $('#btn-filter').removeClass("btn-light");
            $('#btn-filter').removeClass("hidden");
            $('#btn-export').removeClass("hidden");
        });

        $('#sai-rpt-pdf').remove();
        $('#sai-rpt-email').remove();
        $('#sai-rpt-print').remove();
        $('#sai-rpt-print-prev').remove();

        const createFilterObject = () => ({
            type: 'all',
            from: '',
            fromname: '',
            to: '',
            toname: ''
        })

        window.$kode_gedung = createFilterObject()
        window.$kode_ruang = createFilterObject()
        // window.$no_aset = createFilterObject()
        window.$kode_aset = createFilterObject()

        generateRptFilter('#inputFilter', {
            kode: ['kode_gedung', 'kode_ruang', 'kode_aset'],
            nama: ['Gedung', 'Ruang', 'Kode Aset'],
            header: [
                ['Kode', 'Nama'],
                ['Kode', 'Nama'],
                ['Kode', 'Nama'],
            ],
            headerpilih: [
                ['Kode', 'Nama', 'Action'],
                ['Kode', 'Nama', 'Action'],
                ['Kode', 'Nama', 'Action'],
            ],
            columns: [
                [
                    { data: 'kode_gedung' },
                    { data: 'nama_gedung' }
                ],
                [
                    { data: 'kode_ruang' },
                    { data: 'nama_ruang' }
                ],
                [
                    { data: 'kode_aset' },
                    { data: 'nama_aset' }
                ],
            ],
            url: [
                "{{ url('amu-report/filter/gedung') }}",
                "{{ url('amu-report/filter/ruang') }}",
                "{{ url('amu-report/filter/kode-aset') }}",
            ],
            parameter: [
                {},
                {},
                {
                    'kode_gedung[0]': () => $kode_gedung.type,
                    'kode_gedung[1]': () => $kode_gedung.from,
                    'kode_gedung[2]': () => $kode_gedung.to,
                }
            ],
            orderby: [[], [], []],
            width: [['30%', '70%'], ['30%', '70%'], ['30%', '70%']],
            display: ['name', 'name', 'kode'],
            pageLength: [10, 10, 10],
            serverSide: [true, true, true],
        });


        $('#inputFilter').on('change', 'input', function(e) {
            setTimeout(() => {
                generateRptFilter('#inputFilter', {
                    kode: ['kode_gedung', 'kode_ruang', 'kode_aset'],
                    nama: ['Gedung', 'Ruang', 'Kode Aset'],
                    header: [
                        ['Kode', 'Nama'],
                        ['Kode', 'Nama'],
                        ['Kode', 'Nama'],
                    ],
                    headerpilih: [
                        ['Kode', 'Nama', 'Action'],
                        ['Kode', 'Nama', 'Action'],
                        ['Kode', 'Nama', 'Action'],
                    ],
                    columns: [
                        [
                            { data: 'kode_gedung' },
                            { data: 'nama_gedung' }
                        ],
                        [
                            { data: 'kode_ruang' },
                            { data: 'nama_ruang' }
                        ],
                        [
                            { data: 'kode_aset' },
                            { data: 'nama_aset' }
                        ],
                    ],
                    url: [
                        "{{ url('amu-report/filter/gedung') }}",
                        "{{ url('amu-report/filter/ruang') }}",
                        "{{ url('amu-report/filter/kode-aset') }}",
                    ],
                    parameter: [
                        {},
                        {},
                        {
                            'kode_gedung[0]': () => $kode_gedung.type,
                            'kode_gedung[1]': () => $kode_gedung.from,
                            'kode_gedung[2]': () => $kode_gedung.to,
                        }
                    ],
                    orderby: [[], [], []],
                    width: [['30%', '70%'], ['30%', '70%'], ['30%', '70%']],
                    display: ['name', 'name', 'kode'],
                    pageLength: [10, 10, 10],
                    serverSide: [true, true, true],
                });

            }, 500)
        })

        $('#form-filter').submit(function(e) {
            e.preventDefault();

            window.$formData = new FormData();

            Object.assign($filter_rpt, {
                'kode_gedung[0]': () => $kode_gedung.type,
                'kode_gedung[1]': () => $kode_gedung.from,
                'kode_gedung[2]': () => $kode_gedung.to,
            }, {
                'kode_ruang[0]': () => $kode_ruang.type,
                'kode_ruang[1]': () => $kode_ruang.from,
                'kode_ruang[2]': () => $kode_ruang.to,
            }, {
                'kode_aset[0]': () => $kode_aset.type,
                'kode_aset[1]': () => $kode_aset.from,
                'kode_aset[2]': () => $kode_aset.to,
            });

            $('#saku-report').removeClass('hidden');
            xurl = "{{ url('amu-auth/view/report/aset') }}";

            $($form_parent).load(xurl);
            $('#scroll-bottom').show();
        });

        $('#show').change(function(e) {
            e.preventDefault();

            window.$formData = new FormData();

            Object.assign($filter_rpt, {
                'kode_gedung[0]': () => $kode_gedung.type,
                'kode_gedung[1]': () => $kode_gedung.from,
                'kode_gedung[2]': () => $kode_gedung.to,
            }, {
                'kode_ruang[0]': () => $kode_ruang.type,
                'kode_ruang[1]': () => $kode_ruang.from,
                'kode_ruang[2]': () => $kode_ruang.to,
            }, {
                'kode_aset[0]': () => $kode_aset.type,
                'kode_aset[1]': () => $kode_aset.from,
                'kode_aset[2]': () => $kode_aset.to,
            });

            $('#saku-report').removeClass('hidden');
            xurl = "{{ url('amu-auth/view/report/aset') }}";

            $($form_parent).load(xurl);
            $('#scroll-bottom').show();
        });

        // $("#sai-rpt-excel").click(function(e) {
        // e.preventDefault();
        // Object.assign($filter_rpt,{
        //     'kode_gedung[0]': $kode_gedung.type,
        //     'kode_gedung[1]': $kode_gedung.from,
        //     'kode_gedung[2]': $kode_gedung.to,
        // }, {
        //     'kode_ruang[0]': $kode_ruang.type,
        //     'kode_ruang[1]': $kode_ruang.from,
        //     'kode_ruang[2]': $kode_ruang.to,
        // }, {
        //     'kode_aset[0]': $kode_aset.type,
        //     'kode_aset[1]': $kode_aset.from,
        //     'kode_aset[2]': $kode_aset.to,
        // }, {
        //     'start' : $('#page_start').val(),
        //     'length' : $('#show').val()
        // });

        // var filter_pdf = $filter_rpt;
        // var prms = jQuery.param(filter_pdf);
        // delete $filter_rpt.start;
        // delete $filter_rpt.length;

        // var link = "{{ url('amu-report/lap-aset-excel') }}?"+prms;
        //     window.open(link, '_blank'); 
        // });

        // $("#sai-rpt-excel").click(function(e) {
        //     // Evaluasi fungsi-fungsi dalam objek $filter_rpt
        //     let evaluatedData = {};
        //     Object.keys($filter_rpt).forEach(key => {
        //         if (typeof $filter_rpt[key] === 'function') {
        //             evaluatedData[key] = $filter_rpt[key]();
        //         } else {
        //             evaluatedData[key] = $filter_rpt[key];
        //         }
        //     });

        //     // Fungsi untuk mengkonversi objek ke string parameter URL
        //     function objectToQueryString(obj) {
        //         return Object.keys(obj)
        //             .map(key => {
        //                 // Encode key dan value dengan encodeURIComponent
        //                 return encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]);
        //             })
        //             .join('&');
        //     }

        //     // Buat string query parameter
        //     const queryString = objectToQueryString(evaluatedData);

        //     const base_url = "{{ url('amu-report/v1/report-excel/aset') }}"
        //     window.open(base_url + '?' + queryString, '_blank');
        // });

        $("#sai-rpt-excel").click(function(e) {
            const $btn = $(this);
            const originalText = $btn.text();

            // Change button text and disable it
            $btn.text('Loading...');
            $btn.prop('disabled', true);

            const formData = new FormData();
            for (const key in $filter_rpt) {
                let val = $filter_rpt[key];
                if (typeof val === 'function') val = val();
                formData.append(key, val);
            }

            fetch("{{ url('amu-report/v1/report-excel/aset') }}", {
                method: 'POST',
                body: formData,
                headers: {
                    'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })
            .then(async response => {
                $btn.text(originalText);
                $btn.prop('disabled', false);
                const contentType = response.headers.get('Content-Type');

                if (contentType && contentType.includes('application/json')) {
                    const json = await response.json();
                    alert(json.message || "Terjadi kesalahan saat mengunduh file.");
                    throw new Error(json.message);
                }

                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);

                // Ambil nama file dari header Content-Disposition
                const disposition = response.headers.get('Content-Disposition');
                let filename = "asets_export.xlsx";
                if (disposition && disposition.indexOf('filename=') !== -1) {
                    const match = disposition.match(/filename="?([^"]+)"?/);
                    if (match && match[1]) filename = match[1];
                }

                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                $btn.text(originalText);
                $btn.prop('disabled', false);
                console.error(error);
            });

        });

        window.openQrAset = function(file_name, kode_aset) {
            const url =
                `{{ config('api.url') }}amu-auth/${file_name}/{{ Session::get('lokasi') }}`
            let html = `<div style="display: flex;justify-content: center;align-items: center;margin-top: 2rem;flex-direction: column;">
                <img alt="qr-code" src="${url}" style="width: 200px; height: 200px;">
                <b style="margin-top: 1rem;text-align: center;">${kode_aset}</b>
            </div>`;

            $('#content-bottom-sheet2').html(html);
            $('#bs-selector-nodrag .c-bottom-sheet__sheet').removeAttr('style');
            $('#content-bottom-sheet2').css({
                "max-height": "90vh",
                "height": "60vh"
            });
            bottomSheet2.activate();
        }
    });
</script>