@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">Update Kunjungan</h1>
    <hr style="background-color: black;" />
    <form action="{{ route('salesproject.process_updatekunjungan', ['kunjunganProject' => $kunjungan->id]) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <input class="input-ket" id="lokasi" name="lokasi" readonly value="{{ $kunjungan->lokasiCustomer }}">
        </div>
        <div class="mb-3" style="gap:10px; display: flex;">
            <input placeholder="Customer" type="text" name="namaCustomer" id="namaCustomer" class="input" value="{{ $kunjungan->namaCustomer }}" readonly required>
            <input type="text" name="customerType" class="input" value="{{ $kunjungan->customerType }}" readonly>
        </div>

        <div class="mb-3" style="gap:10px; display: flex;">
            <input placeholder="Customer" type="text" name="namaProyek" id="namaProyek" class="input" value="{{ $kunjungan->namaProyek }}" readonly required>
            <input type="text" name="lokasiProyek" class="input" value="{{ $kunjungan->lokasiProyek }}" readonly>
        </div>

        <h2>Update Order Details</h2>
        @foreach ($kunjungan->projectOrders as $orderDetail)
        <div class="mb-3 mt-3" style="gap:10px; display: flex;">
            <input type="hidden" name="project_orders[{{ $orderDetail->id }}][id]" value="{{ $orderDetail->id }}">
            <input placeholder="Produk" type="text" name="project_orders[{{ $orderDetail->id }}][produk]" class="input" value="{{ $orderDetail->produk }}">
            <input placeholder="Quantity" type="text" name="project_orders[{{ $orderDetail->id }}][quantity]" class="input" value="{{ $orderDetail->quantity }}">
            <input placeholder="Satuan" type="text" name="project_orders[{{ $orderDetail->id }}][satuan]" class="input" value="{{ $orderDetail->satuan }}">
            <input placeholder="Supply Schedule" type="text" name="project_orders[{{ $orderDetail->id }}][supplySchedule]" class="input" value="{{ $orderDetail->supplySchedule }}">

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

        <div class="mb-3">
            <input placeholder="Keterangan (Tipe produk / informasi lainnya)" type="text" name="keterangan" id="keterangan" class="input-ket" value="{{ $kunjungan->keterangan }}">
        </div>
        <div class="mb-3">
            <input placeholder="Status Pemberi Order" type="text" name="statusPemberiOrder" id="statusPemberiOrder" class="input-ket" value="{{ $kunjungan->statusPemberiOrder }}">
        </div>
        <div class="mb-3" style="gap:10px; display: flex;">
            <button type="submit" class="input" style="background-color: #41357a; color: white;">Update Kunjungan</button>
        </div>
    </form>
</div>

<script>
    function addProductField() {
        const productFields = document.getElementById("newProductFields");
        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="order_details[${productCount}][produk]" class="input">
                <input placeholder="Quantity" type="text" name="order_details[${productCount}][quantity]" class="input">
                <input placeholder="Satuan" type="text" name="order_details[${productCount}][satuan]" class="input">
                <input placeholder="Supply Schedule" type="text" name="order_details[${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>