@extends('admin.layouts.admin')
@section('title', 'قصتنا')

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

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

    <form action="{{ route('admin.about.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- ===== القسم الأول: العنوان والوصف ===== --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h3 class="font-bold text-gray-700 mb-4 pb-3 border-b flex items-center gap-2">
                <i class="fa-solid fa-pen-to-square text-purple-500"></i>
                النصوص الرئيسية
            </h3>

            {{-- العنوان --}}
            <div class="mb-5">
                <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', $about->title) }}"
                    placeholder="مثال: قصتنا"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none transition @error('title') border-red-400 @enderror"
                >
                @error('title')
                    <p class="text-red-500 text-sm mt-1"><i class="fa-solid fa-circle-exclamation ml-1"></i>{{ $message }}</p>
                @enderror
            </div>

            {{-- الوصف --}}
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">
                    الوصف <span class="text-red-500">*</span>
                </label>
                <textarea
                    name="description"
                    rows="5"
                    placeholder="اكتب هنا قصة شركتك..."
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none transition @error('description') border-red-400 @enderror"
                >{{ old('description', $about->description) }}</textarea>
                @error('description')
                    <p class="text-red-500 text-sm mt-1"><i class="fa-solid fa-circle-exclamation ml-1"></i>{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- ===== القسم الثاني: الإحصائيات الثلاث ===== --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h3 class="font-bold text-gray-700 mb-4 pb-3 border-b flex items-center gap-2">
                <i class="fa-solid fa-chart-bar text-purple-500"></i>
                الإحصائيات الثلاث
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">

                {{-- الإحصائية الأولى --}}
                <div class="bg-purple-50 rounded-xl p-4 border border-purple-100">
                    <p class="text-sm font-bold text-purple-700 mb-3 text-center">الإحصائية الأولى</p>
                    <div class="mb-3">
                        <label class="block text-xs font-bold text-gray-600 mb-1">الرقم / القيمة</label>
                        <input
                            type="text"
                            name="stat1_number"
                            value="{{ old('stat1_number', $about->stat1_number) }}"
                            placeholder="مثال: 100+"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center font-bold text-lg transition"
                        >
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-600 mb-1">العنوان</label>
                        <input
                            type="text"
                            name="stat1_title"
                            value="{{ old('stat1_title', $about->stat1_title) }}"
                            placeholder="مثال: عميل سعيد"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center transition"
                        >
                    </div>
                </div>

                {{-- الإحصائية الثانية --}}
                <div class="bg-purple-50 rounded-xl p-4 border border-purple-100">
                    <p class="text-sm font-bold text-purple-700 mb-3 text-center">الإحصائية الثانية</p>
                    <div class="mb-3">
                        <label class="block text-xs font-bold text-gray-600 mb-1">الرقم / القيمة</label>
                        <input
                            type="text"
                            name="stat2_number"
                            value="{{ old('stat2_number', $about->stat2_number) }}"
                            placeholder="مثال: 50+"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center font-bold text-lg transition"
                        >
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-600 mb-1">العنوان</label>
                        <input
                            type="text"
                            name="stat2_title"
                            value="{{ old('stat2_title', $about->stat2_title) }}"
                            placeholder="مثال: مشروع منجز"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center transition"
                        >
                    </div>
                </div>

                {{-- الإحصائية الثالثة --}}
                <div class="bg-purple-50 rounded-xl p-4 border border-purple-100">
                    <p class="text-sm font-bold text-purple-700 mb-3 text-center">الإحصائية الثالثة</p>
                    <div class="mb-3">
                        <label class="block text-xs font-bold text-gray-600 mb-1">الرقم / القيمة</label>
                        <input
                            type="text"
                            name="stat3_number"
                            value="{{ old('stat3_number', $about->stat3_number) }}"
                            placeholder="مثال: 10+"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center font-bold text-lg transition"
                        >
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-600 mb-1">العنوان</label>
                        <input
                            type="text"
                            name="stat3_title"
                            value="{{ old('stat3_title', $about->stat3_title) }}"
                            placeholder="مثال: سنوات خبرة"
                            class="w-full px-3 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-400 focus:outline-none text-center transition"
                        >
                    </div>
                </div>

            </div>
        </div>

        {{-- ===== القسم الثالث: الصورة ===== --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <h3 class="font-bold text-gray-700 mb-4 pb-3 border-b flex items-center gap-2">
                <i class="fa-solid fa-image text-purple-500"></i>
                صورة القسم
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">

                {{-- رفع الصورة --}}
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        رفع صورة جديدة
                        <span class="text-gray-400 font-normal">(jpg, png, webp - بحد أقصى 2MB)</span>
                    </label>

                    {{-- منطقة الرفع --}}
                    <label for="image-upload"
                        class="flex flex-col items-center justify-center w-full h-36 border-2 border-dashed border-gray-300 rounded-xl cursor-pointer bg-gray-50 hover:bg-purple-50 hover:border-purple-400 transition group">
                        <div class="text-center" id="upload-placeholder">
                            <i class="fa-solid fa-cloud-arrow-up text-3xl text-gray-400 group-hover:text-purple-500 transition mb-2"></i>
                            <p class="text-sm text-gray-500">اضغط لاختيار صورة</p>
                            <p class="text-xs text-gray-400 mt-1">أو اسحب وأفلت هنا</p>
                        </div>
                        <p class="text-sm text-purple-600 font-bold hidden" id="file-name"></p>
                    </label>
                    <input id="image-upload" type="file" name="image" accept="image/*" class="hidden" onchange="previewImage(event)">

                    @error('image')
                        <p class="text-red-500 text-sm mt-2"><i class="fa-solid fa-circle-exclamation ml-1"></i>{{ $message }}</p>
                    @enderror
                </div>

                {{-- معاينة الصورة الحالية --}}
                <div class="text-center">
                    <p class="text-sm font-bold text-gray-600 mb-2">الصورة الحالية</p>
                    @if($about->image)
                        <img id="image-preview"
                             src="{{ Storage::url($about->image) }}"
                             alt="صورة قصتنا"
                             class="w-full h-36 object-cover rounded-xl border border-gray-200 shadow-sm">
                    @else
                        <div id="image-preview-placeholder"
                             class="w-full h-36 rounded-xl border-2 border-dashed border-gray-200 flex items-center justify-center bg-gray-50">
                            <div class="text-center text-gray-400">
                                <i class="fa-solid fa-image text-3xl mb-1"></i>
                                <p class="text-xs">لا توجد صورة</p>
                            </div>
                        </div>
                        <img id="image-preview" src="" alt="" class="w-full h-36 object-cover rounded-xl border border-gray-200 shadow-sm hidden">
                    @endif
                </div>

            </div>
        </div>

        {{-- زرار الحفظ --}}
        <button type="submit"
            class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-xl transition duration-200 flex items-center justify-center gap-2 text-lg shadow-md">
            <i class="fa-solid fa-floppy-disk"></i>
            حفظ جميع التغييرات
        </button>

    </form>
</div>

<script>
function previewImage(event) {
    const file = event.target.files[0];
    if (!file) return;

    // إظهار اسم الملف
    document.getElementById('upload-placeholder').classList.add('hidden');
    const fileNameEl = document.getElementById('file-name');
    fileNameEl.textContent = file.name;
    fileNameEl.classList.remove('hidden');

    // معاينة الصورة
    const reader = new FileReader();
    reader.onload = function(e) {
        const preview = document.getElementById('image-preview');
        const placeholder = document.getElementById('image-preview-placeholder');
        if (placeholder) placeholder.classList.add('hidden');
        preview.src = e.target.result;
        preview.classList.remove('hidden');
    };
    reader.readAsDataURL(file);
}
</script>
@endsection