@extends('layouts.aura-main')

@section('main-content')
<div x-data="{ openModal: false, dr: 0, cr: 0 }">
    <div class="mb-6 flex justify-between items-end">
        <div>
            <div class="flex items-center gap-2 mb-1">
                <a href="{{ route('accounting.transactions') }}" class="text-indigo-600 text-xs hover:underline">← Transactions</a>
            </div>
            <h1 class="text-lg font-bold text-slate-900 leading-tight">Journal Entries: {{ $transaction->reference }}</h1>
            <p class="text-slate-500 text-[11px] font-medium uppercase tracking-tighter">{{ $transaction->description }}</p>
        </div>
        <button @click="openModal = true" class="bg-indigo-600 text-white px-3 py-1.5 rounded text-[11px] font-bold shadow-sm">
            + Add Entry Line
        </button>
    </div>

    <div class="bg-white border border-slate-200 rounded shadow-sm overflow-hidden">
        <table class="w-full text-left text-xs border-collapse">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr>
                    <th class="px-4 py-2 text-[10px] font-bold uppercase text-slate-400">Account</th>
                    <th class="px-4 py-2 text-[10px] font-bold uppercase text-slate-400 text-right">Debit (DR)</th>
                    <th class="px-4 py-2 text-[10px] font-bold uppercase text-slate-400 text-right">Credit (CR)</th>
                    <th class="px-4 py-2 text-[10px] font-bold uppercase text-slate-400 text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($entries as $entry)
                <tr class="border-b border-slate-100">
                    <td class="px-4 py-2">
                        <span class="font-bold text-slate-400 mr-2">{{ $entry->account->code }}</span>
                        <span class="text-slate-700 font-medium">{{ $entry->account->name }}</span>
                    </td>
                    <td class="px-4 py-2 text-right font-mono {{ $entry->debit > 0 ? 'text-slate-900' : 'text-slate-300' }}">
                        {{ number_format($entry->debit, 2) }}
                    </td>
                    <td class="px-4 py-2 text-right font-mono {{ $entry->credit > 0 ? 'text-slate-900' : 'text-slate-300' }}">
                        {{ number_format($entry->credit, 2) }}
                    </td>
                    <td class="px-4 py-2 text-right">
                        <button class="text-red-400 hover:text-red-600">Remove</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-50 font-bold border-t-2 border-slate-200">
                <tr>
                    <td class="px-4 py-3 text-right text-slate-400 uppercase tracking-widest text-[10px]">Total Balance</td>
                    <td class="px-4 py-3 text-right font-mono text-indigo-600">{{ number_format($entries->sum('debit'), 2) }}</td>
                    <td class="px-4 py-3 text-right font-mono text-indigo-600">{{ number_format($entries->sum('credit'), 2) }}</td>
                    <td class="px-4 py-3 text-center">
                        @if($entries->sum('debit') == $entries->sum('credit'))
                            <span class="text-green-500 text-[10px]">Balanced ✓</span>
                        @else
                            <span class="text-red-500 text-[10px]">Unbalanced ⚠</span>
                        @endif
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div x-show="openModal" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm" x-cloak>
        <div class="bg-white rounded shadow-xl w-full max-w-md p-6 border border-slate-200">
            <h2 class="text-sm font-bold text-slate-900 mb-4">Add Ledger Line</h2>
            <form action="#" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" name="transaction_id" value="{{ $transaction->id }}">
                <div>
                    <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Select Account</label>
                    <select name="account_id" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none">
                        @foreach($accounts as $account)
                            <option value="{{ $account->id }}">{{ $account->code }} - {{ $account->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Debit Amount</label>
                        <input type="number" step="0.01" name="debit" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none" placeholder="0.00">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1">Credit Amount</label>
                        <input type="number" step="0.01" name="credit" class="w-full bg-slate-50 border border-slate-200 rounded px-3 py-2 text-xs outline-none" placeholder="0.00">
                    </div>
                </div>
                <div class="flex justify-end gap-2 pt-2">
                    <button type="button" @click="openModal = false" class="text-[11px] font-bold text-slate-400 px-4 py-2">Cancel</button>
                    <button type="submit" class="bg-indigo-600 text-white text-[11px] font-bold px-4 py-2 rounded">Post Entry</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection