@extends('garage.layouts.app')

@section('title', 'Sub-ledger statement')

@section('content')
@php
    $bal = 0.0;
    $totalDr = 0.0;
    $totalCr = 0.0;
    $name = trim(($sub->sub_code ? $sub->sub_code.' · ' : '').($sub->title ?? 'Sub-ledger'));
    $parent = trim(($sub->customer_ledger_code ? $sub->customer_ledger_code.' · ' : '').($sub->customer_ledger_name ?? ''));
    $print = request()->boolean('print');
    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';
    $runBal = 0.0;
@endphp

<style>
    .sls-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.18rem .55rem;border:1px solid #e5e7eb;border-radius:999px;background:#fff;font-size:.82rem}
    .sls-chip .k{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
    .sls-chip .v{font-weight:700;color:#0f172a}
    .sls-table thead th,.sls-table tfoot th,.sls-table tfoot td{padding:.32rem .45rem}
    .sls-table tbody td{padding:.12rem .3rem;line-height:1.2;font-size:.8rem}
    .sls-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; }
        .sls-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-car-front me-2 text-primary"></i>Sub-ledger statement</h1>
            <div class="sls-sub">{{ $name }}</div>
            @if($parent !== '')
                <div class="sls-sub">Parent ledger: {{ $parent }}</div>
            @endif
            <div class="d-flex flex-wrap gap-2 mt-2">
                <span class="sls-chip"><span class="k">From</span><span class="v">{{ $from ?: '—' }}</span></span>
                <span class="sls-chip"><span class="k">To</span><span class="v">{{ $to ?: '—' }}</span></span>
                <span class="sls-chip"><span class="k">Total Dr</span><span class="v text-success">{{ number_format($totalDr, 2) }}</span></span>
                <span class="sls-chip"><span class="k">Total Cr</span><span class="v text-danger">{{ number_format($totalCr, 2) }}</span></span>
                <span class="sls-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.sub-ledger', $sub->id) }}">Reset</a>
            <a class="btn btn-sm btn-outline-success" href="{{ route('garage.ledger-reports.sub-ledger', [$sub->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.sub-ledger', $sub->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>

    <div class="table-responsive border rounded bg-white grg-stmt-scroll">
        <table class="table table-sm table-hover mb-0 sls-table align-middle grg-stmt-table" id="sub-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>Ledger</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);
                        $ledgerLine = trim(($r->ledger_code ? $r->ledger_code.' · ' : '').($r->ledger_name ?? ''));
                    @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 class="small">{{ $ledgerLine !== '' ? $ledgerLine : '—' }}</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">{{ $r->narration ?: '—' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="9" class="text-center text-muted py-4">No transactions.</td></tr>
                @endforelse
            </tbody>
            @if(count($rows))
                <tfoot class="table-light">
                    <tr>
                        <th colspan="5" 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($closingAbs, 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('sub-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) {
                        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) ($sub->sub_code ?? '')) }} {{ addslashes((string) ($sub->title ?? 'Sub-ledger')) }}".trim();
                var from = "{{ addslashes((string) ($from ?? '')) }}";
                var to = "{{ addslashes((string) ($to ?? '')) }}";
                var subtitle = [from ? ("From: " + from) : "", to ? ("To: " + to) : ""].filter(Boolean).join("   ");

                var jsPDF = window.jspdf && window.jspdf.jsPDF ? window.jspdf.jsPDF : null;
                if (!jsPDF) return;

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

                var startY = subtitle ? 84 : 78;

                var foot = data.foot && data.foot.length ? [data.foot] : undefined;
                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: [data.headers],
                    body: data.rows,
                    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' },
                    columnStyles: {
                        5: { halign: 'right' }, // Dr
                        6: { halign: 'right' }, // Cr
                        7: { halign: 'right' }, // Balance
                    },
                    margin: { left: 40, right: 40 },
                });

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