@extends('layouts.app')

@section('title', 'System Settings')

@section('content')
<header>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">System Settings</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Configure system-wide settings for the Production module.</p>
    </div>
</header>

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <form action="{{ route('settings.system.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            <!-- Server DateTime / Timezone -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Server DateTime / Timezone</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Configure the system timezone for date and time display.</p>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Timezone</label>
                            <select name="timezone" id="timezone" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                @foreach($timezones as $tz)
                                    <option value="{{ $tz }}" {{ $settings['timezone'] === $tz ? 'selected' : '' }}>
                                        {{ $tz }}
                                    </option>
                                @endforeach
                            </select>
                            @error('timezone')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current Server Time</label>
                            <div class="mt-1 px-3 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md">
                                <span class="text-sm text-gray-900 dark:text-white" id="current-time">
                                    {{ now()->timezone($settings['timezone'])->format('Y-m-d H:i:s') }}
                                </span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">({{ $settings['timezone'] }})</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Processing Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Order Processing Settings</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Configure settings for order processing and stock management.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="default_warehouse_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Default Warehouse for Order Stock Deduction</label>
                        <select name="default_warehouse_id" id="default_warehouse_id" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <option value="">-- Select Warehouse --</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" {{ $settings['default_warehouse_id'] == $warehouse->id ? 'selected' : '' }}>
                                    {{ $warehouse->name }} ({{ $warehouse->code }})
                                </option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Stock will be deducted from this warehouse when orders are marked as packed.</p>
                        @error('default_warehouse_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror

                        @if(empty($settings['default_warehouse_id']))
                            <div class="mt-3 p-3 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-md">
                                <div class="flex">
                                    <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                    </svg>
                                    <div class="ml-3">
                                        <p class="text-sm text-yellow-700 dark:text-yellow-300">
                                            <strong>Warning:</strong> No warehouse selected. Stock deduction for order packing will search any available warehouse.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Branding Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Branding Settings</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Customize the appearance of the Production system.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="site_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Site Name</label>
                        <input type="text" name="site_name" id="site_name" value="{{ old('site_name', $settings['site_name']) }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
                               placeholder="Production">
                        @error('site_name')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Site Logo</label>
                        <div class="mt-2 flex items-center gap-4">
                            @if($settings['site_logo'])
                                <div class="relative">
                                    <img src="{{ $settings['site_logo'] }}" alt="Current Logo" class="h-12 object-contain border border-gray-200 dark:border-gray-600 rounded p-1 bg-white dark:bg-gray-700">
                                    <label class="mt-2 flex items-center">
                                        <input type="checkbox" name="remove_logo" value="1" class="rounded border-gray-300 dark:border-gray-600 text-red-600 shadow-sm focus:ring-red-500 dark:bg-gray-700">
                                        <span class="ml-2 text-sm text-red-600 dark:text-red-400">Remove logo</span>
                                    </label>
                                </div>
                            @endif
                            <div class="flex-1">
                                <input type="file" name="site_logo" id="site_logo" accept="image/*"
                                       class="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/50 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100 dark:hover:file:bg-indigo-900">
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF, SVG up to 2MB. Recommended: 200x50px</p>
                            </div>
                        </div>
                        @error('site_logo')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="show_site_name" id="show_site_name" value="1"
                                   {{ ($settings['show_site_name'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="w-4 h-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-700">
                        </div>
                        <div class="ml-3">
                            <label for="show_site_name" class="text-sm font-medium text-gray-700 dark:text-gray-300">Show Site Name in Navigation</label>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Display site name text next to the logo in the navigation bar. Uncheck to show logo only.</p>
                        </div>
                    </div>

                    <div>
                        <label for="footer_text" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Footer Text</label>
                        <input type="text" name="footer_text" id="footer_text" value="{{ old('footer_text', $settings['footer_text']) }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
                               placeholder="© 2025 Production. All rights reserved.">
                        @error('footer_text')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Maintenance Mode -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Maintenance Mode</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Enable maintenance mode to prevent access to the system.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="maintenance_mode" id="maintenance_mode" value="1"
                                   {{ $settings['maintenance_mode'] === '1' ? 'checked' : '' }}
                                   class="w-4 h-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-700">
                        </div>
                        <div class="ml-3">
                            <label for="maintenance_mode" class="text-sm font-medium text-gray-700 dark:text-gray-300">Enable Maintenance Mode</label>
                            <p class="text-sm text-gray-500 dark:text-gray-400">When enabled, only admin users can access the system. Other users will see a maintenance message.</p>
                        </div>
                    </div>

                    <div>
                        <label for="maintenance_message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Maintenance Message</label>
                        <textarea name="maintenance_message" id="maintenance_message" rows="3"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
                                  placeholder="System is under maintenance...">{{ old('maintenance_message', $settings['maintenance_message']) }}</textarea>
                        @error('maintenance_message')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 shadow-sm transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Settings
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    // Update current time every second
    setInterval(function() {
        fetch('{{ route("settings.system") }}', {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
    }, 60000);
</script>
@endsection