@extends('layouts.app')
@section('title', 'Add Pembelian Bahan Baku - Dazry Laundry App')
@section('page_title', 'Add Pembelian Bahan Baku')

@section('content')
<section class="bg-white pt-6 text-sm max-w-2xl">
   

    <div class="bg-white ">
        <form action="{{ route('pembelian-bahan-baku.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="tanggal" class="block text-gray-700 font-bold mb-2">Tanggal Pembelian</label>
                <input type="date" name="tanggal" id="tanggal" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('tanggal', now()->toDateString()) }}" required>
            </div>

            <div class="mb-4">
                <label for="pemasok_id" class="block text-gray-700 font-bold mb-2">Pilih Pemasok</label>
                <select name="pemasok_id" id="pemasok_id" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    <option value="" disabled selected>-- Pilih Pemasok --</option>
                    @foreach ($pemasoks as $pemasok)
                        <option value="{{ $pemasok->id }}" {{ old('pemasok_id') == $pemasok->id ? 'selected' : '' }}>{{ $pemasok->nama }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mb-6">
                <label for="nomor_invoice" class="block text-gray-700 font-bold mb-2">Nomor Invoice (Opsional)</label>
                <input type="text" name="nomor_invoice" id="nomor_invoice" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('nomor_invoice') }}">
            </div>

            <hr class="my-6">
            <h2 class="font-bold mb-4">Detail Pembelian</h2>

            <div id="purchase-details-container">
                {{-- Detail pembelian akan ditambahkan di sini oleh JavaScript --}}
            </div>

            <button type="button" id="add-detail-row" class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 px-4  text-sm">
                <i class="fas fa-plus mr-2 "></i> Add Item
            </button>

            <div class="mt-6 flex justify-end">
                
                <a href="{{ route('pembelian-bahan-baku.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 mr-2 ">
                    <i class="fas fa-xmark mr-2 "></i> Cancel
                </a>
                <button type="submit" class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 px-4  ">
                    <i class="fas fa-save mr-2 "></i> Save
                </button>
            </div>
        </form>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const addDetailButton = document.getElementById('add-detail-row');
        const purchaseDetailsContainer = document.getElementById('purchase-details-container');
        let detailIndex = 0;

        function getDetailRow(index) {
            return `
                <div class="detail-row flex flex-wrap items-center gap-4 mb-3 pt-3">
                    <!-- Pilih Bahan Baku -->
                    <div class="flex-1">
                        <label class="block text-gray-700 font-semibold mb-1 text-sm">
                             Bahan Baku
                        </label>
                        <select name="details[${index}][bahan_baku_id]" 
                                class="w-full border  px-3 py-2 focus:ring-2 focus:ring-blue-400" required>
                            <option value="" disabled selected>-- Pilih Bahan Baku --</option>
                            @foreach ($bahanBakus as $bahanBaku)
                                <option value="{{ $bahanBaku->id }}">{{ $bahanBaku->nama }} ({{ $bahanBaku->satuan_pembelian }})</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Kuantitas -->
                    <div class="w-32">
                        <label class="block text-gray-700 font-semibold mb-1 text-sm">
                             Qty
                        </label>
                        <input type="number" step="0.01" name="details[${index}][kuantitas]" 
                               class="w-full border  px-3 py-2 focus:ring-2 focus:ring-green-400" 
                               min="0.01" required>
                    </div>

                    <!-- Harga Unit -->
                    <div class="w-40">
                        <label class="block text-gray-700 font-semibold mb-1 text-sm">
                             Harga
                        </label>
                        <input type="number" step="0.01" name="details[${index}][harga_unit]" 
                               class="w-full border  px-3 py-2 focus:ring-2 focus:ring-yellow-400" 
                               min="0" required>
                    </div>

                    <!-- Tombol Hapus -->
                    <div class="flex items-center">
                        <button type="button" 
                                class="remove-detail-row flex items-center text-red-600 font-medium px-3 py-2">
                            <i class="fas fa-trash-alt mr-2 "></i>  Delete
                        </button>
                    </div>
                </div>
            `;
        }

        addDetailButton.addEventListener('click', function () {
            purchaseDetailsContainer.insertAdjacentHTML('beforeend', getDetailRow(detailIndex));
            detailIndex++;
        });

        purchaseDetailsContainer.addEventListener('click', function (e) {
            if (e.target.closest('.remove-detail-row')) {
                e.target.closest('.detail-row').remove();
            }
        });

        // Tambahkan baris pertama otomatis
        addDetailButton.click();
    });
</script>


@endsection