@extends('layouts.app')

@section('title', 'Add Produksi Setengah Jadi')
@section('page_title', 'Add Produksi Setengah Jadi')

@section('content')
<section class="bg-white pt-6 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

        <form action="{{ route('produksi-setengah-jadi.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="tanggal" class="block text-gray-700 font-bold mb-2">Tanggal Produksi</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>
                @error('tanggal')<p class="text-red-500 text-xs italic">{{ $message }}</p>@enderror
            </div>

            <div class="mb-4">
                <label for="produk_setengah_jadi_id" class="block text-gray-700 font-bold mb-2">Produk Setengah Jadi Dihasilkan</label>
                <select name="produk_setengah_jadi_id" id="produk_setengah_jadi_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="">Pilih Produk</option>
                    @foreach ($produkSetengahJadis as $produk)
                        <option value="{{ $produk->id }}" {{ old('produk_setengah_jadi_id') == $produk->id ? 'selected' : '' }}>{{ $produk->nama }}</option>
                    @endforeach
                </select>
                @error('produk_setengah_jadi_id')<p class="text-red-500 text-xs italic">{{ $message }}</p>@enderror
            </div>

            <div class="mb-6">
                <label for="jumlah_produksi" class="block text-gray-700 font-bold mb-2">Jumlah Produksi (Liter)</label>
                <input type="number" name="jumlah_produksi" id="jumlah_produksi" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('jumlah_produksi') }}" required min="1">
                @error('jumlah_produksi')<p class="text-red-500 text-xs italic">{{ $message }}</p>@enderror
            </div>

            <h3 class="font-semibold mb-4 border-t pt-4">Bahan Baku yang Digunakan</h3>
            <div id="bahan-baku-details">
                </div>
            <button type="button" id="add-bahan-baku-row" class="mt-4 bg-blue-700 hover:bg-blue-600  font-bold py-2 px-4 text-white">
               <i class="fas fa-plus mr-2"></i> Add
            </button>
            <div class="mt-8 flex justify-end space-x-2">
                <a href="{{ route('produksi-setengah-jadi.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white 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 "><i class="fas fa-save mr-2"></i> Save</button>
            </div>
        </form>
    
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const bahanBakuDetails = document.getElementById('bahan-baku-details');
        const addBahanBakuBtn = document.getElementById('add-bahan-baku-row');
        let detailIndex = 0;

        addBahanBakuBtn.addEventListener('click', function () {
            const template = `
                <div class="flex flex-wrap  mb-4 items-end" id="row-${detailIndex}">
                    <div class="w-full md:w-1/2 px-2  mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Bahan Baku</label>
                        <select name="details[${detailIndex}][bahan_baku_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="">Pilih Bahan Baku</option>
                            @foreach ($bahanBakus as $bahanBaku)
                                <option value="{{ $bahanBaku->id }}">{{ $bahanBaku->nama }} (Stok: {{ number_format($bahanBaku->stok_saat_ini, 2, ',', '.') }} {{ $bahanBaku->satuan_pemakaian }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Kuantitas Digunakan</label>
                        <input type="number" step="0.01" name="details[${detailIndex}][kuantitas_digunakan]" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required min="0.01">
                    </div>
                    <div class="w-full  px-2 mt-2 text-right">
                        <button type="button" class="remove-bahan-baku-row text-red-500 hover:text-red-700 text-sm"><i class="fas fa-trash-alt mr-2"></i> Hapus</button>
                    </div>
                </div>
            `;
            bahanBakuDetails.insertAdjacentHTML('beforeend', template);
            detailIndex++;
        });

        bahanBakuDetails.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-bahan-baku-row')) {
                e.target.closest('.flex').remove();
            }
        });
    });
</script>
@endpush