@extends('master.app')
@section('title', 'General Ledger')

@section('body')
@php
    $lang = $filters['lang'] ?? 'en';
    $typeLabel = $filters['type'] ?? '';
    $q = $filters['q'] ?? '';
    $dateFrom = $filters['date_from'] ?? '';
    $dateTo = $filters['date_to'] ?? '';
    $perPage = (int)($filters['per_page'] ?? 50);

    $accName = null;
    if(!empty($account)){
        $accName = $lang==='ps' ? ($account['title_ps'] ?? $account['title_en'])
                : ($lang==='dr' ? ($account['title_dr'] ?? $account['title_en'])
                : ($account['title_en'] ?? $account['title_ps']));
    }

    $sumDebit  = (float)($totals['debit'] ?? 0);
    $sumCredit = (float)($totals['credit'] ?? 0);
    $closing = (float)$opening + (float)(collect($entries->items() ?? [])->sum('delta'));

    // quick helper for module badge/icon
    $modMeta = function($m){
        $m = strtolower((string)$m);
        if(str_contains($m,'cash')) return ['icon'=>'fa-money-bill-wave','cls'=>'badge-soft-success'];
        if(str_contains($m,'bank')) return ['icon'=>'fa-building-columns','cls'=>'badge-soft-info'];
        if(str_contains($m,'sale') || str_contains($m,'invoice')) return ['icon'=>'fa-receipt','cls'=>'badge-soft-primary'];
        if(str_contains($m,'purchase') || str_contains($m,'bill')) return ['icon'=>'fa-cart-shopping','cls'=>'badge-soft-warning'];
        if(str_contains($m,'payroll')) return ['icon'=>'fa-users','cls'=>'badge-soft-dark'];
        return ['icon'=>'fa-layer-group','cls'=>'badge-soft-secondary'];
    };
@endphp

