@extends('admin.layout.app')

@section('body')
    <div class="card card-page p-3 shadow-sm">
        {{-- Flash 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

        {{-- Validation summary (optional) --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</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-clock me-2"></i> Timesheets</h4>
                <small class="text-muted">Track hours worked</small>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('timesheets.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i> New Timesheet
                </a>

                {{-- 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>
            </div>
        </div>

        {{-- 🔎 Search form --}}
        <form method="GET" action="{{ route('timesheets.index') }}" class="mb-3">
            <div class="row g-2">
                <div class="col-md-3">
                    <input type="date" name="date" value="{{ request('date') }}" class="form-control"
                        placeholder="Date">
                </div>
                <div class="col-md-4">
                    <input type="text" name="laborer" value="{{ request('laborer') }}" class="form-control"
                        placeholder="Search by Laborer">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-outline-primary w-100">
                        <i class="fas fa-search me-1"></i> Search
                    </button>
                </div>
                <div class="col-md-2">
                    <a href="{{ route('timesheets.index') }}" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-sync me-1"></i> Reset
                    </a>
                </div>
            </div>
        </form>

        <div class="table-responsive">
            <table id="timesheetTable" class="table align-middle mb-0 bg-white table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Laborer</th>
                        <th>Shift</th>
                        <th>Hours</th>
                        <th>Overtime Hours</th>
                        <th>Total</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($timesheets as $t)
                        <tr>
                            <td>{{ $t->id }}</td>
                            <td>{{ optional($t->date)->format('Y-m-d') ?? '—' }}</td>
                            <td>{{ $t->laborer->name ?? '—' }}</td>
                            <td>{{ $t->shift ?? '—' }}</td>
                            <td>{{ number_format((float) $t->hours_worked, 2) }}</td>
                            <td>{{ number_format((float) $t->overtime_hours, 2) }}</td>
                            <td>${{ number_format((float) ($t->total ?? 0), 2) }}</td>
                            <td class="d-flex gap-1">
                                <a href="{{ route('timesheets.show', $t) }}" class="btn btn-sm btn-outline-primary"
                                    title="View">
                                    <i class="fa fa-eye"></i>
                                </a>
                                <a href="{{ route('timesheets.edit', $t) }}" class="btn btn-sm btn-outline-warning"
                                    title="Edit">
                                    <i class="fa fa-edit"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">No records found</td> {{-- fixed colspan to 8 --}}
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

@section('scripts')
    {{-- Font Awesome (if not globally loaded) --}}
    <script src="https://kit.fontawesome.com/a2e0e6ad53.js" crossorigin="anonymous"></script>

    {{-- Export Libraries --}}
    <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، یوازې ښکاره قطارونه، وروستی «Actions» ستون لرې کول،
         * او عددي خانې normalize کول (Hours/OT/Total).
         */
        function getCleanTimesheetTable() {
            const src = document.getElementById('timesheetTable');
            const clone = src.cloneNode(true);

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

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

                    // Remove last TD (Actions)
                    if (r.cells.length) r.cells[r.cells.length - 1].remove();

                    // Normalize numeric cells:
                    // Columns (after removing Actions at the end):
                    // 0:#,1:Date,2:Laborer,3:Shift,4:Hours,5:OT,6:Total
                    const idxHours = 4,
                        idxOT = 5,
                        idxTotal = 6;
                    const cleanNum = (txt) => {
                        const n = parseFloat(String(txt).replace(/[$, ]/g, ''));
                        return isNaN(n) ? '' : n.toFixed(2);
                    };
                    if (r.cells[idxHours]) r.cells[idxHours].textContent = cleanNum(r.cells[idxHours].textContent);
                    if (r.cells[idxOT]) r.cells[idxOT].textContent = cleanNum(r.cells[idxOT].textContent);
                    if (r.cells[idxTotal]) r.cells[idxTotal].textContent = cleanNum(r.cells[idxTotal].textContent);
                });
            }
            return clone;
        }

        // Excel
        document.getElementById("exportExcel").addEventListener("click", function() {
            const clean = getCleanTimesheetTable();
            const wb = XLSX.utils.table_to_book(clean, {
                sheet: "Timesheets",
                raw: true
            });
            XLSX.writeFile(wb, "timesheets.xlsx"); // default xlsx
        });

        // CSV (bookType=csv — fixed)
        document.getElementById("exportCSV").addEventListener("click", function() {
            const clean = getCleanTimesheetTable();
            const ws = XLSX.utils.table_to_sheet(clean, {
                raw: true
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Timesheets");
            XLSX.writeFile(wb, "timesheets.csv", {
                bookType: "csv"
            });
        });

        // PDF (use cleaned table; no Actions column)
        document.getElementById("exportPDF").addEventListener("click", function() {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF("p", "pt", "a4");
            doc.setFontSize(14);
            doc.text("Timesheets Report", 40, 40);

            const clean = getCleanTimesheetTable();
            doc.autoTable({
                html: clean,
                startY: 60,
                styles: {
                    fontSize: 9,
                    cellPadding: 4
                },
                headStyles: {
                    fillColor: [240, 240, 240]
                }
            });
            doc.save("timesheets.pdf");
        });

        // Print (clean table for nicer printout)
        document.getElementById("printTable").addEventListener("click", function() {
            const clean = getCleanTimesheetTable();
            const html = clean.outerHTML;
            const w = window.open("", "", "width=900,height=700");
            w.document.write("<html><head><title>Timesheets 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'>Timesheets Report</h4>");
            w.document.write(html);
            w.document.write("</body></html>");
            w.document.close();
            w.focus();
            w.print();
        });
    </script>
@endsection