@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.upload-foto.css') }}" />
@endpush

<!-- prettier-ignore -->
@section('content')
<div class="header">
    <div class="left-container">
        <button id="btn-back" type="button" class="btn-link">
            <!-- prettier-ignore -->
            <img alt="left-white" src="{{ asset('asset-webview/menset/icons/left-white.png') }}" height="24" width="24">
            <span>Upload Foto</span>
        </button>
        <div id="filters-label" class="filter-label inter-font">Filterisasi menampilkan semua data</div>
    </div>
    <div class="right-container">
        <button id="btn-filter" type="button" class="btn-filter">Filter</button>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <div id="jumlah-aset" class="jumlah-data">0 Data</div>
        <div class="filter-container">
            <div class="filter-icon">
                <img alt="search-icon" src="{{ asset('asset-webview/menset/icons/search-black.png')}}" height="16"
                    width="16">
            </div>
            <div class="filter-input">
                <input id="filter-search" type="text" class="filter-search"
                    placeholder="Cari berdasarkan kode aset atau nama">
            </div>
            <div class="filter-qrcode">
                <img alt="qrcode-icon" src="{{ asset('asset-webview/menset/icons/qrcode-black.png')}}" height="18"
                    width="18">
            </div>
        </div>
    </div>
    <div id="content-container" class="card-body"></div>
    <div id="card-footer" class="card-footer">
        <button id="btn-load" type="button" class="inter-font">Tampilkan selanjutnya</button>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@section('additional-content')
<!-- FILTER 1 -->
<!-- prettier-ignore -->
<div class="filter-offcanvas offcanvas offcanvas-bottom" tabindex="-1" id="filter-1-offcanvas"
    aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
        <div class="divider"></div>
        <h5 class="offcanvas-title" id="offcanvasLabel">Filter</h5>
    </div>
    <div id="filter-1-offcanvas-body" class="offcanvas-body">
        <div class="filter-container">
            <div class="filter-label inter-font">Gedung</div>
            <button id="gedung" type="button" class="filter-btn" data-label="Gedung">
                <span class="inter-font">Semua</span>
                <img alt="down-icon" src="{{ asset('asset-webview/menset/icons/down-black.png') }}" width="24"
                    height="24">
            </button>
        </div>
        <div class="filter-container">
            <div class="filter-label inter-font">Lantai</div>
            <button id="lantai" type="button" class="filter-btn" data-label="Lantai">
                <span class="inter-font">Semua</span>
                <img alt="down-icon" src="{{ asset('asset-webview/menset/icons/down-black.png') }}" width="24"
                    height="24">
            </button>
        </div>
        <div class="filter-container">
            <div class="filter-label inter-font">Ruangan</div>
            <button id="ruang" type="button" class="filter-btn" data-label="Ruangan">
                <span class="inter-font">Semua</span>
                <img alt="down-icon" src="{{ asset('asset-webview/menset/icons/down-black.png') }}" width="24"
                    height="24">
            </button>
        </div>
        <div class="filter-container">
            <div class="filter-label inter-font">Jenis</div>
            <button id="jenis" type="button" class="filter-btn" data-label="Jenis">
                <span class="inter-font">Semua</span>
                <img alt="down-icon" src="{{ asset('asset-webview/menset/icons/down-black.png') }}" width="24"
                    height="24">
            </button>
        </div>
    </div>
    <div class="offcanvas-footer">
        <button id="submit-filter" type="button" class="inter-font">Tampilkan</button>
    </div>
</div>
<!-- SUB FILTER 1 -->
<div class="filter-offcanvas offcanvas offcanvas-bottom" tabindex="-1" id="filter-2-offcanvas"
    aria-labelledby="filter-title">
    <div class="offcanvas-header">
        <div class="divider"></div>
        <h5 class="offcanvas-title" id="filter-title"></h5>
        <button id="select-all" type="button" class="btn-link inter-font">Pilih Semua</button>
    </div>
    <div id="filter-2-offcanvas-body" class="offcanvas-body"></div>
    <div class="offcanvas-footer">
        <button id="save-filter" type="button" class="inter-font">Simpan</button>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@push('script')