@push('styles')
<style>
    /* keep text black as you requested */
    .gl-page, .gl-page * { color: #111827; }
    .gl-page .text-muted { color: #6b7280 !important; }

    .gl-hero{
        border: 1px solid rgba(17,24,39,.08);
        background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(16,185,129,.08));
        border-radius: 14px;
        overflow: hidden;
    }
    .gl-hero .hero-inner{ padding: 14px 16px; }
    .gl-chip{
        display:inline-flex; align-items:center; gap:.45rem;
        background:#fff; border:1px solid rgba(17,24,39,.10);
        padding:.35rem .6rem; border-radius:999px; font-size:12px;
        box-shadow: 0 4px 14px rgba(0,0,0,.04);
    }

    .gl-actions .btn{
        border-radius: 10px;
        padding: .45rem .65rem;
    }

    .gl-card{
        border: 1px solid rgba(17,24,39,.08);
        border-radius: 14px;
        box-shadow: 0 10px 22px rgba(0,0,0,.04);
    }
    .gl-stat{
        border-radius: 14px;
        border: 1px solid rgba(17,24,39,.08);
        background:#fff;
        padding: 12px 12px;
    }
    .gl-stat .label{ font-size: 12px; color:#6b7280; }
    .gl-stat .value{ font-size: 18px; font-weight: 800; letter-spacing: .2px; }
    .gl-stat .icon{
        width: 38px; height: 38px; border-radius: 12px;
        display:flex; align-items:center; justify-content:center;
        background: rgba(17,24,39,.06);
    }

    .gl-filters .form-control, .gl-filters .form-select{
        border-radius: 12px;
        border-color: rgba(17,24,39,.12);
        min-height: 40px;
    }
    .gl-filters label{ font-size: 12px; color:#6b7280; margin-bottom:6px; }

    .gl-table{
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(17,24,39,.08);
    }
    .gl-table thead th{
        background: #0f172a;
        color: #fff !important;
        border-color: rgba(255,255,255,.12);
        position: sticky;
        top: 0;
        z-index: 2;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .6px;
        white-space: nowrap;
    }
    .gl-table tbody td{ vertical-align: middle; }
    .gl-table tbody tr:hover{ background: rgba(59,130,246,.06); }

    .gl-ref{
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        background: rgba(17,24,39,.06);
        padding: .2rem .45rem;
        border-radius: 10px;
        display: inline-block;
    }

    .badge-soft-primary{ background: rgba(59,130,246,.14); color:#1d4ed8 !important; }
    .badge-soft-success{ background: rgba(16,185,129,.16); color:#047857 !important; }
    .badge-soft-warning{ background: rgba(245,158,11,.18); color:#92400e !important; }
    .badge-soft-info{ background: rgba(56,189,248,.18); color:#0369a1 !important; }
    .badge-soft-secondary{ background: rgba(107,114,128,.16); color:#374151 !important; }
    .badge-soft-dark{ background: rgba(17,24,39,.10); color:#111827 !important; }

    .gl-balance{
        font-weight: 800;
        padding: .35rem .6rem;
        border-radius: 12px;
        background: rgba(17,24,39,.06);
        display:inline-block;
        min-width: 120px;
        text-align:right;
    }

    /* print */
    @media print {
        .app-sidebar, .app-header, .gl-actions, .gl-filters, .pagination { display:none !important; }
        .gl-hero { background: #fff !important; border: 0; }
        .gl-table thead th { position: static !important; }
    }
</style>
@endpush

<main class="app-content gl-page">
    <div class="row">
        <div class="col-12">

            {{-- HERO / HEADER --}}
            <div class="gl-hero mb-3">
                <div class="hero-inner d-flex flex-wrap justify-content-between align-items-center gap-2">
                    <div class="d-flex flex-column">
                        <div class="d-flex align-items-center gap-2">
                            <div class="gl-chip">
                                <i class="fa-solid fa-book-open"></i>
                                <span class="fw-bold">General Ledger</span>
                            </div>
                            <div class="gl-chip">
                                <i class="fa-solid fa-coins"></i>
                                <span class="small">Base currency: <b>currency_id=1</b></span>
                            </div>
                            <div class="gl-chip">
                                <i class="fa-solid fa-arrow-right-arrow-left"></i>
                                <span class="small">FX: <b>ex_rate</b></span>
                            </div>
                        </div>

                        <div class="mt-2">
                            <h5 class="mb-0">
                                <i class="fa-solid fa-layer-group me-1"></i>
                                Account Ledger
                                @if($account)
                                    <span class="text-muted">— {{ $account['key'] }} {{ $accName ? ' • '.$accName : '' }}</span>
                                @endif
                            </h5>
                            <div class="text-muted small mt-1">
                                <i class="fa-regular fa-circle-info me-1"></i>
                                Filter by account/type/date and search in narration.
                            </div>
                        </div>
                    </div>

                    <div class="gl-actions d-flex flex-wrap gap-2">
                        <a class="btn btn-outline-dark btn-sm"
                           href="{{ route('reporting.general_ledger.index') }}">
                            <i class="fa-solid fa-rotate-left me-1"></i> Reset
                        </a>

                        <a target="_blank" class="btn btn-outline-dark btn-sm"
                           href="{{ route('reporting.general_ledger.print', request()->query()) }}">
                            <i class="fa-solid fa-print me-1"></i> Print
                        </a>

                        {{-- Optional: Excel (if you add route later) --}}
                        {{-- <a class="btn btn-dark btn-sm" href="{{ route('reporting.general_ledger.export', request()->query()) }}">
                            <i class="fa-solid fa-file-excel me-1"></i> Export
                        </a> --}}
                    </div>
                </div>
            </div>

            {{-- STATS ROW --}}
            <div class="row g-2 mb-3">
                <div class="col-md-3">
                    <div class="gl-stat d-flex justify-content-between align-items-center">
                        <div>
                            <div class="label"><i class="fa-regular fa-flag me-1"></i> Opening</div>
                            <div class="value">{{ number_format((float)$opening, 2) }}</div>
                        </div>
                        <div class="icon"><i class="fa-solid fa-play"></i></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="gl-stat d-flex justify-content-between align-items-center">
                        <div>
                            <div class="label"><i class="fa-solid fa-arrow-down me-1"></i> Total Debit</div>
                            <div class="value">{{ number_format($sumDebit, 2) }}</div>
                        </div>
                        <div class="icon"><i class="fa-solid fa-circle-plus"></i></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="gl-stat d-flex justify-content-between align-items-center">
                        <div>
                            <div class="label"><i class="fa-solid fa-arrow-up me-1"></i> Total Credit</div>
                            <div class="value">{{ number_format($sumCredit, 2) }}</div>
                        </div>
                        <div class="icon"><i class="fa-solid fa-circle-minus"></i></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="gl-stat d-flex justify-content-between align-items-center">
                        <div>
                            <div class="label"><i class="fa-regular fa-circle-check me-1"></i> Closing</div>
                            <div class="value">{{ number_format($closing, 2) }}</div>
                        </div>
                        <div class="icon"><i class="fa-solid fa-flag-checkered"></i></div>
                    </div>
                </div>
            </div>

            {{-- FILTERS --}}
            <div class="gl-card mb-3">
                <div class="card-body gl-filters">
                    <form method="GET" action="{{ route('reporting.general_ledger.index') }}">
                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-2">
                            <div class="fw-bold">
                                <i class="fa-solid fa-filter me-1"></i> Filters
                                @if($typeLabel || $dateFrom || $dateTo || $q)
                                    <span class="text-muted small ms-2">
                                        <i class="fa-regular fa-circle-dot me-1"></i>
                                        Active
                                    </span>
                                @endif
                            </div>

                            <div class="d-flex gap-2">
                                <div class="btn-group" role="group" aria-label="Language">
                                    <button type="submit" name="lang" value="en"
                                        class="btn btn-sm {{ $lang==='en' ? 'btn-dark' : 'btn-outline-dark' }}">
                                        <i class="fa-solid fa-language me-1"></i> EN
                                    </button>
                                    <button type="submit" name="lang" value="ps"
                                        class="btn btn-sm {{ $lang==='ps' ? 'btn-dark' : 'btn-outline-dark' }}">
                                        PS
                                    </button>
                                    <button type="submit" name="lang" value="dr"
                                        class="btn btn-sm {{ $lang==='dr' ? 'btn-dark' : 'btn-outline-dark' }}">
                                        DR
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="row g-2">
                            <div class="col-md-5">
                                <label class="form-label">Account</label>
                                <select class="form-control" name="account" required>
                                    @php
                                        $grouped = collect($accounts)->groupBy('type');
                                        $getName = function($a) use ($lang){
                                            if($lang==='ps') return $a['title_ps'] ?? ($a['title_en'] ?? '');
                                            if($lang==='dr') return $a['title_dr'] ?? ($a['title_en'] ?? '');
                                            return $a['title_en'] ?? ($a['title_ps'] ?? '');
                                        };
                                    @endphp
                                    @foreach($grouped as $type => $list)
                                        <optgroup label="{{ $type }}">
                                            @foreach($list as $a)
                                                <option value="{{ $a['key'] }}" {{ ($filters['account'] ?? '')===$a['key'] ? 'selected' : '' }}>
                                                    {{ $a['key'] }} — {{ $getName($a) }}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                                <div class="text-muted small mt-1">
                                    <i class="fa-regular fa-lightbulb me-1"></i>
                                    Tip: choose one account to view its running balance.
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Type</label>
                                <select class="form-control" name="type">
                                    <option value="">All</option>
                                    @foreach(['Asset','Liability','Equity','Income','Expense'] as $t)
                                        <option value="{{ $t }}" {{ ($filters['type'] ?? '')===$t?'selected':'' }}>{{ $t }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">From</label>
                                <input type="date" class="form-control" name="date_from" value="{{ $dateFrom }}">
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">To</label>
                                <input type="date" class="form-control" name="date_to" value="{{ $dateTo }}">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Search Narration</label>
                                <div class="input-group">
                                    <span class="input-group-text" style="border-radius:12px 0 0 12px;">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </span>
                                    <input class="form-control" name="q" value="{{ $q }}" placeholder="title/details">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">Per Page</label>
                                <select class="form-control" name="per_page">
                                    @foreach([25,50,100,200] as $pp)
                                        <option value="{{ $pp }}" {{ $perPage===$pp?'selected':'' }}>{{ $pp }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-2 gap-2">
                                <button class="btn btn-dark" type="submit">
                                    <i class="fa-solid fa-bolt me-1"></i> Apply
                                </button>
                                <a class="btn btn-light" href="{{ route('reporting.general_ledger.index') }}">
                                    <i class="fa-solid fa-rotate-left me-1"></i> Reset
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- TABLE --}}
            <div class="gl-card">
                <div class="card-body table-responsive p-0">
                    <table class="table table-hover mb-0 gl-table">
                        <thead>
                            <tr>
                                <th style="width:120px;"><i class="fa-regular fa-calendar-days me-1"></i>Date</th>
                                <th style="width:140px;"><i class="fa-solid fa-hashtag me-1"></i>Ref</th>
                                <th><i class="fa-regular fa-note-sticky me-1"></i>Description</th>
                                <th style="width:150px;"><i class="fa-solid fa-cubes me-1"></i>Module</th>
                                <th class="text-end" style="width:160px;"><i class="fa-solid fa-arrow-down me-1"></i>Debit</th>
                                <th class="text-end" style="width:160px;"><i class="fa-solid fa-arrow-up me-1"></i>Credit</th>
                                <th class="text-end" style="width:190px;"><i class="fa-solid fa-chart-line me-1"></i>Running</th>
                            </tr>
                        </thead>

                        <tbody>
                            {{-- opening --}}
                            <tr style="background: rgba(17,24,39,.04);">
                                <td colspan="6" class="fw-bold">
                                    <i class="fa-solid fa-play me-2"></i> Opening Balance
                                </td>
                                <td class="text-end">
                                    <span class="gl-balance">{{ number_format((float)$opening, 2) }}</span>
                                </td>
                            </tr>

                            @forelse($entries as $e)
                                @php
                                    $meta = $modMeta($e->module ?? '');
                                @endphp
                                <tr>
                                    <td>
                                        <div class="small fw-bold">{{ $e->date }}</div>
                                        <div class="text-muted" style="font-size:12px;">
                                            {{-- <i class="fa-regular fa-clock me-1"></i>{{ $e->created_at  }} --}}
                                        </div>
                                    </td>

                                    <td>
                                        <span class="gl-ref">{{ $e->ref }}</span>
                                    </td>

                                    <td>
                                        <div class="fw-bold" style="line-height:1.2;">
                                            {{ $e->description }}
                                        </div>
                                        @if(!empty($e->narration))
                                            <div class="text-muted small mt-1">{{ $e->narration }}</div>
                                        @endif
                                    </td>

                                    <td>
                                        <span class="badge {{ $meta['cls'] }} px-2 py-2" style="border-radius:12px;">
                                            <i class="fa-solid {{ $meta['icon'] }} me-1"></i>
                                            {{ $e->module }}
                                        </span>
                                    </td>

                                    <td class="text-end">
                                        {{ number_format((float)$e->debit, 2) }}
                                    </td>
                                    <td class="text-end">
                                        {{ number_format((float)$e->credit, 2) }}
                                    </td>

                                    <td class="text-end">
                                        <span class="gl-balance">{{ number_format((float)($e->running ?? 0), 2) }}</span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-5">
                                        <i class="fa-regular fa-folder-open fa-2x mb-2"></i>
                                        <div class="fw-bold">No entries found</div>
                                        <div class="small">Try changing date range or search text.</div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>

                        <tfoot>
                            <tr style="background: rgba(17,24,39,.04);">
                                <th colspan="4" class="text-end">Totals</th>
                                <th class="text-end">{{ number_format($sumDebit, 2) }}</th>
                                <th class="text-end">{{ number_format($sumCredit, 2) }}</th>
                                <th class="text-end">
                                    <span class="gl-balance">{{ number_format((float)$closing, 2) }}</span>
                                </th>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="p-3 d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div class="text-muted small">
                            <i class="fa-regular fa-file-lines me-1"></i>
                            Showing <b>{{ $entries->firstItem() ?? 0 }}</b>–<b>{{ $entries->lastItem() ?? 0 }}</b>
                            of <b>{{ $entries->total() ?? 0 }}</b> entries
                        </div>
                        <div>
                            {{-- {{ $entries->links() }} --}}
                             {{ $entries->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>
@endsection