@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto py-10 px-4">
    <div class="text-center mb-8">
        <h1 class="text-4xl font-extrabold text-gray-900">Altman <span class="text-blue-600">Z-Score</span></h1>
        <p class="text-gray-500">Analisis Kebangkrutan UMKM & Perusahaan Privat</p>
    </div>

    <div class="bg-white p-10 rounded-[45px] shadow-2xl border border-gray-100 relative overflow-hidden">
        <form action="{{ route('math.calculate_zscore') }}" method="POST">
            @csrf
            
            @php
                $steps = [
                    ['id' => 1, 'var' => 'a', 'label' => 'VARIABEL A (X1)', 'title' => 'Modal Kerja / Total Aset', 'coef' => 0.717],
                    ['id' => 2, 'var' => 'b', 'label' => 'VARIABEL B (X2)', 'title' => 'Laba Ditahan / Total Aset', 'coef' => 0.847],
                    ['id' => 3, 'var' => 'c', 'label' => 'VARIABEL C (X3)', 'title' => 'EBIT / Total Aset', 'coef' => 3.107],
                    ['id' => 4, 'var' => 'd', 'label' => 'VARIABEL D (X4)', 'title' => 'Nilai Buku Ekuitas / Total Liabilitas', 'coef' => 0.420],
                    ['id' => 5, 'var' => 'e', 'label' => 'VARIABEL E (X5)', 'title' => 'Penjualan / Total Aset', 'coef' => 0.998],
                ];
            @endphp

            @foreach($steps as $step)
            <div class="step {{ $step['id'] > 1 ? 'hidden' : '' }}" id="step{{ $step['id'] }}">
                <label class="block text-sm font-black text-blue-600 mb-2 tracking-widest uppercase">Langkah {{ $step['id'] }}/5: {{ $step['label'] }}</label>
                <h3 class="text-2xl font-bold mb-6 text-gray-800">{{ $step['title'] }}</h3>
                
                <div class="flex flex-col md:flex-row items-center gap-4 mb-8 bg-gray-50 p-6 rounded-[32px]">
                    <div class="flex items-center gap-3 flex-1 w-full">
                        <input type="number" step="any" id="{{ $step['var'] }}_num" class="w-full p-5 bg-white rounded-2xl border-none text-xl font-bold text-center shadow-sm" placeholder="Contoh: 290" oninput="calc({{ $step['id'] }})">
                        <span class="text-2xl font-bold text-gray-400">/</span>
                        <input type="number" step="any" id="{{ $step['var'] }}_den" class="w-full p-5 bg-white rounded-2xl border-none text-xl font-bold text-center shadow-sm" placeholder="Contoh: 129" oninput="calc({{ $step['id'] }})">
                    </div>
                    <span class="text-2xl font-bold text-gray-400">×</span>
                    <div class="bg-blue-600 text-white p-5 rounded-2xl font-mono text-xl font-bold">{{ $step['coef'] }}</div>
                </div>

                <input type="hidden" name="{{ $step['var'] }}" id="{{ $step['var'] }}_final" value="0">

                <div class="mb-6 text-center p-4 bg-blue-50 rounded-2xl border border-blue-100 border-dashed">
                    <span class="text-gray-500 font-medium italic">Hasil Perhitungan {{ strtoupper($step['var']) }}:</span>
                    <span id="res_{{ $step['id'] }}" class="text-2xl font-black text-blue-700 ml-2">0.000</span>
                </div>

                <div class="flex gap-4">
                    @if($step['id'] > 1)
                        <button type="button" onclick="nextStep({{ $step['id'] - 1 }})" class="w-1/3 bg-gray-100 text-gray-600 p-5 rounded-2xl font-bold hover:bg-gray-200 transition">Kembali</button>
                    @endif
                    
                    @if($step['id'] < 5)
                        <button type="button" onclick="nextStep({{ $step['id'] + 1 }})" class="flex-1 bg-gray-900 text-white p-5 rounded-2xl font-black text-xl hover:bg-black transition shadow-xl">NEXT ➔</button>
                    @else
                        <button type="submit" class="flex-1 bg-blue-600 text-white p-5 rounded-2xl font-black text-xl hover:bg-blue-700 transition shadow-xl shadow-blue-200">HITUNG SEKARANG</button>
                    @endif
                </div>
            </div>
            @endforeach
        </form>
    </div>
</div>

<script>
    const coefficients = { 1: 0.717, 2: 0.847, 3: 3.107, 4: 0.420, 5: 0.998 };
    const vars = { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e' };

    function calc(stepId) {
        const v = vars[stepId];
        const num = parseFloat(document.getElementById(v + '_num').value) || 0;
        const den = parseFloat(document.getElementById(v + '_den').value) || 1;
        const coef = coefficients[stepId];

        const result = (num / den) * coef;
        
        document.getElementById('res_' + stepId).innerText = result.toFixed(3);
        document.getElementById(v + '_final').value = result;
    }

    function nextStep(s) {
        document.querySelectorAll('.step').forEach(div => div.classList.add('hidden'));
        document.getElementById('step' + s).classList.remove('hidden');
    }
</script>
@endsection