@extends('layouts.app')
@section('title', 'Kamus Penyakit')
@section('page-title', 'Kamus Penyakit')

@section('content')

@if(session('status'))
    <div class="mb-4 px-4 py-3 rounded-xl text-sm font-medium" style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;">
        <i class="fas fa-check-circle mr-2"></i>{{ session('status') }}
    </div>
@endif

<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <p style="color:#5a7a67;">Total {{ $diseases->count() }} penyakit terdaftar</p>
    @if(auth()->user()->isAdmin())
    <a href="{{ route('diseases.create') }}"
       class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white"
       style="background:#2d6a4f;">
        <i class="fas fa-plus mr-2"></i>Tambah Penyakit
    </a>
    @endif
</div>

<!-- Grid Kartu Penyakit -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
    @forelse($diseases as $disease)
    <div class="bg-white rounded-2xl border border-[#ede8df] overflow-hidden hover:shadow-lg transition"
         style="box-shadow:0 2px 12px rgba(26,58,42,.06);">

        <!-- Foto -->
        <div class="h-44 flex items-center justify-center overflow-hidden" style="background:#f0fdf4;">
            @if($disease->photo)
                <img src="{{ url('storage/'.$disease->photo) }}" class="w-full h-full object-cover">
            @else
                <div class="text-center">
                    <i class="fas fa-leaf text-5xl mb-2" style="color:#b7ddc4;"></i>
                    <p class="text-xs" style="color:#a0b4a8;">Belum ada foto</p>
                </div>
            @endif
        </div>

        <!-- Info -->
        <div class="p-5">
            <div class="flex items-start justify-between mb-2">
                <span class="text-xs font-bold px-2 py-1 rounded-lg" style="background:#d8f3dc;color:#2d6a4f;">
                    {{ $disease->code }}
                </span>
                <span class="text-xs" style="color:#a0b4a8;">{{ $disease->symptoms->count() }} gejala</span>
            </div>

            <h3 class="font-bold text-base mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
                {{ $disease->name }}
            </h3>
            <p class="text-xs italic mb-3" style="color:#8fa89a;">{{ $disease->latin_name }}</p>
            <p class="text-sm mb-4 line-clamp-2" style="color:#5a7a67;">{{ $disease->description }}</p>

            <!-- Gejala tags -->
            <div class="flex flex-wrap gap-1 mb-4">
                @foreach($disease->symptoms->take(3) as $s)
                    <span class="text-xs px-2 py-1 rounded-full" style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;">
                        {{ $s->code }}
                    </span>
                @endforeach
                @if($disease->symptoms->count() > 3)
                    <span class="text-xs px-2 py-1 rounded-full" style="background:#f0f0f0;color:#888;">
                        +{{ $disease->symptoms->count() - 3 }} lainnya
                    </span>
                @endif
            </div>

            <!-- Tombol aksi -->
            <div class="flex gap-2">
                <a href="{{ route('diseases.show', $disease) }}"
                   class="block text-center py-2.5 rounded-xl text-sm font-semibold transition {{ auth()->user()->isAdmin() ? 'flex-1' : 'w-full' }}"
                   style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
                    <i class="fas fa-eye mr-1"></i> Lihat Detail
                </a>
                @if(auth()->user()->isAdmin())
                <button
                    onclick="confirmDelete({{ $disease->id }}, '{{ addslashes($disease->name) }}')"
                    class="px-4 py-2.5 rounded-xl text-sm font-semibold transition"
                    style="background:#fff0f0;color:#dc2626;border:1.5px solid #fca5a5;"
                    onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fff0f0'">
                    <i class="fas fa-trash"></i>
                </button>
                @endif
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-3 text-center py-20">
        <i class="fas fa-book-medical text-5xl mb-4" style="color:#c8d8cc;"></i>
        <p style="color:#8fa89a;">Belum ada data penyakit</p>
    </div>
    @endforelse
</div>

<!-- ─── Modal Konfirmasi Hapus ─── -->
<div id="deleteModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
     style="background:rgba(0,0,0,0.4);">
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
         style="animation: popIn .25s cubic-bezier(0.22,1,0.36,1);">
        <div class="text-center mb-4">
            <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"
                 style="background:#fff0f0;">
                <i class="fas fa-trash text-2xl" style="color:#dc2626;"></i>
            </div>
            <h3 class="text-lg font-bold mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
                Hapus Penyakit?
            </h3>
            <p class="text-sm" style="color:#5a7a67;">
                Kamu akan menghapus penyakit <br>
                <strong id="deleteName" style="color:#1a3a2a;"></strong>
            </p>
            <p class="text-xs mt-2" style="color:#dc2626;">
                ⚠️ Data gejala & penanganan ikut terhapus dan tidak bisa dikembalikan.
            </p>
        </div>

        <div class="flex gap-3 mt-4">
            <button onclick="closeModal()"
                class="flex-1 py-2.5 rounded-xl text-sm font-semibold"
                style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
                Batal
            </button>
            <form id="deleteForm" method="POST" class="flex-1">
                @csrf
                @method('DELETE')
                <button type="submit"
                    class="w-full py-2.5 rounded-xl text-sm font-semibold text-white"
                    style="background:#dc2626;">
                    Ya, Hapus
                </button>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function confirmDelete(id, name) {
        document.getElementById('deleteName').textContent = name;
        document.getElementById('deleteForm').action = '{{ url("/kamus") }}/' + id;
        document.getElementById('deleteModal').classList.remove('hidden');
    }

    function closeModal() {
        document.getElementById('deleteModal').classList.add('hidden');
    }

    document.getElementById('deleteModal').addEventListener('click', function(e) {
        if (e.target === this) closeModal();
    });
</script>

<style>
    @keyframes popIn {
        from { transform: scale(0.85); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
    }
</style>
@endpush