@extends('adminlte::page')

@section('content')
<div class="container">
    <a href="{{ url()->previous()  }}" class="btn btn-primary mt-4">Back</a>
    <h1 class="mt-4 mb-4">Tambah Kunjungan</h1>
    <hr style="background-color: black;" />
    <form action="{{ route('kunjungans.storeProject') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
            <textarea class="input-ket" id="lokasiCustomer" name="lokasiCustomer" readonly placeholder="Lokasi"></textarea>
        </div>
        <div class="mb-3" style="gap:10px; display: flex;">
            <input placeholder="Customer" type="text" name="namaCustomer" id="namaCustomer" class="input" required>
            <input placeholder="Customer Type" type="text" name="customerType" id="customerType" class="input" required>
        </div>
        <div class="mb-3">
            <input placeholder="Nama Proyek" type="text" name="namaProyek" id="namaProyek" class="input-ket" required>
        </div>
        <div class="mb-3">
            <input class="input-ket" id="lokasiProyek" name="lokasiProyek" placeholder="Lokasi Proyek"></textarea>
        </div>

        <div class="mb-3">
            <input type="file" class="input" id="photo" name="photo">
        </div>

        <h1>Boleh dikosongkan terlebih dahulu</h1>

        <div class="mb-3">
            <input placeholder="Keterangan (Tipe Produk / Informasi Lainnya)" type="text" name="keterangan" id="keterangan" class="input-ket">
        </div>
        <div class="mb-3">
            <input placeholder="Status Pemberi Order" type="text" name="statusPemberiOrder" id="statusPemberiOrder" class="input-ket">
        </div>
        <div id="productFields">
            <div class="mb-3 mt-3" style="gap:10px; display: flex;">
                <input placeholder="Produk" type="text" name="project_orders[0][produk]" class="input">
                <input placeholder="Quantity" type="text" name="project_orders[0][quantity]" class="input">
                <input placeholder="Satuan" type="text" name="project_orders[0][satuan]" class="input">
                <input placeholder="Supply Schedule" type="text" name="project_orders[0][supplySchedule]" class="input">
                <button type="button" onclick="removeProductField(this)" class="btn btn-danger">Remove</button>
            </div>
        </div>

        <div class="mb-3">
            <button type="button" onclick="addProductField()" class="btn btn-secondary">Tambah Produk</button>
        </div>
        <div class="mb-3" style="gap:10px; display: flex;">
            <button type="button" onclick="getLocation()" class="input" style="background-color: gray;">Get Address</button>
            <button type="submit" class="input" style="background-color: #41357a; color: white;">Tambahkan</button>
        </div>
    </form>


</div>

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

    async function showPosition(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        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("lokasiCustomer");
        contentTextarea.value = addressString;
    }

    function addProductField() {
        const productFields = document.getElementById("productFields");
        const productCount = productFields.querySelectorAll('.mb-3').length;
        const newProductField = `
            <div class="mb-3 mt-3" style="gap:10px; display: flex;">
                <input placeholder="Produk" type="text" name="project_orders[${productCount}][produk]" class="input">
                <input placeholder="Quantity" type="text" name="project_orders[${productCount}][quantity]" class="input">
                <input placeholder="Satuan" type="text" name="project_orders[${productCount}][satuan]" class="input">
                <input placeholder="Supply Schedule" type="text" name="project_orders[${productCount}][supplySchedule]" class="input">
                <button type="button" onclick="removeProductField(this)" class="btn btn-danger">Remove</button>
            </div>
        `;
        productFields.insertAdjacentHTML("beforeend", newProductField);
    }

    function removeProductField(button) {
        const productField = button.parentElement;
        productField.remove();
    }
</script>

@endsection


<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    * {
        font-family: "Poppins", sans-serif;
    }

    .arrow {
        max-width: 30px;
    }

    .input {
        width: 100%;
        max-width: 350px;
        height: 50px;
        padding: 12px;
        border-radius: 12px;
        border: 1.5px solid lightgrey;
        outline: none;
        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: 0px 0px 20px -18px;
    }

    .input-ket {
        width: 100%;
        height: 50px;
        padding: 12px;
        border-radius: 12px;
        border: 1.5px solid lightgrey;
        outline: none;
        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: 0px 0px 20px -18px;
    }

    .input:hover {
        border: 2px solid lightgrey;
        box-shadow: 0px 0px 20px -17px;
    }

    .input:active {
        transform: scale(0.95);
    }

    .input:focus {
        border: 2px solid grey;
    }
</style>