@extends('layouts.app')
@section('title', 'Add Konsinyasi Baru - Dazry Laundry App')
@section('page_title', 'Add Konsinyasi Baru')

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

        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                <strong class="font-bold">Oops!</strong>
                <span class="block sm:inline">Ada beberapa masalah dengan input Anda.</span>
                <ul class="mt-2 list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('penjualan-konsinyasi.store') }}" method="POST">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="tanggal_kirim" class="block text-gray-700 font-bold mb-2">Tanggal Kirim:</label>
                    <input type="date" name="tanggal_kirim" id="tanggal_kirim" class="form-input w-full border-gray-300  shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200" value="{{ old('tanggal_kirim', date('Y-m-d')) }}" required>
                </div>
                <div>
                    <label for="pelanggan_id" class="block text-gray-700 font-bold mb-2">Pelanggan:</label>
                    <select name="pelanggan_id" id="pelanggan_id" class="form-select w-full border-gray-300  shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200" required>
                        <option value="">Pilih Pelanggan</option>
                        @foreach($pelanggans as $pelanggan)
                            <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}>{{ $pelanggan->nama }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <h2 class="font-bold mb-4 border-b-2 pb-2">Detail Produk</h2>
            <div id="detail-container">
                <!-- Template untuk baris detail -->
                <div class="detail-row p-4 border  bg-gray-50 mb-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-gray-700 font-bold mb-2">Produk Jadi:</label>
                            <select name="details[0][produk_jadi_id]" class="form-select w-full produk-jadi-select border-gray-300 " required>
                                <option value="">Pilih Produk</option>
                                @foreach($produkJadis as $produk)
                                    <option value="{{ $produk->id }}" data-harga="{{ $produk->harga_jual }}">{{ $produk->nama }} (Stok: {{ $produk->stok_saat_ini }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-bold mb-2">Kuantitas Kirim:</label>
                            <input type="number" step="any" name="details[0][kuantitas_kirim]" class="form-input w-full kuantitas-input border-gray-300 " min="1" required>
                        </div>
                        <div>
                            <label class="block text-gray-700 font-bold mb-2">Harga Jual Satuan:</label>
                            <input type="number" step="any" name="details[0][harga_jual]" class="form-input w-full harga-input border-gray-300 " min="0" required>
                        </div>
                    </div>
                    <div class="mt-4 text-right">
                        <button type="button" class="remove-detail-row bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3  text-sm"><i class="fas fa-trash-alt mr-2"></i> Hapus</button>
                    </div>
                </div>
            </div>

            <div class="flex justify-end mt-6">
                <button type="button" id="add-detail-row" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4  mr-2">
                    <i class="fa-solid fa-plus mr-2"></i> Add
                </button>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4  mr-2">
                    <i class="fa-solid fa-floppy-disk mr-2"></i> Save
                </button>
                <a href="{{ route('penjualan-konsinyasi.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 "><i class="fa-solid fa-xmark mr-2"></i> Cancel</a>
            </div>
        </form>
</section>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const detailContainer = document.getElementById('detail-container');
        const addDetailButton = document.getElementById('add-detail-row');
        let detailIndex = 1;

        addDetailButton.addEventListener('click', function() {
            const template = detailContainer.querySelector('.detail-row').cloneNode(true);
            template.classList.add('mt-4');
            template.querySelectorAll('input, select').forEach(input => {
                input.name = input.name.replace(/\[\d+\]/g, `[${detailIndex}]`);
                input.value = '';
            });
            template.querySelector('.produk-jadi-select').value = '';
            detailContainer.appendChild(template);
            detailIndex++;
        });

        detailContainer.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-detail-row')) {
                if (detailContainer.querySelectorAll('.detail-row').length > 1) {
                    e.target.closest('.detail-row').remove();
                } else {
                    alert('Minimal harus ada satu produk.');
                }
            }
        });

        // Set harga jual otomatis saat produk dipilih
        detailContainer.addEventListener('change', function(e) {
            if (e.target.classList.contains('produk-jadi-select')) {
                const selectedOption = e.target.options[e.target.selectedIndex];
                const hargaJual = selectedOption.getAttribute('data-harga');
                const detailRow = e.target.closest('.detail-row');
                const hargaInput = detailRow.querySelector('.harga-input');
                hargaInput.value = hargaJual;
            }
        });
    });
</script>
@endsection