@extends('layouts.app')
@section('title', 'Buat Invoice Baru')

@push('head')
<style>
    .item-row input, .item-row select { min-width: 0; }
    @media (max-width: 640px) {
        .item-grid { grid-template-columns: 1fr 1fr; }
    }
</style>
@endpush

@section('content')
<form action="{{ route('invoices.store') }}" method="POST" enctype="multipart/form-data" class="space-y-4"
      x-data="invoiceForm({{ Js::from($products->map(fn($p) => ['id'=>$p->id,'nama'=>$p->nama,'harga'=>(float)$p->harga_default])) }})">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="font-bold text-slate-800 mb-4">Informasi Invoice</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Customer *</label>
                <select name="customer_id" x-model="customerId" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                    <option value="">— Customer Baru —</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}">{{ $c->nama }} @if($c->no_hp)({{ $c->no_hp }})@endif</option>
                    @endforeach
                </select>
            </div>
            <div class="grid grid-cols-2 gap-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Tanggal Invoice *</label>
                    <input type="date" name="tanggal_invoice" value="{{ old('tanggal_invoice', now()->toDateString()) }}" required class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Tanggal Masuk</label>
                    <input type="date" name="tanggal_masuk" value="{{ old('tanggal_masuk') }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
            </div>
        </div>

        <div x-show="!customerId" x-transition class="mt-4 p-4 rounded-lg bg-blue-50 border border-blue-200 grid grid-cols-1 md:grid-cols-3 gap-3">
            <div class="md:col-span-3 text-xs text-blue-800 font-semibold">📝 Customer Baru</div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Nama *</label>
                <input type="text" name="customer_baru[nama]" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">No HP</label>
                <input type="text" name="customer_baru[no_hp]" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Alamat</label>
                <input type="text" name="customer_baru[alamat]" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Jenis Sablon</label>
                <input type="text" name="jenis_sablon" value="{{ old('jenis_sablon') }}" placeholder="SABLON PLASTISOL" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Bahan</label>
                <input type="text" name="bahan" value="{{ old('bahan') }}" placeholder="Cotton Combed 24s" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
        </div>
    </div>

    {{-- Items --}}
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-slate-800">Item Pesanan</h3>
            <button type="button" @click="addItem()" class="bg-[#1e6fbf] hover:bg-[#14538f] text-white text-sm font-semibold px-3 py-1.5 rounded-lg">+ Tambah Item</button>
        </div>

        <div class="space-y-3">
            <template x-for="(item, i) in items" :key="i">
                <div class="item-row p-3 rounded-lg border border-slate-200 bg-slate-50 grid grid-cols-12 gap-2 items-end">
                    <div class="col-span-12 sm:col-span-4">
                        <label class="text-xs text-slate-500">Spesifikasi</label>
                        <input type="text" :name="`items[${i}][spesifikasi]`" x-model="item.spesifikasi" required
                               list="produk-list" @input="applyProductPrice(item)"
                               placeholder="TSHIRT HITAM PENDEK"
                               class="w-full rounded-lg border-slate-300 px-2 py-1.5 border text-sm">
                    </div>
                    <div class="col-span-4 sm:col-span-1">
                        <label class="text-xs text-slate-500">Ukuran</label>
                        <input type="text" :name="`items[${i}][ukuran]`" x-model="item.ukuran" class="w-full rounded-lg border-slate-300 px-2 py-1.5 border text-sm">
                    </div>
                    <div class="col-span-4 sm:col-span-1">
                        <label class="text-xs text-slate-500">Qty</label>
                        <input type="number" min="1" :name="`items[${i}][qty]`" x-model.number="item.qty" @input="recalc()" required class="w-full rounded-lg border-slate-300 px-2 py-1.5 border text-sm">
                    </div>
                    <div class="col-span-4 sm:col-span-2">
                        <label class="text-xs text-slate-500">Harga</label>
                        <input type="number" min="0" step="0.01" :name="`items[${i}][harga_satuan]`" x-model.number="item.harga_satuan" @input="recalc()" required class="w-full rounded-lg border-slate-300 px-2 py-1.5 border text-sm">
                    </div>
                    <div class="col-span-8 sm:col-span-3">
                        <label class="text-xs text-slate-500">Subtotal</label>
                        <div class="w-full px-2 py-1.5 text-sm font-semibold bg-white border border-slate-200 rounded-lg text-right"
                             x-text="'Rp ' + new Intl.NumberFormat('id-ID').format((item.qty || 0) * (item.harga_satuan || 0))"></div>
                    </div>
                    <div class="col-span-4 sm:col-span-1 text-right">
                        <button type="button" @click="removeItem(i)" class="text-red-500 hover:text-red-700 text-lg leading-none">🗑</button>
                    </div>
                </div>
            </template>
        </div>

        <datalist id="produk-list">
            @foreach($products as $p)
                <option value="{{ $p->nama }}" data-harga="{{ (float)$p->harga_default }}"></option>
            @endforeach
        </datalist>
    </div>

    {{-- Summary --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200 p-6 space-y-4">
            <h3 class="font-bold text-slate-800">Catatan & Mockup</h3>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Catatan</label>
                <textarea name="catatan" rows="3" class="w-full rounded-lg border-slate-300 px-3 py-2 border" placeholder="Catatan tambahan...">{{ old('catatan') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Upload Mockup (max 3MB)</label>
                <input type="file" name="mockup" accept="image/*" class="w-full text-sm">
                <p class="text-xs text-slate-500 mt-1">Format: JPG, PNG, WEBP. Akan tampil di invoice.</p>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="font-bold text-slate-800 mb-4">Ringkasan</h3>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between"><span>Subtotal</span><span class="font-semibold" x-text="'Rp ' + fmt(subtotal)"></span></div>
                <div class="flex justify-between items-center">
                    <span>Diskon</span>
                    <input type="number" min="0" step="0.01" name="diskon" x-model.number="diskon" @input="recalc()" class="w-32 rounded-lg border-slate-300 px-2 py-1 border text-sm text-right">
                </div>
                <div class="flex justify-between text-lg font-bold border-t border-slate-200 pt-2">
                    <span>Total</span><span x-text="'Rp ' + fmt(total)"></span>
                </div>
                <div class="flex justify-between items-center border-t border-slate-200 pt-2">
                    <span>DP / Bayar</span>
                    <input type="number" min="0" step="0.01" name="dp" x-model.number="dp" @input="recalc()" class="w-32 rounded-lg border-slate-300 px-2 py-1 border text-sm text-right">
                </div>
                <div class="flex justify-between">
                    <span>Metode DP</span>
                    <select name="metode_dp" class="w-32 rounded-lg border-slate-300 px-2 py-1 border text-sm">
                        <option value="TRANSFER">Transfer</option>
                        <option value="CASH">Cash</option>
                        <option value="QRIS">QRIS</option>
                        <option value="EWALLET">E-Wallet</option>
                    </select>
                </div>
                <div class="flex justify-between text-red-600 font-bold">
                    <span>Kekurangan</span><span x-text="'Rp ' + fmt(Math.max(0, total - dp))"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="flex gap-2 justify-end">
        <a href="{{ route('invoices.index') }}" class="bg-slate-200 hover:bg-slate-300 px-4 py-2 rounded-lg">Batal</a>
        <button class="bg-[#1e6fbf] hover:bg-[#14538f] text-white font-semibold px-6 py-2 rounded-lg">💾 Simpan Invoice</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
    window.invoiceForm = function(products) {
        return {
            products,
            customerId: '{{ old('customer_id') }}',
            items: [{ spesifikasi: '', ukuran: '', qty: 1, harga_satuan: 0 }],
            diskon: 0,
            dp: 0,
            subtotal: 0,
            total: 0,
            addItem() { this.items.push({ spesifikasi: '', ukuran: '', qty: 1, harga_satuan: 0 }); this.recalc(); },
            removeItem(i) { if (this.items.length > 1) { this.items.splice(i, 1); this.recalc(); } },
            applyProductPrice(item) {
                const p = this.products.find(x => x.nama.toLowerCase() === (item.spesifikasi || '').toLowerCase());
                if (p) item.harga_satuan = p.harga;
                this.recalc();
            },
            recalc() {
                this.subtotal = this.items.reduce((s, it) => s + ((it.qty || 0) * (it.harga_satuan || 0)), 0);
                this.total = Math.max(0, this.subtotal - (this.diskon || 0));
            },
            fmt(n) { return new Intl.NumberFormat('id-ID').format(Math.round(n || 0)); },
        };
    };
</script>
@endpush