@extends('webview.menset.main')

<!-- prettier-ignore -->
@push('style')
<link rel="stylesheet" href="{{ route('menset-mobile.detail-veat.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 id="kode-aset"></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 id="photo-information" class="photo-information">
            <div class="item-label inter-font">Bukti Lapor Kondisi</div>
            @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"></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"></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"></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="button" class="btn-submit inter-font">Laporkan</button>
                </div>
            </form>
        </div>
    </div>
    <div id="content-foto" class="data-content">
        <div id="image-wrapper" 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>
        </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 id="content-informasi" class="d-flex data-content" data-id="data-informasi"></div>
            <div id="content-gambar" class="data-content" data-id="data-gambar"></div>
        </div>
    </div>
</div>
<!-- prettier-ignore -->
<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");

        let LATITUDE = null;
        let LONGITUDE = null;

        // Cek apakah browser mendukung Geolocation
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                // Callback sukses
                function (position) {
                    LATITUDE = position.coords.latitude;
                    LONGITUDE = position.coords.longitude;
                },
                // Callback error
                function (error) {
                    console.error("Error:", error.message);
                    if (error.code === error.POSITION_UNAVAILABLE) {
                        // prettier-ignore
                        alert("Silakan aktifkan GPS/Location di pengaturan perangkat Anda");
                        // Tampilkan instruksi cara mengaktifkan GPS
                    }

                    if (error.code === error.PERMISSION_DENIED) {
                        // prettier-ignore
                        alert("Silakan izinkan akses lokasi di pengaturan perangkat Anda");
                    }
                },
                {
                    enableHighAccuracy: true,
                    timeout: 15000,
                    maximumAge: 0,
                }
            );
        } else {
            console.log("Browser tidak mendukung Geolocation");
        }

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

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

        const $KodeAset = $("#kode-aset");
        const $ContentInformasi = $("#content-informasi");
        const $ContentGambar = $("#content-gambar");
        const $PhotoInformation = $("#photo-information");
        const $ContentForm = $("#content-form");
        const $ContentFoto = $("#content-foto");
        const $ImageWrapper = $("#image-wrapper");
        const $KeteranganGambar = $("#keterangan-gambar");
        const $DeleteFoto = $("#delete-foto");
        const $BtnPhoto = $("#btn-photo");
        const $BtnReport = $("#btn-report");

        const $SelectKondisi = $("#kondisi");
        const $SelectKodeGedung = $("#kode-gedung");
        const $SelectKodeLantai = $("#kode-lantai");
        const $SelectKodeRuangan = $("#kode-ruang");
        const $Keterangan = $("#keterangan");

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

        const INPUT_PHOTOS = [];
        const data = JSON.parse(sessionStorage.getItem('asset'))

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

        function renderComponentOptions(value, label) {
            return `<option value="${value}">${label}</option>`
        }

        $.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 element = renderComponentOptions(item.kode_gedung, item.nama_gedung);

                    $SelectKodeGedung.append(element);
                })

                $SelectKodeGedung.val(data.assets.kode_gedung)
            }
        });

        $.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 element = renderComponentOptions(item.kode_lantai, item.nama_lantai);

                    $SelectKodeLantai.append(element);
                })

                $SelectKodeLantai.val(data.assets.kode_lantai)
            }
        });

        $.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 element = renderComponentOptions(item.kode_ruang, item.nama_ruang);

                    $SelectKodeRuangan.append(element);
                })

                $SelectKodeRuangan.val(data.assets.kode_ruang)
            }
        });

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

        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>`
        }

        const asset = data.assets
        let kode_aset = asset.kode_aset
        $KodeAset.text(kode_aset);
        let element = renderComponentListItem(asset)
        $ContentInformasi.append(element)


        function renderComponentMainPhoto(url, alt) {
            return `<img class="main-image" alt="${alt}" src="${url}">`
        }

        function renderComponentPhotosContainer() {
            return `<div id="photos-container" class="photo-container"></div>`
        }

        function renderComponentPhotoItem(url, alt) {
            return `<img alt="${alt}" src="${url}" height="100" width="100">`
        }

        const photos = data.photos
        // jika data aset memiliki foto
        if (photos.length > 0) {
            // jika gambar lebih banyak dari 1
            if (photos.length > 1) {
                // render container foto
                let container = renderComponentPhotosContainer()
                $ContentGambar.append(container)
            }

            photos.forEach(function (item, index) {
                if (index === 0) {
                    let element = renderComponentMainPhoto(item.url, item.nama_dok)
                    $ContentGambar.prepend(element)
                    return
                }

                element = renderComponentPhotoItem(item.url, item.nama_dok)
                // tambahkan element ke photo container
                $('#photos-container').append(element)
            })
        }

        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 onPhotoTaken(element, base64Image) {
            element.remove();
            // reset field keterangan
            $KeteranganGambar.val("");

            // sembunyikan content form
            $ContentForm.removeClass("d-flex");
            // munculkan content preview foto
            $ContentFoto.addClass("d-flex");
            // jika element image preview belum ada, maka buat baru
            if ($('#preview-photo').length === 0) {
                const element_preview_photo = renderComponetPhotoPreview(base64Image)
                $ImageWrapper.append(element_preview_photo)

                return
            }

            $('#preview-photo').attr('src', base64Image);
        }

        let BASE64_IMAGE = null
        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];

                            BASE64_IMAGE = base64Image

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

                            const src = `data:image/jpeg;charset=utf-8;base64,${base64Image}`

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

                        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();
        }

        $PhotoInformation.on('click', '#photo-upload', function () {
            onTriggerUpload()
        })

        $PhotoInformation.on('click', '#upload-foto', function () {
            onTriggerUpload()
        })

        function renderComponetPhotoPreview(url) {
            return `<img id="preview-photo" class="preview-photo" alt="preview-photo" src="${url}">`
        }

        $DeleteFoto.click(function () {
            // sembunyikan content preview foto
            $ContentFoto.removeClass("d-flex");
            // munculkan content form
            $ContentForm.addClass("d-flex");
        });

        $BtnPhoto.click(function () {
            onSubmitUploadPhoto()
        })

        function renderComponentLabelPhotoVeat() {
            return `<div class="item-label inter-font">Bukti Lapor Kondisi</div>`
        }

        function renderComponentItemPhotoVeat(url, alt) {
            return `<img alt="${alt}" src="${url}" height="94" width="94">`
        }

        function onSubmitUploadPhoto() {
            const keterangan = $KeteranganGambar.val() || 'Tanpa keterangan';

            $.ajax({
                method: "post",
                url: "{{ route('api.menset-mobile.v1.veat.upload-photo') }}",
                data: { kode_aset, keterangan, foto: BASE64_IMAGE },
                dataType: "json",
                beforeSend: function () {
                    $BtnPhoto.prop('disabled', true);
                    $BtnPhoto.text('Tunggu sebentar...');
                },
                success: function (response) {
                    const data = response.data

                    INPUT_PHOTOS.push(data.file_name)

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

                    // check apakah photos veat container ada, jika tidak maka buat baru
                    if ($('#photos-condition-container').length === 0) {
                        $PhotoInformation.load("{{ route('menset-mobile.components.v1.list-upload-kondisi') }}", function (response, status, request) {
                            let element = renderComponentLabelPhotoVeat()
                            // render component label
                            $PhotoInformation.prepend(element)

                            element = renderComponentItemPhotoVeat(data.file_url, data.file_name)
                            $('#photos-condition-container').append(element)
                        })
                    } else {
                        let element = renderComponentItemPhotoVeat(data.file_url, data.file_name)
                        $('#photos-condition-container').append(element)
                    }

                    // sembunyikan content preview foto
                    $ContentFoto.removeClass("d-flex");
                    // munculkan content form
                    $ContentForm.addClass("d-flex");
                },
                complete: function () {
                    $BtnPhoto.prop('disabled', false);
                    $BtnPhoto.text('Simpan');
                    setTimeout(() => {
                        $AlertSubmit.removeClass("show")
                    }, 2500); // close alert after 2.5 seconds
                }
            });
        }

        function onSubmitVeat() {
            const kondisi = $SelectKondisi.val()

            if (!kondisi) {
                $AlertSubmit.removeClass("success").addClass("failed show");
                $AlertSubmit.text("Pilih kondisi terlebih dahulu!");

                setTimeout(() => {
                    $AlertSubmit.removeClass("show")
                }, 2500); // close alert after 2.5 seconds

                return
            }

            if (INPUT_PHOTOS.length === 0) {
                $AlertSubmit.removeClass("success").addClass("failed show");
                $AlertSubmit.text("Pastikan mengupload foto veat minimal 1!");

                setTimeout(() => {
                    $AlertSubmit.removeClass("show")
                }, 2500); // close alert after 2.5 seconds

                return
            }

            $.ajax({
                method: "post",
                url: "{{ route('api.menset-mobile.v1.veat.submit') }}",
                data: {
                    kode_aset,
                    kondisi,
                    kode_gedung: $SelectKodeGedung.val(),
                    kode_lantai: $SelectKodeLantai.val(),
                    kode_ruang: $SelectKodeRuangan.val(),
                    latitude: LATITUDE,
                    longitude: LONGITUDE,
                    keterangan: $Keterangan.val(),
                    'photos[]': INPUT_PHOTOS
                },
                dataType: "json",
                traditional: true,
                async: true,
                beforeSend: function () {
                    $BtnReport.prop('disabled', true);
                    $BtnReport.text('Tunggu sebentar...');
                },
                success: function (response) {
                    if (!response.status) {
                        $AlertSubmit.removeClass("success").addClass("failed show");
                        $AlertSubmit.text(response.message);

                        return
                    }

                    $AlertSubmit.removeClass("failed").addClass("success show");
                    $AlertSubmit.text('Laporan veat berhasil dikirim!');

                    setTimeout(() => {
                        // redirect ke halaman veat
                        window.location.href = "{{ route('menset-mobile.page.veat') }}";
                    }, 2500); // close alert after 2.5 seconds
                },
                complete: function () {
                    $BtnReport.prop('disabled', false);
                    $BtnReport.text('Laporkan');
                    setTimeout(() => {
                        $AlertSubmit.removeClass("show")
                    }, 2500); // close alert after 2.5 seconds
                }
            });
        }

        $BtnReport.click(function () {
            onSubmitVeat()
        })
    });
</script>
@endpush