@extends('layouts.app')

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

    <div class="bg-white p-10 rounded-[45px] shadow-2xl border border-gray-100 text-center">
        
        <div class="mb-8 group cursor-pointer" onclick="document.getElementById('modal-detail').classList.remove('hidden')">
            <span class="text-gray-400 font-bold tracking-widest uppercase text-xs">Klik angka untuk detail perhitungan ⬇</span>
            <h2 class="text-7xl font-black mt-2 transition-transform group-hover:scale-110 {{ $z > 2.90 ? 'text-green-600' : ($z >= 1.23 ? 'text-yellow-500' : 'text-red-600') }}">
                {{ number_format($z, 3) }}
            </h2>
        </div>

        <div class="inline-block px-8 py-4 rounded-3xl mb-10 font-bold text-xl 
            {{ $z > 2.90 ? 'bg-green-100 text-green-700' : ($z >= 1.23 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700') }}">
            {{ $status }}
        </div>

        <div class="overflow-hidden rounded-3xl border border-gray-100 mb-10">
            <table class="w-full text-left">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="p-5 font-bold text-gray-600">Nilai Z-Score</th>
                        <th class="p-5 font-bold text-gray-600">Kategori</th>
                        <th class="p-5 font-bold text-gray-600">Keterangan</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <tr class="{{ $z > 2.90 ? 'bg-green-50/50' : '' }}">
                        <td class="p-5 font-mono font-bold">> 2,90</td>
                        <td class="p-5">Safe Zone</td>
                        <td class="p-5 text-gray-500">Kondisi Sehat</td>
                    </tr>
                    <tr class="{{ ($z >= 1.23 && $z <= 2.90) ? 'bg-yellow-50/50' : '' }}">
                        <td class="p-5 font-mono font-bold">1,23 - 2,90</td>
                        <td class="p-5">Grey Zone</td>
                        <td class="p-5 text-gray-500">Kondisi Rawan</td>
                    </tr>
                    <tr class="{{ $z < 1.23 ? 'bg-red-50/50' : '' }}">
                        <td class="p-5 font-mono font-bold">< 1,23</td>
                        <td class="p-5">Distress Zone</td>
                        <td class="p-5 text-gray-500">Potensi Bangkrut</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="flex gap-4">
            <a href="{{ route('math.zscore') }}" class="flex-1 bg-gray-100 text-gray-600 p-5 rounded-2xl font-bold hover:bg-gray-200 transition">Hitung Ulang</a>
            <a href="{{ route('math.index') }}" class="flex-1 bg-blue-600 text-white p-5 rounded-2xl font-bold hover:bg-blue-700 shadow-xl shadow-blue-200 transition">Kembali ke Dashboard</a>
        </div>
    </div>
</div>

<div id="modal-detail" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-[40px] max-w-lg w-full p-8 shadow-2xl">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-xl font-bold">Rincian Perhitungan</h3>
            <button onclick="document.getElementById('modal-detail').classList.add('hidden')" class="text-gray-400 hover:text-black text-2xl">&times;</button>
        </div>
        
        <div class="space-y-4">
            @foreach($details as $key => $d)
            <div class="flex justify-between items-center p-4 bg-gray-50 rounded-2xl border border-gray-100">
                <div>
                    <span class="font-bold text-blue-600">Variabel {{ $key }}</span>
                    <p class="text-xs text-gray-500">{{ number_format($d['val'], 2) }} × {{ $d['coef'] }}</p>
                </div>
                <span class="font-mono font-bold">+ {{ number_format($d['res'], 3) }}</span>
            </div>
            @endforeach
            
            <div class="pt-4 border-t-2 border-dashed border-gray-200 flex justify-between items-center">
                <span class="font-black text-lg">Total Akhir (Z)</span>
                <span class="font-black text-2xl text-blue-600">{{ number_format($z, 3) }}</span>
            </div>
        </div>
        
        <p class="mt-6 text-center text-[10px] text-gray-9git00 uppercase tracking-widest italic">Formula: 0.717A + 0.847B + 3.107C + 0.420D + 0.998E</p>
        <button onclick="document.getElementById('modal-detail').classList.add('hidden')" class="w-full mt-6 bg-gray-900 text-white p-4 rounded-2xl font-bold hover:bg-black transition">Tutup Detail</button>
    </div>
</div>
@endsection