@extends('admin.layouts.admin')
@section('title', 'إدارة قسم اتصل بنا (CTA)')

@section('content')
<div class="max-w-4xl mx-auto">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-8">
        <div class="p-3 bg-orange-100 rounded-xl text-orange-600 text-2xl">
            <i class="fa-solid fa-bullhorn"></i>
        </div>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">قسم CTA اتصل بنا</h2>
            <p class="text-gray-500 text-sm">تعديل محتوى قسم "دعوة للتواصل" الذي يظهر في الموقع</p>
        </div>
    </div>

    <form action="{{ route('admin.contact-cta.update') }}" method="POST">
        @csrf
        
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
            
            {{-- العنوان --}}
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">العنوان الرئيسي <span class="text-red-500">*</span></label>
                <input type="text" name="title" value="{{ old('title', $cta->title ?? '') }}" 
                       placeholder="مثال: جاهز للبدء في مشروعك القادم؟"
                       class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition @error('title') border-red-400 @enderror" 
                       required>
                @error('title') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
            </div>

            {{-- الوصف --}}
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">الوصف <span class="text-red-500">*</span></label>
                <textarea name="description" rows="4" 
                          placeholder="اكتب نصاً محفزاً للعملاء للتواصل معكم..."
                          class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition @error('description') border-red-400 @enderror" 
                          required>{{ old('description', $cta->description ?? '') }}</textarea>
                @error('description') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- نص الزر --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">نص الزر <span class="text-red-500">*</span></label>
                    <input type="text" name="button_text" value="{{ old('button_text', $cta->button_text ?? '') }}" 
                           placeholder="مثال: اتصل بنا الآن"
                           class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition @error('button_text') border-red-400 @enderror" 
                           required>
                    @error('button_text') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
                </div>

                {{-- رابط الزر --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">رابط الزر <span class="text-red-500">*</span></label>
                    <input type="text" name="button_link" value="{{ old('button_link', $cta->button_link ?? '') }}" 
                           placeholder="مثال: #contact"
                           class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-orange-500 focus:outline-none transition @error('button_link') border-red-400 @enderror" 
                           required>
                    @error('button_link') <p class="text-red-500 text-xs mt-1 font-bold">{{ $message }}</p> @enderror
                </div>
            </div>

        </div>

        <button type="submit" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-4 rounded-xl transition shadow-md flex items-center justify-center gap-2">
            <i class="fa-solid fa-save"></i>
            حفظ البيانات
        </button>

    </form>

</div>
@endsection