@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-3 shadow-sm">
        {{-- Alerts --}}
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0"><i class="fas fa-receipt me-2"></i> Living Expenses</h4>
                <small class="text-muted">Track basic living costs</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('labor-living-expences.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i> New Expense
                </a>

                <div class="dropdown">
                    <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                        <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>
            </div>
        </div>

        {{-- Filters (فقط همدغو ۴ کالمونو ته) --}}
        <form method="GET" action="{{ route('labor-living-expences.index') }}" class="mb-3">
            <div class="row g-2">
                <div class="col-md-3">
                    <input type="date" name="spent_at" value="{{ request('spent_at') }}" class="form-control"
                        placeholder="Date">
                </div>
                <div class="col-md-3">
                    <input type="text" name="laborer" value="{{ request('laborer') }}" class="form-control"
                        placeholder="Search laborer name">
                </div>
                <div class="col-md-3">
                    <input type="text" name="description" value="{{ request('description') }}" class="form-control"
                        placeholder="Description contains…">
                </div>
                <div class="col-md-1">
                    <input type="number" step="0.01" name="min_amount" value="{{ request('min_amount') }}"
                        class="form-control" placeholder="Min">
                </div>
                <div class="col-md-1">
                    <input type="number" step="0.01" name="max_amount" value="{{ request('max_amount') }}"
                        class="form-control" placeholder="Max">
                </div>
                <div class="col-md-1 d-grid">
                    <button class="btn btn-outline-primary"><i class="fas fa-search me-1"></i> Go</button>
                </div>
                <div class="col-md-1 d-grid">
                    <a href="{{ route('labor-living-expences.index') }}" class="btn btn-outline-secondary"><i
                            class="fas fa-sync me-1"></i> Reset</a>
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table id="expensesTable" class="table align-middle mb-0 bg-white table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Laborer</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expenses as $e)
                        <tr>
                            <td>{{ $e->id }}</td>
                            <td>{{ optional($e->spent_at)->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ optional($e->laborer)->name ?? '—' }}</td>
                            <td class="text-truncate" style="max-width: 320px">{{ $e->description ?? '—' }}</td>
                            <td>{{ number_format((float) $e->amount, 2) }}</td>
                            <td class="d-flex gap-1">
                                {{-- View --}}
                                <a href="{{ route('labor-living-expences.show', $e) }}"
                                    class="btn btn-sm btn-outline-primary" title="View">
                                    <i class="fa fa-eye"></i>
                                </a>

                                {{-- Edit --}}
                                <a href="{{ route('labor-living-expences.edit', $e) }}"
                                    class="btn btn-sm btn-outline-warning" title="Edit">
                                    <i class="fa fa-edit"></i>
                                </a>

                                {{-- Delete --}}
                                <form action="{{ route('labor-living-expences.destroy', $e) }}" method="POST"
                                    onsubmit="return confirm('Are you sure you want to delete this expense?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">No expense records</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@section('scripts')
    <script src="https://kit.fontawesome.com/a2e0e6ad53.js" crossorigin="anonymous"></script>
    <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>
        function getCleanExpensesTable() {
            const src = document.getElementById('expensesTable');
            const clone = src.cloneNode(true);
            if (clone.tHead?.rows.length) {
                const headCells = clone.tHead.rows[0].cells;
                if (headCells.length) headCells[headCells.length - 1].remove(); // remove Actions
            }
            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) return r.remove();
                    if (r.cells.length) r.cells[r.cells.length - 1].remove(); // remove Actions
                    // normalize amount column (#,Date,Laborer,Description,Amount)
                    const idxAmount = 4;
                    const cleanNum = (txt) => {
                        const n = parseFloat(String(txt).replace(/[$, ]/g, ''));
                        return isNaN(n) ? '' : n.toFixed(2);
                    };
                    if (r.cells[idxAmount]) r.cells[idxAmount].textContent = cleanNum(r.cells[idxAmount]
                        .textContent);
                });
            }
            return clone;
        }

        document.getElementById("exportExcel").addEventListener("click", function() {
            const clean = getCleanExpensesTable();
            const wb = XLSX.utils.table_to_book(clean, {
                sheet: "Living Expenses",
                raw: true
            });
            XLSX.writeFile(wb, "living-expenses.xlsx");
        });
        document.getElementById("exportCSV").addEventListener("click", function() {
            const clean = getCleanExpensesTable();
            const ws = XLSX.utils.table_to_sheet(clean, {
                raw: true
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Living Expenses");
            XLSX.writeFile(wb, "living-expenses.csv", {
                bookType: "csv"
            });
        });
        document.getElementById("exportPDF").addEventListener("click", function() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF("p", "pt", "a4");
            doc.setFontSize(14);
            doc.text("Living Expenses Report", 40, 40);
            const clean = getCleanExpensesTable();
            doc.autoTable({
                html: clean,
                startY: 60,
                styles: {
                    fontSize: 9,
                    cellPadding: 4
                },
                headStyles: {
                    fillColor: [240, 240, 240]
                }
            });
            doc.save("living-expenses.pdf");
        });
        document.getElementById("printTable").addEventListener("click", function() {
            const clean = getCleanExpensesTable();
            const w = window.open("", "", "width=900,height=700");
            w.document.write("<html><head><title>Living Expenses 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><h4 class='mb-3'>Living Expenses Report</h4>");
            w.document.write(clean.outerHTML);
            w.document.write("</body></html>");
            w.document.close();
            w.focus();
            w.print();
        });
    </script>
@endsection