@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-lg font-bold text-slate-900">Journal Detail</h1>
            <p class="text-[11px] text-slate-500 uppercase tracking-widest font-bold">{{ $transaction->reference }}</p>
        </div>
        <a href="{{ route('accounting.transactions') }}" class="text-xs font-bold text-slate-400 hover:text-slate-600">← Back to Book</a>
    </div>

    <div class="bg-white border border-slate-200 rounded-lg shadow-sm overflow-hidden">
        <div class="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between">
            <div>
                <p class="text-[10px] font-bold text-slate-400 uppercase">Description</p>
                <p class="text-sm font-semibold text-slate-700">{{ $transaction->description }}</p>
            </div>
            <div class="text-right">
                <p class="text-[10px] font-bold text-slate-400 uppercase">Date Posted</p>
                <p class="text-sm font-semibold text-slate-700">{{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d M, Y') }}</p>
            </div>
        </div>

        <table class="w-full text-left">
            <thead class="bg-white border-b border-slate-100 uppercase text-[10px] font-bold text-slate-400 tracking-wider">
                <tr>
                    <th class="px-6 py-3">Account</th>
                    <th class="px-6 py-3">Memo</th>
                    <th class="px-6 py-3 text-right">Debit</th>
                    <th class="px-6 py-3 text-right">Credit</th>
                </tr>
            </thead>
            <tbody class="text-xs">
                @foreach($transaction->journalEntries as $entry)
                <tr class="border-b border-slate-50">
                    <td class="px-6 py-4">
                        <span class="font-bold text-slate-700">{{ $entry->account->name }}</span><br>
                        <span class="text-[10px] text-slate-400 font-mono">{{ $entry->account->code }}</span>
                    </td>
                    <td class="px-6 py-4 text-slate-500">{{ $entry->description }}</td>
                    <td class="px-6 py-4 text-right font-mono font-bold text-slate-700">
                        {{ $entry->debit > 0 ? number_format($entry->debit, 2) : '-' }}
                    </td>
                    <td class="px-6 py-4 text-right font-mono font-bold text-red-500">
                        {{ $entry->credit > 0 ? number_format($entry->credit, 2) : '-' }}
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot class="bg-slate-50 font-bold border-t-2 border-slate-200">
                <tr>
                    <td colspan="2" class="px-6 py-4 text-right uppercase text-[10px]">Balanced Total</td>
                    <td class="px-6 py-4 text-right font-mono text-slate-900">{{ number_format($transaction->journalEntries->sum('debit'), 2) }}</td>
                    <td class="px-6 py-4 text-right font-mono text-slate-900">{{ number_format($transaction->journalEntries->sum('credit'), 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endsection