@extends('layouts.kurir_sidebar')

@section('title', 'Transaksi Baru')

@section('header', 'Transaksi Penjualan')

@section('content')
<div class="max-w-6xl mx-auto pb-10">

    <form action="{{ route('kurir.penjualan.store') }}" method="POST" id="transactionForm" class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
        @csrf
        
        <div class="lg:col-span-2 space-y-6">
            {{-- Bagian Utama --}}
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                <div class="flex items-center gap-3 mb-6">
                    <div class="bg-blue-100 p-2 rounded-lg text-blue-600">
                        <i data-lucide="shopping-cart" class="w-5 h-5"></i>
                    </div>
                    <h3 class="font-bold text-slate-800">Form Penjualan</h3>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    {{-- Pelanggan --}}
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-slate-600 mb-2">Pilih Pelanggan <span class="text-red-500">*</span></label>
                        <select id="customers_id" name="customers_id" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" required>
                            <option value="">-- Pilih Pelanggan --</option>
                            @foreach($pelanggan as $p)
                                <option value="{{ $p->id }}" data-nama="{{ $p->name }}">{{ $p->name }}</option>
                            @endforeach
                        </select>
                        @error('customers_id')
                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Tanggal --}}
                    <div>
                        <label class="block text-sm font-semibold text-slate-600 mb-2">Tanggal Transaksi <span class="text-red-500">*</span></label>
                        <input type="date" name="tanggal" value="{{ old('tanggal', date('Y-m-d')) }}" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" required>
                        @error('tanggal')
                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Metode Bayar --}}
                    <div>
                        <label class="block text-sm font-semibold text-slate-600 mb-2">Metode Bayar <span class="text-red-500">*</span></label>
                        <select name="metode_bayar" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 outline-none" required>
                            <option value="Tunai" {{ old('metode_bayar') == 'Tunai' ? 'selected' : '' }}>Tunai</option>
                            <option value="Transfer" {{ old('metode_bayar') == 'Transfer' ? 'selected' : '' }}>Transfer</option>
                        </select>
                        @error('metode_bayar')
                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                {{-- Pilih Produk --}}
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-slate-600 mb-2">Pilih Produk LPG <span class="text-red-500">*</span></label>
                    @error('id_produk')
                        <p class="mb-2 text-xs text-red-500">{{ $message }}</p>
                    @enderror
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        @forelse($produk as $item)
                        <label class="cursor-pointer relative">
                            <input type="radio" name="id_produk" value="{{ $item->id_produk }}" 
                                   data-nama="{{ $item->nama_produk }}" 
                                   data-harga="{{ $item->price ?? 0 }}"
                                   data-stok="{{ $item->stok_isi }}"
                                   class="peer sr-only produk-radio" required>
                            <div class="p-4 border-2 border-slate-200 rounded-xl peer-checked:border-blue-600 peer-checked:bg-blue-50 hover:bg-slate-50 transition-all h-full {{ $item->stok_isi <= 0 ? 'opacity-50 cursor-not-allowed' : '' }}">
                                <span class="block font-bold text-slate-700">{{ $item->nama_produk }}</span>
                                <span class="block text-sm font-bold text-blue-600 mt-1">Rp {{ number_format($item->price ?? 0, 0, ',', '.') }}</span>
                                <div class="flex justify-between items-center mt-3">
                                    <span class="text-[10px] px-2 py-0.5 rounded-full font-medium 
                                        {{ $item->stok_isi <= 0 ? 'bg-red-100 text-red-600' : ($item->stok_isi <= 3 ? 'bg-orange-100 text-orange-600' : 'bg-slate-100 text-slate-500') }}">
                                        Stok: {{ $item->stok_isi }}
                                        @if($item->stok_isi <= 3 && $item->stok_isi > 0) ⚠️ @endif
                                        @if($item->stok_isi <= 0) ❌ @endif
                                    </span>
                                    <i data-lucide="check-circle-2" class="w-4 h-4 text-blue-600 opacity-0 peer-checked:opacity-100"></i>
                                </div>
                            </div>
                        </label>
                        @empty
                            <p class="col-span-full text-center text-slate-500 py-4">Tidak ada produk LPG tersedia.</p>
                        @endforelse
                    </div>
                </div>

                {{-- Jumlah Beli --}}
                <div class="max-w-xs">
                    <label class="block text-sm font-semibold text-slate-600 mb-2">Jumlah Beli (Tabung) <span class="text-red-500">*</span></label>
                    <div class="flex items-center gap-3">
                        <button type="button" id="btn-minus" aria-label="Kurangi jumlah" class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center hover:bg-slate-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                            <i data-lucide="minus" class="w-5 h-5 text-slate-600"></i>
                        </button>
                        <input type="number" id="qty_beli" name="qty_beli" value="1" min="1" class="w-20 text-center font-bold text-2xl bg-transparent outline-none" readonly>
                        <button type="button" id="btn-plus" aria-label="Tambah jumlah" class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center hover:bg-slate-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                            <i data-lucide="plus" class="w-5 h-5 text-slate-600"></i>
                        </button>
                    </div>
                    <p id="stock-warning" class="mt-2 text-xs text-orange-600 hidden">⚠️ Stok terbatas: <span id="max-stock"></span> tabung</p>
                </div>
            </div>
        </div>

        {{-- Sidebar Ringkasan --}}
        <div class="lg:col-span-1">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 sticky top-10">
                <div class="flex items-center gap-2 mb-6 text-slate-800">
                    <i data-lucide="receipt-text" class="w-5 h-5"></i>
                    <h3 class="font-bold">Ringkasan Tagihan</h3>
                </div>

                <div class="space-y-4 mb-8">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-500">Jumlah Item</span>
                        <span id="sum-qty" class="font-bold text-slate-700">1 Tabung</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-500">Harga Satuan</span>
                        <span id="sum-price" class="font-bold text-slate-700">Rp 0</span>
                    </div>
                    <div class="pt-4 border-t">
                        <span class="text-xs text-slate-400 block mb-1">Total yang harus dibayar</span>
                        <div class="flex items-baseline gap-1">
                            <span id="sum-total" class="text-3xl font-black text-blue-600">Rp 0</span>
                        </div>
                    </div>
                </div>
                
                {{-- Hidden input untuk dikirim ke controller --}}
                <input type="hidden" name="total_bayar" id="hidden-total">
                
                <button type="submit" id="btnSubmit" class="w-full bg-blue-600 text-white py-4 rounded-xl font-bold text-lg shadow-lg shadow-blue-100 hover:bg-blue-700 hover:-translate-y-0.5 active:translate-y-0 transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    <span>Simpan Transaksi</span>
                </button>
                
                <p class="text-[10px] text-center text-slate-400 mt-4 italic">
                    * Pastikan data sudah benar sebelum menyimpan. Stok akan otomatis berkurang.
                </p>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // 💡 State management sederhana
    const state = {
        hargaSatuan: 0,
        stokTersedia: 0,
        qty: 1
    };

    function formatRupiah(number) {
        return new Intl.NumberFormat('id-ID', {
            style: 'currency',
            currency: 'IDR',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(number);
    }

    function updateUI() {
        const total = state.hargaSatuan * state.qty;
        
        document.getElementById('sum-qty').textContent = `${state.qty} Tabung`;
        document.getElementById('sum-price').textContent = formatRupiah(state.hargaSatuan);
        document.getElementById('sum-total').textContent = formatRupiah(total);
        document.getElementById('hidden-total').value = total;
    }

    function validateStock() {
        const btnSubmit = document.getElementById('btnSubmit');
        const btnMinus = document.getElementById('btn-minus');
        const btnPlus = document.getElementById('btn-plus');
        const stockWarning = document.getElementById('stock-warning');
        const maxStockSpan = document.getElementById('max-stock');
        
        const isOutOfStock = state.stokTersedia <= 0;
        const isQtyExceeds = state.qty > state.stokTersedia;
        
        // Disable tombol submit jika stok habis atau qty melebihi
        btnSubmit.disabled = isOutOfStock || isQtyExceeds;
        
        // Update style tombol submit
        if (isOutOfStock || isQtyExceeds) {
            btnSubmit.classList.remove('bg-blue-600', 'hover:bg-blue-700');
            btnSubmit.classList.add('bg-red-500', 'hover:bg-red-600');
            btnSubmit.innerHTML = `<i data-lucide="alert-triangle" class="w-5 h-5"></i> <span>${isOutOfStock ? 'Stok Habis' : 'Stok Tidak Cukup'}</span>`;
        } else {
            btnSubmit.classList.remove('bg-red-500', 'hover:bg-red-600');
            btnSubmit.classList.add('bg-blue-600', 'hover:bg-blue-700');
            btnSubmit.innerHTML = `<i data-lucide="save" class="w-5 h-5"></i> <span>Simpan Transaksi</span>`;
        }
        
        // Disable tombol minus jika qty sudah 1
        btnMinus.disabled = state.qty <= 1;
        
        // Disable tombol plus jika qty sudah maksimal
        btnPlus.disabled = state.qty >= state.stokTersedia;
        
        // Tampilkan warning stok terbatas
        if (state.stokTersedia <= 3 && state.stokTersedia > 0) {
            stockWarning.classList.remove('hidden');
            maxStockSpan.textContent = state.stokTersedia;
        } else {
            stockWarning.classList.add('hidden');
        }
        
        // Refresh lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    }

    function calculate() {
        const selected = document.querySelector('.produk-radio:checked');
        
        if (selected) {
            state.hargaSatuan = parseInt(selected.dataset.harga) || 0;
            state.stokTersedia = parseInt(selected.dataset.stok) || 0;
            
            // 🔒 Auto-adjust qty jika melebihi stok
            if (state.qty > state.stokTersedia) {
                state.qty = Math.max(1, state.stokTersedia);
                document.getElementById('qty_beli').value = state.qty;
            }
            
            updateUI();
            validateStock();
        } else {
            // Reset jika tidak ada produk terpilih
            state.hargaSatuan = 0;
            state.stokTersedia = 0;
            updateUI();
            validateStock();
        }
    }

    function changeQty(delta) {
        const input = document.getElementById('qty_beli');
        let newQty = parseInt(input.value) + delta;
        
        // 🔒 Batasi minimal 1 dan maksimal stok
        newQty = Math.max(1, Math.min(newQty, state.stokTersedia));
        
        if (newQty !== parseInt(input.value)) {
            state.qty = newQty;
            input.value = newQty;
            calculate();
        }
    }

    // 🎯 Inisialisasi event listeners
    document.addEventListener('DOMContentLoaded', function() {
        // Produk radio buttons
        document.querySelectorAll('.produk-radio').forEach(radio => {
            radio.addEventListener('change', calculate);
        });
        
        // Qty buttons dengan event listener yang lebih aman
        document.getElementById('btn-minus')?.addEventListener('click', () => changeQty(-1));
        document.getElementById('btn-plus')?.addEventListener('click', () => changeQty(1));
        
        // Mencegah input manual pada qty
        document.getElementById('qty_beli')?.addEventListener('input', function(e) {
            e.preventDefault();
            return false;
        });
        
        // Hitung awal saat halaman load
        calculate();
        
        // 🔁 Re-init lucide icons setelah DOM siap
        if (typeof lucide !== 'undefined') {
            setTimeout(() => lucide.createIcons(), 50);
        }
    });
</script>
@endpush