@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">Machineries</h4>
                <small class="text-muted">Equipment and hourly rates</small>
            </div>
            <a href="{{ route('machineries.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i> New Machinery
            </a>
        </div>

        {{-- Filters --}}
        <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="Name / Plate / Type">
            </div>

            <div class="col-md-3">
                <label class="form-label mb-0 small">Company</label>
                <select name="company_id" class="form-select">
                    <option value="">All Companies</option>
                    @foreach ($companies as $c)
                        <option value="{{ $c->id }}" @selected(request('company_id') == $c->id)>{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label mb-0 small">Type</label>
                <select name="type" class="form-select">
                    <option value="">All Types</option>
                    @foreach ($types as $t)
                        <option value="{{ $t }}" @selected(request('type') === $t)>{{ $t }}</option>
                    @endforeach
                </select>
            </div>

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

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

            <div class="col-md-2">
                <label class="form-label mb-0 small">Sort</label>
                @php $sort = request('sort','created_at'); @endphp
                <select name="sort" class="form-select">
                    <option value="created_at" @selected($sort === 'created_at')>Created At</option>
                    <option value="name" @selected($sort === 'name')>Name</option>
                    <option value="type" @selected($sort === 'type')>Type</option>
                    <option value="hourly_rate"@selected($sort === 'hourly_rate')>Hourly Rate</option>
                    <option value="id" @selected($sort === 'id')>#</option>
                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label mb-0 small">Direction</label>
                <select name="dir" class="form-select">
                    <option value="asc" @selected(request('dir', 'desc') === 'asc')>Ascending</option>
                    <option value="desc" @selected(request('dir', 'desc') === 'desc')>Descending</option>
                </select>
            </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', 20) === $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('machineries.index') }}" class="btn btn-outline-secondary">Reset</a>

                {{-- FRONTEND EXPORT BUTTONS --}}
                <div class="ms-auto d-flex gap-2">
                    <button type="button" id="btnExportCSV" class="btn btn-outline-success"><i
                            class="fas fa-file-csv me-1"></i> CSV</button>
                    <button type="button" id="btnExportXLSX" class="btn btn-outline-success"><i
                            class="fas fa-file-excel me-1"></i> Excel</button>
                    <button type="button" id="btnExportPDF" 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>

                @if ($machineries->total())
                    <span class="small text-muted align-self-center ms-3">
                        Showing {{ $machineries->firstItem() }}–{{ $machineries->lastItem() }} of
                        {{ $machineries->total() }} results
                    </span>
                @endif
            </div>
        </form>

        {{-- Table --}}
        <div class="table-responsive">
            <table id="machineries-table" class="table align-middle mb-0 bg-white">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Plate Number</th>
                        <th>Type</th>
                        <th>Company</th>
                        <th>Hourly Rate</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($machineries as $m)
                        <tr>
                            <td>{{ $m->id }}</td>
                            <td><a href="{{ route('machineries.show', $m) }}" class="text-dark">{{ $m->name }}</a>
                            </td>
                            <td>{{ $m->plate_number ?: '—' }}</td>
                            <td>{{ $m->type ?: '—' }}</td>
                            <td>{{ $m->company->name ?? '—' }}</td>
                            <td>{{ $m->hourly_rate !== null ? number_format($m->hourly_rate, 2) : '—' }}</td>
                            <td class="text-nowrap">
                                <a href="{{ route('machineries.edit', $m) }}"
                                    class="btn btn-sm btn-outline-secondary me-1"><i class="fas fa-edit"></i></a>
                                <form action="{{ route('machineries.destroy', $m) }}" method="POST"
                                    style="display:inline">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-sm btn-outline-danger"
                                        onclick="return confirm('Delete machinery?')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No machineries found with the selected
                                filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

    {{-- ================= FRONTEND EXPORT SCRIPTS ================= --}}
    {{-- SheetJS (Excel) --}}
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    {{-- jsPDF + AutoTable (PDF) --}}
    <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('machineries-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 Export (simple)
            document.getElementById('btnExportCSV').addEventListener('click', function() {
                let csv = [];
                const rows = table.querySelectorAll('tr');
                rows.forEach(tr => {
                    const cols = tr.querySelectorAll('th, td');
                    const row = [];
                    cols.forEach(td => {
                        // Skip action column for export
                        if (td.cellIndex === 6) return;
                        let text = td.innerText.replace(/\s+/g, ' ').trim();
                        // escape quotes
                        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 link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = filename('machineries', 'csv');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });

            // Excel Export via SheetJS
            document.getElementById('btnExportXLSX').addEventListener('click', function() {
                // Clone table and remove "Actions" column
                const clone = table.cloneNode(true);
                for (const row of clone.rows) {
                    if (row.cells.length > 6) row.deleteCell(6);
                }
                const wb = XLSX.utils.table_to_book(clone, {
                    sheet: "Machineries"
                });
                XLSX.writeFile(wb, filename('machineries', 'xlsx'));
            });

            // PDF Export via jsPDF + autoTable
            document.getElementById('btnExportPDF').addEventListener('click', function() {
                const {
                    jsPDF
                } = window.jspdf;
                const doc = new jsPDF('l', 'pt', 'a4'); // landscape
                doc.setFontSize(12);
                doc.text('Machineries (current page)', 40, 40);

                // Build head/body arrays excluding last Actions col
                const head = [];
                table.tHead.querySelectorAll('th').forEach((th, idx) => {
                    if (idx === 6) 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 === 6) return;
                        row.push(td.innerText.replace(/\s+/g, ' ').trim());
                    });
                    if (row.length) body.push(row);
                });

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

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

            // Print (open a clean window with table only)
            document.getElementById('btnPrint').addEventListener('click', function() {
                const w = window.open('', '_blank');
                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>
    `;
                // Clone and drop the last column (Actions)
                const clone = table.cloneNode(true);
                for (const row of clone.rows) {
                    if (row.cells.length > 6) row.deleteCell(6);
                }
                w.document.write(`<html><head>${style}</head><body>
      <h3>Machineries (current page)</h3>
      ${clone.outerHTML}
      </body></html>`);
                w.document.close();
                w.focus();
                w.print();
                w.close();
            });

        })();
    </script>
@endsection