@extends('admin.layout')
@section('title', 'Staff List')

@section('content')

<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold mb-0">Staff List</h3>
        <a href="{{ route('admin.staff.create') }}" class="btn btn-primary btn-sm">+ Register New Staff</a>
    </div>

    <div class="card p-3">
        <table class="table table-hover mb-0">
            <thead>
                <tr><th>DP No</th><th>Name</th><th>Phone</th><th>Actions</th></tr>
            </thead>
            <tbody>
                @forelse($staff as $s)
                    <tr id="staff-row-{{ $s->dp_no }}">
                        <td>{{ $s->dp_no }}</td>
                        <td>{{ $s->name }}</td>
                        <td>{{ $s->phone }}</td>
                        <td>
                            @if($s->qr_generated_at)
                                <button class="btn btn-sm btn-outline-primary view-qr-btn" data-dp="{{ $s->dp_no }}" data-bs-toggle="modal" data-bs-target="#qrModal" title="Generate QR for this staff">
                                    
                                    View QR
                                </button>
                            @else
                                <button class="btn btn-sm btn-outline-secondary generate-qr-btn" data-dp="{{ $s->dp_no }}" data-bs-toggle="modal" data-bs-target="#qrModal" title="Generate QR for this staff">
                                    Generate QR
                                </button>
                            @endif
                            
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-center text-muted">No staff registered yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <a href="{{ route('admin.dashboard') }}" class="d-block mt-3 text-decoration-none">&larr; Back to Dashboard</a>
</div>

<!-- QR Modal -->
<div class="modal fade" id="qrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Employee QR Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="qrModalBody">
                <div class="text-center text-muted">Loading...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="printQrBtn">Print</button>
            </div>
        </div>
    </div>
</div>
<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const qrModalEl = document.getElementById('qrModal');
    let qrModal;

    // URL templates using Laravel's route() helper - guarantees correct paths on any server/subfolder
    const qrFragmentUrlTemplate = "{{ route('employees.qrFragmentByDp', ['dp_no' => 'DPNO_PLACEHOLDER']) }}";
    const generateQrUrlTemplate = "{{ route('employees.generateQrAjaxByDp', ['dp_no' => 'DPNO_PLACEHOLDER']) }}";

    function loadQrIntoModal(employeeId) {
        document.getElementById('qrModalBody').innerHTML = '<div class="text-center text-muted">Loading...</div>';
        qrModal.show();

        const url = qrFragmentUrlTemplate.replace('DPNO_PLACEHOLDER', employeeId);

        fetch(url)
            .then(res => {
                if (!res.ok) throw new Error('Request failed: ' + res.status);
                return res.text();
            })
            .then(html => {
                document.getElementById('qrModalBody').innerHTML = html;
            })
            .catch((err) => {
                document.getElementById('qrModalBody').innerHTML = '<div class="text-center text-danger">Failed to load QR code.</div>';
                console.error(err);
            });
    }

    function attachStaffButtonListeners() {
        const staffTable = document.querySelector('table');
        if (!staffTable) return;

        staffTable.addEventListener('click', function (event) {
            const target = event.target;
            if (target.matches('.view-qr-btn')) {
                event.preventDefault();
                const dp = target.dataset.dp || target.dataset.id;
                loadQrIntoModal(dp);
                return;
            }

            if (target.matches('.generate-qr-btn')) {
                event.preventDefault();
                const employeeId = target.dataset.dp || target.dataset.id;
                target.disabled = true;
                target.textContent = 'Generating...';

                const url = generateQrUrlTemplate.replace('DPNO_PLACEHOLDER', employeeId);

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                })
                .then(res => res.json())
                .then(data => {
                        if (data.status === 'ok') {
                        target.outerHTML = `<button class="btn btn-sm btn-outline-primary view-qr-btn" data-dp="${employeeId}">View QR</button>`;
                        loadQrIntoModal(employeeId);
                    } else {
                        throw new Error('QR generation failed');
                    }
                })
                .catch(() => {
                    target.disabled = false;
                    target.textContent = 'Generate QR';
                    alert('Failed to generate QR. Please try again.');
                });
            }
        });
    }

    function initQrModalScript() {
        if (!window.bootstrap) {
            window.addEventListener('load', initQrModalScript);
            return;
        }

        qrModal = new bootstrap.Modal(qrModalEl);
        attachStaffButtonListeners();

        document.getElementById('printQrBtn').addEventListener('click', function () {
            const content = document.getElementById('qrFragmentContent');
            if (!content) return;

            const printWindow = window.open('', '_blank', 'width=400,height=500');
            printWindow.document.write(`
                <html>
                    <head>
                        <title>Print QR</title>
                        <style>
                            body { font-family: sans-serif; text-align: center; padding-top: 40px; }
                            h6 { margin: 12px 0 2px; }
                            p { color: #666; font-size: 13px; margin: 0; }
                        </style>
                    </head>
                    <body>${content.innerHTML}</body>
                </html>
            `);
            printWindow.document.close();
            printWindow.focus();
            printWindow.print();
            printWindow.close();
        });
    }

    window.addEventListener('load', initQrModalScript);
</script>
@endsection