@extends('admin.layout.app')

@section('body')
    <div class="container">
        <div class="card shadow-sm p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4>Main Expenses</h4>
                <a href="{{ route('expences.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add Expense
                </a>
            </div>

            {{-- ساده فلټرونه --}}
            <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="{{ request('q') }}" class="form-control" placeholder="Title…">
                </div>

                <div class="col-md-3">
                    <label class="form-label mb-0 small">Category</label>
                    <select name="category_id" class="form-select">
                        <option value="">All</option>
                        @foreach ($categories as $c)
                            <option value="{{ $c->id }}" @selected(request('category_id') == $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="{{ request('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="{{ request('to') }}" class="form-control">
                </div>

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

                <div class="col-md-2">
                    <label class="form-label mb-0 small">Per Page</label>
                    <select name="per_page" class="form-select">
                        @foreach ([10, 20, 50, 100] as $n)
                            <option value="{{ $n }}" @selected((int) request('per_page', 10) === $n)>{{ $n }}</option>
                        @endforeach
                    </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('expences.index') }}" class="btn btn-outline-secondary">Reset</a>

                    {{-- Export/Print (Frontend) --}}
                    <div class="ms-auto d-flex gap-2">
                        <button type="button" id="btnExpCSV" class="btn btn-outline-success"><i
                                class="fas fa-file-csv me-1"></i> CSV</button>
                        <button type="button" id="btnExpXLSX" class="btn btn-outline-success"><i
                                class="fas fa-file-excel me-1"></i> Excel</button>
                        <button type="button" id="btnExpPDF" class="btn btn-outline-danger"><i
                                class="fas fa-file-pdf me-1"></i> PDF</button>
                        <button type="button" id="btnPrint" class="btn btn-outline-dark"><i class="fas fa-print me-1"></i>
                            Print</button>
                    </div>
                </div>
            </form>

            <table id="expenses-table" class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>Title</th>
                        <th>Amount</th>
                        <th>Category</th>
                        <th>Currency</th>
                        <th>Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expenses as $e)
                        <tr>
                            <td>{{ $e->id }}</td>
                            <td>{{ $e->title }}</td>
                            <td>{{ number_format($e->amount, 2) }}</td>
                            <td>{{ $e->category->name ?? 'Other' }}</td>
                            <td>{{ $e->currency->name ?? 'AED' }}</td>
                            <td>{{ $e->date }}</td>
                            <td>
                                <a href="{{ route('expences.show', $e) }}" class="btn btn-sm btn-outline-info"><i
                                        class="fas fa-eye"></i></a>
                                <a href="{{ route('expences.edit', $e) }}" class="btn btn-sm btn-outline-primary"><i
                                        class="fas fa-edit"></i></a>
                                <form action="{{ route('expences.destroy', $e) }}" method="POST" class="d-inline">
                                    @csrf @method('DELETE')
                                    <button onclick="return confirm('Delete this expense?')"
                                        class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">No expenses found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

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

    {{-- Export libs --}}
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf/dist/jspdf.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf-autotable/dist/jspdf.plugin.autotable.min.js"></script>

    <script>
        (function() {
            const table = document.getElementById('expenses-table');

            function filename(base, ext) {
                const d = new Date();
                const ts = d.getFullYear() + ('0' + (d.getMonth() + 1)).slice(-2) + ('0' + d.getDate()).slice(-2) +
                    '_' +
                    ('0' + d.getHours()).slice(-2) + ('0' + d.getMinutes()).slice(-2);
                return base + '_' + ts + '.' + ext;
            }

            // CSV
            document.getElementById('btnExpCSV').addEventListener('click', function() {
                let csv = [];
                table.querySelectorAll('tr').forEach(tr => {
                    const cols = tr.querySelectorAll('th,td');
                    const row = [];
                    cols.forEach((td, idx) => {
                        if (idx === 7) return; // skip Actions
                        let text = td.innerText.replace(/\s+/g, ' ').trim();
                        text = '"' + text.replace(/"/g, '""') + '"';
                        row.push(text);
                    });
                    if (row.length) csv.push(row.join(','));
                });
                const blob = new Blob(['\uFEFF' + csv.join('\n')], {
                    type: 'text/csv;charset=utf-8;'
                });
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename('expenses', 'csv');
                document.body.appendChild(a);
                a.click();
                a.remove();
            });

            // Excel
            document.getElementById('btnExpXLSX').addEventListener('click', function() {
                const clone = table.cloneNode(true);
                for (const row of clone.rows) {
                    if (row.cells.length > 7) row.deleteCell(7);
                }
                const wb = XLSX.utils.table_to_book(clone, {
                    sheet: 'Expenses'
                });
                XLSX.writeFile(wb, filename('expenses', 'xlsx'));
            });

            // PDF
            document.getElementById('btnExpPDF').addEventListener('click', function() {
                const {
                    jsPDF
                } = window.jspdf;
                const doc = new jsPDF('l', 'pt', 'a4');
                doc.setFontSize(12);
                doc.text('Expenses (current page)', 40, 40);

                const head = [];
                table.tHead.querySelectorAll('th').forEach((th, idx) => {
                    if (idx === 7) return;
                    head.push(th.innerText.trim());
                });

                const body = [];
                table.tBodies[0].querySelectorAll('tr').forEach(tr => {
                    const row = [];
                    tr.querySelectorAll('td').forEach((td, idx) => {
                        if (idx === 7) return;
                        row.push(td.innerText.replace(/\s+/g, ' ').trim());
                    });
                    if (row.length) body.push(row);
                });

                doc.autoTable({
                    head: [head],
                    body,
                    startY: 60,
                    styles: {
                        fontSize: 9,
                        cellPadding: 4
                    },
                    headStyles: {
                        fillColor: [240, 240, 240]
                    }
                });

                doc.save(filename('expenses', 'pdf'));
            });

            // Print
            document.getElementById('btnPrint').addEventListener('click', function() {
                const clone = table.cloneNode(true);
                for (const row of clone.rows) {
                    if (row.cells.length > 7) row.deleteCell(7);
                }
                const style = `
      <style>
        table { width:100%; border-collapse: collapse; font-family: sans-serif; font-size: 12px; }
        th, td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; }
        thead { background: #f5f5f5; }
        h3 { margin: 0 0 10px; font-family: sans-serif; }
      </style>
    `;
                const w = window.open('', '_blank');
                w.document.write('<html><head>' + style + '</head><body>');
                w.document.write('<h3>Expenses (current page)</h3>');
                w.document.write(clone.outerHTML);
                w.document.write('</body></html>');
                w.document.close();
                w.focus();
                w.print();
                w.close();
            });
        })();
    </script>
@endsection