@extends('layouts.app')

@section('title', 'قوالب الواتساب')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">قوالب الواتساب</h1>
            <p class="text-gray-500">قم بتخصيص قوالب رسائل الواتساب المستخدمة في التواصل مع العملاء</p>
        </div>
        <button onclick="document.getElementById('templateForm').submit()"
                class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition text-sm font-medium">
            حفظ التغييرات
        </button>
    </div>

    @php
        $defaults = [
            'order_confirmation' => ['name' => 'تأكيد الطلب', 'desc' => 'يُرسل بعد تقديم الطلب لتأكيد تفاصيله', 'body' => 'مرحباً [customer_name]، تم استلام طلبك رقم [order_id] بقيمة [order_amount] [currency]. سنقوم بتوصيله في أقرب وقت. شكراً لتسوقك من متجرنا!'],
            'shipping_update' => ['name' => 'تحديث الشحن', 'desc' => 'يُرسل عند شحن الطلب وتحديث حالة التوصيل', 'body' => 'مرحباً [customer_name]، تم شحن طلبك رقم [order_id] via [shipping_company]. رقم التتبع: [tracking_number]. الوقت المقدر للتوصيل: [estimated_delivery].'],
            'delivery_confirmation' => ['name' => 'تأكيد التوصيل', 'desc' => 'يُرسل بعد توصيل الطلب بنجاح', 'body' => 'مرحباً [customer_name]، تم توصيل طلبك رقم [order_id] بنجاح. نأمل أن يكون الطلب قد نال إعجابك!'],
            'abandoned_cart' => ['name' => 'استرداد العربة المتروكة', 'desc' => 'تذكير للعميل بمنتجاته في سلة التسوق', 'body' => 'مرحباً [customer_name]، تركت بعض المنتجات في سلة التسوق في [store_name] بقيمة [cart_total] [currency]. نود إعلامك أنها لا تزال متاحة. يمكنك إتمام الطلب الآن.'],
            'review_request' => ['name' => 'طلب تقييم', 'desc' => 'طلب تقييم المنتج بعد التوصيل', 'body' => 'مرحباً [customer_name]، نشكرك على طلبك من [store_name]. نود أن نسمع رأيك في المنتج. هل يمكنك تقييم طلبك رقم [order_id]؟'],
        ];
        $vars = [
            'order_confirmation' => ['customer_name', 'order_id', 'order_amount', 'currency'],
            'shipping_update' => ['customer_name', 'order_id', 'tracking_number', 'shipping_company', 'estimated_delivery'],
            'delivery_confirmation' => ['customer_name', 'order_id'],
            'abandoned_cart' => ['customer_name', 'store_name', 'cart_items', 'cart_total', 'currency'],
            'review_request' => ['customer_name', 'order_id', 'store_name'],
        ];
    @endphp

    <form id="templateForm" method="POST" action="{{ route('dashboard.whatsapp-templates.update') }}">
        @csrf
        <input type="hidden" name="store_id" value="{{ $store->id ?? '' }}">
        <div class="grid grid-cols-1 gap-4">
            @foreach($defaults as $key => $default)
                @php
                    $saved = $savedTemplates[$key] ?? [];
                    $body = $saved['body'] ?? $default['body'];
                @endphp
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <div class="flex items-start justify-between mb-4">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900">{{ $default['name'] }}</h2>
                            <p class="text-sm text-gray-500">{{ $default['desc'] }}</p>
                        </div>
                        <span class="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full">{{ count($vars[$key]) }} متغيرات</span>
                    </div>
                    <textarea name="templates[{{ $loop->index }}][key]" class="hidden">{{ $key }}</textarea>
                    <textarea name="templates[{{ $loop->index }}][name]" class="hidden">{{ $default['name'] }}</textarea>
                    <textarea name="templates[{{ $loop->index }}][body]"
                              rows="4"
                              class="w-full border border-gray-300 rounded-lg p-3 text-sm text-gray-700 font-sans focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                              placeholder="نص القالب...">{{ $body }}</textarea>
                    <div class="flex flex-wrap gap-2 mt-3">
                        @foreach($vars[$key] as $var)
                            <button type="button" onclick="insertVar(this, 'templates[{{ $loop->parent->index }}][body]')"
                                    class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full hover:bg-gray-200 transition">
                                [{{ $var }}]
                            </button>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </form>

    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-700">
        <p class="font-medium mb-1">💡 تلميحات:</p>
        <ul class="list-disc list-inside space-y-1">
            <li>استخدم الأقواس المربعة <code class="bg-blue-100 px-1 rounded">[variable_name]</code> كمتغيرات يتم استبدالها تلقائياً</li>
            <li>يمكنك استخدام أي من المتغيرات المتاحة لكل قالب</li>
            <li>يتم حفظ القوالب تلقائياً لكل متجر على حدة</li>
        </ul>
    </div>
</div>
@endsection

@push('scripts')
<script>
function insertVar(btn, targetId) {
    const textarea = document.querySelector(`textarea[name="${targetId}"]`);
    if (!textarea) return;
    const varText = btn.textContent.trim();
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    textarea.value = textarea.value.substring(0, start) + varText + textarea.value.substring(end);
    textarea.focus();
    textarea.selectionStart = textarea.selectionEnd = start + varText.length;
}
</script>
@endpush