@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.detail-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>Detail Aset</span>
        </button>
    </div>
</div>
<div class="photo-container">
    <img alt="gambar-8" src="{{ asset('asset-webview/menset/sample-assets/gambar-8.jpg')}}" height="100" width="100">
    <img alt="gambar-9" src="{{ asset('asset-webview/menset/sample-assets/gambar-9.jpg')}}" height="100" width="100">
    <img alt="gambar-10" src="{{ asset('asset-webview/menset/sample-assets/gambar-10.jpg')}}" height="100" width="100">
    <img alt="gambar-11" src="{{ asset('asset-webview/menset/sample-assets/gambar-11.jpg')}}" height="100" width="100">
</div>
<div class="card">
    <div class="card-header">
        <button type="button" id="data-informasi" class="navigation-item btn-link active">Informasi</button>
        <button type="button" id="data-veat" class="navigation-item btn-link">Riwayat VEAT</button>
    </div>
    <div class="card-body">
        <div class="d-flex data-content" data-id="data-informasi">
            <div class="item-container">
                <div class="item-label inter-font">Nama Aset</div>
                <div class="item-value inter-font">Kursi</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kode Aset</div>
                <div class="item-value inter-font">39484028</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Lokasi Sekarang</div>
                <div class="item-value inter-font">Gedung A Lantai 2 Ruangan Pratikum</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Alamat</div>
                <div class="item-value inter-font">Jalan Bojongsoang, Bojongsoang, Bandung. 40288</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Sisa Manfaat</div>
                <div class="item-value inter-font">146 Bulan</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kondisi</div>
                <div class="item-value inter-font">Baik</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Jenis</div>
                <div class="item-value inter-font">Kursi Belajar</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Tipe</div>
                <div class="item-value inter-font">SGD/AU</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Warna</div>
                <div class="item-value inter-font">Coklat</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Periode Beli</div>
                <div class="item-value inter-font">2019</div>
            </div>
        </div>
        <div class="data-content" data-id="data-veat">
            <div class="box">
                <div class="box-content">
                    <div class="box-header">
                        <h1 class="box-title inter-font">VEAT 2024</h1>
                        <img alt="gambar-12" src="{{ asset('asset-webview/menset/sample-assets/gambar-12.jpg')}}"
                            height="97" width="69">
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Tanggal</div>
                        <div class="info-value inter-font">21 Jan 2023</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Kondisi</div>
                        <div class="info-value inter-font">Baik</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Lokasi</div>
                        <div class="info-value inter-font">Gedung Merah Putih</div>
                    </div>
                    <div class="info-row mt-24">
                        <div class="info-label inter-font">Alamat</div>
                        <div class="info-value inter-font">
                            Lorem ipsum dolor sit amet consectetur. In amet blandit quis in turpis. Diam.
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">User</div>
                        <div class="info-value inter-font">Lorem Ipsum</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-content">
                    <div class="box-header">
                        <h1 class="box-title inter-font">VEAT 2025</h1>
                        <img alt="gambar-12" src="{{ asset('asset-webview/menset/sample-assets/gambar-12.jpg')}}"
                            height="97" width="69">
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Tanggal</div>
                        <div class="info-value inter-font">21 Jan 2023</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Kondisi</div>
                        <div class="info-value inter-font">Baik</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">Lokasi</div>
                        <div class="info-value inter-font">Gedung Merah Putih</div>
                    </div>
                    <div class="info-row mt-24">
                        <div class="info-label inter-font">Alamat</div>
                        <div class="info-value inter-font">
                            Lorem ipsum dolor sit amet consectetur. In amet blandit quis in turpis. Diam.
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-label inter-font">User</div>
                        <div class="info-value inter-font">Lorem Ipsum</div>
                    </div>
                </div>
            </div>
        </div>
    </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 $BtnBack = $("#btn-back");
        const $NavigationItem = $(".navigation-item");
        const $DataContent = $(".data-content");

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

        $NavigationItem.click(function () {
            const id = $(this).attr("id");

            $NavigationItem.removeClass("active");
            $(this).addClass("active");

            $DataContent.each(function () {
                const $this = $(this);
                const konten = $this.data("id");

                // Atau kondisional
                if (id === konten) {
                    $this.addClass("d-flex");
                } else {
                    $this.removeClass("d-flex");
                }
            });
        })
    })
</script>
@endpush