@extends('layouts.app')
@section('title', 'Add Pengemasan Produk - Dazry Laundry App')
@section('page_title', 'Add Pengemasan Produk Jadi')

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

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

            <div class="mb-4">
                <label for="tanggal" class="block text-gray-700 font-bold mb-2">Tanggal Pengemasan</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="produk_setengah_jadi_id" class="block text-gray-700 font-bold mb-2">Produk Setengah Jadi (Sumber)</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 Setengah Jadi --</option>
                    @foreach($produkSetengahJadis as $psj)
                        <option value="{{ $psj->id }}" {{ old('produk_setengah_jadi_id') == $psj->id ? 'selected' : '' }}>
                            {{ $psj->nama }} (Stok: {{ number_format($psj->stok_saat_ini, 0, ',', '.') }} {{ $psj->satuan }})
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="mb-4">
                <label for="jumlah_digunakan" class="block text-gray-700 font-bold mb-2">Jumlah Digunakan (Liter)</label>
                <input type="number" step="0.01" name="jumlah_digunakan" id="jumlah_digunakan" 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_digunakan') }}" required>
            </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" rows="3" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ old('keterangan') }}</textarea>
            </div>

            <hr class="my-6">

            <h3 class="font-bold mb-4">Hasil Pengemasan (Produk Jadi)</h3>
            <div id="packaging-details">
                <!-- Template untuk setiap detail pengemasan -->
                
            </div>

            <button type="button" id="add-detail-row" class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 px-4  mb-6">
                + Add
            </button>

            <div class="flex items-center justify-between mt-6">
                <a href="{{ route('pengemasan.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>
    document.addEventListener('DOMContentLoaded', function () {
        const addDetailRowBtn = document.getElementById('add-detail-row');
        const packagingDetails = document.getElementById('packaging-details');
        let detailIndex = 1;

        addDetailRowBtn.addEventListener('click', function () {
            const template = `
                <div class="flex flex-wrap items-end mb-4  ">
                    <div class="w-full md:w-1/3 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Produk Jadi</label>
                        <select name="details[${detailIndex}][produk_jadi_id]" class="produk-jadi-select 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 Jadi --</option>
                            @foreach($produkJadis as $produk_jadi)
                                <option value="{{ $produk_jadi->id }}">{{ $produk_jadi->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full md:w-1/3 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Kemasan</label>
                        <select name="details[${detailIndex}][kemasan_id]" class="kemasan-select 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 Kemasan --</option>
                            @foreach($kemasans as $kemasan)
                                <option value="{{ $kemasan->id }}">{{ $kemasan->nama }} (Stok: {{ number_format($kemasan->stok_saat_ini, 2, ',', '.') }} {{ $kemasan->satuan }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-full md:w-1/3 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Jumlah</label>
                        <input type="number" step="0.01" name="details[${detailIndex}][jumlah]" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                    </div>
                    <div class="w-full px-2 mt-2 text-right">
                        <button type="button" class="remove-detail-row text-red-500 hover:text-red-700 text-sm"><i class="fas fa-trash"></i> Hapus</button>
                    </div>
                </div>
            `;
            packagingDetails.insertAdjacentHTML('beforeend', template);
            detailIndex++;
        });

        packagingDetails.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-detail-row')) {
                e.target.closest('.flex.flex-wrap').remove();
            }
        });
    });
</script>
@endsection