@extends('layouts.app')

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

@section('content')
<div class="py-4">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-4 bg-white border-b border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-semibold text-black">إعدادات النظام (سوبر أدمن)</h2>
                </div>

                @if(session('success'))
                    <div class="bg-green-100 border-r-4 border-green-500 text-green-700 p-2 mb-4" role="alert">
                        <p class="text-sm">{{ session('success') }}</p>
                    </div>
                @endif

                <form action="{{ route('system-admin.settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <!-- اسم النظام واللوجو -->
                        <div class="md:col-span-2 grid grid-cols-1 gap-4">
                            <div>
                                <label for="system_name" class="block text-sm font-medium text-black mb-1">اسم النظام</label>
                                <input type="text" name="system_name" id="system_name" value="{{ $settings['system_name'] }}" 
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" required>
                                @error('system_name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                                <div>
                                    <label for="sales_phone" class="block text-sm font-medium text-black mb-1">جوال المبيعات</label>
                                    <input type="text" name="sales_phone" id="sales_phone" value="{{ $settings['sales_phone'] }}" 
                                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('sales_phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="support_phone" class="block text-sm font-medium text-black mb-1">جوال الدعم</label>
                                    <input type="text" name="support_phone" id="support_phone" value="{{ $settings['support_phone'] }}" 
                                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('support_phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>

                                <div>
                                    <label for="activation_phone" class="block text-sm font-medium text-black mb-1">جوال التفعيل</label>
                                    <input type="text" name="activation_phone" id="activation_phone" value="{{ $settings['activation_phone'] }}" 
                                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                                    @error('activation_phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <!-- لوجو النظام -->
                        <div class="bg-gray-50 p-3 rounded-md border border-gray-200">
                            <label for="system_logo" class="block text-sm font-medium text-black mb-2 text-center">لوجو النظام</label>
                            <div class="flex flex-col items-center">
                                @if($settings['system_logo'])
                                    <div class="mb-2">
                                        <img src="{{ route('storage', $settings['system_logo']) }}" alt="System Logo" class="h-20 w-auto object-contain bg-white border p-1 rounded">
                                    </div>
                                @endif
                                <input type="file" name="system_logo" id="system_logo" 
                                    class="block w-full text-[10px] text-black file:mr-2 file:py-1 file:px-2 file:rounded file:border-0 file:text-[10px] file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                                <p class="text-[9px] text-black mt-1 text-center leading-tight">يختلف عن لوجو الشركة الخاص بالمستخدمين</p>
                            </div>
                            @error('system_logo') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                        </div>

                        <!-- عبارات حقوق الطبع -->
                        <div class="md:col-span-3 grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="copyright_text" class="block text-sm font-medium text-black mb-1">حقوق طبع النظام</label>
                                <textarea name="copyright_text" id="copyright_text" rows="2" 
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ $settings['copyright_text'] }}</textarea>
                                @error('copyright_text') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                            </div>

                            <div>
                                <label for="invoice_footer_copyright" class="block text-sm font-medium text-black mb-1">حقوق طبع الفواتير</label>
                                <textarea name="invoice_footer_copyright" id="invoice_footer_copyright" rows="2" 
                                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">{{ $settings['invoice_footer_copyright'] }}</textarea>
                                @error('invoice_footer_copyright') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mt-4 flex justify-end">
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-1.5 px-8 rounded shadow-sm transition duration-150 ease-in-out text-sm">
                            حفظ الإعدادات
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection