@extends('layouts.layoutMaster')

@section('title', 'Payroll Test')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Payroll Automation System Test</h4>
                </div>
                <div class="card-body">
                    <div class="alert alert-success">
                        <h5>✅ Payroll Automation System is Working!</h5>
                        <p>Sistem payroll otomatis berhasil diakses pada: {{ now()->format('d/m/Y H:i:s') }}</p>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-primary">
                                <div class="card-body">
                                    <h6 class="card-title">🔧 Pengaturan Payroll</h6>
                                    <p class="card-text">Konfigurasi aturan potongan dan bonus payroll</p>
                                    <a href="{{ route('payroll-settings.index') }}" class="btn btn-primary btn-sm">
                                        Akses Pengaturan
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card border-success">
                                <div class="card-body">
                                    <h6 class="card-title">🤖 Payroll Otomatis</h6>
                                    <p class="card-text">Perhitungan gaji otomatis berdasarkan data kehadiran</p>
                                    <a href="{{ route('auto-payroll.index') }}" class="btn btn-success btn-sm">
                                        Akses Payroll Otomatis
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <button id="testApiBtn" class="btn btn-info">Test API Connection</button>
                        <div id="apiResult" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('testApiBtn').addEventListener('click', function() {
    fetch('{{ route("payroll.test.api") }}')
        .then(response => response.json())
        .then(data => {
            document.getElementById('apiResult').innerHTML = `
                <div class="alert alert-info">
                    <strong>API Response:</strong><br>
                    ${data.message}<br>
                    <small>Timestamp: ${data.timestamp}</small>
                </div>
            `;
        })
        .catch(error => {
            document.getElementById('apiResult').innerHTML = `
                <div class="alert alert-danger">
                    <strong>API Error:</strong> ${error.message}
                </div>
            `;
        });
});
</script>
@endsection