@extends('layouts.app')
@section('title', isset($isEdit) ? 'Edit Penyakit' : 'Tambah Penyakit')
@section('page-title', isset($isEdit) ? 'Edit Penyakit' : 'Tambah Penyakit Baru')

@section('content')
<a href="{{ route('diseases.index') }}" class="inline-flex items-center gap-2 mb-6 text-sm font-medium" style="color:#2d6a4f;">
    <i class="fas fa-arrow-left"></i> Kembali
</a>

<form method="POST" 
      action="{{ isset($isEdit) ? route('diseases.update', $disease->id) : route('diseases.store') }}"
      enctype="multipart/form-data">
    @csrf
    @if(isset($isEdit))
        @method('PUT')
    @endif

<!-- INFO PENYAKIT -->
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
    <h3 class="text-lg font-bold mb-5" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
        <i class="fas fa-info-circle mr-2" style="color:#2d6a4f;"></i>Informasi Penyakit
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Kode Penyakit</label>
            <input type="text" value="{{ $nextDiseaseCode }}" disabled
                   class="w-full px-4 py-3 rounded-xl text-sm" style="background:#f0fdf4;border:1.5px solid #b7ddc4;color:#2d6a4f;font-weight:700;">
        </div>
        <div>
            <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Nama Penyakit <span style="color:red">*</span></label>
            <input type="text" name="name" value="{{ old('name', isset($disease) ? $disease->name : '') }}" required placeholder="Contoh: Luka Api"
                   class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
            @error('name')<p class="text-xs mt-1" style="color:red;">{{ $message }}</p>@enderror
        </div>
        <div>
            <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Nama Latin</label>
            <input type="text" name="latin_name" value="{{ old('latin_name', isset($disease) ? $disease->latin_name : '') }}" placeholder="Contoh: Xanthomonas albilineans"
                   class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
        </div>
        <div>
            <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Foto Penyakit</label>
            @if(isset($disease) && $disease->photo)
                <div class="mb-2">
                    <img src="{{ asset('storage/'.$disease->photo) }}" class="h-16 rounded-lg object-cover">
                    <p class="text-xs mt-1" style="color:#8fa89a;">Unggah foto baru untuk mengganti</p>
                </div>
            @endif
            <input type="file" name="photo" accept="image/*"
                   class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;">
        </div>
        <div class="md:col-span-2">
            <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;letter-spacing:.06em;">Deskripsi</label>
            <textarea name="description" rows="3" placeholder="Deskripsi singkat tentang penyakit ini..."
                      class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;resize:none;">{{ old('description', isset($disease) ? $disease->description : '') }}</textarea>
        </div>
    </div>
</div>

<!-- GEJALA -->
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
    <div class="flex items-center justify-between mb-5">
        <h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
            <i class="fas fa-search mr-2" style="color:#2d6a4f;"></i>Gejala <span class="text-sm font-normal" style="color:#8fa89a;">(minimal 3)</span>
        </h3>
        <button type="button" onclick="tambahGejala()"
                class="px-4 py-2 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
            <i class="fas fa-plus mr-1"></i> Tambah Gejala
        </button>
    </div>
    @error('symptoms')<p class="text-xs mb-3" style="color:red;">{{ $message }}</p>@enderror

    <div id="gejala-container" class="space-y-4">
        @if(isset($isEdit) && $disease->symptoms->count() > 0)
            @foreach($disease->symptoms as $i => $symptom)
            <div class="gejala-item p-4 rounded-xl" style="background:#f8f4ee;border:1px solid #ede8df;">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-sm font-bold" style="color:#2d6a4f;">Gejala {{ $i+1 }}</span>
                    @if($i >= 3)
                    <button type="button" onclick="hapusGejala(this)" class="text-xs px-2 py-1 rounded-lg" style="color:#dc2626;background:#fef2f2;">
                        <i class="fas fa-times"></i> Hapus
                    </button>
                    @endif
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
                        <input type="text" name="symptoms[{{ $i }}][name]" required
                               value="{{ $symptom->name }}"
                               placeholder="Contoh: Daun berwarna kuning"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
                        <input type="number" name="symptoms[{{ $i }}][cf]"
                               value="{{ $symptom->pivot->cf_value }}"
                               min="0.1" max="1.0" step="0.05"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
                    </div>
                    <div class="md:col-span-3">
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
                        @if($symptom->photo)
                            <div class="mb-2">
                                <img src="{{ asset('storage/'.$symptom->photo) }}" class="h-12 rounded-lg object-cover">
                                <p class="text-xs mt-1" style="color:#8fa89a;">Unggah foto baru untuk mengganti</p>
                            </div>
                        @endif
                        <input type="file" name="symptoms[{{ $i }}][photo]" accept="image/*"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
                    </div>
                </div>
            </div>
            @endforeach
        @else
            @for($i = 0; $i < 3; $i++)
            <div class="gejala-item p-4 rounded-xl" style="background:#f8f4ee;border:1px solid #ede8df;">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-sm font-bold" style="color:#2d6a4f;">Gejala {{ $i+1 }}</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
                        <input type="text" name="symptoms[{{ $i }}][name]" required placeholder="Contoh: Daun berwarna kuning"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
                        <input type="number" name="symptoms[{{ $i }}][cf]" value="0.7" min="0.1" max="1.0" step="0.05"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
                    </div>
                    <div class="md:col-span-3">
                        <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
                        <input type="file" name="symptoms[{{ $i }}][photo]" accept="image/*"
                               class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
                    </div>
                </div>
            </div>
            @endfor
        @endif
    </div>
</div>

<!-- PENANGANAN -->
<div class="bg-white rounded-2xl border border-[#ede8df] p-6 mb-6" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
    <div class="flex items-center justify-between mb-5">
        <h3 class="text-lg font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
            <i class="fas fa-medkit mr-2" style="color:#2d6a4f;"></i>Cara Penanganan <span class="text-sm font-normal" style="color:#8fa89a;">(minimal 3)</span>
        </h3>
        <button type="button" onclick="tambahPenanganan()"
                class="px-4 py-2 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
            <i class="fas fa-plus mr-1"></i> Tambah Penanganan
        </button>
    </div>
    @error('treatments')<p class="text-xs mb-3" style="color:red;">{{ $message }}</p>@enderror

    <div id="penanganan-container" class="space-y-3">
        @if(isset($isEdit) && $disease->treatments->count() > 0)
            @foreach($disease->treatments as $i => $t)
            <div class="penanganan-item flex gap-3 items-start">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
                     style="background:#2d6a4f;">{{ $i+1 }}</div>
                <div class="flex-1">
                    <input type="text" name="treatments[{{ $i }}][description]" required
                           value="{{ $t->description }}"
                           placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
                           class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
                </div>
                @if($i >= 3)
                <button type="button" onclick="hapusPenanganan(this)" class="mt-1 text-xs px-2 py-2 rounded-lg flex-shrink-0" style="color:#dc2626;background:#fef2f2;">
                    <i class="fas fa-times"></i>
                </button>
                @endif
            </div>
            @endforeach
        @else
            @for($i = 0; $i < 3; $i++)
            <div class="penanganan-item flex gap-3 items-start">
                <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
                     style="background:#2d6a4f;">{{ $i+1 }}</div>
                <div class="flex-1">
                    <input type="text" name="treatments[{{ $i }}][description]" required
                           placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
                           class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
                </div>
            </div>
            @endfor
        @endif
    </div>
</div>

<!-- SUBMIT -->
<div class="flex gap-3">
    <button type="submit" class="px-8 py-3 rounded-xl text-sm font-semibold text-white" style="background:#2d6a4f;">
        <i class="fas fa-save mr-2"></i>{{ isset($isEdit) ? 'Update Penyakit' : 'Simpan Penyakit' }}
    </button>
    <a href="{{ isset($isEdit) ? route('diseases.show', $disease->id) : route('diseases.index') }}" 
       class="px-8 py-3 rounded-xl text-sm font-semibold" style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
        Batal
    </a>
</div>

</form>
@endsection

@push('scripts')
<script>
let gejalaCount = {{ isset($isEdit) ? $disease->symptoms->count() : 3 }};
let penangananCount = {{ isset($isEdit) ? $disease->treatments->count() : 3 }};

function tambahGejala() {
    gejalaCount++;
    const container = document.getElementById('gejala-container');
    const div = document.createElement('div');
    div.className = 'gejala-item p-4 rounded-xl';
    div.style.cssText = 'background:#f8f4ee;border:1px solid #ede8df;';
    div.innerHTML = `
        <div class="flex items-center justify-between mb-3">
            <span class="text-sm font-bold" style="color:#2d6a4f;">Gejala ${gejalaCount}</span>
            <button type="button" onclick="hapusGejala(this)" class="text-xs px-2 py-1 rounded-lg" style="color:#dc2626;background:#fef2f2;">
                <i class="fas fa-times"></i> Hapus
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div class="md:col-span-2">
                <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nama Gejala *</label>
                <input type="text" name="symptoms[${gejalaCount-1}][name]" required placeholder="Contoh: Daun berwarna kuning"
                       class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
            </div>
            <div>
                <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Nilai CF (0.1 - 1.0)</label>
                <input type="number" name="symptoms[${gejalaCount-1}][cf]" value="0.7" min="0.1" max="1.0" step="0.05"
                       class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;outline:none;">
            </div>
            <div class="md:col-span-3">
                <label class="block text-xs font-semibold uppercase mb-1" style="color:#5a7a67;">Foto Gejala</label>
                <input type="file" name="symptoms[${gejalaCount-1}][photo]" accept="image/*"
                       class="w-full px-3 py-2.5 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:white;">
            </div>
        </div>`;
    container.appendChild(div);
}

function hapusGejala(btn) {
    const items = document.querySelectorAll('.gejala-item');
    if (items.length <= 3) { alert('Minimal 3 gejala!'); return; }
    btn.closest('.gejala-item').remove();
    document.querySelectorAll('.gejala-item').forEach((el, i) => {
        el.querySelector('span').textContent = 'Gejala ' + (i+1);
    });
}

function tambahPenanganan() {
    penangananCount++;
    const container = document.getElementById('penanganan-container');
    const div = document.createElement('div');
    div.className = 'penanganan-item flex gap-3 items-start';
    div.innerHTML = `
        <div class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 mt-1"
             style="background:#2d6a4f;">${penangananCount}</div>
        <div class="flex-1">
            <input type="text" name="treatments[${penangananCount-1}][description]" required
                   placeholder="Contoh: Gunakan bibit sehat dan bebas penyakit"
                   class="w-full px-4 py-3 rounded-xl text-sm" style="border:1.5px solid #e5e7eb;background:#f9fafb;outline:none;">
        </div>
        <button type="button" onclick="hapusPenanganan(this)" class="mt-1 text-xs px-2 py-2 rounded-lg flex-shrink-0" style="color:#dc2626;background:#fef2f2;">
            <i class="fas fa-times"></i>
        </button>`;
    container.appendChild(div);
}

function hapusPenanganan(btn) {
    const items = document.querySelectorAll('.penanganan-item');
    if (items.length <= 3) { alert('Minimal 3 cara penanganan!'); return; }
    btn.closest('.penanganan-item').remove();
    document.querySelectorAll('.penanganan-item').forEach((el, i) => {
        el.querySelector('div.w-8').textContent = i+1;
    });
}
</script>
@endpush