@extends('admin.layouts.app')

@section('title', 'الإعدادات')

@section('content')
    <h1 class="text-3xl font-bold text-gray-800 mb-8">الإعدادات</h1>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <!-- الشعار -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
                    </path>
                </svg>
                الشعار (Logo)
            </h2>

            @if ($settings['logo'])
                <div class="mb-4">
                    <img src="{{ asset('storage/' . $settings['logo']) }}" alt="Logo" class="max-h-20">
                </div>
            @endif

            <form action="{{ route('admin.settings.update.logo') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <input type="file" name="logo" accept="image/*" required
                        class="w-full border border-gray-300 rounded-lg p-2">
                    @error('logo')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <button type="submit"
                    class="bg-zelight-red text-white px-4 py-2 rounded-lg hover:bg-zelight-crimson transition-colors">
                    تحديث الشعار
                </button>
            </form>
        </div>

        <!-- بيانات التواصل -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                    </path>
                </svg>
                بيانات التواصل
            </h2>

            <form action="{{ route('admin.settings.update.contact') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-gray-700 font-semibold mb-2">رقم الهاتف</label>
                    <input type="text" name="phone" value="{{ $settings['phone'] }}" placeholder="+962XXXXXXXXX"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red"
                        dir="ltr">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-semibold mb-2">رقم الواتساب</label>
                    <input type="text" name="whatsapp" value="{{ $settings['whatsapp'] }}" placeholder="962XXXXXXXXX"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red"
                        dir="ltr">
                    <p class="text-gray-400 text-xs mt-1">بدون علامة + أو 00</p>
                </div>
                <button type="submit"
                    class="bg-zelight-red text-white px-4 py-2 rounded-lg hover:bg-zelight-crimson transition-colors">
                    حفظ
                </button>
            </form>
        </div>

        <!-- سلوجن الفوتر -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
                    </path>
                </svg>
                سلوجن الفوتر
            </h2>

            <form action="{{ route('admin.settings.update.slogan') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-gray-700 font-semibold mb-2">السلوجن (عربي)</label>
                    <textarea name="slogan_ar" rows="2"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red">{{ $settings['slogan_ar'] }}</textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 font-semibold mb-2">السلوجن (إنجليزي)</label>
                    <textarea name="slogan_en" rows="2"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red"
                        dir="ltr">{{ $settings['slogan_en'] }}</textarea>
                </div>
                <button type="submit"
                    class="bg-zelight-red text-white px-4 py-2 rounded-lg hover:bg-zelight-crimson transition-colors">
                    حفظ
                </button>
            </form>
        </div>

        <!-- السوشيال ميديا -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
                    </path>
                </svg>
                روابط السوشيال ميديا
            </h2>

            <form action="{{ route('admin.settings.update.social') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 gap-3">
                    <div>
                        <label class="block text-gray-700 text-sm mb-1">Facebook</label>
                        <input type="url" name="facebook" value="{{ $settings['facebook'] }}"
                            placeholder="https://facebook.com/..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-zelight-red"
                            dir="ltr">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm mb-1">Instagram</label>
                        <input type="url" name="instagram" value="{{ $settings['instagram'] }}"
                            placeholder="https://instagram.com/..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-zelight-red"
                            dir="ltr">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm mb-1">Twitter / X</label>
                        <input type="url" name="twitter" value="{{ $settings['twitter'] }}"
                            placeholder="https://twitter.com/..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-zelight-red"
                            dir="ltr">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm mb-1">TikTok</label>
                        <input type="url" name="tiktok" value="{{ $settings['tiktok'] }}"
                            placeholder="https://tiktok.com/..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-zelight-red"
                            dir="ltr">
                    </div>
                    <div>
                        <label class="block text-gray-700 text-sm mb-1">YouTube</label>
                        <input type="url" name="youtube" value="{{ $settings['youtube'] }}"
                            placeholder="https://youtube.com/..."
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-zelight-red"
                            dir="ltr">
                    </div>
                </div>
                <button type="submit"
                    class="mt-4 bg-zelight-red text-white px-4 py-2 rounded-lg hover:bg-zelight-crimson transition-colors">
                    حفظ
                </button>
            </form>
        </div>

        <!-- تغيير كلمة المرور -->
        <div class="bg-white rounded-lg shadow-md p-6 lg:col-span-2">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-zelight-red" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                    </path>
                </svg>
                تغيير كلمة المرور
            </h2>

            <form action="{{ route('admin.settings.change.password') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">كلمة المرور الحالية</label>
                        <input type="password" name="current_password" required
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red">
                        @error('current_password')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">كلمة المرور الجديدة</label>
                        <input type="password" name="new_password" required
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red">
                        @error('new_password')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2">تأكيد كلمة المرور</label>
                        <input type="password" name="new_password_confirmation" required
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-zelight-red">
                    </div>
                </div>
                <button type="submit"
                    class="mt-4 bg-zelight-brown text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-colors">
                    تغيير كلمة المرور
                </button>
            </form>
        </div>

    </div>

    <!-- زر تسجيل الخروج -->
    <div class="mt-8 pt-6 border-t border-gray-200">
        <form action="{{ route('admin.logout') }}" method="POST">
            @csrf
            <button type="submit"
                class="bg-red-600 text-white px-6 py-3 rounded-lg hover:bg-red-700 transition-colors flex items-center">
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
                    </path>
                </svg>
                تسجيل الخروج
            </button>
        </form>
    </div>
@endsection