@extends('layouts.aura-main')

@section('main-content')
<div x-data="{ 
    loading: false,
    cost: 0, 
    salvage: 0, 
    months: 12,
    isCredit: false,
    get monthlyDep() {
        if (this.months <= 0) return 0;
        let val = (this.cost - this.salvage) / this.months;
        return val > 0 ? new Intl.NumberFormat().format(val.toFixed(2)) : '0.00';
    }
}">
    <div class="mb-8 border-b border-slate-200 pb-4 flex justify-between items-end">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Register Fixed Asset</h1>
            <p class="text-[11px] font-bold text-indigo-600 uppercase tracking-wider">Asset Capitalization & Ledger Integration</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('assets.index') }}" class="text-[11px] font-bold text-slate-400 px-4 py-2 hover:text-slate-600 transition">Cancel</a>
            <button type="submit" form="asset-form" :disabled="loading" class="bg-indigo-600 text-white px-8 py-2 rounded-sm text-[11px] font-bold shadow-sm hover:bg-indigo-700 transition disabled:opacity-50">
                <span x-text="loading ? 'Processing...' : 'Capitalize Asset'"></span>
            </button>
        </div>
    </div>

    <form id="asset-form" action="{{ route('assets.store') }}" method="POST" @submit="loading = true">
        @csrf

        <div class="space-y-6">
            <div class="bg-white border border-slate-300 rounded-sm shadow-sm p-6">
                <h2 class="text-[11px] font-bold text-indigo-600 mb-6 flex items-center gap-2">
                    <div class="w-1.5 h-4 bg-indigo-500 rounded-full"></div>
                    Asset & Vendor Identification
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <div class="lg:col-span-2">
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Asset Name / Description *</label>
                        <input type="text" name="name" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 transition shadow-sm" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Asset Code *</label>
                        <input type="text" name="asset_code" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 transition shadow-sm font-bold uppercase" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Supplier / Vendor *</label>
                        <select name="supplier_id" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 bg-white" required>
                            <option value="">-- Select Supplier --</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-4 border-t border-slate-50">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Purchase Date *</label>
                        <input type="date" name="purchase_date" value="{{ date('Y-m-d') }}" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 shadow-sm" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Physical Location</label>
                        <input type="text" name="location" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 shadow-sm">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Serial / Chassis Number</label>
                        <input type="text" name="serial_number" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 shadow-sm">
                    </div>
                </div>
            </div>

            <div class="bg-white border border-slate-300 rounded-sm shadow-sm p-6">
                <h2 class="text-[11px] font-bold text-indigo-600 mb-6 flex items-center gap-2">
                    <div class="w-1.5 h-4 bg-emerald-500 rounded-full"></div>
                    Valuation & Useful Life
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Purchase Cost (ZMW) *</label>
                        <input type="number" step="0.01" name="purchase_cost" x-model="cost" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none font-mono font-bold focus:border-indigo-500 shadow-sm" required>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Useful Life (Months) *</label>
                        <input type="number" name="useful_life_months" x-model="months" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none font-mono font-bold focus:border-indigo-500 shadow-sm" required>
                    </div>
                    <div class="flex items-end pb-2">
                        <div class="text-right w-full">
                            <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Est. Monthly Dep:</span>
                            <span class="text-xl font-black text-indigo-600 font-mono ml-2">K <span x-text="monthlyDep"></span></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-slate-300 rounded-sm shadow-sm p-6">
                <h2 class="text-[11px] font-bold text-indigo-600 mb-6 flex items-center gap-2">
                    <div class="w-1.5 h-4 bg-amber-500 rounded-full"></div>
                    Funding Strategy & Ledger Mapping
                </h2>
                
                <div class="p-5 bg-slate-50 border border-slate-200 rounded-sm mb-8">
                    <div class="flex items-center gap-6 mb-5 border-b border-slate-200 pb-4">
                        <label class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Funding Strategy:</label>
                        <div class="flex gap-6">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="funding_type" value="direct" @click="isCredit = false" :checked="!isCredit" class="text-indigo-600 focus:ring-0">
                                <span class="text-[11px] font-bold text-slate-700">Immediate (Cashbook)</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="funding_type" value="credit" @click="isCredit = true" :checked="isCredit" class="text-indigo-600 focus:ring-0">
                                <span class="text-[11px] font-bold text-slate-700">Credit (Bill)</span>
                            </label>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div x-show="!isCredit" x-transition>
                                <label class="block text-[10px] font-bold text-slate-500 mb-1">Source Bank/Cash Account *</label>
                                <select name="credit_account_id" :required="!isCredit" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 bg-white shadow-sm font-bold">
                                    <option value="">-- Select Payment Source --</option>
                                    @foreach($accounts as $acc)
                                        <option value="{{ $acc->id }}">{{ $acc->code }} - {{ $acc->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div x-show="isCredit" x-cloak x-transition>
                                <label class="block text-[10px] font-bold text-slate-500 mb-1">Accounts Payable Ledger *</label>
                                <select name="ap_account_id" :required="isCredit" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 bg-white">
                                    <option value="">-- Select Liability Account --</option>
                                    @foreach($accounts->where('account_type_id', 14) as $acc)
                                        <option value="{{ $acc->id }}">{{ $acc->code }} - {{ $acc->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div>
                            <div x-show="isCredit" x-cloak x-transition class="mb-4">
                                <label class="block text-[10px] font-bold text-slate-500 mb-1">Bill Due Date *</label>
                                <input type="date" name="due_date" :required="isCredit" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500">
                            </div>

                            <label class="block text-[10px] font-bold text-slate-500 mb-1">Reference / Document Number</label>
                            <input type="text" name="payment_reference" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs outline-none focus:border-indigo-500 transition shadow-sm font-mono uppercase" placeholder="e.g. INV-1002 or CHQ-77">
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 pt-4">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Asset Ledger (Cost)</label>
                        <select name="asset_account_id" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs bg-white" required>
                            @foreach($accounts as $acc) <option value="{{ $acc->id }}">{{ $acc->name }}</option> @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Accumulated Depreciation</label>
                        <select name="accum_dep_account_id" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs bg-white" required>
                            @foreach($accounts as $acc) <option value="{{ $acc->id }}">{{ $acc->name }}</option> @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 mb-1">Depreciation Expense</label>
                        <select name="dep_charge_account_id" class="w-full border border-slate-300 rounded-sm px-3 py-2 text-xs bg-white" required>
                            @foreach($accounts as $acc) <option value="{{ $acc->id }}">{{ $acc->name }}</option> @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection