@extends('layouts.app')

@section('title', 'Generate Surat '.ucfirst($type))

@section('content')
<div class="max-w-2xl mx-auto space-y-6">
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center">
            <i class="fas fa-file-alt text-white"></i>
        </div>
        <div>
            <h1 class="text-xl font-bold text-gray-900">Generate Surat {{ ucfirst($type) }}</h1>
            <p class="text-sm text-gray-500">Buat nomor surat baru untuk divisi {{ auth()->user()->division }}</p>
        </div>
    </div>

    <!-- Format Preview -->
    <div class="bg-green-50 border border-green-200 rounded-xl p-4">
        <p class="text-xs font-semibold text-green-700 mb-1">Format Nomor Surat:</p>
        <p class="text-sm font-mono font-bold text-green-800" id="formatPreview">{{ $formatPreview }}</p>
    </div>

    <!-- Form -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5">
        <!-- Pembuat Surat -->
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Nama Pembuat Surat <span class="text-red-500">*</span></label>
            <input type="text" id="pembuatSurat" value="{{ auth()->user()->username }}"
                class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500 transition-all"
                placeholder="Nama pembuat surat">
        </div>

        <!-- Keterangan -->
        <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">Keterangan / Perihal <span class="text-red-500">*</span></label>
            <textarea id="keterangan" rows="3"
                class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500 transition-all resize-none"
                placeholder="Masukkan perihal / keterangan surat"></textarea>
        </div>

        <!-- Submit -->
        <button onclick="generateSurat()" id="btnGenerate"
            class="w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center gap-2">
            <i class="fas fa-magic"></i>
            <span>Generate Nomor Surat</span>
        </button>
    </div>

    <!-- Result Card -->
    <div id="resultCard" class="hidden bg-white rounded-xl shadow-sm border-2 border-green-200 p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                <i class="fas fa-check-circle text-green-600 text-xl"></i>
            </div>
            <div>
                <p class="font-bold text-gray-800">Nomor Surat Berhasil Dibuat!</p>
                <p class="text-sm text-gray-500">Simpan nomor ini sebelum menutup halaman</p>
            </div>
        </div>

        <div class="bg-gray-50 rounded-xl p-4 mb-4">
            <p class="text-xs text-gray-500 mb-1">Nomor Surat:</p>
            <p class="text-2xl font-mono font-bold text-green-700" id="resultNomor">-</p>
        </div>

        <div class="grid grid-cols-2 gap-3 text-sm">
            <div><p class="text-gray-500">Divisi:</p><p class="font-semibold" id="resultDivisi">-</p></div>
            <div><p class="text-gray-500">Pembuat:</p><p class="font-semibold" id="resultPembuat">-</p></div>
            <div class="col-span-2"><p class="text-gray-500">Keterangan:</p><p class="font-semibold" id="resultKeterangan">-</p></div>
        </div>

        <!-- Upload PDF -->
        <div class="mt-4 pt-4 border-t border-gray-100">
            <p class="text-sm font-semibold text-gray-700 mb-3">Upload Scan Surat (PDF/optional):</p>
            <div class="flex gap-3">
                <input type="file" id="pdfFile" accept=".pdf" class="flex-1 text-sm border border-gray-200 rounded-lg px-3 py-2 file:mr-3 file:py-1 file:px-3 file:rounded-lg file:border-0 file:bg-green-50 file:text-green-700 file:font-semibold hover:file:bg-green-100">
                <button onclick="uploadPdf()" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-semibold hover:bg-green-700 transition-colors">
                    <i class="fas fa-upload mr-1"></i> Upload
                </button>
            </div>
        </div>

        <div class="flex gap-3 mt-4">
            <button onclick="copyNomor()" class="flex-1 py-2 border border-green-500 text-green-700 rounded-xl font-semibold text-sm hover:bg-green-50 transition-colors">
                <i class="fas fa-copy mr-2"></i>Salin Nomor
            </button>
            <button onclick="resetForm()" class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-xl font-semibold text-sm hover:bg-gray-200 transition-colors">
                <i class="fas fa-plus mr-2"></i>Buat Baru
            </button>
        </div>
    </div>

    <!-- Error Card -->
    <div id="errorCard" class="hidden bg-red-50 border border-red-200 rounded-xl p-4 flex items-start gap-3">
        <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
        <div>
            <p class="font-semibold text-red-800">Gagal Generate Surat</p>
            <p class="text-sm text-red-600" id="errorMsg">-</p>
        </div>
    </div>
</div>

@push('scripts')
<script>
let lastSuratId = null;

async function generateSurat() {
    const pembuat   = document.getElementById('pembuatSurat').value.trim();
    const keterangan = document.getElementById('keterangan').value.trim();

    if (!pembuat || !keterangan) {
        alert('Pembuat surat dan keterangan harus diisi!');
        return;
    }

    const btn = document.getElementById('btnGenerate');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Memproses...';
    document.getElementById('resultCard').classList.add('hidden');
    document.getElementById('errorCard').classList.add('hidden');

    try {
        const res  = await apiFetch('/api/surat/generate', {
            method: 'POST',
            body: JSON.stringify({ type: '{{ $type }}', pembuat_surat: pembuat, keterangan }),
        });
        const data = await res.json();

        if (data.success) {
            // Fetch the ID of the newly created surat for PDF upload
            const histRes  = await apiFetch('/api/surat/history?limit=1&type={{ $type }}');
            const histData = await histRes.json();
            if (histData.success && histData.data.length > 0) {
                lastSuratId = histData.data[0].id;
            }

            document.getElementById('resultNomor').textContent    = data.nomorSurat;
            document.getElementById('resultDivisi').textContent   = data.division;
            document.getElementById('resultPembuat').textContent  = data.pembuat_surat;
            document.getElementById('resultKeterangan').textContent = data.keterangan;
            document.getElementById('resultCard').classList.remove('hidden');
        } else {
            document.getElementById('errorMsg').textContent = data.message;
            document.getElementById('errorCard').classList.remove('hidden');
        }
    } catch(e) {
        document.getElementById('errorMsg').textContent = 'Terjadi kesalahan. Coba lagi.';
        document.getElementById('errorCard').classList.remove('hidden');
    }

    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-magic mr-2"></i><span>Generate Nomor Surat</span>';
}

async function uploadPdf() {
    if (!lastSuratId) { alert('Generate surat terlebih dahulu'); return; }
    const file = document.getElementById('pdfFile').files[0];
    if (!file) { alert('Pilih file PDF terlebih dahulu'); return; }

    const fd = new FormData();
    fd.append('pdf', file);
    fd.append('_token', window.csrfToken);

    const res  = await apiFetch(`/api/surat/${lastSuratId}/upload-pdf`, { method: 'POST', body: fd });
    const data = await res.json();
    alert(data.success ? 'PDF berhasil diupload!' : 'Gagal upload: '+data.message);
}

function copyNomor() {
    const nomor = document.getElementById('resultNomor').textContent;
    navigator.clipboard.writeText(nomor).then(() => alert('Nomor surat disalin: ' + nomor));
}

function resetForm() {
    document.getElementById('keterangan').value = '';
    document.getElementById('pdfFile').value    = '';
    document.getElementById('resultCard').classList.add('hidden');
    lastSuratId = null;
}
</script>
@endpush
@endsection