@extends('layouts.admin-apoteker')

@section('content')
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded shadow space-y-6">

    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">✏️ Edit SOP: {{ $sop->judul }}</h1>

    <form action="{{ route('sop.update', $sop) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- Judul --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Judul SOP</label>
            <input type="text" name="judul" value="{{ old('judul', $sop->judul) }}" required
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>

        {{-- Nomor SOP --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Nomor SOP</label>
            <input type="text" name="nomor_sop" value="{{ old('nomor_sop', $sop->nomor_sop) }}" required
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>

        {{-- Deskripsi --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Deskripsi Ringkas</label>
            <textarea name="deskripsi" rows="3"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">{{ old('deskripsi', $sop->deskripsi) }}</textarea>
        </div>

        {{-- Isi Lengkap --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Isi Lengkap</label>
            <textarea name="isi_lengkap" rows="10"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">{{ old('isi_lengkap', $sop->isi_lengkap) }}</textarea>
        </div>

        {{-- Tanggal Terbit --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Tanggal Terbit</label>
            <input type="date" name="tanggal_terbit" value="{{ old('tanggal_terbit', $sop->tanggal_terbit) }}" required
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>

        {{-- Tanggal Review --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Tanggal Review</label>
            <input type="date" name="tanggal_review" value="{{ old('tanggal_review', $sop->tanggal_review) }}"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>

        {{-- Status --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Status</label>
            <select name="status" class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
                <option value="aktif" @selected(old('status', $sop->status) == 'aktif')>Aktif</option>
                <option value="nonaktif" @selected(old('status', $sop->status) == 'nonaktif')>Nonaktif</option>
            </select>
        </div>

        {{-- File Upload --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">File SOP Saat Ini</label>
            @if ($sop->file_sop)
                <p class="mb-2">
                    <a href="{{ asset('storage/' . $sop->file_sop) }}" target="_blank" class="text-blue-600 underline">
                        📂 Lihat File Saat Ini
                    </a>
                </p>
            @else
                <p class="mb-2 text-gray-500">Belum ada file terlampir.</p>
            @endif

            <label class="block font-medium text-gray-700 dark:text-white">Ganti File SOP (opsional)</label>
            <input type="file" name="file_sop" accept=".pdf,.doc,.docx"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>

        {{-- Tombol Submit --}}
        <div class="pt-4">
            <button type="submit"
                class="bg-yellow-500 text-white px-6 py-2 rounded hover:bg-yellow-600 transition">
                💾 Simpan Perubahan
            </button>
        </div>
    </form>
</div>
@endsection