@extends('layouts.vertical', ['pageTitle' => 'Preferences'])

@section('page-title')
    @include('layouts.partials/app-pagetitle', [
        'pageTitle'     => strtoupper(__('preferences.title')),
        'pageSubTitle1' => 'Settings',
        'pageSubTitle2' => 'User Preferences'
    ])
    <div class="mb-4"></div>
@endsection

@section('content')

<div class="row">
    <div class="col-xl-6">
        
        {{-- Language Settings --}}
        <div class="card shadow-0 mb-g">
            <div class="card-header">
                <div class="card-title">
                    <i class="fal fa-language text-primary me-2"></i> {{ __('preferences.language') }}
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('preferences.locale') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="form-label" for="locale">{{ __('preferences.language') }}</label>
                        <select class="form-control" id="locale" name="locale" onchange="this.form.submit()">
                            <option value="es" {{ $preferences->locale === 'es' ? 'selected' : '' }}>
                                🇲🇽 {{ __('preferences.spanish') }}
                            </option>
                            <option value="en" {{ $preferences->locale === 'en' ? 'selected' : '' }}>
                                🇺🇸 {{ __('preferences.english') }}
                            </option>
                        </select>
                    </div>
                </form>
            </div>
        </div>

        {{-- Theme Settings --}}
        <div class="card shadow-0 mb-g">
            <div class="card-header">
                <div class="card-title">
                    <i class="fal fa-palette text-primary me-2"></i> {{ __('preferences.theme') }}
                </div>
            </div>
            <div class="card-body">
                <form action="{{ route('preferences.theme') }}" method="POST" id="theme-form">
                    @csrf
                    
                    {{-- Dark Navigation --}}
                    <div class="form-group mb-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" 
                                   class="custom-control-input theme-toggle" 
                                   id="dark_navigation" 
                                   name="dark_navigation" 
                                   value="1"
                                   {{ $preferences->dark_navigation ? 'checked' : '' }}>
                            <label class="custom-control-label" for="dark_navigation">
                                🌙 {{ __('preferences.dark_navigation') }}
                            </label>
                        </div>
                    </div>

                    {{-- High Contrast --}}
                    <div class="form-group mb-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" 
                                   class="custom-control-input theme-toggle" 
                                   id="high_contrast" 
                                   name="high_contrast" 
                                   value="1"
                                   {{ $preferences->high_contrast ? 'checked' : '' }}>
                            <label class="custom-control-label" for="high_contrast">
                                🔆 {{ __('preferences.high_contrast') }}
                            </label>
                        </div>
                    </div>

                    {{-- Highlight Forms --}}
                    <div class="form-group mb-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" 
                                   class="custom-control-input theme-toggle" 
                                   id="highlight_forms" 
                                   name="highlight_forms" 
                                   value="1"
                                   {{ $preferences->highlight_forms ? 'checked' : '' }}>
                            <label class="custom-control-label" for="highlight_forms">
                                📋 {{ __('preferences.highlight_forms') }}
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fal fa-save me-1"></i> {{ __('preferences.save') }}
                    </button>
                </form>
            </div>
        </div>

    </div>

    <div class="col-xl-6">
        {{-- Info Card --}}
        <div class="card shadow-0 mb-g border-info" style="border-left:3px solid #0ea5e9;">
            <div class="card-header">
                <div class="card-title text-info">
                    <i class="fal fa-info-circle me-2"></i> Information
                </div>
            </div>
            <div class="card-body">
                <p class="mb-2"><strong>Language:</strong> Your preferred language for the interface.</p>
                <p class="mb-2"><strong>Dark Navigation:</strong> Enable dark mode for the navigation menu.</p>
                <p class="mb-2"><strong>High Contrast:</strong> Increase contrast for better visibility.</p>
                <p class="mb-0"><strong>Highlight Forms:</strong> Add background highlighting to form fields.</p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    // Auto-submit form when toggles change
    document.querySelectorAll('.theme-toggle').forEach(toggle => {
        toggle.addEventListener('change', function() {
            document.getElementById('theme-form').submit();
        });
    });
</script>
@endpush