<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</h1>
        </div>

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

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

            <!-- Service Configuration 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">Service Configuration</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Basic service settings and defaults</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">Standard Labor Rate ($/hour) *</label>
                        <input type="number" step="0.01" min="0" name="standard_labor_rate" 
                               value="{{ old('standard_labor_rate', $settings->standard_labor_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('standard_labor_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">Overtime Labor Rate ($/hour) *</label>
                        <input type="number" step="0.01" min="0" name="overtime_labor_rate" 
                               value="{{ old('overtime_labor_rate', $settings->overtime_labor_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('overtime_labor_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">Weekend Labor Rate ($/hour) *</label>
                        <input type="number" step="0.01" min="0" name="weekend_labor_rate" 
                               value="{{ old('weekend_labor_rate', $settings->weekend_labor_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('weekend_labor_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">Holiday Labor Rate ($/hour) *</label>
                        <input type="number" step="0.01" min="0" name="holiday_labor_rate" 
                               value="{{ old('holiday_labor_rate', $settings->holiday_labor_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('holiday_labor_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">Minimum Labor Hours *</label>
                        <input type="number" step="0.25" min="0" name="minimum_labor_hours" 
                               value="{{ old('minimum_labor_hours', $settings->minimum_labor_hours ?? '0.25') }}" 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('minimum_labor_hours')
                            <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">Maximum Labor Hours *</label>
                        <input type="number" step="0.25" min="0" name="maximum_labor_hours" 
                               value="{{ old('maximum_labor_hours', $settings->maximum_labor_hours ?? '8.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('maximum_labor_hours')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Service Intervals 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">Service Intervals</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure default service intervals for maintenance reminders</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Oil Change Interval (miles) *</label>
                        <input type="number" min="1000" max="20000" name="oil_change_interval" 
                               value="{{ old('oil_change_interval', $settings->oil_change_interval ?? '5000') }}" 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('oil_change_interval')
                            <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">Tire Rotation Interval (miles) *</label>
                        <input type="number" min="3000" max="15000" name="tire_rotation_interval" 
                               value="{{ old('tire_rotation_interval', $settings->tire_rotation_interval ?? '7500') }}" 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('tire_rotation_interval')
                            <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">Brake Inspection Interval (miles) *</label>
                        <input type="number" min="5000" max="25000" name="brake_inspection_interval" 
                               value="{{ old('brake_inspection_interval', $settings->brake_inspection_interval ?? '12000') }}" 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('brake_inspection_interval')
                            <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">General Inspection Interval (miles) *</label>
                        <input type="number" min="1000" max="50000" name="general_inspection_interval" 
                               value="{{ old('general_inspection_interval', $settings->general_inspection_interval ?? '12000') }}" 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('general_inspection_interval')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Warranty 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">Warranty Settings</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure default warranty periods for parts and labor</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Default Parts Warranty (days) *</label>
                        <input type="number" min="1" max="1825" name="default_parts_warranty_days" 
                               value="{{ old('default_parts_warranty_days', $settings->default_parts_warranty_days ?? '365') }}" 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_parts_warranty_days')
                            <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">Default Labor Warranty (days) *</label>
                        <input type="number" min="1" max="1095" name="default_labor_warranty_days" 
                               value="{{ old('default_labor_warranty_days', $settings->default_labor_warranty_days ?? '180') }}" 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_labor_warranty_days')
                            <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">Reminder Advance Days *</label>
                        <input type="number" min="1" max="90" name="reminder_advance_days" 
                               value="{{ old('reminder_advance_days', $settings->reminder_advance_days ?? '7') }}" 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('reminder_advance_days')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Quality Control 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">Quality Control</h2>
                    <p class="text-zinc-600 dark:text-zinc-400">Configure quality control standards and inspection requirements</p>
                </div>

                <div class="space-y-6">
                    <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">Quality Control Percentage (%)</label>
                            <input type="number" min="0" max="100" name="quality_control_percentage" 
                                   value="{{ old('quality_control_percentage', $settings->quality_control_percentage ?? '25') }}" 
                                   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" />
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Percentage of jobs that require quality control inspection</p>
                            @error('quality_control_percentage')
                                <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">Minimum Quality Score *</label>
                            <input type="number" min="1" max="10" name="minimum_quality_score" 
                                   value="{{ old('minimum_quality_score', $settings->minimum_quality_score ?? '7') }}" 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" />
                            <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Minimum acceptable quality score (1-10 scale)</p>
                            @error('minimum_quality_score')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox" name="require_quality_inspection" value="1" 
                                   {{ old('require_quality_inspection', $settings->require_quality_inspection ?? 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">Require Quality Inspection</label>
                        </div>
                        <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Require quality inspection for all completed jobs</p>

                        <div class="flex items-center">
                            <input type="checkbox" name="require_customer_approval" value="1" 
                                   {{ old('require_customer_approval', $settings->require_customer_approval ?? 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">Require Customer Approval</label>
                        </div>
                        <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Require customer approval before starting work on estimates over threshold</p>

                        <div class="flex items-center">
                            <input type="checkbox" name="enable_work_photos" value="1" 
                                   {{ old('enable_work_photos', $settings->enable_work_photos ?? 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 Work Photos</label>
                        </div>
                        <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Allow technicians to take photos during service work</p>

                        <div class="flex items-center">
                            <input type="checkbox" name="enable_digital_signature" value="1" 
                                   {{ old('enable_digital_signature', $settings->enable_digital_signature ?? 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 Digital Signatures</label>
                        </div>
                        <p class="ml-7 text-xs text-zinc-500 dark:text-zinc-400">Require digital signatures for job completion and customer approval</p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2">Customer Approval Threshold ($)</label>
                        <input type="number" step="0.01" min="0" name="customer_approval_threshold" 
                               value="{{ old('customer_approval_threshold', $settings->customer_approval_threshold ?? '500.00') }}" 
                               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" />
                        <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">Require customer approval for estimates above this amount</p>
                        @error('customer_approval_threshold')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end space-x-3">
                <a href="{{ route('settings.general') }}" 
                   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 Service Settings
                </button>
            </div>
        </form>
    </div>
</x-layouts.app.sidebar>
