@extends('admin.layouts.admin')
@section('title', 'بيانات التواصل')
@section('content')
<div class="max-w-5xl mx-auto bg-white p-8 rounded-xl shadow-lg text-right" dir="rtl">
    <h2 class="text-2xl font-bold mb-6 border-b pb-4 text-gray-800">إدارة بيانات التواصل والسوشيال ميديا</h2>
    
    <form action="{{ route('admin.contact.update') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- قسم التليفونات والإيميل -->
            <div class="space-y-6">
                <h3 class="font-bold text-blue-600 border-r-4 border-blue-600 pr-3">بيانات الاتصال الأساسية</h3>
                <div>
                    <label class="block text-sm font-bold mb-1">رقم التليفون 1</label>
                    <input type="text" name="phone1" value="{{ $contact->phone1 }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1">رقم التليفون 2</label>
                    <input type="text" name="phone2" value="{{ $contact->phone2 }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1 text-green-600">رقم الواتساب (بالكود الدولي)</label>
                    <input type="text" name="whatsapp" value="{{ $contact->whatsapp }}" placeholder="مثال: 20123456789" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1">البريد الإلكتروني 1</label>
                    <input type="email" name="email1" value="{{ $contact->email1 }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1">البريد الإلكتروني 2</label>
                    <input type="email" name="email2" value="{{ $contact->email2 }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500 text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1">العنوان</label>
                    <textarea name="address" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500" rows="2">{{ $contact->address }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1">ساعات العمل</label>
                    <input type="text" name="working_hours" value="{{ $contact->working_hours }}" placeholder="مثال: السبت - الخميس: 9 صباحاً - 6 مساءً" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>

            <!-- قسم السوشيال ميديا -->
            <div class="space-y-6 bg-gray-50 p-6 rounded-xl border border-gray-100">
                <h3 class="font-bold text-purple-600 border-r-4 border-purple-600 pr-3">روابط التواصل الاجتماعي</h3>
                <div>
                    <label class="block text-sm font-bold mb-1"><i class="fa-brands fa-facebook ml-1"></i> فيسبوك</label>
                    <input type="text" name="facebook" value="{{ $contact->facebook }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-600 text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1"><i class="fa-brands fa-instagram ml-1"></i> إنستجرام</label>
                    <input type="text" name="instagram" value="{{ $contact->instagram }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-pink-500 text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1"><i class="fa-brands fa-x-twitter ml-1"></i> تويتر (X)</label>
                    <input type="text" name="twitter" value="{{ $contact->twitter }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-black text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1"><i class="fa-brands fa-linkedin ml-1"></i> لينكد إن</label>
                    <input type="text" name="linkedin" value="{{ $contact->linkedin }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-blue-800 text-left" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-bold mb-1"><i class="fa-brands fa-youtube ml-1"></i> يوتيوب</label>
                    <input type="text" name="youtube" value="{{ $contact->youtube }}" class="w-full border p-3 rounded-lg outline-none focus:ring-2 focus:ring-red-600 text-left" dir="ltr">
                </div>
            </div>
        </div>

        <button type="submit" class="w-full mt-10 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg transition">حفظ جميع البيانات</button>
    </form>
</div>
@endsection