@extends('layouts.app')

@section('title', 'Add Penjualan Piutang - Dazry Laundry App')
@section('page_title', 'Add Penjualan Piutang')

@section('content')
<section class="bg-white text-sm text-sm max-w-2xl">
    {{-- <h1 class="text-2xl  mb-6">Penjualan Piutang</h1> --}}

    @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-piutang.store') }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label for="tanggal" class="block text-gray-700  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  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>

            <div class="mb-4">
                <label for="jatuh_tempo" class="block text-gray-700  mb-2">Tanggal Jatuh Tempo</label>
                <input type="date" name="jatuh_tempo" id="jatuh_tempo" class="shadow appearance-none border  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('jatuh_tempo') }}" required>
            </div>

            <h3 class="text-sm  mb-4 mt-6">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  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  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  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 class="w-full px-2 mt-2 text-right">
                        <button type="button" class="remove-detail-row text-red-700  text-xs py-2 px-4  focus:outline-none focus:shadow-outline"><i class="fas fa-trash mr-2 "></i> Hapus</button>
                    </div>
                </div>
            </div>

            
            
            <div class="flex items-center justify-between mt-6">
                <button type="button" id="add-detail-row" class="bg-green-700 hover:bg-green-500 text-white text-sm py-2 px-4  mb-6">
                    <i class="fas fa-plus mr-2 "></i> Add
                </button>
                <div class="flex space-x-2">
                    
                    <a href="{{ route('penjualan-piutang.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white text-sm py-2 px-4  focus:outline-none focus:shadow-outline"><i class="fa-solid fa-xmark mr-2"></i> Batal</a>
                    <button type="submit" class="bg-blue-700 hover:bg-blue-600 text-white text-sm py-2 px-4  focus:outline-none focus:shadow-outline">
                        <i class="fas fa-save mr-2 "></i> Save
                    </button>
                </div>
            </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  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  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  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-700 text-xs py-2 px-4  focus:outline-none focus:shadow-outline"><i class="fas fa-trash mr-2 "></i> Hapus</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