@extends('admin.layout.app')
@section('title', 'Laborer Ledger (Summary)')
@section('body')

    <style>
        /* ---------- Compact toolbar ---------- */
        .toolbar {
            display: flex;
            gap: .5rem;
            align-items: end;
            flex-wrap: wrap
        }

        .toolbar .form-control,
        .toolbar .form-select {
            height: calc(1.5em + .5rem + 2px);
            padding: .25rem .5rem;
            font-size: .85rem;
            line-height: 1.5
        }

        .toolbar .btn {
            padding: .25rem .55rem;
            font-size: .8rem
        }

        .toolbar label {
            font-size: .75rem;
            margin-bottom: .25rem;
            color: #6c757d
        }

        /* ---------- Table look ---------- */
        .table thead th {
            background: #f3f6fa !important;
            font-weight: 700
        }

        .table td,
        .table th {
            padding: .6rem .75rem;
            font-size: 14px;
            vertical-align: middle
        }

        .amount-pos {
            color: #1f7a3e;
            font-weight: 600
        }

        .amount-exp {
            color: #a86f00;
            font-weight: 600
        }

        .amount-bal-pos {
            color: #2a74b9;
            font-weight: 800
        }

        .amount-bal-neg {
            color: #dc3545;
            font-weight: 800
        }

        /* سرخ متن د منفي بیلانس لپاره */
        .neg-row {
            background: rgba(220, 53, 69, .08);
        }

        /* هلکی سور شالید د منفي رو لپاره */

        /* ---------- Print: SAME as screen (no shrinking) ---------- */
        @media print {
            @page {
                size: A4 landscape;
                margin: 10mm
            }

            html,
            body {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                font-size: 14px;
            }

            .container {
                max-width: 100% !important;
                width: 100% !important;
            }

            .no-print {
                display: none !important;
            }

            thead {
                display: table-header-group;
            }

            tfoot {
                display: table-footer-group;
            }

            tr,
            td,
            th {
                page-break-inside: avoid;
                break-inside: avoid;
            }

            .amount-bal-neg {
                color: #dc3545 !important;
            }

            .neg-row {
                background: rgba(220, 53, 69, .12) !important;
            }
        }
    </style>

    <div class="container py-3">

        {{-- Title --}}
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0 fw-bold">Laborer Ledger (Summary)</h5>
            <small class="text-muted">Balance = Work − (Payments + Expenses)</small>
        </div>

        {{-- Filters + Export (compact toolbar) --}}
        <form method="GET" action="{{ route('reports.laborer_ledger_full') }}" class="toolbar mb-3 no-print">
            <div class="d-flex flex-column">
                <label for="from">From</label>
                <input type="date" id="from" name="from" class="form-control" value="{{ request('from') }}">
            </div>
            <div class="d-flex flex-column">
                <label for="to">To</label>
                <input type="date" id="to" name="to" class="form-control" value="{{ request('to') }}">
            </div>
            <div class="d-flex flex-column" style="min-width:220px">
                <label for="laborer_id">Laborer</label>
                <select id="laborer_id" name="laborer_id" class="form-select">
                    <option value="">— All —</option>
                    @foreach ($laborers as $l)
                        <option value="{{ $l->id }}"
                            {{ (string) $l->id === (string) request('laborer_id') ? 'selected' : '' }}>
                            {{ $l->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="ms-auto d-flex gap-2 align-items-end">
                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter me-1"></i> Filter</button>
                <a href="{{ route('reports.laborer_ledger_full') }}" class="btn btn-outline-secondary btn-sm">Reset</a>

                {{-- Export dropdown --}}
                <div class="dropdown">
                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-file-export me-1"></i> Export
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0)" id="exportExcel">
                                <i class="fas fa-file-excel me-2 text-success"></i> Export Excel
                            </a></li>
                        <li><a class="dropdown-item" href="javascript:void(0)" id="exportCSV">
                                <i class="fas fa-file-csv me-2 text-info"></i> Export CSV
                            </a></li>
                        <li><a class="dropdown-item" href="javascript:void(0)" id="exportPDF">
                                <i class="fas fa-file-pdf me-2 text-danger"></i> Export PDF
                            </a></li>
                    </ul>
                </div>

                {{-- Print --}}
                <button type="button" onclick="window.print()" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-print"></i>
                </button>
            </div>
        </form>

        {{-- Page body --}}
        <div>
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="small text-muted">
                    <strong>Range:</strong> {{ request('from') ?: 'Start' }} — {{ request('to') ?: 'Now' }}
                    @if (request('laborer_id'))
                        <span class="ms-2">• Filter:
                            {{ optional($laborers->firstWhere('id', request('laborer_id')))->name }}</span>
                    @endif
                </div>
            </div>

            <div class="table-responsive">
                <table id="ledgerTable" class="table table-bordered table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width:54px;">#</th>
                            <th>Laborer</th>
                            <th class="text-end">Hourly Rate</th>
                            <th class="text-end">Days</th>
                            <th class="text-end">Hours</th>
                            <th class="text-end">OT Hours</th>
                            <th class="text-end">Total Work</th>
                            <th class="text-end">Payments</th>
                            <th class="text-end">Expenses</th>
                            <th class="text-end">Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $i => $r)
                            @php
                                $bal = (float) $r->balance;
                                $isNeg = $bal < 0;
                                $balClass = $isNeg ? 'amount-bal-neg' : 'amount-bal-pos';
                                $rowClass = $isNeg ? 'neg-row' : '';
                                $rate = isset($r->hourly_rate) ? $r->hourly_rate : $r->hourly_wage ?? 0;
                            @endphp
                            <tr class="{{ $rowClass }}">
                                <td>{{ $i + 1 }}</td>
                                <td class="fw-semibold">{{ $r->name }}</td>
                                <td class="text-end">{{ number_format((float) $rate, 2) }}</td>
                                <td class="text-end">{{ (int) $r->days_count }}</td>
                                <td class="text-end">{{ number_format((float) $r->total_hours, 2) }}</td>
                                <td class="text-end">{{ number_format((float) $r->total_ot_hours, 2) }}</td>
                                <td class="text-end">{{ number_format((float) $r->total_work, 2) }}</td>
                                <td class="text-end amount-pos">{{ number_format((float) $r->payment, 2) }}</td>
                                <td class="text-end amount-exp">{{ number_format((float) $r->expense, 2) }}</td>
                                <td class="text-end {{ $balClass }}">{{ number_format($bal, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="text-center text-muted py-4">No records found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        @php
                            $tbal = (float) ($totals['balance'] ?? 0);
                            $tbalClass = $tbal >= 0 ? 'amount-bal-pos' : 'amount-bal-neg';
                            $tfootRowClass = $tbal < 0 ? 'neg-row' : '';
                        @endphp
                        <tr class="{{ $tfootRowClass }}">
                            <th colspan="2" class="text-end">TOTAL</th>
                            <th class="text-end">—</th>
                            <th class="text-end">{{ (int) ($totals['days'] ?? 0) }}</th>
                            <th class="text-end">{{ number_format((float) ($totals['hours'] ?? 0), 2) }}</th>
                            <th class="text-end">{{ number_format((float) ($totals['ot_hours'] ?? 0), 2) }}</th>
                            <th class="text-end">{{ number_format((float) ($totals['work'] ?? 0), 2) }}</th>
                            <th class="text-end amount-pos">{{ number_format((float) ($totals['payment'] ?? 0), 2) }}</th>
                            <th class="text-end amount-exp">{{ number_format((float) ($totals['expense'] ?? 0), 2) }}</th>
                            <th class="text-end {{ $tbalClass }}">{{ number_format($tbal, 2) }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

    </div>

    {{-- Export Libraries --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

    <script>
        /**
         * پاک جدول د اېکسپورټ لپاره:
         * - clone د اصلي جدول
         * - یوازې ښکاره قطارونه
         * - عددي خانې normalize (کاما/سپیس لرې شي)
         */
        function getCleanLedgerTable() {
            const src = document.getElementById('ledgerTable');
            const clone = src.cloneNode(true);

            // keep only visible body rows & normalize numerics
            if (clone.tBodies.length) {
                const rows = Array.from(clone.tBodies[0].rows);
                rows.forEach(r => {
                    const hidden = r.style.display === 'none' || r.classList.contains('d-none');
                    if (hidden) {
                        r.remove();
                        return;
                    }

                    // numeric columns: 2..9
                    const numIdx = [2, 3, 4, 5, 6, 7, 8, 9];
                    numIdx.forEach(i => {
                        if (!r.cells[i]) return;
                        const txt = r.cells[i].textContent.replace(/[,\s]/g, '');
                        const n = parseFloat(txt);
                        if (!isNaN(n)) r.cells[i].textContent = n.toFixed(2);
                    });
                    // remove color classes for exports
                    r.classList.remove('neg-row');
                    for (let i = 0; i < r.cells.length; i++) {
                        r.cells[i].classList.remove('amount-pos', 'amount-exp', 'amount-bal-pos', 'amount-bal-neg',
                            'text-end');
                    }
                });
            }

            // Normalize tfoot numeric cells too
            if (clone.tFoot && clone.tFoot.rows.length) {
                const ftr = clone.tFoot.rows[0];
                for (let i = 0; i < ftr.cells.length; i++) {
                    const cell = ftr.cells[i];
                    const raw = cell.textContent.replace(/[,\s]/g, '');
                    const n = parseFloat(raw);
                    if (!isNaN(n)) cell.textContent = n.toFixed(2);
                    cell.classList.remove('amount-pos', 'amount-exp', 'amount-bal-pos', 'amount-bal-neg', 'text-end');
                }
            }

            return clone;
        }

        // Excel
        document.getElementById('exportExcel').addEventListener('click', function() {
            const clean = getCleanLedgerTable();
            const wb = XLSX.utils.table_to_book(clean, {
                sheet: 'Ledger',
                raw: true
            });
            XLSX.writeFile(wb, 'laborer_ledger_summary.xlsx'); // xlsx
        });

        // CSV (bookType=csv)
        document.getElementById('exportCSV').addEventListener('click', function() {
            const clean = getCleanLedgerTable();
            const ws = XLSX.utils.table_to_sheet(clean, {
                raw: true
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Ledger');
            XLSX.writeFile(wb, 'laborer_ledger_summary.csv', {
                bookType: 'csv'
            });
        });

        // PDF
        document.getElementById('exportPDF').addEventListener('click', function() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF('l', 'pt', 'a4'); // landscape
            doc.setFontSize(14);
            doc.text('Laborer Ledger (Summary)', 40, 40);

            // Subheader: filters
            const from = document.getElementById('from')?.value || 'Start';
            const to = document.getElementById('to')?.value || 'Now';
            const laborerSel = document.getElementById('laborer_id');
            const laborerTxt = laborerSel && laborerSel.value ? (' • ' + laborerSel.options[laborerSel
                .selectedIndex].text) : '';
            doc.setFontSize(10);
            doc.text(`Range: ${from} — ${to}${laborerTxt}`, 40, 56);

            const clean = getCleanLedgerTable();
            doc.autoTable({
                html: clean,
                startY: 70,
                styles: {
                    fontSize: 9,
                    cellPadding: 4
                },
                headStyles: {
                    fillColor: [243, 246, 250]
                },
                theme: 'striped',
                tableWidth: 'auto',
                margin: {
                    left: 40,
                    right: 40
                }
            });
            doc.save('laborer_ledger_summary.pdf');
        });
    </script>
@endsection