@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.detail-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>Detail Aset</span>
        </button>
    </div>
    <div class="right-container">
        <button id="btn-upload" type="button" class="btn-upload">
            <img alt="photo-icon" src="{{ asset('asset-webview/menset/icons/photo-black.png') }}" height="24"
                width="24">
            Tambah Foto
        </button>
    </div>
</div>
<div class="card">
    <div class="card-header">
        <button type="button" id="data-foto" class="navigation-item btn-link active">Foto</button>
        <button type="button" id="data-informasi" class="navigation-item btn-link">Informasi</button>
    </div>
    <div class="card-body">
        <div id="content-photo" class="d-flex data-content" data-id="data-foto">
            @include('webview.menset.components.comp-empty-upload-foto')
        </div>
        <div id="content-data-informasi" class="data-content" data-id="data-informasi"></div>
    </div>
</div>
@endsection

<!-- prettier-ignore -->
@section('additional-content')
<div id="alert-submit" class="alert alert-primary fade" role="alert"></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");

        // Atau langsung dari query string
        const params = new URLSearchParams(window.location.search);
        const kode_aset = params.get('kode_aset');

        const $BtnBack = $("#btn-back");
        const $NavigationItem = $(".navigation-item");
        const $DataContent = $(".data-content");
        const $ContentPhoto = $("#content-photo");
        const $BtnUpload = $("#btn-upload");
        const $BtnTriggerUpload = $("#trigger-upload");
        const $BtnDataFoto = $("#data-foto");
        const $ContentDataInformasi = $("#content-data-informasi");

        const $AlertSubmit = $("#alert-submit");
        const bsAlert = new bootstrap.Alert('#alert-submit')

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

        function validateImage(file) {
            const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
            const maxSize = 5 * 1024 * 1024; // 5MB (opsional)

            // Cek tipe file
            if (!allowedTypes.includes(file.type)) {
                alert('Hanya file PNG, JPG, atau JPEG yang diperbolehkan!');
                return false;
            }

            // Cek ukuran (opsional)
            if (file.size > maxSize) {
                alert('Ukuran file maksimal 5MB!');
                return false;
            }

            return true;
        }

        function onTriggerUpload() {
            // Cek apakah sudah ada input file, jika tidak buat baru
            let fileInput = document.getElementById("cameraInput");

            if (!fileInput) {
                // Buat input file untuk camera
                fileInput = document.createElement("input");
                fileInput.id = "cameraInput";
                fileInput.type = "file";
                fileInput.accept = "image/*";
                fileInput.capture = "environment"; // 👈 UBAH INI - "environment" = kamera belakang
                fileInput.style.display = "none";
                document.body.appendChild(fileInput);

                // Event listener ketika file dipilih
                fileInput.addEventListener("change", function (e) {
                    const file = e.target.files[0];

                    // jika bukan gambar yang valid
                    if (!validateImage(file)) {
                        $AlertSubmit.removeClass("success").addClass("failed show");
                        $AlertSubmit.text("Foto tidak valid!");

                        setTimeout(() => {
                            bsAlert.close()
                        }, 1500); // close alert after 2.5 seconds
                        return;
                    }

                    if (file) {
                        console.log("File selected:", file.name);

                        // Convert file to base64
                        const reader = new FileReader();

                        reader.onload = function (event) {
                            // Hasil base64 (dengan prefix "data:image/jpeg;base64,")
                            const base64WithPrefix = event.target.result;

                            // Ambil hanya base64 string-nya (tanpa prefix)
                            const base64Image = base64WithPrefix.split(",")[1];

                            console.log("Image converted to base64");

                            // Panggil callback yang sama seperti native camera
                            onPhotoTaken(fileInput, base64Image);
                        };

                        reader.onerror = function (error) {
                            console.error("Error reading file:", error);
                            alert("Gagal membaca foto: " + error);
                        };

                        // Baca file sebagai Data URL (base64)
                        reader.readAsDataURL(file);
                    }
                });
            }

            // Trigger click untuk buka camera
            fileInput.click();
        }

        $BtnTriggerUpload.click(function () {
            onTriggerUpload();
        });

        $BtnUpload.click(function () {
            onTriggerUpload();
        });

        function onPhotoTaken(element, base64Image) {
            $.ajax({
                method: "post",
                url: "{{ route('api.menset-mobile.v2.assets.upload-photo') }}",
                data: { kode_aset, foto: base64Image },
                dataType: "json",
                success: function (response) {
                    const data = response.data

                    $AlertSubmit.removeClass("failed").addClass("success show");
                    $AlertSubmit.text("Foto aset berhasil diupload!");

                    $BtnDataFoto.trigger("click");
                    onRenderListPhotos(data.url, data.file_name);
                },
                complete: function () {
                    element.remove();
                    setTimeout(() => {
                        bsAlert.close()
                    }, 1500); // close alert after 2.5 seconds
                }
            });

        }

        function onRenderListPhotos(url, alt) {
            let element = renderComponentPhoto(url, alt)
            // cek apakah sudah ada container foto, jika tidak buat baru
            if ($('#photos-grid').length) {
                $('#photos-grid').append(element)
            } else {
                $ContentPhoto.load("{{ route('menset-mobile.components.v1.list-upload-foto') }}", function (response, status, request) {
                    $('#photos-grid').append(element)
                });
            }
        }

        function renderComponentListItem(value) {
            return `<div class="item-container">
                <div class="item-label inter-font">Nama Aset</div>
                <div class="item-value inter-font">${value.nama_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kode Aset</div>
                <div class="item-value inter-font">${value.kode_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Lokasi Sekarang</div>
                <div class="item-value inter-font">${value.nama_gedung} ${value.nama_lantai} ${value.nama_ruang}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Kondisi</div>
                <div class="item-value inter-font">${value.kondisi_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Jenis</div>
                <div class="item-value inter-font">${value.nama_kategori}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Merk</div>
                <div class="item-value inter-font">${value.merk_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Warna</div>
                <div class="item-value inter-font">${value.warna_aset}</div>
            </div>
            <div class="item-container">
                <div class="item-label inter-font">Periode Beli</div>
                <div class="item-value inter-font">${value.tahun_aset}</div>
            </div>`
        }

        function renderComponentPhoto(url, alt) {
            return `<img alt="${alt}" src="${url}">`
        }

        $.ajax({
            method: "get",
            url: "{{ route('api.menset-mobile.v2.assets.details') }}",
            data: { kode_aset },
            dataType: "json",
            async: true,
            success: function (response) {
                const data = response.data;

                // jika data aset memiliki foto
                if (data.photos.length > 0) {
                    // render container foto
                    $ContentPhoto.load("{{ route('menset-mobile.components.v1.list-upload-foto') }}", function (response, status, request) {
                        // callback
                        data.photos.forEach(function (item) {
                            let element = renderComponentPhoto(item.url, item.file_dok)
                            $('#photos-grid').append(element)
                        })
                    });
                }

                let element = renderComponentListItem(data.assets)
                $ContentDataInformasi.append(element)
            },
        });
    });
</script>
@endpush