@extends('garage.layouts.app')

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

@section('content')
@php
    $bal = 0.0; // Dr positive, Cr negative (net)
    $totalDr = 0.0;
    $totalCr = 0.0;
    $print = request()->boolean('print');
@endphp

<style>
    .ls-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.18rem .55rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:.82rem}
    .ls-chip .k{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
    .ls-chip .v{font-weight:700;color:#0f172a}
    .ls-table thead th,.ls-table tfoot th,.ls-table tfoot td{padding:.32rem .45rem}
    .ls-table tbody td{padding:.12rem .3rem;line-height:1.2;font-size:.8rem}
    .ls-sub{font-size:.78rem;color:#64748b}
    @include('garage.reports.partials.statement-sticky-table-styles')

    @media print {
        body { background: #fff !important; }
        .btn, form, .top-header, .sidebar { display: none !important; }
        .container-fluid { padding: 0 !important; }
        .table { font-size: 11px; }
        a { text-decoration: none !important; color: inherit !important; }
        .badge { border: 1px solid #cbd5e1 !important; color: #0f172a !important; background: #fff !important; }
        .ls-chip { border-color: #cbd5e1 !important; }
        .table-responsive { overflow: visible !important; }
    }
</style>

<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-1"><i class="bi bi-journal-text me-2 text-primary"></i>Ledger detail</h1>
            <div class="ls-sub">
                <a href="{{ route('garage.ledgers.simple') }}" class="text-decoration-none text-muted small">Ledgers</a>
                <span class="text-muted"> / </span>
                <span class="fw-semibold">{{ $ledger->name }}</span>
                @if($ledger->code) <span class="text-muted">({{ $ledger->code }})</span> @endif
            </div>
            <div class="d-flex flex-wrap gap-2 mt-2">
                <span class="ls-chip"><span class="k">Type</span><span class="v">{{ $ledger->ledger_type ?? '—' }}</span></span>
                <span class="ls-chip"><span class="k">From</span><span class="v">{{ $from ?: '—' }}</span></span>
                <span class="ls-chip"><span class="k">To</span><span class="v">{{ $to ?: '—' }}</span></span>
                @php
                    // Compute totals/closing balance for header summary (same as table).
                    foreach ($rows as $rr) {
                        $d = $rr->transaction_type === 'debit' ? (float) $rr->amount : 0.0;
                        $c = $rr->transaction_type === 'credit' ? (float) $rr->amount : 0.0;
                        $totalDr += $d;
                        $totalCr += $c;
                        $bal += ($d - $c);
                    }
                    $closingAbs = abs($bal);
                    $closingSide = $bal >= 0 ? 'Dr' : 'Cr';
                @endphp
                <span class="ls-chip"><span class="k">Total Dr</span><span class="v text-success">{{ number_format($totalDr, 2) }}</span></span>
                <span class="ls-chip"><span class="k">Total Cr</span><span class="v text-danger">{{ number_format($totalCr, 2) }}</span></span>
                <span class="ls-chip"><span class="k">Closing</span><span class="v {{ $bal >= 0 ? 'text-success' : 'text-danger' }}">{{ number_format($closingAbs, 2) }} {{ $closingSide }}</span></span>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a class="btn btn-sm btn-outline-secondary" href="{{ route('garage.ledger-reports.ledger', $ledger->id) }}">Reset</a>
            <a class="btn btn-sm btn-outline-success" href="{{ route('garage.ledger-reports.ledger', [$ledger->id, 'from_date'=>$from, 'to_date'=>$to, 'export'=>'csv']) }}">Export Excel (CSV)</a>
            <button type="button" class="btn btn-sm btn-outline-danger" id="btn-export-pdf">
                Export PDF
            </button>
        </div>
    </div>

    <form method="GET" action="{{ route('garage.ledger-reports.ledger', $ledger->id) }}" class="row g-2 mb-3">
        <div class="col-auto">
            <input type="date" name="from_date" value="{{ $from }}" class="form-control form-control-sm">
        </div>
        <div class="col-auto">
            <input type="date" name="to_date" value="{{ $to }}" class="form-control form-control-sm">
        </div>
        <div class="col-auto">
            <button class="btn btn-sm btn-outline-primary">Apply</button>
        </div>
    </form>

    @php
        // Reset running balance for row-by-row display (we already used $bal above for closing).
        $runBal = 0.0;
    @endphp

    <div class="table-responsive border rounded bg-white grg-stmt-scroll">
        <table class="table table-sm table-hover mb-0 ls-table align-middle grg-stmt-table" id="ledger-statement-table">
            <thead class="table-light">
                <tr>
                    <th style="width:110px;">Date</th>
                    <th style="width:140px;">Voucher</th>
                    <th style="width:90px;">Type</th>
                    <th style="width:140px;">Ref</th>
                    <th style="width:140px;" class="text-end">Dr</th>
                    <th style="width:140px;" class="text-end">Cr</th>
                    <th style="width:160px;" class="text-end">Balance</th>
                    <th>Narration</th>
                </tr>
            </thead>
            <tbody>
                @forelse($rows as $r)
                    @php
                        $dr = $r->transaction_type === 'debit' ? (float) $r->amount : 0.0;
                        $cr = $r->transaction_type === 'credit' ? (float) $r->amount : 0.0;
                        $runBal += ($dr - $cr);
                        $sub = trim(($r->sub_ledger_code ?? '').' '.($r->sub_ledger_title ?? ''));
                    @endphp
                    <tr>
                        <td class="text-muted">{{ $r->voucher_date }}</td>
                        <td class="font-monospace">
                            <a href="{{ route('garage.vouchers.show', $r->voucher_id) }}" class="text-decoration-none">{{ $r->voucher_no }}</a>
                        </td>
                        <td><span class="badge bg-secondary">{{ $r->voucher_type }}</span></td>
                        <td>@include('garage.reports.partials.statement-reference-cell', ['row' => $r])</td>
                        <td class="text-end text-success fw-semibold">{{ $dr ? number_format($dr, 2) : '—' }}</td>
                        <td class="text-end text-danger fw-semibold">{{ $cr ? number_format($cr, 2) : '—' }}</td>
                        <td class="text-end fw-semibold {{ $runBal >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ number_format(abs($runBal), 2) }} <span class="text-muted small">{{ $runBal >= 0 ? 'Dr' : 'Cr' }}</span>
                        </td>
                        <td class="small">
                            <div>{{ $r->narration ?: '—' }}</div>
                            @if($sub !== '')
                                <div class="ls-sub">Sub-ledger: {{ $sub }}</div>
                            @endif
                            @if(!empty($r->against_text))
                                <div class="ls-sub">Against: {{ $r->against_text }}</div>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="text-center text-muted py-4">No transactions.</td></tr>
                @endforelse
            </tbody>
            @if(count($rows))
                <tfoot class="table-light">
                    <tr>
                        <th colspan="4" class="text-end">Totals</th>
                        <th class="text-end text-success">{{ number_format($totalDr, 2) }}</th>
                        <th class="text-end text-danger">{{ number_format($totalCr, 2) }}</th>
                        <th class="text-end {{ $bal >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ number_format(abs($bal), 2) }} <span class="text-muted small">{{ $closingSide }}</span>
                        </th>
                        <th class="text-muted small">Closing balance</th>
                    </tr>
                </tfoot>
            @endif
        </table>
    </div>
</div>

@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf-autotable@3.8.4/dist/jspdf.plugin.autotable.min.js"></script>
    <script>
        (function () {
            var btn = document.getElementById('btn-export-pdf');
            var table = document.getElementById('ledger-statement-table');
            if (!btn || !table) return;

            function textOf(el) {
                return (el && (el.innerText || el.textContent) ? (el.innerText || el.textContent) : '').trim();
            }

            function getTableData() {
                var headers = Array.from(table.querySelectorAll('thead th')).map(function (th) {
                    return textOf(th);
                });

                var rows = Array.from(table.querySelectorAll('tbody tr')).map(function (tr) {
                    return Array.from(tr.querySelectorAll('td')).map(function (td) {
                        // Keep line breaks for narration/sub/against
                        return (td.innerText || td.textContent || '').replace(/\r/g, '').trim();
                    });
                });

                var foot = [];
                var tfootRow = table.querySelector('tfoot tr');
                if (tfootRow) {
                    foot = Array.from(tfootRow.querySelectorAll('th,td')).map(function (cell) {
                        return (cell.innerText || cell.textContent || '').replace(/\r/g, '').trim();
                    });
                }

                return { headers: headers, rows: rows, foot: foot };
            }

            btn.addEventListener('click', function () {
                var data = getTableData();

                var title = "{{ addslashes((string) ($ledger->name ?? 'Ledger')) }}";
                var code = "{{ addslashes((string) ($ledger->code ?? '')) }}";
                var from = "{{ addslashes((string) ($from ?? '')) }}";
                var to = "{{ addslashes((string) ($to ?? '')) }}";
                var subtitle = [code ? ("Code: " + code) : "", from ? ("From: " + from) : "", to ? ("To: " + to) : ""]
                    .filter(Boolean).join("   ");

                // eslint-disable-next-line no-undef
                var jsPDF = window.jspdf && window.jspdf.jsPDF ? window.jspdf.jsPDF : null;
                if (!jsPDF || typeof window.jspdf === 'undefined') return;

                var doc = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
                doc.setFont('helvetica', 'bold');
                doc.setFontSize(14);
                doc.text('Ledger statement', 40, 36);
                doc.setFontSize(11);
                doc.text(title, 40, 54);
                doc.setFont('helvetica', 'normal');
                doc.setFontSize(9);
                if (subtitle) doc.text(subtitle, 40, 70);

                var startY = subtitle ? 84 : 78;

                var head = [data.headers];
                var body = data.rows;
                var foot = data.foot && data.foot.length ? [data.foot] : undefined;

                // Normalize footer length to header length
                if (foot && foot[0]) {
                    while (foot[0].length < data.headers.length) foot[0].push('');
                    if (foot[0].length > data.headers.length) foot[0] = foot[0].slice(0, data.headers.length);
                }

                doc.autoTable({
                    startY: startY,
                    head: head,
                    body: body,
                    foot: foot,
                    showHead: 'everyPage',
                    showFoot: foot ? 'lastPage' : 'never',
                    theme: 'grid',
                    styles: {
                        font: 'helvetica',
                        fontSize: 8,
                        cellPadding: 4,
                        overflow: 'linebreak',
                        valign: 'top',
                    },
                    headStyles: {
                        fillColor: [15, 118, 110],
                        textColor: 255,
                        fontStyle: 'bold',
                    },
                    footStyles: {
                        fillColor: [15, 118, 110],
                        textColor: 255,
                        fontStyle: 'bold',
                    },
                    columnStyles: {
                        4: { halign: 'right' }, // Dr
                        5: { halign: 'right' }, // Cr
                        6: { halign: 'right' }, // Balance
                    },
                    margin: { left: 40, right: 40 },
                });

                var safeName = (title || 'ledger').replace(/[^\w\-]+/g, '_').slice(0, 40);
                doc.save('ledger-statement-' + safeName + '.pdf');
            });
        })();
    </script>
@endpush