@extends('layouts.master')

@section('title', 'General Ledger')

@section('styles')
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --ink: #0f1f2e;
        --ink-soft: #4a5a6a;
        --cream: #f0f8ff;
        --sky: #38bdf8;
        --sky-dark: #0ea5e9;
        --sky-deeper: #0369a1;
        --border: #bae6fd;
        --shadow: 0 2px 16px rgba(14,60,100,0.08);
        --shadow-lg: 0 8px 40px rgba(14,60,100,0.14);
    }

    body {
        background: radial-gradient(900px 320px at 10% 0%, rgba(56,189,248,.18), transparent 60%),
                    radial-gradient(900px 320px at 90% 0%, rgba(14,165,233,.10), transparent 55%),
                    linear-gradient(180deg, #f8fbff, #eef7ff);
        font-family: 'DM Sans', sans-serif;
        color: var(--ink);
        padding: 2rem 1.5rem;
    }

    .ledger-container {
        max-width: 1400px;
        margin: 0 auto;
        background: #fff;
        border-radius: 28px;
        box-shadow: var(--shadow-lg);
        overflow: hidden;
        border: 1px solid rgba(186,230,253,0.7);
    }

    .ledger-header {
        padding: 1.75rem 2rem 1.25rem 2rem;
        border-bottom: 1px solid #E9EDF2;
        background: white;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: 1rem;
    }

    .firm-brand h1 {
        font-family: 'Playfair Display', serif;
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: var(--ink);
        margin: 0 0 0.25rem;
    }
    .firm-brand p {
        font-size: 0.85rem;
        color: var(--ink-soft);
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .firm-brand p i { color: var(--sky-deeper); }

    .badge-ledger {
        background: #EFF6FA;
        padding: 0.5rem 1rem;
        border-radius: 60px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #1E5A74;
        border: 1px solid #DDE6ED;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

    .filter-bar {
        background: #F9FBFD;
        padding: 1.25rem 2rem;
        border-bottom: 1px solid #E9EDF2;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
    }

    .filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-end;
    }

    .input-field { display: flex; flex-direction: column; gap: 0.3rem; }
    .input-field label {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #4A627A;
        margin: 0;
    }
    .input-field input, .input-field select {
        background: white;
        border: 1px solid #DCE3EC;
        padding: 0.6rem 1rem;
        border-radius: 14px;
        font-family: 'DM Sans', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        color: #0F2A38;
        transition: 0.2s;
        min-width: 170px;
    }
    .input-field input:focus, .input-field select:focus {
        outline: none;
        border-color: var(--sky-dark);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
    }

    .btn-group { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
    .btn-primary, .btn-secondary {
        font-family: 'DM Sans', sans-serif;
        font-weight: 800;
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
        border-radius: 40px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        white-space: nowrap;
    }
    .btn-primary { background: var(--sky-dark); color: #fff; box-shadow: 0 2px 8px rgba(14,165,233,0.25); }
    .btn-primary:hover { background: var(--sky-deeper); transform: translateY(-1px); color: #fff; text-decoration: none; }
    .btn-secondary { background: #fff; border: 1px solid #CDD9E6; color: #2C5A72; }
    .btn-secondary:hover { background: #F1F7FB; border-color: #AFC4D4; color: #2C5A72; text-decoration: none; }

    .summary-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
        padding: 1.75rem 2rem;
        background: #FFFFFF;
        border-bottom: 1px solid #EDF2F7;
    }
    .summary-card {
        background: #FBFDFF;
        border-radius: 24px;
        padding: 1rem 1.2rem;
        border: 1px solid #EAF0F6;
    }
    .summary-label {
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #57708C;
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .summary-value {
        font-size: 1.7rem;
        font-weight: 800;
        color: #102C38;
        letter-spacing: -0.5px;
        font-variant-numeric: tabular-nums;
    }

    .ledger-table-wrapper { padding: 0 2rem 2rem 2rem; }
    .section-title {
        font-size: 1rem;
        font-weight: 800;
        color: #1C4E66;
        margin: 1.25rem 0 1rem 0;
        border-left: 4px solid var(--sky-dark);
        padding-left: 0.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .table-container {
        overflow-x: auto;
        border-radius: 20px;
        border: 1px solid #EFF3F8;
        background: white;
    }
    table.ledger-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        min-width: 980px;
    }
    table.ledger-table th {
        text-align: left;
        padding: 1rem 1rem;
        background: #F9FCFE;
        font-weight: 800;
        color: #1F4E66;
        border-bottom: 1px solid #E2EAF2;
        white-space: nowrap;
    }
    table.ledger-table td {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid #EEF3F9;
        color: #1C3849;
        font-weight: 600;
        vertical-align: middle;
    }
    table.ledger-table tr:hover { background: #F8FBFE; }
    .journal-ref {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.8rem;
        background: #F0F4F9;
        padding: 0.2rem 0.5rem;
        border-radius: 20px;
        display: inline-block;
        border: 1px solid #e5eef6;
    }
    .text-right { text-align: right; }
    .balance-positive { font-weight: 900; color: var(--sky-deeper); }
    .balance-negative { font-weight: 900; color: #C44536; }
    .footer-note {
        margin-top: 1.5rem;
        font-size: 0.7rem;
        text-align: right;
        color: #7A96B0;
        border-top: 1px solid #EFF2F7;
        padding-top: 1rem;
    }

    @media print {
        body { background: #fff; padding: 0; }
        .no-print { display: none !important; }
        .ledger-container { box-shadow: none; border: 0; border-radius: 0; }
        .table-container { border: 0; }
    }
</style>
@endsection

@section('content')
@php
    $totalDebit = collect($glAccounts ?? [])->sum('debit');
    $totalCredit = collect($glAccounts ?? [])->sum('credit');
    $netBalance = collect($glAccounts ?? [])->sum('balance');
    $countAccounts = count($glAccounts ?? []);

    $query = request()->query();
@endphp

<div class="ledger-container" id="ledgerApp">
    <div class="ledger-header">
        <div class="firm-brand">
            <h1><i class="fas fa-book" style="color:var(--sky-dark); margin-right: 8px;"></i>General Ledger</h1>
            <p><i class="fas fa-chart-line"></i> Account activity • Double-entry totals</p>
        </div>
        <div class="badge-ledger">
            <i class="fas fa-calculator"></i> Ledger Report
        </div>
    </div>

    <div class="filter-bar no-print">
        <form method="GET" action="{{ route('modules.reports.general-ledger') }}" class="filter-group">
            <div class="input-field">
                <label><i class="far fa-calendar-alt"></i> From Date</label>
                <input type="date" name="from_date" value="{{ $fromDate ?? now()->startOfMonth()->toDateString() }}">
            </div>
            <div class="input-field">
                <label><i class="far fa-calendar-alt"></i> To Date</label>
                <input type="date" name="to_date" value="{{ $toDate ?? now()->toDateString() }}">
            </div>
            <div class="input-field">
                <label><i class="fas fa-chart-simple"></i> Account Type</label>
                <select name="account_type">
                    <option value="" {{ empty($accountType ?? '') ? 'selected' : '' }}>All Types</option>
                    @php
                        $accountTypes = \App\Models\AccountType::orderBy('name')->get();
                    @endphp
                    @foreach($accountTypes as $type)
                        <option value="{{ $type->name }}" {{ (string)($accountType ?? '') === (string)$type->name ? 'selected' : '' }}>
                            {{ $type->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        <div class="input-field">
                <label><i class="fas fa-dollar-sign"></i> Currency</label>
                <select name="currency" class="form-control">
                    <option value="">All Currencies</option>
                    @foreach(\App\Models\Currency::orderBy('currency_name')->get() as $curr)
                        <option value="{{ $curr->currency_id }}" {{ (string)($currencyId ?? '') === (string)$curr->currency_id ? 'selected' : '' }}>
                            {{ $curr->currency_code }} - {{ $curr->currency_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="input-field">
                <label><i class="fas fa-magnifying-glass"></i> Search</label>
                <input type="text" name="search" placeholder="GL code or name" value="{{ $search ?? '' }}">
            </div>
            <div class="btn-group">
                <button class="btn-primary" type="submit"><i class="fas fa-chart-line"></i> Generate</button>
                <a class="btn-secondary" href="{{ route('modules.reports.general-ledger') }}"><i class="fas fa-sync-alt"></i> Reset</a>
                <button class="btn-secondary" type="button" onclick="window.print()"><i class="fas fa-print"></i> Print</button>
                <a class="btn-secondary" href="{{ route('modules.reports.general-ledger.download-pdf', $query) }}"><i class="fas fa-file-pdf"></i> PDF</a>
                <a class="btn-secondary" href="{{ route('modules.reports') }}"><i class="fas fa-arrow-left"></i> Back</a>
            </div>
        </form>
    </div>

    <div class="summary-cards">
        <div class="summary-card"><div class="summary-label"><i class="fas fa-coins"></i> Total Debits</div><div class="summary-value">{{ number_format((float)$totalDebit, 2) }}</div></div>
        <div class="summary-card"><div class="summary-label"><i class="fas fa-credit-card"></i> Total Credits</div><div class="summary-value">{{ number_format((float)$totalCredit, 2) }}</div></div>
        <div class="summary-card"><div class="summary-label"><i class="fas fa-scale-balanced"></i> Net Balance</div><div class="summary-value" style="color: {{ $netBalance < 0 ? '#C44536' : 'var(--sky-deeper)' }}">{{ number_format((float)$netBalance, 2) }}</div></div>
        <div class="summary-card"><div class="summary-label"><i class="fas fa-list"></i> Accounts</div><div class="summary-value">{{ number_format((int)$countAccounts) }}</div></div>
    </div>

    <div class="ledger-table-wrapper">
        <div class="section-title">
            <span><i class="fas fa-list"></i> GL Accounts</span>
            <span style="font-size: 0.7rem; background: #F0F6FA; padding: 0.2rem 0.8rem; border-radius: 40px;">
                Period: {{ $fromDate ?? now()->startOfMonth()->toDateString() }} to {{ $toDate ?? now()->toDateString() }}
            </span>
        </div>

        <div class="table-container">
            <table class="ledger-table">
                <thead>
                    <tr>
                        <th>GL Code</th>
                        <th>GL Name</th>
                        <th>Account Type</th>
                        <th class="text-right">Debit</th>
                        <th class="text-right">Credit</th>
                        <th class="text-right">Balance</th>
                        <th>Currency</th>
                        <th>Last Txn</th>
                        <th class="text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse(($glAccounts ?? []) as $row)
                        @php $bal = (float)($row['balance'] ?? 0); @endphp
                        <tr>
                            <td><span class="journal-ref">{{ $row['glcode'] ?? '—' }}</span></td>
                            <td class="account-name">{{ $row['name'] ?? '—' }}</td>
                            <td>{{ $row['accounttype'] ?? 'Unknown' }}</td>
                            <td class="text-right">{{ number_format((float)($row['debit'] ?? 0), 2) }}</td>
                            <td class="text-right">{{ number_format((float)($row['credit'] ?? 0), 2) }}</td>
                            <td class="text-right {{ $bal < 0 ? 'balance-negative' : 'balance-positive' }}">{{ number_format($bal, 2) }}</td>
                            <td>{{ $row['currency'] ?? '—' }}</td>
                            <td>{{ !empty($row['last_transaction_date']) ? \Carbon\Carbon::parse($row['last_transaction_date'])->format('Y-m-d') : '—' }}</td>
                            <td class="text-right">
                                <a class="btn-secondary" style="padding: 0.35rem 0.85rem;" href="{{ route('modules.reports.gl-account-detail', $row['glcode']) }}">
                                    <i class="fas fa-arrow-right"></i> Detail
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="9" style="text-align:center; padding: 2rem;">No accounts found for the selected filters.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="footer-note">
            <i class="fas fa-gavel"></i> General Ledger reflects posted transactions for the selected period.
        </div>
    </div>
</div>
@endsection