@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.kondisi-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>QR ID 39474384</span>
        </button>
    </div>
</div>
<div class="card">
    <div id="content-form" class="data-content d-flex">
        <div class="box-information">
            <div class="box-header">
                <span class="inter-font">Informasi Aset</span>
                <button id="btn-complete" type="button" class="btn-link inter-font">Selengkapnya</button>
            </div>
            <div class="box-body">
                <div class="item-value inter-font">Nama Aset</div>
                <div class="item-value inter-font">Spesifikasi</div>
            </div>
        </div>
        <div class="photo-information">
            <div class="item-label inter-font">Bukti Lapor Kondisi</div>
            <!-- @include('webview.menset.components.comp-list-kondisi-foto') -->
            @include('webview.menset.components.comp-placeholder-upload-kondisi')
        </div>
        <div class="form-section">
            <form id="form-report" class="form-report" novalidate>
                <div class="form-group">
                    <label for="kondisi" class="inter-font form-label">Kondisi</label>
                    <select id="kondisi" name="kondisi" class="form-control inter-font">
                        <option value="" selected disabled>Pilih Kondisi</option>
                        <option value="1">Baik</option>
                        <option value="0">Tidak Baik</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="kode-gedung" class="inter-font form-label">Gedung</label>
                    <select id="kode-gedung" name="kode_gedung" class="form-control inter-font">
                        <option value="" selected disabled>Pilih Gedung</option>
                        <option value="01">Gedung 1</option>
                        <option value="02">Gedung 2</option>
                    </select>
                    <img alt="search-icon" src="{{ asset('asset-webview/menset/icons/search-black.png') }}" height="12"
                        width="12">
                </div>
                <div class="form-group">
                    <label for="kode-lantai" class="inter-font form-label">Lantai</label>
                    <select id="kode-lantai" name="kode_lantai" class="form-control inter-font">
                        <option value="" selected disabled>Pilih Lantai</option>
                        <option value="01">Lantai 1</option>
                        <option value="02">Lantai 2</option>
                    </select>
                    <img alt="search-icon" src="{{ asset('asset-webview/menset/icons/search-black.png') }}" height="12"
                        width="12">
                </div>
                <div class="form-group">
                    <label for="kode-ruang" class="inter-font form-label">Ruangan</label>
                    <select id="kode-ruang" name="kode_ruang" class="form-control inter-font">
                        <option value="" selected disabled>Pilih Ruangan</option>
                        <option value="01">Ruang 1</option>
                        <option value="02">Ruang 2</option>
                    </select>
                    <img alt="search-icon" src="{{ asset('asset-webview/menset/icons/search-black.png') }}" height="12"
                        width="12">
                </div>
                <div class="form-group">
                    <label for="keterangan" class="inter-font form-label">Keterangan</label>
                    <textarea id="keterangan" name="keterangan" class="form-control inter-font"
                        placeholder="Keterangan tambahan keadaan aset"></textarea>
                </div>
                <div class="action-container">
                    <button id="btn-report" type="submit" class="btn-submit inter-font">Laporkan</button>
                </div>
            </form>
        </div>
    </div>
    <div id="content-foto" class="data-content">
        <div class="image-wrapper">
            <button id="delete-foto" type="button" class="btn-icon">
                <img alt="close-icon" src="{{ asset('asset-webview/menset/icons/close-black.png') }}" height="24"
                    width="24">
            </button>
            <img class="preview-photo" alt="preview-photo"
                src="{{ asset('asset-webview/menset/sample-assets/gambar-16.jpg') }}">
        </div>
        <div class="form-group">
            <img alt="notebook-icon" src="{{ asset('asset-webview/menset/icons/notebook-grey.png') }}" height="16"
                width="16">
            <textarea id="keterangan-gambar" class="form-control inter-font" placeholder="Keterangan Gambar"></textarea>
        </div>
        <div class="action-container">
            <button id="btn-photo" type="button" class="btn-submit inter-font">Simpan</button>
        </div>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@section('additional-content')
<!-- prettier-ignore -->
<div class="additional-offcanvas offcanvas offcanvas-bottom" tabindex="-1" id="additional-offcanvas"
    aria-labelledby="offcanvasLabel">
    <div class="offcanvas-header">
        <div class="divider"></div>
    </div>
    <div id="additional-offcanvas-body" class="offcanvas-body">
        <div class="tab-header">
            <button type="button" id="data-informasi" class="navigation-item btn-link active">Informasi</button>
            <button type="button" id="data-gambar" class="navigation-item btn-link">Gambar</button>
        </div>
        <div class="tab-content">
            <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">Lorem ipsum dolor</div>
                </div>
                <div class="item-container">
                    <div class="item-label inter-font">Spesifikasi</div>
                    <div class="item-value inter-font">Lorem ipsum dolor</div>
                </div>
                <div class="item-container">
                    <div class="item-label inter-font">Tahun</div>
                    <div class="item-value inter-font">Lorem ipsum dolor</div>
                </div>
                <div class="item-container">
                    <div class="item-label inter-font">Lorem</div>
                    <div class="item-value inter-font">Lorem ipsum dolor</div>
                </div>
                <div class="item-container">
                    <div class="item-label inter-font">Lorem</div>
                    <div class="item-value inter-font">Lorem ipsum dolor</div>
                </div>
            </div>
            <div class="data-content" data-id="data-gambar">
                <img class="main-image" alt="gambar-24"
                    src="{{ asset('asset-webview/menset/sample-assets/gambar-24.jpg') }}">
                <div class="photo-container">
                    <img alt="gambar-25" src="{{ asset('asset-webview/menset/sample-assets/gambar-25.jpg')}}"
                        height="100" width="100">
                    <img alt="gambar-26" src="{{ asset('asset-webview/menset/sample-assets/gambar-26.jpg')}}"
                        height="100" width="100">
                    <img alt="gambar-27" src="{{ asset('asset-webview/menset/sample-assets/gambar-27.jpg')}}"
                        height="100" width="100">
                </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.addClass("d-none");

        const $BtnBack = $("#btn-back");
        const $BtnComplete = $("#btn-complete");
        const $NavigationItem = $(".navigation-item");
        const $DataContent = $("#additional-offcanvas-body").find(".data-content");

        const additional_offcanvas = new bootstrap.Offcanvas('#additional-offcanvas');

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

        $BtnComplete.click(function () {
            additional_offcanvas.show();
        });

        $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