@extends('adminlte::page')

@section('content')
<div class="container">
    <x-adminlte-button label="Back" theme="primary" class="mt-4" onclick="window.history.back()" />
    <h1 class="mt-4 mb-4">Tambah Kunjungan</h1>
    <hr class="mb-4 bg-black" />
    <form action="{{ route('salesretailkunjungan.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
        @csrf
        <div class="mb-3">
            <x-adminlte-input name="lokasi" id="lokasi" placeholder="Lokasi" enable-old-support readonly>
                <x-slot name="prependSlot">
                    <div class="input-group-text text-olive">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                </x-slot>
            </x-adminlte-input>
        </div>
        <div class="mb-3">
            <x-adminlte-input name="namaCustomer" id="namaCustomer" placeholder="Customer" enable-old-support required>
                <x-slot name="prependSlot">
                    <div class="input-group-text text-olive">
                        <i class="fas fa-users"></i>
                    </div>
                </x-slot>
            </x-adminlte-input>
            <x-adminlte-select name="customerType" id="customerType" enable-old-support>
                <x-slot name="prependSlot">
                    <div class="input-group-text text-olive">
                        <i class="fas fa-users"></i>
                    </div>
                </x-slot>
                <option value="" disabled selected>Tipe Customer</option>
                <option value="NOO">NOO</option>
                <option value="ROO">ROO</option>
                <option value="TAGIHAN">TAGIHAN</option>
            </x-adminlte-select>
        </div>

        <div id="productFields">
            <div class="mt-3">
                <div style="gap: 10px; display: flex;">
                    <x-adminlte-input name="order_details[0][produk]" placeholder="Produk" enable-old-support>
                        <x-slot name="prependSlot">
                            <div class="input-group-text text-olive">
                                <i class="fas fa-shopping-bag"></i>
                            </div>
                        </x-slot>
                    </x-adminlte-input>

                    <x-adminlte-input name="order_details[0][quantity]" placeholder="Quantity" enable-old-support>
                        <x-slot name="prependSlot">
                            <div class="input-group-text text-olive">
                                <i class="fas fa-hashtag"></i>
                            </div>
                        </x-slot>
                    </x-adminlte-input>

                    <x-adminlte-input name="order_details[0][harga]" placeholder="Harga" enable-old-support>
                        <x-slot name="prependSlot">
                            <div class="input-group-text text-olive">
                                <i class="fas fa-money-bill"></i>
                            </div>
                        </x-slot>
                    </x-adminlte-input>
                </div>
            </div>
        </div>

         <div class="mb-3">
                <button type="button" onclick="addProductField()" class="btn btn-secondary">Tambah Produk</button>
                <button type="button" onclick="removeProductField()" class="btn btn-danger">Remove</button>
        </div>

        <div class="mb-3">
            <x-adminlte-input name="keterangan" id="keterangan" placeholder="Keterangan" class="input-ket" />
        </div>
        <div class="mb-3">
            <x-adminlte-input-file name="photo" placeholder="Choose a file..." onchange="showUploadedFile(event)" />
            <div id="uploadedFile"></div>
        </div>
        <div class="mb-3" style="gap: 10px; display: flex;">
            <x-adminlte-button label="Get Address" theme="secondary" onclick="getLocation()" />
            <x-adminlte-button type="submit" label="Tambahkan" theme="primary" />
        </div>
    </form>
</div>

<script>
    function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            showPosition,  // Success callback
            handleError    // Error callback
        );
    } else {
        console.log("Geolocation is not supported by this browser.");
    }
}

async function showPosition(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    try {
        const response = await fetch(
            `https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=${longitude},${latitude}`
        );
        const data = await response.json();
        const street = data.address.Address || "";
        const city = data.address.City || "";
        const district = data.address.District || "";
        const region = data.address.Region || "";
        const country = data.address.CountryCode || "";
        const postalCode = data.address.Postal || "";
        const addressString = `${street}, ${city}, ${district}, ${region}, ${country}, ${postalCode}`;
        const contentTextarea = document.getElementById("lokasi");
        contentTextarea.value = addressString;
    } catch (error) {
        console.error("Error fetching geocode data:", error);
    }
}

function handleError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            console.log("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            console.log("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            console.log("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            console.log("An unknown error occurred.");
            break;
    }
}


    let productCount = 1;

    function addProductField() {
        const productFieldsContainer = document.getElementById("productFields");
        productCount++;
        const newProductField = document.createElement('div');
        newProductField.innerHTML = `
            <div style="gap: 10px; display: flex;">
                <x-adminlte-input name="order_details[${productCount}][produk]" placeholder="Produk" enable-old-support>
                    <x-slot name="prependSlot">
                        <div class="input-group-text text-olive">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                    </x-slot>
                </x-adminlte-input>
    
                <x-adminlte-input name="order_details[${productCount}][quantity]" placeholder="Quantity" enable-old-support>
                    <x-slot name="prependSlot">
                        <div class="input-group-text text-olive">
                            <i class="fas fa-hashtag"></i>
                        </div>
                    </x-slot>
                </x-adminlte-input>
    
                <x-adminlte-input name="order_details[${productCount}][harga]" placeholder="Harga" enable-old-support>
                    <x-slot name="prependSlot">
                        <div class="input-group-text text-olive">
                            <i class="fas fa-money-bill"></i>
                        </div>
                    </x-slot>
                </x-adminlte-input>
            </div>
        `;
        productFieldsContainer.appendChild(newProductField);
    }

    function removeProductField() {
        const productFieldsContainer = document.getElementById("productFields");
        if (productCount > 1) {
            productFieldsContainer.lastElementChild.remove();
            productCount--;
        }
    }

    function showUploadedFile(event) {
        const fileInput = event.target;
        const uploadedFileContainer = document.getElementById("uploadedFile");
        uploadedFileContainer.innerHTML = `Uploaded File: ${fileInput.files[0].name}`;
    }
</script>

@endsection