@extends('layouts.master')

@section('title', 'GL Account Detail - ')

@section('styles')
<style>
    .btn-back {
        text-decoration: none;
        color: #1AB9D9;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        padding: 5px 15px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    .btn-back:hover { background-color: rgba(26, 185, 217, 0.1); text-decoration: none; }
    @media print {
        .no-print, .btn-back { display: none !important; }
        .card { box-shadow: none !important; }
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-end mb-3 gap-2 no-print">
        <a href="{{ route('modules.reports.general-ledger') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to General Ledger
        </a>
        <a href="{{ route('modules.reports') }}" class="btn-back">
            <i class="fas fa-list me-2"></i> Reports Menu
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i> GL Account Detail — {{ $glcode }}</h5>
            <div class="d-flex gap-2 no-print">
                <button type="button" class="btn btn-light btn-sm" onclick="window.print()">
                    <i class="fas fa-print me-1"></i> Print
                </button>
                <a href="{{ route('modules.reports.gl-account-detail.download-pdf', ['glcode' => $glcode]) }}" class="btn btn-light btn-sm">
                    <i class="fas fa-file-pdf me-1"></i> Download PDF
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Transaction Date</th>
                            <th>Reference</th>
                            <th>Description / Notes</th>
                            <th class="text-center">TR</th>
                            <th class="text-end">Amount</th>
                            <th class="text-end">Converted</th>
                            <th class="text-end">Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse(($transactions ?? []) as $transaction)
                            <tr>
                                <td>{{ $transaction['date'] }}</td>
                                <td>{{ $transaction['reference'] }}</td>
                                <td>{{ $transaction['description'] }}</td>
                                <td class="text-center">{{ $transaction['trcode'] }}</td>
                                <td class="text-end">{{ number_format((float)($transaction['amount'] ?? 0), 2) }}</td>
                                <td class="text-end">{{ number_format((float)($transaction['converted_amount'] ?? 0), 2) }}</td>
                                <td class="text-end {{ ($transaction['balance_after'] ?? 0) < 0 ? 'text-danger' : 'text-success' }}">{{ number_format((float)($transaction['balance_after'] ?? 0), 2) }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-center text-muted">No transactions found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection