@extends('layout.master')

@section('title', 'Expense Transaction Report')
@section('content')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css">

    <style>
        /* ─── Badges ─────────────────────────────── */
        .et-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            letter-spacing: .4px
        }

        .et-badge-pkr {
            background: #dbeafe;
            color: #1d4ed8
        }

        .et-badge-usd {
            background: #ecfdf5;
            color: #059669
        }

        .et-badge-self {
            background: #f1f5f9;
            color: #475569
        }

        .et-badge-supplier {
            background: #fef3c7;
            color: #b45309
        }

        /* ─── Stat cards ──────────────────────────── */
        .et-stat {
            border-radius: 14px;
            border: 1px solid #f1f5f9;
            background: #fff;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            gap: 16px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
            transition: box-shadow .2s
        }

        .et-stat:hover {
            box-shadow: 0 4px 16px rgba(79, 70, 229, .12)
        }

        .et-stat-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .et-stat-label {
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .et-stat-value {
            font-size: 22px;
            font-weight: 800;
            color: #1e1b4b;
            line-height: 1
        }

        /* ─── Table ───────────────────────────────── */
        .et-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .7px;
            color: #94a3b8;
            font-weight: 700;
            border-bottom: 2px solid #f1f5f9;
            padding: 14px 12px;
            white-space: nowrap;
            background: #fafbff
        }

        .et-table thead th:first-child {
            padding-left: 24px
        }

        .et-table thead th:last-child {
            padding-right: 24px
        }

        .et-table tbody td {
            padding: 13px 12px;
            vertical-align: middle;
            font-size: 13.5px;
            color: #374151;
            border-bottom: 1px solid #f8fafc
        }

        .et-table tbody td:first-child {
            padding-left: 24px
        }

        .et-table tbody td:last-child {
            padding-right: 24px
        }

        .et-table tbody tr:hover {
            background: #f8faff
        }

        .et-table tfoot td {
            padding: 14px 12px;
            font-weight: 700;
            background: #fafbff;
            border-top: 2px solid #e2e8f0
        }

        .et-table tfoot td:first-child {
            padding-left: 24px
        }

        .et-table tfoot td:last-child {
            padding-right: 24px
        }

        /* ─── Buttons ─────────────────────────────── */
        .et-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 20px;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: opacity .2s, transform .1s;
            text-decoration: none
        }

        .et-btn:hover {
            opacity: .88;
            transform: translateY(-1px);
            color: #fff
        }

        .et-btn:active {
            transform: translateY(0)
        }

        .et-btn-filter {
            background: #fff;
            color: #374151 !important;
            border: 1.5px solid #e2e8f0
        }

        .et-btn-filter:hover {
            border-color: #4f46e5;
            color: #4f46e5 !important;
            opacity: 1
        }

        .et-btn-pdf {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #fff
        }

        .et-btn-excel {
            background: linear-gradient(135deg, #16a34a, #15803d);
            color: #fff
        }

        .et-btn-print {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: #fff
        }

        .et-accent {
            height: 4px;
            background: linear-gradient(90deg, #4f46e5, #7c3aed, #a855f7)
        }

        .et-empty {
            text-align: center;
            padding: 60px 20px
        }

        .et-empty i {
            font-size: 48px;
            color: #cbd5e1
        }

        .et-empty p {
            color: #94a3b8;
            margin-top: 12px;
            font-size: 14px
        }

        /* ─── PRINT ───────────────────────────────── */
        .print-header {
            display: none
        }

        @media print {

            .left-side-menu,
            .sidebar-enable,
            .navbar-custom,
            .topbar,
            .footer,
            .page-title-box,
            .no-print,
            button,
            .et-btn {
                display: none !important
            }

            body,
            .content-page,
            .content,
            .wrapper,
            .container-fluid {
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
                width: 100% !important
            }

            .content-page {
                margin-left: 0 !important
            }

            .print-header {
                display: block !important;
                margin-bottom: 12px;
                padding-bottom: 10px;
                border-bottom: 2px solid #4f46e5
            }

            .print-header h5 {
                color: #1e1b4b;
                font-size: 16px;
                font-weight: 800;
                margin: 0 0 4px
            }

            .print-header p {
                color: #64748b;
                font-size: 11px;
                margin: 0
            }

            .et-badge,
            .et-stat-icon,
            .et-accent {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important
            }

            .et-stat {
                box-shadow: none;
                border: 1px solid #e2e8f0;
                break-inside: avoid
            }

            .et-table thead th {
                background: #f8fafc !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important
            }

            .et-table tbody tr:nth-child(even) td {
                background: #f9f9ff !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important
            }

            .et-table tfoot td {
                background: #fafbff !important;
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important
            }

            .card {
                box-shadow: none !important;
                border: 1px solid #e2e8f0 !important
            }

            .row.g-3 {
                page-break-inside: avoid
            }
        }
    </style>

    @php
        // har transaction ka PKR Equivalent nikalo:
        // - PKR entry: amount khud hi PKR hai (rate hamesha 1)
        // - USD entry: amount * uska apna stored exchange_rate
        $transactions = $transactions->map(function ($txn) {
            $txn->pkr_equivalent = $txn->currency === 'USD' ? $txn->amount * ($txn->exchange_rate ?: 0) : $txn->amount;
            return $txn;
        });

        $grandTotalPkr = $transactions->sum('pkr_equivalent');
        $totalPkrEntries = $transactions->where('currency', 'PKR')->sum('amount');
        $totalUsdEntries = $transactions->where('currency', 'USD')->sum('amount');
        $selfCount = $transactions->whereNull('supplier_id')->count();
        $supplierCount = $transactions->whereNotNull('supplier_id')->count();
    @endphp

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">

                {{-- Print-only header --}}
                <div class="print-header">
                    <h5>Expense Transaction Report</h5>
                    <p>
                        @if (!empty($filters['currency']))
                            Currency: {{ $filters['currency'] }}
                        @else
                            Currency: All
                        @endif
                        @if (!empty($filters['expense_for']))
                            &bull; For: {{ ucfirst($filters['expense_for']) }}
                        @endif
                        @if (!empty($filters['from_date']))
                            &bull; From: {{ \Carbon\Carbon::parse($filters['from_date'])->format('d M Y') }}
                        @endif
                        @if (!empty($filters['to_date']))
                            &bull; To: {{ \Carbon\Carbon::parse($filters['to_date'])->format('d M Y') }}
                        @endif
                        &bull; Printed: {{ now()->format('d M Y, h:i A') }}
                    </p>
                </div>

                {{-- Page header --}}
                <div class="d-flex flex-wrap align-items-center justify-content-between mb-4 gap-3 no-print">
                    <div>
                        <h4 class="fw-bold mb-1" style="color:#1e1b4b">Expense Transaction Report</h4>
                        <p class="mb-0" style="font-size:13px;color:#64748b">
                            @if (!empty($filters['currency']))
                                <span
                                    class="et-badge {{ $filters['currency'] == 'USD' ? 'et-badge-usd' : 'et-badge-pkr' }}">
                                    {{ $filters['currency'] }}
                                </span>
                            @else
                                <span class="et-badge et-badge-pkr">PKR</span>
                                <span class="et-badge et-badge-usd">USD</span>
                            @endif
                            @if (!empty($filters['expense_for']))
                                <span
                                    class="et-badge {{ $filters['expense_for'] == 'supplier' ? 'et-badge-supplier' : 'et-badge-self' }}">
                                    {{ ucfirst($filters['expense_for']) }}
                                </span>
                            @endif
                            @if (!empty($filters['from_date']) || !empty($filters['to_date']))
                                &nbsp;&bull;&nbsp;
                                {{ !empty($filters['from_date']) ? \Carbon\Carbon::parse($filters['from_date'])->format('d M Y') : 'Start' }}
                                &nbsp;→&nbsp;
                                {{ !empty($filters['to_date']) ? \Carbon\Carbon::parse($filters['to_date'])->format('d M Y') : 'End' }}
                            @endif
                        </p>
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="{{ route('expense.transaction.report.filter') }}" class="et-btn et-btn-filter">
                            <i class="ri-filter-3-line"></i> Change Filter
                        </a>
                        <button onclick="exportExcel()" class="et-btn et-btn-excel">
                            <i class="ri-file-excel-2-line"></i> Export Excel
                        </button>
                        <button onclick="exportPDF()" class="et-btn et-btn-pdf">
                            <i class="ri-file-pdf-line"></i> Export PDF
                        </button>
                        <button onclick="window.print()" class="et-btn et-btn-print">
                            <i class="ri-printer-line"></i> Print
                        </button>
                    </div>
                </div>

                {{-- Summary cards --}}
                <div class="row g-3 mb-4">
                    <div class="col-6 col-xl-3">
                        <div class="et-stat">
                            <div class="et-stat-icon" style="background:#ede9fe"><i class="ri-receipt-line fs-5"
                                    style="color:#7c3aed"></i></div>
                            <div>
                                <div class="et-stat-label">Transactions</div>
                                <div class="et-stat-value">{{ $transactions->count() }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-xl-3">
                        <div class="et-stat">
                            <div class="et-stat-icon" style="background:#ede9fe"><i class="ri-money-dollar-circle-line fs-5"
                                    style="color:#7c3aed"></i></div>
                            <div>
                                <div class="et-stat-label">Grand Total (PKR)</div>
                                <div class="et-stat-value">{{ number_format($grandTotalPkr, 2) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-xl-3">
                        <div class="et-stat">
                            <div class="et-stat-icon" style="background:#f1f5f9"><i class="ri-user-line fs-5"
                                    style="color:#475569"></i></div>
                            <div>
                                <div class="et-stat-label">Self Entries</div>
                                <div class="et-stat-value">{{ $selfCount }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-xl-3">
                        <div class="et-stat">
                            <div class="et-stat-icon" style="background:#fef3c7"><i class="ri-truck-line fs-5"
                                    style="color:#b45309"></i></div>
                            <div>
                                <div class="et-stat-label">Supplier Entries</div>
                                <div class="et-stat-value">{{ $supplierCount }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Table --}}
                <div class="card border-0" style="border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07)">
                    <div class="et-accent"></div>
                    <div class="card-body p-0">
                        @if ($transactions->isEmpty())
                            <div class="et-empty">
                                <i class="ri-inbox-2-line"></i>
                                <p>No transactions found for the selected filters.</p>
                                <a href="{{ route('expense.transaction.report.filter') }}"
                                    class="et-btn et-btn-filter no-print" style="display:inline-flex;margin-top:12px">
                                    <i class="ri-filter-3-line"></i> Try Different Filters
                                </a>
                            </div>
                        @else
                            <div class="table-responsive">
                                <table class="table et-table mb-0" id="reportTable">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Expense Category</th>
                                            <th>Expense For</th>
                                            <th>Currency</th>
                                            <th>Reference No.</th>
                                            <th>Narration</th>
                                            <th class="text-end">Amount</th>
                                            <th class="text-end">PKR Equivalent</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($transactions as $i => $txn)
                                            @php
                                                $curBadge = $txn->currency === 'USD' ? 'et-badge-usd' : 'et-badge-pkr';
                                                $isSupplier = !is_null($txn->supplier_id);
                                            @endphp
                                            <tr>
                                                <td class="text-muted fw-medium">{{ $i + 1 }}</td>
                                                <td>{{ \Carbon\Carbon::parse($txn->date)->format('d M Y') }}</td>
                                                <td class="fw-medium">{{ $txn->expense->name ?? '—' }}</td>
                                                <td>
                                                    @if ($isSupplier)
                                                        <span class="et-badge et-badge-supplier">
                                                            {{ $txn->supplier->name ?? 'Supplier' }}
                                                        </span>
                                                    @else
                                                        <span class="et-badge et-badge-self">Self</span>
                                                    @endif
                                                </td>
                                                <td><span class="et-badge {{ $curBadge }}">{{ $txn->currency }}</span>
                                                </td>
                                                <td class="text-muted">{{ $txn->reference_no ?: '—' }}</td>
                                                <td class="text-muted">{{ $txn->description ?: '—' }}</td>
                                                <td class="text-end fw-bold" style="color:#374151">
                                                    {{ number_format($txn->amount, 2) }} {{ $txn->currency }}
                                                    @if ($txn->currency === 'USD')
                                                        <div style="font-size:10.5px;color:#94a3b8;font-weight:500">
                                                            Rate: {{ number_format($txn->exchange_rate, 2) }}
                                                        </div>
                                                    @endif
                                                </td>
                                                <td class="text-end fw-bold" style="color:#1d4ed8">
                                                    {{ number_format($txn->pkr_equivalent, 2) }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="8" class="text-end" style="color:#1d4ed8;font-size:14px">
                                                Grand Total (PKR Equivalent)</td>
                                            <td class="text-end" style="color:#1d4ed8;font-size:16px">
                                                {{ number_format($grandTotalPkr, 2) }}</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        /* ── PHP data passed to JS ─────────────────────────── */
        const REPORT = {
            title: 'Expense Transaction Report',
            currency: '{{ !empty($filters['currency']) ? $filters['currency'] : 'All' }}',
            expenseFor: '{{ !empty($filters['expense_for']) ? ucfirst($filters['expense_for']) : 'All' }}',
            fromDate: '{{ !empty($filters['from_date']) ? \Carbon\Carbon::parse($filters['from_date'])->format('d M Y') : '' }}',
            toDate: '{{ !empty($filters['to_date']) ? \Carbon\Carbon::parse($filters['to_date'])->format('d M Y') : '' }}',
            summary: {
                transactions: {{ $transactions->count() }},
                grandTotalPkr: {{ $grandTotalPkr }},
                totalPkrEntries: {{ $totalPkrEntries }},
                totalUsdEntries: {{ $totalUsdEntries }},
                selfCount: {{ $selfCount }},
                supplierCount: {{ $supplierCount }},
            },
            rows: [
                @foreach ($transactions as $i => $txn)
                    {
                        no: {{ $i + 1 }},
                        date: '{{ \Carbon\Carbon::parse($txn->date)->format('d M Y') }}',
                        category: '{{ addslashes($txn->expense->name ?? '—') }}',
                        expenseFor: '{{ $txn->supplier_id ? addslashes($txn->supplier->name ?? 'Supplier') : 'Self' }}',
                        currency: '{{ $txn->currency }}',
                        ref: '{{ addslashes($txn->reference_no ?: '—') }}',
                        narration: '{{ addslashes($txn->description ?: '—') }}',
                        amount: {{ $txn->amount }},
                        amountFmt: '{{ number_format($txn->amount, 2) }} {{ $txn->currency }}',
                        pkrEquivalent: {{ $txn->pkr_equivalent }},
                        pkrEquivalentFmt: '{{ number_format($txn->pkr_equivalent, 2) }}',
                    },
                @endforeach
            ],
            grandTotalPkrFmt: '{{ number_format($grandTotalPkr, 2) }}',
            filename: 'expense-transaction-report-{{ now()->format('Y-m-d') }}'
        };

        /* ── PDF Export ─────────────────────────────────────── */
        function exportPDF() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF({
                orientation: 'landscape',
                unit: 'pt',
                format: 'a4'
            });
            const W = doc.internal.pageSize.width;

            doc.setFillColor(79, 70, 229);
            doc.rect(0, 0, W, 36, 'F');

            doc.setFont('helvetica', 'bold');
            doc.setFontSize(14);
            doc.setTextColor(255, 255, 255);
            doc.text('Expense Transaction Report', 30, 23);

            doc.setFont('helvetica', 'normal');
            doc.setFontSize(8);
            doc.setTextColor(100, 116, 139);
            let metaParts = ['Currency: ' + REPORT.currency, 'For: ' + REPORT.expenseFor];
            if (REPORT.fromDate) metaParts.push('From: ' + REPORT.fromDate);
            if (REPORT.toDate) metaParts.push('To: ' + REPORT.toDate);
            metaParts.push('Generated: ' + new Date().toLocaleDateString('en-PK', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            }));
            doc.text(metaParts.join('   |   '), 30, 50);

            doc.setFontSize(8);
            doc.setTextColor(55, 65, 81);
            let sumText =
                `Transactions: ${REPORT.summary.transactions}   |   Grand Total PKR: ${REPORT.summary.grandTotalPkr.toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2})}   |   Self: ${REPORT.summary.selfCount}   |   Supplier: ${REPORT.summary.supplierCount}`;
            doc.text(sumText, 30, 63);

            doc.autoTable({
                startY: 75,
                head: [
                    ['#', 'Date', 'Expense Category', 'Expense For', 'Currency', 'Reference No.', 'Narration',
                        'Amount', 'PKR Equivalent'
                    ]
                ],
                body: REPORT.rows.map(r => [r.no, r.date, r.category, r.expenseFor, r.currency, r.ref, r
                    .narration, r.amountFmt, r.pkrEquivalentFmt
                ]),
                foot: [
                    ['', '', '', '', '', '', '', 'Grand Total (PKR)', REPORT.grandTotalPkrFmt]
                ],
                headStyles: {
                    fillColor: [79, 70, 229],
                    textColor: 255,
                    fontSize: 8,
                    fontStyle: 'bold'
                },
                footStyles: {
                    fillColor: [248, 250, 252],
                    textColor: [79, 70, 229],
                    fontStyle: 'bold',
                    halign: 'right'
                },
                bodyStyles: {
                    fontSize: 8.5,
                    textColor: [55, 65, 81]
                },
                columnStyles: {
                    7: {
                        halign: 'right'
                    },
                    8: {
                        halign: 'right'
                    }
                },
                alternateRowStyles: {
                    fillColor: [248, 250, 255]
                },
                margin: {
                    left: 30,
                    right: 30
                },
                showFoot: 'lastPage',
                didDrawPage(data) {
                    doc.setFontSize(7);
                    doc.setTextColor(150);
                    doc.text('Page ' + data.pageNumber, W - 50, doc.internal.pageSize.height - 15);
                }
            });

            doc.save(REPORT.filename + '.pdf');
        }

        /* ── Excel Export ───────────────────────────────────── */
        function exportExcel() {
            const wb = XLSX.utils.book_new();

            const data = [];
            data.push([REPORT.title]);
            data.push([]);
            data.push(['Currency Filter', REPORT.currency]);
            data.push(['Expense For Filter', REPORT.expenseFor]);
            if (REPORT.fromDate) data.push(['From Date', REPORT.fromDate]);
            if (REPORT.toDate) data.push(['To Date', REPORT.toDate]);
            data.push(['Generated', new Date().toLocaleDateString('en-PK', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            })]);
            data.push([]);
            data.push(['─── Summary ───────────────────']);
            data.push(['Total Transactions', REPORT.summary.transactions]);
            data.push(['Grand Total (PKR Equivalent)', REPORT.summary.grandTotalPkr]);
            data.push(['PKR Entries Total', REPORT.summary.totalPkrEntries]);
            data.push(['USD Entries Total', REPORT.summary.totalUsdEntries]);
            data.push(['Self Entries', REPORT.summary.selfCount]);
            data.push(['Supplier Entries', REPORT.summary.supplierCount]);
            data.push([]);

            data.push(['#', 'Date', 'Expense Category', 'Expense For', 'Currency', 'Reference No.', 'Narration',
                'Amount', 'PKR Equivalent'
            ]);

            REPORT.rows.forEach(r => data.push([
                r.no, r.date, r.category, r.expenseFor, r.currency, r.ref, r.narration, r.amount, r
                .pkrEquivalent
            ]));

            data.push(['', '', '', '', '', '', '', 'Grand Total (PKR)', REPORT.summary.grandTotalPkr]);

            const ws = XLSX.utils.aoa_to_sheet(data);

            ws['!cols'] = [{
                    wch: 5
                }, {
                    wch: 14
                }, {
                    wch: 22
                },
                {
                    wch: 16
                }, {
                    wch: 10
                }, {
                    wch: 18
                }, {
                    wch: 30
                }, {
                    wch: 16
                }, {
                    wch: 16
                }
            ];

            const headerRowIdx = data.findIndex(r => r[0] === '#');

            if (ws['A1']) {
                ws['A1'].s = {
                    font: {
                        bold: true,
                        sz: 14,
                        color: {
                            rgb: '1E1B4B'
                        }
                    }
                };
            }

            ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'].forEach(col => {
                const cell = ws[col + (headerRowIdx + 1)];
                if (cell) {
                    cell.s = {
                        font: {
                            bold: true,
                            color: {
                                rgb: 'FFFFFF'
                            }
                        },
                        fill: {
                            fgColor: {
                                rgb: '4F46E5'
                            }
                        },
                        alignment: {
                            horizontal: 'center'
                        }
                    };
                }
            });

            const lastRow = data.length;
            ['H', 'I'].forEach(col => {
                const cell = ws[col + lastRow];
                if (cell) {
                    cell.s = {
                        font: {
                            bold: true,
                            color: {
                                rgb: '4F46E5'
                            }
                        }
                    };
                }
            });

            XLSX.utils.book_append_sheet(wb, ws, 'Report');
            XLSX.writeFile(wb, REPORT.filename + '.xlsx');
        }
    </script>

@endsection