@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.data-aset.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>Data Aset</span>
        </button>
        <div 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 class="jumlah-data">2.192 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 class="card-body">
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-1" src="{{ asset('asset-webview/menset/sample-assets/gambar-1.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-2" src="{{ asset('asset-webview/menset/sample-assets/gambar-2.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Meja</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-3" src="{{ asset('asset-webview/menset/sample-assets/gambar-3.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Lemari</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-4" src="{{ asset('asset-webview/menset/sample-assets/gambar-4.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Rak Buku</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-5" src="{{ asset('asset-webview/menset/sample-assets/gambar-5.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Lampu</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-5" src="{{ asset('asset-webview/menset/sample-assets/gambar-5.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Sofa</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-5" src="{{ asset('asset-webview/menset/sample-assets/gambar-5.jpg')}}" height="42"
                    width="42">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Makan</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-6" src="{{ asset('asset-webview/menset/images/default-image.png')}}" height="24"
                    width="24">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Santai</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-6" src="{{ asset('asset-webview/menset/images/default-image.png')}}" height="24"
                    width="24">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Santai</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-6" src="{{ asset('asset-webview/menset/images/default-image.png')}}" height="24"
                    width="24">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Santai</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-6" src="{{ asset('asset-webview/menset/images/default-image.png')}}" height="24"
                    width="24">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Santai</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
        <a href="{{ route('menset-mobile.page.detail-aset') }}" class="item">
            <div class="item-image">
                <img alt="gambar-6" src="{{ asset('asset-webview/menset/images/default-image.png')}}" height="24"
                    width="24">
            </div>
            <div class="item-label">
                <h6 class="inter-font">Kursi Santai</h6>
                <p class="inter-font">Merk IKEA Tahun 2021 Warna putih Diskripsi Lainnya</p>
            </div>
        </a>
    </div>
    <div class="card-footer">
        <button type="button" id="btn-load" 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 class="checkbox-item">
            <label for="checkbox-1" class="checkbox-label inter-font">Nanggroe Aceh Darussalam</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-1" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-2" class="checkbox-label inter-font">Sumatera Utara</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-2" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-3" class="checkbox-label inter-font">Sumatera Selatan</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-3" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-4" class="checkbox-label inter-font">Sumatera Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-4" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-5" class="checkbox-label inter-font">Bengkulu</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-5" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-6" class="checkbox-label inter-font">Riau</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-6" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-7" class="checkbox-label inter-font">Kepulauan Riau</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-7" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-8" class="checkbox-label inter-font">Lampung</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-8" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-9" class="checkbox-label inter-font">Bangka Belitung</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-9" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-10" class="checkbox-label inter-font">Kalimantan Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-10" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-11" class="checkbox-label inter-font">Kalimantan Timur</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-11" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-12" class="checkbox-label inter-font">Kalimantan Selatan</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-12" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-13" class="checkbox-label inter-font">Kalimantan Tengah</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-13" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-14" class="checkbox-label inter-font">Kalimantan Utara</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-14" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-15" class="checkbox-label inter-font">Banten</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-15" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-16" class="checkbox-label inter-font">DKI Jakarta</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-16" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-17" class="checkbox-label inter-font">Jawa Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-17" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-18" class="checkbox-label inter-font">Jawa Tengah</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-18" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-19" class="checkbox-label inter-font">Daerah Istimewa Yogyakarta</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-19" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-20" class="checkbox-label inter-font">Jawa Timur</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-20" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-21" class="checkbox-label inter-font">Bali</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-21" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-22" class="checkbox-label inter-font">Nusa Tenggara Timur</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-22" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-23" class="checkbox-label inter-font">Nusa Tenggara Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-23" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-24" class="checkbox-label inter-font">Gorontalo</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-24" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-25" class="checkbox-label inter-font">Sulawesi Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-25" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-26" class="checkbox-label inter-font">Sulawesi Tengah</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-26" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-27" class="checkbox-label inter-font">Sulawesi Utara</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-27" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-28" class="checkbox-label inter-font">Sulawesi Tenggara</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-28" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-29" class="checkbox-label inter-font">Sulawesi Selatan</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-29" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-30" class="checkbox-label inter-font">Maluku Utara</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-30" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-31" class="checkbox-label inter-font">Maluku</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-31" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-32" class="checkbox-label inter-font">Papua Barat</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-32" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-33" class="checkbox-label inter-font">Papua</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-33" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-34" class="checkbox-label inter-font">Papua Pegunungan</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-34" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-35" class="checkbox-label inter-font">Papua tengah</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-35" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-36" class="checkbox-label inter-font">Papua Selatan</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-36" type="checkbox">
        </div>
        <div class="checkbox-item">
            <label for="checkbox-37" class="checkbox-label inter-font">Papua Barat Daya</label>
            <div class="custom-checkbox"></div>
            <input id="checkbox-37" type="checkbox">
        </div>
    </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.css("opacity", 0);

        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 $Filter1OffCanvasBody = $("#filter-1-offcanvas-body");
        const $Filter2OffCanvasBody = $("#filter-2-offcanvas-body");
        const $FilterTitle = $("#filter-title");
        const $BtnSelectAll = $("#select-all");
        const $BtnSubmitFilter = $("#submit-filter");
        const $BtnSaveFilter = $("#save-filter");

        $BtnBack.click(function () {
            window.history.back();
        });

        $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}`);

            filter2OffCanvas.show();
        })

        $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 () {
            filter2OffCanvas.hide();
        })

        $BtnSubmitFilter.click(function () {
            filter1OffCanvas.hide();
        })
    });
</script>
@endpush