@extends('layouts.main')

@section('title', 'Account Details')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <a href="{{ route('accounts.index') }}" class="text-gray-500 hover:text-gray-700 flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> Back to Chart of Accounts
    </a>
    <a href="{{ route('accounts.edit', $account) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white px-5 py-2.5 rounded-lg font-medium flex items-center">
        <i class="fas fa-edit mr-2"></i> Edit Account
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-book text-indigo-600 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Account Code</p>
                <p class="text-xl font-bold text-gray-800 font-mono">{{ $account->code }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-tag text-indigo-600 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Account Name</p>
                <p class="text-xl font-bold text-gray-800">{{ $account->name }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-md p-6">
        <div class="flex items-center">
            <div class="h-14 w-14 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                <i class="fas fa-balance-scale text-indigo-600 text-xl"></i>
            </div>
            <div>
                <p class="text-sm text-gray-500">Current Balance</p>
                <p class="text-xl font-bold text-gray-800">{{ number_format($account->balance, 2) }}</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl shadow-md p-6 mb-6">
    <div class="grid grid-cols-2 gap-6">
        <div>
            <p class="text-sm text-gray-500 mb-1">Account Type</p>
            <span class="px-3 py-1 rounded-full text-sm font-medium border bg-blue-100 text-blue-700 border-blue-200">
                {{ ucfirst($account->type) }}
            </span>
        </div>
        <div>
            <p class="text-sm text-gray-500 mb-1">Nature</p>
            <p class="font-medium text-gray-800">{{ ucfirst($account->nature) }}</p>
        </div>
    </div>
</div>

<div class="bg-white rounded-xl shadow-md overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800">Transaction History</h3>
    </div>
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr class="text-left text-gray-500 text-sm">
                <th class="px-6 py-4 font-semibold">Date</th>
                <th class="px-6 py-4 font-semibold">Description</th>
                <th class="px-6 py-4 font-semibold text-right">Debit</th>
                <th class="px-6 py-4 font-semibold text-right">Credit</th>
                <th class="px-6 py-4 font-semibold text-right">Balance</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($transactions as $transaction)
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 text-gray-600">
                    {{ $transaction->created_at->format('M d, Y') }}
                </td>
                <td class="px-6 py-4 text-gray-800">
                    {{ $transaction->description }}
                </td>
                <td class="px-6 py-4 text-right text-red-600">
                    {{ $transaction->debit > 0 ? number_format($transaction->debit, 2) : '-' }}
                </td>
                <td class="px-6 py-4 text-right text-green-600">
                    {{ $transaction->credit > 0 ? number_format($transaction->credit, 2) : '-' }}
                </td>
                <td class="px-6 py-4 text-right font-medium text-gray-800">
                    {{ number_format($transaction->balance, 2) }}
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-6 py-8 text-center">
                    <i class="fas fa-receipt text-gray-300 text-4xl mb-3"></i>
                    <p class="text-gray-500">No transactions found</p>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection