@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">Edit Kunjungan</h1>
    <hr class="mb-4 bg-black" />
    <form action="{{ route('orders.kunjungan.update', $kunjungan) }}" method="POST" enctype="multipart/form-data" id="uploadForm">
        @csrf
        @method('PUT')
        <input type="hidden" name="kunjungan_id" value="{{ $kunjungan->id }}">
        <div class="mb-3">
            <x-adminlte-input name="lokasi" id="lokasi" placeholder="Lokasi" enable-old-support readonly value="{{ $kunjungan->lokasi }}">
                <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 value="{{ $kunjungan->namaCustomer }}">
                <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>Tipe Customer</option>
                <option value="NOO" {{ $kunjungan->customerType === 'NOO' ? 'selected' : '' }}>NOO</option>
                <option value="ROO" {{ $kunjungan->customerType === 'ROO' ? 'selected' : '' }}>ROO</option>
                <option value="TAGIHAN" {{ $kunjungan->customerType === 'TAGIHAN' ? 'selected' : '' }}>TAGIHAN</option>
            </x-adminlte-select>
        </div>

        <div id="productFields">
            @foreach ($kunjungan->orderDetails as $index => $orderDetail)
            <div class="mt-3">
                <div style="gap: 10px; display: flex;">
                    <input type="hidden" name="order_details[{{ $index }}][id]" value="{{ $orderDetail->id }}">
                    <x-adminlte-input name="order_details[{{ $index }}][produk]" placeholder="Produk" enable-old-support value="{{ $orderDetail->produk }}">
                        <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[{{ $index }}][quantity]" placeholder="Quantity" enable-old-support value="{{ $orderDetail->quantity }}">
                        <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[{{ $index }}][harga]" placeholder="Harga" enable-old-support value="{{ $orderDetail->harga }}">
                        <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>
            @endforeach
        </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" value="{{ $kunjungan->keterangan }}" />
        </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="Update" theme="primary" />
        </div>
    </form>
</div>

<script>
    let productCount = {{ $kunjungan->orderDetails->count() }};
    let maxIndex = {{ $kunjungan->orderDetails->count() - 1 }};

    function addProductField() {
        const productFieldsContainer = document.getElementById("productFields");
        maxIndex++;
        productCount++;
        const newProductField = document.createElement('div');
        newProductField.innerHTML = `
            <div style="gap: 10px; display: flex;">
                <x-adminlte-input name="order_details[${maxIndex}][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[${maxIndex}][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[${maxIndex}][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--;
            maxIndex--;
        }
    }
</script>

@endsection