@extends('layouts.owner')

@section('breadcrumb')
    <a href="{{ route('owner.invoices.index') }}" class="hover:text-text-primary transition-colors">Tagihan</a>
    <span class="mx-2 text-text-muted">/</span>
    <span class="text-text-primary">Input Biaya</span>
@endsection

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-text-primary">Update Komponen Tagihan</h1>
        <p class="text-text-secondary">Input pemakaian listrik, air, dan biaya tambahan lainnya.</p>
    </div>

    <form action="{{ route('owner.invoices.update', $invoice) }}" method="POST" x-data="{ 
        rent: {{ $invoice->rent_amount }},
        start: {{ $invoice->electricity_start ?? 0 }},
        end: {{ $invoice->electricity_end ?? 0 }},
        rate: {{ $invoice->electricity_rate ?? 1500 }},
        water: {{ $invoice->water_amount ?? 0 }},
        otherCharges: {{ json_encode($invoice->other_charges ?? []) }},
        
        get electricityTotal() {
            return (this.end - this.start) * this.rate;
        },
        
        get total() {
            let otherTotal = this.otherCharges.reduce((acc, curr) => acc + (parseFloat(curr.amount) || 0), 0);
            return parseFloat(this.rent) + this.electricityTotal + parseFloat(this.water) + otherTotal;
        },

        addCharge() {
            this.otherCharges.push({ label: '', amount: 0 });
        },

        removeCharge(index) {
            this.otherCharges.splice(index, 1);
        }
    }">
        @csrf
        @method('PUT')
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Unit Info -->
                <div class="bg-primary-50 rounded-2xl p-6 border border-primary-100 flex items-center justify-between">
                    <div>
                        <p class="text-[10px] font-bold text-primary-600 uppercase tracking-widest mb-1">Menagih Untuk</p>
                        <h3 class="text-lg font-bold text-primary-900">{{ $invoice->resident->user->name }}</h3>
                        <p class="text-sm text-primary-700">{{ $invoice->lease->room->property->name }} - Unit {{ $invoice->lease->room->room_number }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-[10px] font-bold text-primary-600 uppercase tracking-widest mb-1">Periode</p>
                        <p class="text-lg font-bold text-primary-900">{{ \Carbon\Carbon::create()->month($invoice->period_month)->translatedFormat('F') }} {{ $invoice->period_year }}</p>
                    </div>
                </div>

                <!-- Electricity & Water -->
                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-border bg-surface/30">
                        <h3 class="text-base font-bold text-text-primary">Utilitas (Listrik & Air)</h3>
                    </div>
                    <div class="p-6 space-y-6">
                        <div>
                            <h4 class="text-sm font-bold text-text-primary mb-4 flex items-center gap-2">
                                <svg class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.381z" clip-rule="evenodd"></path></svg>
                                Pemakaian Listrik
                            </h4>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                                <div>
                                    <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Meter Awal (kWh)</label>
                                    <input type="number" name="electricity_start" x-model.number="start" class="w-full border border-border rounded-xl px-4 py-2 text-sm focus:ring-4 focus:ring-primary-500/10 outline-none transition-all">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Meter Akhir (kWh)</label>
                                    <input type="number" name="electricity_end" x-model.number="end" class="w-full border border-border rounded-xl px-4 py-2 text-sm focus:ring-4 focus:ring-primary-500/10 outline-none transition-all">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Tarif / kWh (Rp)</label>
                                    <input type="number" name="electricity_rate" x-model.number="rate" class="w-full border border-border rounded-xl px-4 py-2 text-sm focus:ring-4 focus:ring-primary-500/10 outline-none transition-all">
                                </div>
                            </div>
                            <div class="mt-4 p-3 bg-amber-50 rounded-xl flex justify-between items-center">
                                <span class="text-xs font-bold text-amber-700">Estimasi Tagihan Listrik:</span>
                                <span class="text-sm font-bold text-amber-900" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(electricityTotal)"></span>
                            </div>
                        </div>

                        <hr class="border-border/50">

                        <div>
                            <h4 class="text-sm font-bold text-text-primary mb-4 flex items-center gap-2">
                                <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-7.535 4h5.07a1 1 0 01.832 1.555 5.002 5.002 0 01-6.734 0 1 1 0 01.832-1.555z" clip-rule="evenodd"></path></svg>
                                Biaya Air
                            </h4>
                            <div class="relative">
                                <span class="absolute left-4 top-2 text-text-muted text-sm font-bold">Rp</span>
                                <input type="number" name="water_amount" x-model.number="water" class="w-full border border-border rounded-xl pl-12 pr-4 py-2 text-sm focus:ring-4 focus:ring-primary-500/10 outline-none transition-all">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Other Charges -->
                <div class="bg-white rounded-2xl border border-border shadow-sm overflow-hidden">
                    <div class="px-6 py-4 border-b border-border bg-surface/30 flex items-center justify-between">
                        <h3 class="text-base font-bold text-text-primary">Biaya Tambahan</h3>
                        <button type="button" @click="addCharge()" class="text-xs font-bold text-primary-600 hover:text-primary-700 flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                            Tambah Baris
                        </button>
                    </div>
                    <div class="p-6 space-y-4">
                        <template x-for="(charge, index) in otherCharges" :key="index">
                            <div class="flex items-center gap-4">
                                <div class="flex-1">
                                    <input type="text" :name="'other_charges['+index+'][label]'" x-model="charge.label" placeholder="Nama Biaya (Misal: Laundry, Parkir)" class="w-full border border-border rounded-xl px-4 py-2 text-sm outline-none">
                                </div>
                                <div class="w-40">
                                    <div class="relative">
                                        <span class="absolute left-4 top-2 text-text-muted text-sm font-bold">Rp</span>
                                        <input type="number" :name="'other_charges['+index+'][amount]'" x-model.number="charge.amount" class="w-full border border-border rounded-xl pl-12 pr-4 py-2 text-sm outline-none">
                                    </div>
                                </div>
                                <button type="button" @click="removeCharge(index)" class="text-red-400 hover:text-red-600 transition-colors">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                </button>
                            </div>
                        </template>
                        <div x-show="otherCharges.length === 0" class="text-center py-4 text-xs text-text-muted italic">
                            Belum ada biaya tambahan.
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <div class="bg-white rounded-2xl border border-border shadow-sm p-6 sticky top-8">
                    <h3 class="text-base font-bold text-text-primary mb-6 border-b border-border pb-4">Ringkasan Tagihan</h3>
                    
                    <div class="space-y-4 mb-8">
                        <div class="flex justify-between text-sm">
                            <span class="text-text-secondary">Sewa Kamar</span>
                            <span class="font-bold text-text-primary">Rp {{ number_format($invoice->rent_amount, 0, ',', '.') }}</span>
                            <input type="hidden" name="rent_amount" value="{{ $invoice->rent_amount }}">
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-text-secondary">Listrik</span>
                            <span class="font-bold text-text-primary" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(electricityTotal)"></span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-text-secondary">Air</span>
                            <span class="font-bold text-text-primary" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(water)"></span>
                        </div>
                        <div class="pt-4 border-t border-border flex justify-between items-center">
                            <span class="text-base font-bold text-text-primary">Total Tagihan</span>
                            <span class="text-xl font-bold text-primary-600" x-text="'Rp ' + new Intl.NumberFormat('id-ID').format(total)"></span>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-[10px] font-bold text-text-muted uppercase mb-1">Batas Waktu Bayar</label>
                            <input type="date" name="due_date" value="{{ $invoice->due_date->format('Y-m-d') }}" class="w-full border border-border rounded-xl px-4 py-2 text-sm outline-none focus:ring-4 focus:ring-primary-500/10 transition-all">
                        </div>
                        <button type="submit" class="w-full bg-primary-500 text-white font-bold py-3 rounded-xl shadow-lg shadow-primary-500/20 hover:bg-primary-600 transition-all active:scale-[0.98]">
                            Simpan Tagihan
                        </button>
                        <a href="{{ route('owner.invoices.show', $invoice) }}" class="block text-center text-sm font-bold text-text-muted hover:text-text-primary mt-2">Batal</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection