@extends('layouts.admin')
@section('title', 'Pengaturan WA')
@section('page-title', 'Pengaturan Pesan WhatsApp Alpha')
@section('admin-content')
@php
    $previewNamaSiswa = 'Budi Santoso';
    $previewNamaOrangTua = 'Ibu Siti Rahayu';
    $errorWa = $errors->first('wa_alpha_message');
    $inputClass = 'w-full rounded-xl border bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition placeholder:text-slate-400 focus:ring-4';
    $inputClass .= $errorWa
        ? ' border-rose-300 focus:border-rose-400 focus:ring-rose-200'
        : ' border-slate-200 focus:border-brand-400 focus:ring-brand-200';
@endphp

<x-card title="Template pesan WhatsApp Alpha" subtitle="Pesan ini dipakai guru saat mengirim notifikasi ke orang tua siswa yang berstatus Alpha. Kosongkan untuk memakai pesan default.">
    <form action="{{ route('admin.pengaturan.update') }}" method="POST" class="space-y-4">
        @csrf
        @method('PUT')

        <div>
            <label class="mb-1 block text-sm font-semibold text-slate-700" for="wa_alpha_message">
                Isi pesan
            </label>
            <textarea
                name="wa_alpha_message"
                id="wa_alpha_message"
                rows="5"
                maxlength="1000"
                placeholder="{{ $defaultMessage }}"
                class="{{ $inputClass }}"
            >{{ old('wa_alpha_message', $waAlphaMessage) }}</textarea>
            <div class="mt-1 text-xs text-slate-500">
                Gunakan placeholder <code class="rounded bg-slate-100 px-1">{nama_siswa}</code> dan
                <code class="rounded bg-slate-100 px-1">{nama_orang_tua}</code>. Maksimal 1000 karakter.
            </div>
            @if($errorWa)
                <div class="mt-1 text-xs font-medium text-rose-600">{{ $errorWa }}</div>
            @endif
        </div>

        <x-button type="submit" variant="secondary">Simpan perubahan</x-button>
    </form>
</x-card>

<x-card title="Preview pesan" subtitle="Contoh tampilan setelah placeholder diganti." class="mt-6">
    <div class="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-800 whitespace-pre-wrap" id="wa-preview"></div>
    <div class="mt-2 text-xs text-slate-500">
        Contoh: <span class="font-semibold">{nama_orang_tua}</span> → {{ $previewNamaOrangTua }},
        <span class="font-semibold">{nama_siswa}</span> → {{ $previewNamaSiswa }}
    </div>
</x-card>

<script>
(function () {
    const textarea = document.getElementById('wa_alpha_message');
    const preview = document.getElementById('wa-preview');
    const defaultMessage = @json($defaultMessage);
    const namaSiswa = @json($previewNamaSiswa);
    const namaOrangTua = @json($previewNamaOrangTua);

    function renderPreview() {
        const raw = (textarea.value || '').trim() || defaultMessage;
        preview.textContent = raw
            .replaceAll('{nama_orang_tua}', namaOrangTua)
            .replaceAll('{nama_siswa}', namaSiswa);
    }

    textarea.addEventListener('input', renderPreview);
    renderPreview();
})();
</script>
@endsection