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

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

    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3  relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <div class="bg-white  pt-3">
        <form action="{{ route('penjualan-bahan-baku.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="tanggal" class="block text-gray-700 font-bold mb-2">Tanggal Transaksi:</label>
                    <input type="date" name="tanggal" id="tanggal" class="appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('tanggal', date('Y-m-d')) }}" required>
                </div>
                <div>
                    <label for="pelanggan_nama" class="block text-gray-700 font-bold mb-2">Nama Pelanggan (Opsional):</label>
                    <input type="text" name="pelanggan_nama" id="pelanggan_nama" class="appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('pelanggan_nama') }}">
                </div>
            </div>

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

            <h3 class="font-semibold mb-4">Detail Penjualan</h3>
            <div id="detail-container">
                <!-- Detail items will be added here by JavaScript -->
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-4 detail-item">
                    <div class="md:col-span-2">
                        <label class="block text-gray-700 font-bold mb-2">Bahan Baku:</label>
                        <select name="details[0][bahan_baku_id]" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            <option value="">Pilih Bahan Baku</option>
                            @foreach ($bahanBakus as $bahanBaku)
                                <option value="{{ $bahanBaku->id }}" data-satuan="{{ $bahanBaku->satuan }}" data-harga="{{ $bahanBaku->harga_beli_terakhir ?? 0 }}">{{ $bahanBaku->nama }} (Stok: {{ number_format($bahanBaku->stok_saat_ini, 0, ',', '.') }} {{ $bahanBaku->satuan_pemakaian }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-bold mb-2">Kuantitas:</label>
                        <input type="number" name="details[0][kuantitas]" step="0.01" min="0.01" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Kuantitas" required>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-bold mb-2">Harga Satuan:</label>
                        <input type="number" name="details[0][harga_satuan]" step="0.01" min="0" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Harga" required>
                    </div>
                    <div class="flex items-end">
                        <button type="button" class=" text-red-700  py-2 px-4 " onclick="removeDetail(this)"><i class="fas fa-trash mr-2"></i> Delete</button>
                    </div>
                </div>
            </div>

            <button type="button" class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 px-4  mb-6" onclick="addDetail()"><i class="fas fa-plus mr-2"></i> Add</button>

            <div class="flex items-center justify-between mt-6">
                <a href="{{ route('penjualan-bahan-baku.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 ">
                    <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  focus:outline-none focus:shadow-outline">
                    <i class="fas fa-save mr-2"> </i> Save
                </button>
            </div>
        </form>
    </div>
</section>

<script>
    let detailIndex = 1;

    function addDetail() {
        const container = document.getElementById('detail-container');
        const newItem = document.createElement('div');
        newItem.classList.add('grid', 'grid-cols-1', 'md:grid-cols-5', 'gap-4', 'mb-4', 'detail-item');
        newItem.innerHTML = `
            <div class="md:col-span-2">
                <label class="block text-gray-700 font-bold mb-2">Bahan Baku:</label>
                <select name="details[${detailIndex}][bahan_baku_id]" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    <option value="">Pilih Bahan Baku</option>
                    @foreach ($bahanBakus as $bahanBaku)
                        <option value="{{ $bahanBaku->id }}" data-satuan="{{ $bahanBaku->satuan }}" data-harga="{{ $bahanBaku->harga_beli_terakhir ?? 0 }}">{{ $bahanBaku->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-gray-700 font-bold mb-2">Kuantitas:</label>
                <input type="number" name="details[${detailIndex}][kuantitas]" step="0.01" min="0.01" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Kuantitas" required>
            </div>
            <div>
                <label class="block text-gray-700 font-bold mb-2">Harga Satuan:</label>
                <input type="number" name="details[${detailIndex}][harga_satuan]" step="0.01" min="0" class="border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Harga" required>
            </div>
            <div class="flex items-end">
                <button type="button" class="text-red-700  py-2 px-4 " onclick="removeDetail(this)"><i class="fas fa-trash mr-2"></i> Delete</button>
            </div>
        `;
        container.appendChild(newItem);
        detailIndex++;
    }

    function removeDetail(button) {
        const item = button.closest('.detail-item');
        if (item) {
            item.remove();
        }
    }
</script>
@endsection