@extends('layouts.app')
@section('title', 'Edit Invoice ' . $invoice->nomor_invoice)

@section('content')
<form action="{{ route('invoices.update', $invoice) }}" method="POST" enctype="multipart/form-data" class="space-y-4"
      x-data="editInvoiceForm()">
    @csrf @method('PUT')

    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div class="mb-4 flex items-center justify-between">
            <h3 class="font-bold text-slate-800">Invoice {{ $invoice->nomor_invoice }}</h3>
            <span class="text-[10px] px-2 py-0.5 rounded border {{ $invoice->status_badge }}">{{ $invoice->status }}</span>
        </div>
        <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" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}" @selected($c->id == $invoice->customer_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="{{ $invoice->tanggal_invoice->format('Y-m-d') }}" 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="{{ $invoice->tanggal_masuk?->format('Y-m-d') }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
                </div>
            </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="{{ $invoice->jenis_sablon }}" 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="{{ $invoice->bahan }}" class="w-full rounded-lg border-slate-300 px-3 py-2 border">
            </div>
        </div>
    </div>

    <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="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" 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 }}"></option>@endforeach
        </datalist>
    </div>

    <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>
            <textarea name="catatan" rows="3" class="w-full rounded-lg border-slate-300 px-3 py-2 border">{{ $invoice->catatan }}</textarea>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">Tambah Mockup Baru</label>
                <input type="file" name="mockup" accept="image/*" class="w-full text-sm">
            </div>
            @if($invoice->images->count())
                <div class="flex flex-wrap gap-2">
                    @foreach($invoice->images as $img)
                        <img src="{{ $img->url }}" class="h-20 rounded border">
                    @endforeach
                </div>
            @endif
        </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>Total 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 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.show', $invoice) }}" 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 Perubahan</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
    window.editInvoiceForm = function() {
        return {
            items: {!! Js::from($invoice->items->map(fn($i) => ['spesifikasi'=>$i->spesifikasi,'ukuran'=>$i->ukuran,'qty'=>(int)$i->qty,'harga_satuan'=>(float)$i->harga_satuan])) !!},
            diskon: {{ (float) $invoice->diskon }},
            dp: {{ (float) $invoice->total_dibayar }},
            subtotal: 0,
            total: 0,
            init() { this.recalc(); },
            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(); } },
            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