@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-3 shadow-sm">
        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0">Incomes</h4>
                <small class="text-muted">Payments received from companies</small>
            </div>
            <div class="d-flex gap-2">
                {{-- Export dropdown (Header) --}}
                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        <i class="fas fa-file-export me-2"></i> Export
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0)" id="exportExcel_header">
                                <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_header">
                                <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_header">
                                <i class="fas fa-file-pdf me-2 text-danger"></i> Export PDF
                            </a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="javascript:void(0)" id="print_header">
                                <i class="fas fa-print me-2"></i> Print
                            </a></li>
                    </ul>
                </div>

                <a href="{{ route('incomes.summary') }}" class="btn btn-outline-dark">Summary</a>
                <a href="{{ route('incomes.create') }}" class="btn btn-primary"><i class="fas fa-plus me-2"></i> New
                    Income</a>
            </div>
        </div>

        {{-- Filters --}}
        <form method="GET" class="row g-2 mb-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label mb-0 small">Search</label>
                <input name="q" value="{{ $q }}" class="form-control"
                    placeholder="Search invoice/method/ref">
            </div>

            <div class="col-md-3">
                <label class="form-label mb-0 small">Company</label>
                <select name="company_id" class="form-select">
                    <option value="">All Companies</option>
                    @foreach ($companies as $c)
                        <option value="{{ $c->id }}" >{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label mb-0 small">From</label>
                <input type="date" name="from" value="{{ $from }}" class="form-control">
            </div>

            <div class="col-md-2">
                <label class="form-label mb-0 small">To</label>
                <input type="date" name="to" value="{{ $to }}" class="form-control">
            </div>

            {{-- NEW: Status filter --}}
            <div class="col-md-2">
                <label class="form-label mb-0 small">Status</label>
                <select name="status" class="form-select">
                    @php $statusReq = request('status'); @endphp
                    <option value="">All</option>
                    <option value="received" {{ $statusReq === 'received' ? 'selected' : '' }}>Received</option>
                    <option value="partial" {{ $statusReq === 'partial' ? 'selected' : '' }}>Partial</option>
                    <option value="pending" {{ $statusReq === 'pending' ? 'selected' : '' }}>Pending</option>
                </select>
            </div>

            <div class="col-md-12 d-flex gap-2">
                <button class="btn btn-outline-primary"><i class="fas fa-filter me-1"></i> Filter</button>
                <a href="{{ route('incomes.index') }}" class="btn btn-outline-secondary">Reset</a>

                {{-- Export dropdown (Form-level button) --}}

            </div>
        </form>

        <div class="alert alert-info py-2">Filtered Total: <strong>{{ number_format($sumAmount, 2) }}</strong></div>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Table --}}
        <div class="table-responsive">
            <table id="incomesTable" class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Company</th>
                        <th>Invoice</th>
                        <th class="text-end">Amount</th>
                        <th>Method</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($incomes as $r)
                        <tr>
                            <td>{{ $r->id }}</td>
                            <td>{{ optional($r->received_at)->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ optional($r->company)->name ?? '—' }}</td>
                            <td>{{ $r->invoice_no ?? '—' }}</td>
                            <td class="text-end">{{ number_format($r->amount, 2) }}</td>
                            <td>{{ $r->method ?? '—' }}</td>
                            <td>
                                @php
                                    $cls =
                                        $r->status === 'received'
                                            ? 'success'
                                            : ($r->status === 'partial'
                                                ? 'warning'
                                                : ($r->status === 'pending'
                                                    ? 'secondary'
                                                    : 'secondary'));
                                @endphp
                                <span class="badge bg-{{ $cls }}">{{ ucfirst($r->status) }}</span>
                            </td>
                            <td class="d-flex gap-1">
                                <a class="btn btn-sm btn-outline-info" href="{{ route('incomes.show', $r) }}"><i
                                        class="far fa-eye"></i></a>
                                <a class="btn btn-sm btn-outline-primary" href="{{ route('incomes.edit', $r) }}"><i
                                        class="far fa-edit"></i></a>
                                <form action="{{ route('incomes.destroy', $r) }}" method="POST"
                                    onsubmit="return confirm('Delete income?');">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"><i
                                            class="far fa-trash-alt"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted p-4">No records</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">{{ $incomes->withQueryString()->links() }}</div>
    </div>

    {{-- Print styles --}}
    <style>
        @media print {

            a.btn,
            button,
            .dropdown,
            form.row,
            .card .card-footer {
                display: none !important;
            }

            .table {
                font-size: 12px;
            }
        }
    </style>

    {{-- Export libs --}}
    <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>
        /**
         * Clean clone for export:
         * - clone table
         * - only visible rows
         * - remove Actions column
         * - normalize Amount to numeric
         * - convert Status badge to plain text
         */
        function getCleanIncomesTable() {
            const src = document.getElementById('incomesTable');
            const clone = src.cloneNode(true);

            // remove last TH (Actions)
            if (clone.tHead && clone.tHead.rows.length) {
                const ths = clone.tHead.rows[0].cells;
                if (ths.length) ths[ths.length - 1].remove();
            }

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

                    // remove Actions TD
                    if (row.cells.length) row.cells[row.cells.length - 1].remove();

                    // Amount normalize (index 4)
                    const idxAmount = 4;
                    if (row.cells[idxAmount]) {
                        const raw = row.cells[idxAmount].textContent.replace(/[,\s]/g, '');
                        const n = parseFloat(raw);
                        if (!isNaN(n)) row.cells[idxAmount].textContent = n.toFixed(2);
                        row.cells[idxAmount].classList.remove('text-end');
                    }

                    // Status: strip badge, keep text
                    const idxStatus = 6;
                    if (row.cells[idxStatus]) {
                        row.cells[idxStatus].textContent = row.cells[idxStatus].textContent.trim();
                    }
                });
            }
            return clone;
        }

        // helpers to wire both header/form dropdowns
        function wireExportTriggers() {
            const map = [
                ['exportExcel_header', () => exportExcel()],
                ['exportCSV_header', () => exportCSV()],
                ['exportPDF_header', () => exportPDF()],
                ['print_header', () => window.print()],
                ['exportExcel_form', () => exportExcel()],
                ['exportCSV_form', () => exportCSV()],
                ['exportPDF_form', () => exportPDF()],
                ['print_form', () => window.print()],
            ];
            map.forEach(([id, fn]) => {
                const el = document.getElementById(id);
                if (el) el.addEventListener('click', fn);
            });
        }

        function exportExcel() {
            const clean = getCleanIncomesTable();
            const wb = XLSX.utils.table_to_book(clean, {
                sheet: 'Incomes',
                raw: true
            });
            XLSX.writeFile(wb, 'incomes.xlsx');
        }

        function exportCSV() {
            const clean = getCleanIncomesTable();
            const ws = XLSX.utils.table_to_sheet(clean, {
                raw: true
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Incomes');
            XLSX.writeFile(wb, 'incomes.csv', {
                bookType: 'csv'
            });
        }

        function exportPDF() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF('p', 'pt', 'a4');
            doc.setFontSize(14);
            doc.text('Incomes', 40, 40);

            // optional subheader: filters
            const params = new URLSearchParams(window.location.search);
            const compText = (function() {
                const sel = document.querySelector('select[name="company_id"]');
                if (!sel || !sel.value) return '';
                return ' • Company: ' + sel.options[sel.selectedIndex].text;
            })();
            const statusText = (function() {
                const sel = document.querySelector('select[name="status"]');
                if (!sel || !sel.value) return '';
                return ' • Status: ' + sel.options[sel.selectedIndex].text;
            })();
            const from = document.querySelector('input[name="from"]')?.value || '';
            const to = document.querySelector('input[name="to"]')?.value || '';
            const range = (from || to) ? `Range: ${from || 'Start'} — ${to || 'Now'}` : '';
            doc.setFontSize(10);
            doc.text([range, compText + statusText].filter(Boolean).join('  '), 40, 56);

            const clean = getCleanIncomesTable();
            doc.autoTable({
                html: clean,
                startY: 70,
                styles: {
                    fontSize: 9,
                    cellPadding: 4
                },
                headStyles: {
                    fillColor: [245, 245, 245]
                },
                theme: 'striped',
                margin: {
                    left: 40,
                    right: 40
                }
            });
            doc.save('incomes.pdf');
        }

        // init
        wireExportTriggers();
    </script>
@endsection