@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0">Payments</h4>
                <small class="text-muted">Payments made to laborers</small>
            </div>

            <div class="d-flex gap-2">
                {{-- Export Dropdown --}}
                <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">
                                <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>
                        <li>
                            <a class="dropdown-item" href="javascript:void(0)" id="printTable">
                                <i class="fas fa-print me-2 text-dark"></i> Print
                            </a>
                        </li>
                    </ul>
                </div>

                <a href="{{ route('payments.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i> New Payment
                </a>
            </div>
        </div>

        {{-- Filters --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <form class="row g-2 align-items-end" method="GET" action="{{ route('payments.index') }}">
                    <div class="col-md-3">
                        <label class="form-label mb-0">Laborer</label>
                        <select name="laborer_id" class="form-select">
                            <option value="">All</option>
                            @foreach ($laborers as $l)
                                <option value="{{ $l->id }}" {{ request('laborer_id') == $l->id ? 'selected' : '' }}>
                                    {{ $l->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label mb-0">Method</label>
                        <input type="text" name="method" class="form-control" value="{{ request('method') }}" placeholder="cash, bank...">
                    </div>

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

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

                    <div class="col-md-1">
                        <label class="form-label mb-0">Min</label>
                        <input type="number" step="0.01" name="min_amount" class="form-control" value="{{ request('min_amount') }}">
                    </div>

                    <div class="col-md-1">
                        <label class="form-label mb-0">Max</label>
                        <input type="number" step="0.01" name="max_amount" class="form-control" value="{{ request('max_amount') }}">
                    </div>

                    <div class="col-md-2">
                        <label class="form-label mb-0">Has Timesheet</label>
                        <select name="has_timesheet" class="form-select">
                            <option value="">All</option>
                            <option value="1" {{ request('has_timesheet') === '1' ? 'selected' : '' }}>Yes</option>
                            <option value="0" {{ request('has_timesheet') === '0' ? 'selected' : '' }}>No</option>
                        </select>
                    </div>

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

        {{-- Summary --}}
        <div class="row g-3 mb-3">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <div class="text-muted small">Total Payments (filtered)</div>
                            <div class="fs-5 fw-semibold">{{ number_format($summary['total_amount'], 2) }}</div>
                        </div>
                        <i class="fas fa-coins fa-lg text-success"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <div class="text-muted small">Count</div>
                            <div class="fs-5 fw-semibold">{{ number_format($summary['count']) }}</div>
                        </div>
                        <i class="fas fa-list-ol fa-lg text-primary"></i>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body d-flex justify-content-between">
                        <div>
                            <div class="text-muted small">Avg Amount</div>
                            <div class="fs-5 fw-semibold">{{ number_format($summary['avg_amount'], 2) }}</div>
                        </div>
                        <i class="fas fa-percentage fa-lg text-info"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table id="paymentsTable" class="table align-middle mb-0 bg-white">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Laborer</th>
                        <th class="text-end">Amount</th>
                        <th>Paid At</th>
                        <th>Method</th>
                        <th>Notes</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($payments as $p)
                        <tr>
                            <td>{{ $p->id }}</td>
                            <td>{{ $p->laborer->name ?? '—' }}</td>
                            <td class="text-end">{{ number_format((float) $p->amount, 2) }}</td>
                            <td>{{ optional($p->paid_at)->toDateString() ?? '—' }}</td>
                            <td>{{ $p->method ?? '—' }}</td>
                            <td>{{ $p->notes ?? '—' }}</td>

                            <td>
                                <a href="{{ route('payments.show', $p) }}" class="btn btn-sm btn-outline-primary">View</a>
                                <a href="{{ route('payments.edit', $p) }}" class="btn btn-sm btn-outline-warning">Edit</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">No records found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    {{-- 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>
        /**
         * Clone table → یوازې لیدونکي (visible) قطارونه پرېږده → د Actions ستون لیرې کړه
         */
        function getCleanTableForExport(tableId) {
            const src = document.getElementById(tableId);
            const clone = src.cloneNode(true);

            // لرې کړه: Actions ستون (وروستی th او هر قطار کې وروستی td)
            const ths = clone.tHead ? clone.tHead.rows[0].cells : [];
            if (ths.length) ths[ths.length - 1].remove();

            const bodyRows = clone.tBodies.length ? Array.from(clone.tBodies[0].rows) : [];
            bodyRows.forEach(r => {
                // یوازې ښکاره قطارونه وساته
                const hidden = r.style.display === 'none' || r.classList.contains('d-none');
                if (hidden) {
                    r.remove();
                    return;
                }
                // وروستی سلول (Actions) لرې کړه
                if (r.cells.length) r.cells[r.cells.length - 1].remove();

                // مقدار: له text-end څخه عدد ته پاکول (کاما/سپیس لرې کول)
                const amountCell = r.cells[2 - 1]; // اصلي جدول کې Amount په درېیمه ستون کې دی، دلته همدومره مو ساتلې
                if (amountCell) {
                    const raw = amountCell.textContent.trim().replace(/[, ]/g, '');
                    const num = parseFloat(raw);
                    if (!isNaN(num)) amountCell.textContent = num.toFixed(2);
                }
            });

            return clone;
        }

        // Excel
        document.getElementById('exportExcel').addEventListener('click', function () {
            const clean = getCleanTableForExport('paymentsTable');
            const wb = XLSX.utils.table_to_book(clean, { sheet: 'Payments', raw: true });
            XLSX.writeFile(wb, 'payments.xlsx'); // default bookType: xlsx
        });

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

        // PDF
        document.getElementById('exportPDF').addEventListener('click', function () {
            const { jsPDF } = window.jspdf;
            const doc = new jsPDF('p', 'pt', 'a4');
            doc.setFontSize(14);
            doc.text('Payments Report', 40, 40);

            // د Actions ستون مه واچوه: د پاک شوي جدول څخه PDF جوړه کړه
            const clean = getCleanTableForExport('paymentsTable');
            // AutoTable له HTML څخه:
            doc.autoTable({
                html: clean,
                startY: 60,
                styles: { fontSize: 9, cellPadding: 4 },
                headStyles: { fillColor: [240, 240, 240] },
                didParseCell: function (data) {
                    // center align headings
                    if (data.section === 'head') data.cell.styles.halign = 'left';
                }
            });

            doc.save('payments.pdf');
        });

        // Print
        document.getElementById('printTable').addEventListener('click', function () {
            const clean = getCleanTableForExport('paymentsTable');
            const html = clean.outerHTML;
            const w = window.open('', '', 'width=900,height=700');
            w.document.write("<html><head><title>Payments Report</title>");
            w.document.write("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'>");
            w.document.write('<style>body{padding:24px} table{width:100%}</style>');
            w.document.write('</head><body>');
            w.document.write("<h4 class='mb-3'>Payments Report</h4>");
            w.document.write(html);
            w.document.write('</body></html>');
            w.document.close();
            w.focus();
            w.print();
        });
    </script>
@endsection