@extends('admin.layout.app')

@section('styles')
    {{-- Optional Styling --}}
    <style>
        table.table-hover tbody tr:hover {
            background-color: #f2f2f2;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .table td, .table th { vertical-align: middle; }
        .btn { transition: all 0.2s ease-in-out; }
        .btn:hover { transform: scale(1.05); }
    </style>
@endsection

@section('body')
    <div class="card card-page p-4 shadow-sm animate__animated animate__fadeIn">
        {{-- 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">
                <strong>There were some problems with your input:</strong>
                <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-4 flex-wrap gap-2">
            <div>
                <h4 class="mb-1">Laborers</h4>
                <small class="text-muted">Manage workers and wages</small>
            </div>
            <div class="d-flex flex-wrap gap-2">
                <a href="{{ route('laborers.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i> New Laborer
                </a>
                {{-- Fixed: call the correct function name --}}
                <button class="btn btn-success" onclick="exportTableToXlsx('laborersTable', 'laborers')">
                    <i class="fas fa-file-excel me-1"></i> Excel Export
                </button>
                <button class="btn btn-dark" onclick="printTable()">
                    <i class="fas fa-print me-1"></i> Print
                </button>
            </div>
        </div>

        {{-- Filter Inputs --}}
        <div class="row mb-3 g-2">
            <div class="col-md-3">
                <input id="filterName" type="text" class="form-control" placeholder="Filter by Name">
            </div>
            <div class="col-md-3">
                <input id="filterCNIC" type="text" class="form-control" placeholder="Filter by CNIC/Passport">
            </div>
            <div class="col-md-3">
                <input id="filterWage" type="number" class="form-control" placeholder="Filter by Hourly Wage">
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-outline-primary flex-grow-1" onclick="resetFilters()">Reset Filters</button>
            </div>
        </div>

        {{-- Table --}}
        <div class="table-responsive">
            <table id="laborersTable" class="table align-middle mb-0 bg-white table-hover table-bordered animate__animated animate__fadeIn">
                <thead class="bg-light text-uppercase small text-muted">
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>CNIC/Passport</th>
                        <th>Hourly Wage</th>
                        <th>Timesheets</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody id="laborersTbody">
                    @foreach ($laborers as $l)
                        <tr>
                            <td>{{ $l->id }}</td>
                            <td>
                                <a href="{{ route('laborers.show', $l) }}" class="text-dark fw-bold">
                                    <i class="fas fa-user me-2 text-primary"></i> {{ $l->name }}
                                </a>
                            </td>
                            <td>{{ $l->cnic_passport }}</td>
                            <td>${{ number_format($l->hourly_wage, 2) }}</td>
                            <td><span class="badge bg-info text-dark">{{ $l->timesheets_count }}</span></td>
                            <td class="text-center">
                                <a href="{{ route('laborers.show', $l) }}" class="btn btn-sm btn-info me-1" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('laborers.edit', $l) }}" class="btn btn-sm btn-warning me-1" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('laborers.destroy', $l) }}" method="POST" style="display:inline">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger" title="Delete"
                                        onclick="return confirm('Are you sure you want to delete this laborer?')">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        <div class="mt-4 d-flex justify-content-center">
            {{ $laborers->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>

    <script>
        // --- Excel Export (Fixed) ---
        function exportTableToXlsx(tableID, filename = 'excel_data') {
            const table = document.getElementById(tableID);
            if (!table) return;

            // clone the table to avoid mutating the DOM
            const clone = table.cloneNode(true);

            // Optional: if you only want visible rows exported, uncomment below
            // Array.from(clone.tBodies[0].rows).forEach(r => {
            //     if (r.style.display === 'none') r.remove();
            // });

            const wb = XLSX.utils.table_to_book(clone, { sheet: 'Laborers', raw: true });
            XLSX.writeFile(wb, `${filename}.xlsx`);
        }

        // Backward compatibility if somewhere else the old name is used
        function exportTableToExcel(tableID, filename = 'excel_data') {
            exportTableToXlsx(tableID, filename);
        }
    </script>

    <script>
        const tbody = document.getElementById('laborersTbody');

        // Filter logic
        ['filterName', 'filterCNIC', 'filterWage'].forEach(id => {
            document.getElementById(id).addEventListener('input', filterTable);
        });

        function filterTable() {
            const nameVal = document.getElementById('filterName').value.toLowerCase();
            const cnicVal = document.getElementById('filterCNIC').value.toLowerCase();
            const wageVal = document.getElementById('filterWage').value;

            Array.from(tbody.rows).forEach(row => {
                const name = row.cells[1].textContent.toLowerCase();
                const cnic = row.cells[2].textContent.toLowerCase();
                const wage = parseFloat(row.cells[3].textContent.replace('$', '')) || 0;

                const matchName = name.includes(nameVal);
                const matchCnic = cnic.includes(cnicVal);
                const matchWage = wageVal === '' || wage >= parseFloat(wageVal);

                row.style.display = (matchName && matchCnic && matchWage) ? '' : 'none';
            });
        }

        function resetFilters() {
            ['filterName', 'filterCNIC', 'filterWage'].forEach(id => {
                document.getElementById(id).value = '';
            });
            filterTable();
        }

        function printTable() {
            const printContent = document.getElementById('laborersTable').outerHTML;
            const originalContents = document.body.innerHTML;

            document.body.innerHTML = `
            <html>
            <head>
              <title>Print - Laborers</title>
              <style>
                body { font-family: sans-serif; padding: 20px; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
                th { background-color: #f8f8f8; }
              </style>
            </head>
            <body>
              <h2>Laborers List</h2>
              ${printContent}
            </body>
            </html>
          `;
            window.print();
            document.body.innerHTML = originalContents;
            location.reload(); // To restore JS functionality
        }
    </script>
@endsection