<script type="text/javascript">
    $(window).on("beforeunload", function () {
        $(window).scrollTop(0);
    });

    $(document).ready(function () {
        $(window).scrollTop(0);

        window.$NAVIGATION_BOTTOM.addClass("d-none");

        const filter1OffCanvas = new bootstrap.Offcanvas('#filter-1-offcanvas');
        const filter2OffCanvas = new bootstrap.Offcanvas('#filter-2-offcanvas');

        const $BtnBack = $("#btn-back");
        const $BtnFilter = $("#btn-filter");
        const $FiltersLabel = $("#filters-label");
        const $Filter1OffCanvasBody = $("#filter-1-offcanvas-body");
        const $Filter2OffCanvasBody = $("#filter-2-offcanvas-body");
        const $FilterTitle = $("#filter-title");
        const $BtnSelectAll = $("#select-all");
        const $FilterSearch = $("#filter-search");
        const $BtnSubmitFilter = $("#submit-filter");
        const $BtnSaveFilter = $("#save-filter");
        const $JumlahAset = $("#jumlah-aset");
        const $ContentContainer = $("#content-container");
        const $CardFooter = $("#card-footer");
        const $BtnLoad = $("#btn-load");

        const LABELS = {
            gedung: [],
            lantai: [],
            ruang: [],
            jenis: []
        }

        const FILTERS = {
            gedung: [],
            lantai: [],
            ruang: [],
            jenis: []
        }
        let FILTER_TIPE = null;
        let FILTER_SEARCH = null;

        let page_number = 1
        let has_next = null
        let is_loading = false

        $BtnBack.click(function () {
            window.location.href = "{{ route('menset-mobile.page.home') }}"
        });

        $BtnFilter.click(function () {
            filter1OffCanvas.show();
        });

        $Filter1OffCanvasBody.on('click', '.filter-btn', function () {
            const id = $(this).attr('id');
            const label = $(this).data('label');
            $FilterTitle.text(`Pilih ${label}`);

            $BtnSelectAll.text('Pilih Semua').removeClass('deselect');

            $Filter2OffCanvasBody.empty();

            if (id === 'gedung') {
                FILTER_TIPE = 'gedung';
                onGetDataFilterGedung();
            }

            if (id === 'lantai') {
                FILTER_TIPE = 'lantai';
                onGetDataFilterLantai();
            }

            if (id === 'ruang') {
                FILTER_TIPE = 'ruang';
                onGetDataFilterRuang();
            }

            if (id === 'jenis') {
                FILTER_TIPE = 'jenis';
                onGetDataFilterKategori();
            }

            filter2OffCanvas.show();
        })

        function renderComponentItemFilters(value, label, isChecked = false) {
            return `<div class="checkbox-item">
                <label for="checkbox-1" class="checkbox-label inter-font">${label}</label>
                <div class="custom-checkbox ${isChecked ? 'checked' : ''}"></div>
                <input id="${value}" class="checkbox-value" type="checkbox" value="${value}" ${isChecked ? 'checked' : ''}>
            </div>`;
        }

        function onGetDataFilterGedung() {
            $.ajax({
                method: "get",
                url: "{{ route('api.menset-mobile.v2.filters.gedung') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data
                    data.forEach(function (item) {
                        let isChecked = FILTERS.gedung.includes(item.kode_gedung);
                        let element = renderComponentItemFilters(item.kode_gedung, item.nama_gedung, isChecked);

                        $Filter2OffCanvasBody.append(element);
                    })

                    updateButtonStatus();
                }
            });
        }

        function onGetDataFilterLantai() {
            $.ajax({
                method: "get",
                url: "{{ route('api.menset-mobile.v2.filters.lantai') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data
                    data.forEach(function (item) {
                        let isChecked = FILTERS.lantai.includes(item.kode_lantai);
                        let element = renderComponentItemFilters(item.kode_lantai, item.nama_lantai, isChecked);

                        $Filter2OffCanvasBody.append(element);
                    })

                    updateButtonStatus();
                }
            });
        }

        function onGetDataFilterRuang() {
            $.ajax({
                method: "get",
                url: "{{ route('api.menset-mobile.v2.filters.ruang') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data
                    data.forEach(function (item) {
                        let isChecked = FILTERS.ruang.includes(item.kode_ruang);
                        let element = renderComponentItemFilters(item.kode_ruang, item.nama_ruang, isChecked);

                        $Filter2OffCanvasBody.append(element);
                    })

                    updateButtonStatus();
                }
            });
        }

        function onGetDataFilterKategori() {
            $.ajax({
                method: "get",
                url: "{{ route('api.menset-mobile.v2.filters.kategori') }}",
                dataType: "json",
                async: true,
                success: function (response) {
                    const data = response.data
                    data.forEach(function (item) {
                        let isChecked = FILTERS.jenis.includes(item.kode_kategori);
                        let element = renderComponentItemFilters(item.kode_kategori, item.nama_kategori, isChecked);

                        $Filter2OffCanvasBody.append(element);
                    })

                    updateButtonStatus();
                }
            });
        }

        $Filter2OffCanvasBody.on('click', '.checkbox-item', function (event) {
            const checkbox = $(this).find('input[type="checkbox"]');
            const custom_checkbox = $(this).find('.custom-checkbox');

            // Toggle checkbox
            checkbox.prop('checked', !checkbox.prop('checked'));

            // Toggle tampilan custom checkbox
            if (checkbox.prop('checked')) {
                custom_checkbox.addClass('checked');
            } else {
                custom_checkbox.removeClass('checked');
            }
        })

        $Filter2OffCanvasBody.on('click', '.checkbox-item input[type="checkbox"]', function (event) {
            event.stopPropagation();
        })

        function updateButtonStatus() {
            const total_checkboxes = $Filter2OffCanvasBody.find('.checkbox-item input[type="checkbox"]').length;
            const checked_checkboxes = $Filter2OffCanvasBody.find('.checkbox-item input[type="checkbox"]:checked').length;

            if (checked_checkboxes === total_checkboxes) {
                $BtnSelectAll.text('Hapus Semua').addClass('deselect');
            } else {
                $BtnSelectAll.text('Pilih Semua').removeClass('deselect');
            }
        }

        $BtnSelectAll.click(function () {
            const is_deselect = $(this).hasClass('deselect');

            $Filter2OffCanvasBody.find('.checkbox-item').each(function () {
                const checkbox = $(this).find('input[type="checkbox"]');
                const custom_checkbox = $(this).find('.custom-checkbox');

                if (is_deselect) {
                    checkbox.prop('checked', false);
                    custom_checkbox.removeClass('checked');
                } else {
                    checkbox.prop('checked', true);
                    custom_checkbox.addClass('checked');
                }
            })

            updateButtonStatus();
        })

        $BtnSaveFilter.click(function () {
            // Validasi FILTER_TIPE yang diizinkan
            const validFilterTypes = ['gedung', 'lantai', 'ruang', 'jenis'];

            if (!validFilterTypes.includes(FILTER_TIPE)) {
                console.warn('FILTER_TIPE tidak valid:', FILTER_TIPE);
                return;
            }

            // Reset filter dan label untuk tipe yang dipilih
            FILTERS[FILTER_TIPE] = [];
            LABELS[FILTER_TIPE] = [];

            const allCheckboxes = $Filter2OffCanvasBody.find('.checkbox-item .checkbox-value');
            const checkedCheckboxes = $Filter2OffCanvasBody.find('.checkbox-item .checkbox-value:checked');

            // Jika tidak semua checkbox terceklis, ambil yang terceklis saja
            if (checkedCheckboxes.length < allCheckboxes.length) {
                checkedCheckboxes.each(function () {
                    const value = $(this).val();
                    const closest = $(this).closest('.checkbox-item');
                    const label = closest.find('.checkbox-label').text();

                    FILTERS[FILTER_TIPE].push(value);
                    LABELS[FILTER_TIPE].push(label);
                })
            }
            // Jika semua terceklis, array tetap kosong (sudah di-reset di awal)

            const selected_labels = getSelectedLabelFilter(allCheckboxes.length);
            $(`#${FILTER_TIPE} span`).text(selected_labels);

            filter2OffCanvas.hide();
        })

        function getSelectedLabelFilter(all_list) {
            // Validasi FILTER_TIPE yang diizinkan
            const validFilterTypes = ['gedung', 'lantai', 'ruang', 'jenis'];

            if (!validFilterTypes.includes(FILTER_TIPE)) {
                console.warn('FILTER_TIPE tidak valid:', FILTER_TIPE);
                return;
            }

            if (FILTERS[FILTER_TIPE].length === 0 || FILTERS[FILTER_TIPE].length === all_list) {
                return 'Semua'
            }

            // Jika hanya 1
            if (FILTERS[FILTER_TIPE].length === 1) {
                return LABELS[FILTER_TIPE][0];
            }

            // Jika lebih dari 1
            const first_value = LABELS[FILTER_TIPE][0];
            const remaining = LABELS[FILTER_TIPE].length - 1;

            return `${first_value}, +${remaining} lagi`;
        }

        function getFilterLabel(filters) {
            // Hitung jumlah field yang tidak kosong
            const nonEmptyFilters = Object.values(filters).filter(arr => arr.length > 0).length;

            let text = '';
            // label berdasarkan kondisi
            if (nonEmptyFilters === 0) {
                text = 'Filterisasi menampilkan semua data';
            } else {
                text = `Filterisasi menampilkan berdasarkan ${nonEmptyFilters} filter`;
            }

            $FiltersLabel.text(text);
        }

        $BtnSubmitFilter.click(function () {
            // Reset page
            page_number = 1;
            $ContentContainer.empty();
            onGenerateDataList(page_number);
            getFilterLabel(FILTERS);

            filter1OffCanvas.hide();
        })

        function onGenerateDataList(page_number) {
            $.ajax({
                type: "get",
                url: "{{ route('api.menset-mobile.v2.assets.index') }}",
                data: { page: page_number, search: FILTER_SEARCH, kode_gedung: FILTERS.gedung, kode_lantai: FILTERS.lantai, kode_ruang: FILTERS.ruang, kode_jenis: FILTERS.jenis },
                dataType: "json",
                async: true,
                beforeSend: function () {
                    is_loading = true
                    $CardFooter.removeClass('d-flex');
                },
                success: function (response) {
                    const data = response.data;

                    const jumlah_data = fn.formatRibuan(data.total_data);

                    $JumlahAset.text(`${jumlah_data} Data`);

                    has_next = data.has_next;

                    data.assets.forEach(function (item) {
                        const element = renderComponentRowListAsset(item.kode_aset, item.nama_aset, item.deskripsi_aset, item.gambar_aset);

                        $ContentContainer.append(element);
                    })

                    if (has_next) {
                        $CardFooter.addClass('d-flex');
                    } else {
                        $CardFooter.removeClass('d-flex');
                    }
                },
                complete: function (response) {
                    is_loading = false
                }
            });
        }

        // initial load
        onGenerateDataList(page_number);

        function renderComponentRowListAsset(kode_aset, nama_aset, deskripsi_aset, gambar_aset) {
            let width = 24
            let height = 24

            let default_image = "{{ asset('asset-webview/menset/images/default-image.png')}}";
            if (gambar_aset) {
                default_image = gambar_aset
                width = 42
                height = 42
            }

            return `<a href="{{ route('menset-mobile.page.detail-photo') }}?kode_aset=${kode_aset}" class="item">
                <div class="item-image">
                    <img alt="default-image" src="${default_image}" height="${height}" width="${width}">
                </div>
                <div class="item-label">
                    <h6 class="inter-font">${kode_aset}</h6>
                    <p class="inter-font">${deskripsi_aset}</p>
                </div>
            </a>`;
        }

        $BtnLoad.click(function () {
            page_number = page_number + 1;

            onGenerateDataList(page_number);
        })

        $FilterSearch.keyup(function (event) {
            // jika tekan enter
            if (event.keyCode === 13) {
                FILTER_SEARCH = $(this).val();
                // reset pagination
                page_number = 1;
                $ContentContainer.empty();
                onGenerateDataList(page_number);
            }
        })
    });
</script>
@endpush