<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Company Settings') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <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-6 text-gray-900">
                    <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Company Logo -->
                            <div class="md:col-span-2">
                                <x-input-label for="company_logo" :value="__('Company Logo')" />
                                @if(isset($settings['company_logo']))
                                    <div class="mt-2 mb-4">
                                        <img src="{{ asset('storage/' . $settings['company_logo']) }}" alt="Logo" class="h-20 w-auto object-contain">
                                    </div>
                                @endif
                                <input type="file" name="company_logo" id="company_logo" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
                                <x-input-error :messages="$errors->get('company_logo')" class="mt-2" />
                            </div>

                            <!-- Company Name -->
                            <div>
                                <x-input-label for="company_name" :value="__('Company Name')" />
                                <x-text-input id="company_name" name="company_name" type="text" class="mt-1 block w-full" :value="old('company_name', $settings['company_name'] ?? '')" />
                                <x-input-error :messages="$errors->get('company_name')" class="mt-2" />
                            </div>

                            <!-- Company Email -->
                            <div>
                                <x-input-label for="company_email" :value="__('Company Email')" />
                                <x-text-input id="company_email" name="company_email" type="email" class="mt-1 block w-full" :value="old('company_email', $settings['company_email'] ?? '')" />
                                <x-input-error :messages="$errors->get('company_email')" class="mt-2" />
                            </div>

                            <!-- Company Phone -->
                            <div>
                                <x-input-label for="company_phone" :value="__('Company Phone')" />
                                <x-text-input id="company_phone" name="company_phone" type="text" class="mt-1 block w-full" :value="old('company_phone', $settings['company_phone'] ?? '')" />
                                <x-input-error :messages="$errors->get('company_phone')" class="mt-2" />
                            </div>

                            <!-- Company Address -->
                            <div class="md:col-span-2">
                                <x-input-label for="company_address" :value="__('Company Address')" />
                                <textarea id="company_address" name="company_address" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" rows="3">{{ old('company_address', $settings['company_address'] ?? '') }}</textarea>
                                <x-input-error :messages="$errors->get('company_address')" class="mt-2" />
                            </div>

                            <div class="md:col-span-2 border-t pt-4 mt-4">
                                <h3 class="text-lg font-medium text-gray-900 mb-4">{{ __('Database Tools') }}</h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="md:col-span-2">
                                        <x-input-label for="mysqldump_path" :value="__('MySQLDump Path (for Backup)')" />
                                        <x-text-input id="mysqldump_path" name="mysqldump_path" type="text" class="mt-1 block w-full" :value="old('mysqldump_path', $settings['mysqldump_path'] ?? '')" placeholder="C:\xampp\mysql\bin\mysqldump.exe" />
                                        <div class="mt-1 text-xs text-gray-500">Example: C:\xampp\mysql\bin\mysqldump.exe</div>
                                        <x-input-error :messages="$errors->get('mysqldump_path')" class="mt-2" />
                                    </div>
                                </div>
                            </div>

                            <div class="md:col-span-2 border-t pt-4 mt-4">
                                <h3 class="text-lg font-medium text-gray-900 mb-4">{{ __('Theme Settings') }}</h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <x-input-label for="theme_header_bg" :value="__('Header Background Color')" />
                                        <x-text-input id="theme_header_bg" name="theme_header_bg" type="text" class="mt-1 block w-full" :value="old('theme_header_bg', $settings['theme_header_bg'] ?? '#4f46e5')" placeholder="#4f46e5" />
                                        <x-input-error :messages="$errors->get('theme_header_bg')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="theme_menu_text" :value="__('Menu Text Color')" />
                                        <x-text-input id="theme_menu_text" name="theme_menu_text" type="text" class="mt-1 block w-full" :value="old('theme_menu_text', $settings['theme_menu_text'] ?? '#374151')" placeholder="#374151" />
                                        <x-input-error :messages="$errors->get('theme_menu_text')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-6">
                            <x-primary-button>
                                {{ __('Save Settings') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
