<x-layouts.app.sidebar>
    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <!-- Settings Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Settings: General</h1>
        </div>

        <!-- Settings Navigation -->
        <x-settings-navigation />

        <!-- Settings Form -->
        <form method="POST" action="{{ route('settings.general.update') }}" class="space-y-8">
            @csrf
            @method('PUT')

            <!-- Business Information Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">Business Information</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Basic details about your auto repair shop</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Shop Name *</label>
                        <input type="text" name="shop_name" value="{{ old('shop_name', $settings->shop_name ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Phone Number *</label>
                        <input type="text" name="shop_phone" value="{{ old('shop_phone', $settings->shop_phone ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Email Address *</label>
                        <input type="email" name="shop_email" value="{{ old('shop_email', $settings->shop_email ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Website</label>
                        <input type="url" name="shop_website" value="{{ old('shop_website', $settings->shop_website ?? '') }}" 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_website')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Address *</label>
                        <input type="text" name="shop_address" value="{{ old('shop_address', $settings->shop_address ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_address')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">City *</label>
                        <input type="text" name="shop_city" value="{{ old('shop_city', $settings->shop_city ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_city')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">State *</label>
                        <input type="text" name="shop_state" value="{{ old('shop_state', $settings->shop_state ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_state')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">ZIP Code *</label>
                        <input type="text" name="shop_zip_code" value="{{ old('shop_zip_code', $settings->shop_zip_code ?? '') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('shop_zip_code')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Financial Settings Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">Financial Settings</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure tax rates and currency preferences</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Shop Logo</label>
                        <input type="file" name="shop_logo" accept="image/*" class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @if(!empty($settings->shop_logo))
                            <div class="mt-2">
                                <img src="{{ asset($settings->shop_logo) }}" alt="Shop Logo" class="h-12 rounded-md border border-zinc-300 dark:border-zinc-600" />
                            </div>
                        @endif
                        @error('shop_logo')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Default Tax Rate (%) *</label>
                        <input type="number" step="0.01" min="0" max="100" name="default_tax_rate" 
                               value="{{ old('default_tax_rate', $settings->default_tax_rate ?? '0.00') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('default_tax_rate')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Currency *</label>
                        <select name="currency" required 
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white">
                            <option value="USD" {{ old('currency', $settings->currency ?? 'USD') === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                            <option value="CAD" {{ old('currency', $settings->currency ?? 'USD') === 'CAD' ? 'selected' : '' }}>CAD - Canadian Dollar</option>
                            <option value="EUR" {{ old('currency', $settings->currency ?? 'USD') === 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                            <option value="GBP" {{ old('currency', $settings->currency ?? 'USD') === 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                        </select>
                        @error('currency')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Currency Symbol *</label>
                        <input type="text" name="currency_symbol" value="{{ old('currency_symbol', $settings->currency_symbol ?? '$') }}" required 
                               class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white" />
                        @error('currency_symbol')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- System Settings Section -->
            <div class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-xl font-semibold text-zinc-900 dark:text-white">System Settings</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure timezone, date format, and notification preferences</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Timezone *</label>
                        <select name="timezone" required 
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white">
                            @foreach(timezone_identifiers_list() as $timezone)
                                <option value="{{ $timezone }}" {{ old('timezone', $settings->timezone ?? 'UTC') === $timezone ? 'selected' : '' }}>
                                    {{ $timezone }}
                                </option>
                            @endforeach
                        </select>
                        @error('timezone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Date Format *</label>
                        <select name="date_format" required 
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white">
                            <option value="M d, Y" {{ old('date_format', $settings->date_format ?? 'M d, Y') === 'M d, Y' ? 'selected' : '' }}>Jan 15, 2025</option>
                            <option value="d/m/Y" {{ old('date_format', $settings->date_format ?? 'M d, Y') === 'd/m/Y' ? 'selected' : '' }}>15/01/2025</option>
                            <option value="m/d/Y" {{ old('date_format', $settings->date_format ?? 'M d, Y') === 'm/d/Y' ? 'selected' : '' }}>01/15/2025</option>
                            <option value="Y-m-d" {{ old('date_format', $settings->date_format ?? 'M d, Y') === 'Y-m-d' ? 'selected' : '' }}>2025-01-15</option>
                        </select>
                        @error('date_format')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Time Format *</label>
                        <select name="time_format" required 
                                class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-white">
                            <option value="g:i A" {{ old('time_format', $settings->time_format ?? 'g:i A') === 'g:i A' ? 'selected' : '' }}>12:30 PM</option>
                            <option value="H:i" {{ old('time_format', $settings->time_format ?? 'g:i A') === 'H:i' ? 'selected' : '' }}>12:30</option>
                            <option value="g:i a" {{ old('time_format', $settings->time_format ?? 'g:i A') === 'g:i a' ? 'selected' : '' }}>12:30 pm</option>
                        </select>
                        @error('time_format')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div class="flex items-center">
                        <input type="checkbox" name="enable_notifications" value="1" 
                               {{ old('enable_notifications', $settings->enable_notifications ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Enable System Notifications</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="enable_email_notifications" value="1" 
                               {{ old('enable_email_notifications', $settings->enable_email_notifications ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Enable Email Notifications</label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="enable_sms_notifications" value="1" 
                               {{ old('enable_sms_notifications', $settings->enable_sms_notifications ?? false) ? 'checked' : '' }}
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-zinc-300 rounded" />
                        <label class="ml-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">Enable SMS Notifications</label>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3">
                <a href="{{ route('dashboard') }}" 
                   class="px-4 py-2 border border-zinc-300 dark:border-zinc-600 rounded-md text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-700">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    Save General Settings
                </button>
            </div>
        </form>
    </div>
</x-layouts.app.sidebar>
