@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">➕ Tambah SOP Baru</h1>

    <form action="{{ route('sop.store') }}" method="POST" enctype="multipart/form-data" id="sop-form">
        @csrf

        {{-- Judul SOP --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Judul SOP</label>
                           <div class="flex gap-2">
                    <button type="button" onclick="generateAI()"
                        class="text-sm bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700 transition">
                        🤖 Generate dari Judul
                    </button>
                    <button type="button" onclick="resetForm()"
                        class="text-sm bg-gray-300 text-black px-3 py-1 rounded hover:bg-gray-400 transition">
                        🔄 Reset Form
                    </button>
                </div>
            <input type="text" name="judul" id="judul" required
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white">
        </div>


{{-- Nomor SOP (preview saja) --}}
<div>
    <label class="block font-medium text-gray-700 dark:text-white">Nomor SOP</label>
    <input type="text" id="nomor_sop" readonly
        class="w-full mt-1 px-4 py-2 border bg-gray-100 dark:bg-gray-900 dark:text-white text-gray-600 cursor-not-allowed"
        value="Akan tergenerate setelah disimpan">
</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"></textarea>
        </div>

        {{-- Isi Lengkap SOP --}}
        <div>
            <div class="flex justify-between items-center mb-1">
                <label class="block font-medium text-gray-700 dark:text-white">Isi Lengkap</label>

            </div>
            <textarea name="isi_lengkap" rows="10" id="isi_lengkap"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white"></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" 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 (Opsional)</label>
            <input type="date" name="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">Aktif</option>
                <option value="nonaktif">Nonaktif</option>
            </select>
        </div>

        {{-- Upload File --}}
        <div>
            <label class="block font-medium text-gray-700 dark:text-white">Upload File SOP (PDF/DOC)</label>
            <input type="file" name="file_sop" id="file_sop" accept=".pdf,.doc,.docx"
                class="w-full mt-1 px-4 py-2 border rounded dark:bg-gray-900 dark:text-white"
                onchange="previewFile(this)">
            <iframe id="filePreview" class="w-full mt-2 border rounded hidden" style="height: 400px;"></iframe>
        </div>

        {{-- Tombol Simpan --}}
        <div class="pt-4">
            <button type="submit"
                class="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 transition">
                💾 Simpan SOP
            </button>
        </div>
    </form>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // ✅ Generate AI dari Judul
    function generateAI() {
        const judul = document.getElementById('judul').value;
        if (!judul.trim()) return alert('Silakan isi judul terlebih dahulu.');

        fetch("{{ route('sop.generate.ai') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ prompt: judul })
        })
        .then(res => res.json())
        .then(data => {
            if (data.error) return alert(data.error);
            Swal.fire({
                title: '🧠 Hasil AI',
                html: `
                    <div class="text-left text-sm">
                        <p><strong>Deskripsi:</strong></p>
                        <p>${data.deskripsi}</p>
                        <br>
                        <p><strong>Isi SOP:</strong></p>
                        <pre class="bg-gray-100 p-3 rounded whitespace-pre-wrap">${data.isi_lengkap}</pre>
                    </div>
                `,
                width: 800,
                showCancelButton: true,
                confirmButtonText: 'Gunakan',
                cancelButtonText: 'Batal',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.querySelector('[name="deskripsi"]').value = data.deskripsi;
                    document.querySelector('[name="isi_lengkap"]').value = data.isi_lengkap;
                }
            });
        })
        .catch(() => alert("⚠️ Gagal menghubungi AI."));
    }

    // ✅ Reset seluruh form
    function resetForm() {
        const nomor = document.getElementById('nomor_sop').value;
        document.getElementById('sop-form').reset();
        document.getElementById('nomor_sop').value = nomor;
        document.getElementById('filePreview').classList.add('hidden');
        document.getElementById('filePreview').src = '';
    }

    // ✅ Tampilkan preview nomor SOP
document.addEventListener('DOMContentLoaded', () => {
    const nomorField = document.getElementById('nomor_sop');
    if (!nomorField) return;

    fetch("{{ route('sop.generate.nomor', [], false) }}") // pastikan ini benar
        .then(res => res.ok ? res.json() : Promise.reject())
        .then(data => {
            nomorField.value = data.nomor_sop || 'SOP/???/????';
        })
        .catch(() => {
            nomorField.value = 'SOP/???/????';
        });
});

    // ✅ Preview file PDF sebelum upload
    function previewFile(input) {
        const file = input.files[0];
        const preview = document.getElementById('filePreview');
        if (!file || file.type !== 'application/pdf') {
            preview.classList.add('hidden');
            return;
        }
        preview.src = URL.createObjectURL(file);
        preview.classList.remove('hidden');
    }
</script>
@endpush

@endsection