@extends('admin.layouts.dashboard')

@section('title', 'Sync Device Data')

@section('content')
    <x-page-header
        title="Sync Device Data"
        description="Import punch records from the fingerprint terminal into the attendance log."
        :breadcrumbs="['Dashboard' => url('/dashboard'), 'System' => null, 'Sync device data' => null]"
    />

    <div style="max-width: 640px;">
        <x-card title="Attendance import">
            <p class="u-text-secondary">
                The import pulls every punch on or after the most recent date already stored,
                replacing that day so a partial sync is completed rather than duplicated.
                It can take a minute while the terminal responds.
            </p>

            <div id="sync-status" class="u-mt-4"></div>

            <x-slot:footer>
                <button type="button" id="import_data" class="btn btn--primary" data-loading-label="Importing…">
                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                    Import data
                </button>
            </x-slot:footer>
        </x-card>
    </div>
@endsection

@push('scripts')
<script>
    (function () {
        const button = document.getElementById('import_data');
        const status = document.getElementById('sync-status');
        const postUrl = @json(url('/postajaxattdevice'));
        const redirectUrl = @json(url('/dailyattendancereport/2'));

        function render(type, message) {
            status.innerHTML = '';

            const alert = document.createElement('div');
            alert.className = 'alert alert--' + type;
            alert.setAttribute('role', type === 'danger' ? 'alert' : 'status');

            const icon = document.createElement('i');
            icon.className = 'alert__icon fa-solid ' + (type === 'danger'
                ? 'fa-circle-exclamation'
                : type === 'success' ? 'fa-circle-check' : 'fa-circle-info');
            icon.setAttribute('aria-hidden', 'true');

            const body = document.createElement('div');
            body.className = 'alert__body';
            // Server text only; inserted as text so markup can never execute.
            body.textContent = message;

            alert.append(icon, body);
            status.appendChild(alert);
        }

        button.addEventListener('click', async function () {
            button.classList.add('is-loading');
            button.disabled = true;
            render('info', 'Please wait — contacting the terminal…');

            try {
                const response = await fetch(postUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                });

                const data = await response.json();
                const message = (data.msg || '').replace(/<[^>]*>/g, ' ').trim();

                if (data.status === 'success') {
                    render('success', message);
                    window.toast('Attendance data imported.', { type: 'success' });
                    setTimeout(() => { window.location.href = redirectUrl; }, 1500);
                } else {
                    render('danger', message || 'The terminal could not be reached.');
                }
            } catch (error) {
                render('danger', 'The import request failed. Please try again.');
            } finally {
                button.classList.remove('is-loading');
                button.disabled = false;
            }
        });
    })();
</script>
@endpush