@extends('layouts.superadmin')

@section('content')
<div class="max-w-6xl mx-auto p-4">
    <div class="rounded-2xl p-6 mb-4 text-white" style="background: linear-gradient(135deg,#0ea5e9,#8b5cf6);">
        <div class="flex items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold">لوحة إرسال تقارير اللايفات للواتساب</h1>
                <p class="opacity-90">10 أزرار جاهزين — كله من نفس الصفحة ✅</p>
            </div>
            <div class="bg-white/10 rounded-xl p-3">
                <label class="block text-sm mb-1">التاريخ</label>
                <input id="date" type="date" value="{{ $date }}" class="text-black rounded-lg px-3 py-2">
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl p-4 shadow-sm">
        <div class="grid grid-cols-2 md:grid-cols-5 gap-2">
            @foreach($buttons as $b)
                <button
                    class="px-3 py-3 rounded-xl border hover:bg-gray-50 text-sm font-semibold"
                    onclick="sendWhats('{{ $b['key'] }}')"
                    type="button">
                    {{ $b['label'] }}
                </button>
            @endforeach
        </div>

        <div class="mt-4">
            <div id="statusBox" class="text-sm"></div>

            <label class="block mt-3 mb-2 font-semibold">المعاينة (اللي انبعت)</label>
            <textarea id="preview" rows="10" class="w-full rounded-xl border p-3 font-mono text-sm" readonly></textarea>
        </div>
    </div>
</div>

<script>
async function sendWhats(action) {
    const url  = @json(route('superadmin.falcon-room.whatsapp-lives.send'));
    const date = document.getElementById('date').value;

    const statusBox = document.getElementById('statusBox');
    const preview   = document.getElementById('preview');

    statusBox.innerHTML = '⏳ جاري الإرسال...';
    preview.value = '';

    const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || @json(csrf_token());

    try {
        const res = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ action, date })
        });

        const data = await res.json();

        if (!res.ok || !data.success) {
            statusBox.innerHTML = '❌ ' + (data.message || 'فشل');
            return;
        }

        statusBox.innerHTML = '✅ ' + data.message;
        preview.value = data.preview || '';
    } catch (e) {
        statusBox.innerHTML = '❌ خطأ غير متوقع';
    }
}
</script>
@endsection