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

@section('content')
<section class="bg-white text-sm 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-langsung.store') }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="tanggal" class="block text-gray-700 font-bold mb-2">Tanggal Penjualan</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="pelanggan_id" class="block text-gray-700 font-bold mb-2">Pilih Pelanggan</label>
                <select name="pelanggan_id" id="pelanggan_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 Pelanggan --</option>
                    @foreach($pelanggans as $pelanggan)
                        <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}>{{ $pelanggan->nama }}</option>
                    @endforeach
                </select>
            </div>

            <h3 class="font-bold  mt-3">Detail Produk yang Dijual</h3>
            <div id="sales-details">
                <div class="flex flex-wrap items-end mb-4 pt-4 ">
                    <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">Produk Jadi</label>
                        <select name="details[0][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 $pj)
                                <option value="{{ $pj->id }}" data-stok="{{ $pj->stok_saat_ini }}" data-harga="{{ $pj->harga_jual }}">{{ $pj->nama }} (Stok: {{ $pj->stok_saat_ini }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Jumlah</label>
                        <input type="number" step="1" name="details[0][jumlah]" class="shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" min="1" required>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Harga Satuan</label>
                        <input type="number" step="0.01" name="details[0][harga]" class="shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" min="0" required>
                    </div>
                </div>
            </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">
                <i class="fas fa-plus mr-2"></i> Add
            </button>
            
            <div class="flex items-center justify-between mt-6">
                <a href="{{ route('penjualan-langsung.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 salesDetails = document.getElementById('sales-details');
        let detailIndex = 1;

        addDetailRowBtn.addEventListener('click', function () {
            const template = `
                <div class="flex flex-wrap items-end mb-4 pt-4 ">
                    <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">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 $pj)
                                <option value="{{ $pj->id }}" data-stok="{{ $pj->stok_saat_ini}}" data-harga="{{ $pj->harga_jual }}">{{ $pj->nama }} (Stok: {{ $pj->stok_saat_ini }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Jumlah</label>
                        <input type="number" step="1" 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" min="1" required>
                    </div>
                    <div class="w-1/2 md:w-1/4 px-2 mb-4 md:mb-0">
                        <label class="block text-gray-700 font-bold mb-2">Harga Satuan</label>
                        <input type="number" step="0.01" name="details[${detailIndex}][harga]" class="shadow appearance-none border w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" min="0" 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 mr-2"></i> Delete</button>
                    </div>
                </div>
            `;
            salesDetails.insertAdjacentHTML('beforeend', template);
            detailIndex++;
        });

        salesDetails.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-detail-row')) {
                e.target.closest('.flex.flex-wrap').remove();
            }
        });

        salesDetails.addEventListener('change', function (e) {
            if (e.target.classList.contains('produk-jadi-select')) {
                const selectedOption = e.target.options[e.target.selectedIndex];
                const hargaInput = e.target.closest('.flex.flex-wrap').querySelector('input[name*="[harga]"]');
                const harga = selectedOption.dataset.harga;
                if (hargaInput && harga) {
                    hargaInput.value = harga;
                }
            }
        });
    });
</script>
@endsection