@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mobile-container max-w-md mx-auto">
        <div class="mobile-settings">
            <div class="settings-header">
                <a href="{{ route('mobile.dashboard') }}" class="back-button">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 12H5"></path>
                        <path d="M12 19l-7-7 7-7"></path>
                    </svg>
                </a>
                <h1>{{ __('mobile.settings') }}</h1>
            </div>
            
            <div class="settings-content">
                <form id="mobile-settings-form" class="space-y-6">
                    <div class="setting-group">
                        <h2>{{ __('mobile.appearance') }}</h2>
                        
                        <div class="setting-item">
                            <label for="theme">{{ __('mobile.theme') }}</label>
                            <select id="theme" name="theme" class="form-select">
                                <option value="light">{{ __('mobile.light') }}</option>
                                <option value="dark">{{ __('mobile.dark') }}</option>
                                <option value="system">{{ __('mobile.system') }}</option>
                            </select>
                        </div>
                        
                        <div class="setting-item">
                            <label for="language">{{ __('mobile.language') }}</label>
                            <select id="language" name="language" class="form-select">
                                <option value="en">English</option>
                                <option value="ar">العربية</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="setting-group">
                        <h2>{{ __('mobile.notifications') }}</h2>
                        
                        <div class="setting-item toggle">
                            <span>{{ __('mobile.push_notifications') }}</span>
                            <label class="switch">
                                <input type="checkbox" id="push_notifications" name="push_notifications">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="setting-group">
                        <h2>{{ __('mobile.security') }}</h2>
                        
                        <div class="setting-item">
                            <a href="#" class="text-link" id="change-password-link">
                                {{ __('mobile.change_password') }}
                            </a>
                        </div>
                        
                        <div class="setting-item toggle">
                            <span>{{ __('mobile.biometric_login') }}</span>
                            <label class="switch">
                                <input type="checkbox" id="biometric_login" name="biometric_login">
                                <span class="slider round"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">
                            {{ __('mobile.save_settings') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Mobile-specific styles */
    @media (min-width: 768px) {
        .mobile-container {
            border: 12px solid #333;
            border-radius: 36px;
            padding: 8px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            height: 80vh;
            overflow-y: auto;
        }
    }
    
    .mobile-settings {
        padding: 1rem;
    }
    
    .settings-header {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
    }
    
    .back-button {
        margin-right: 1rem;
    }
    
    .settings-header h1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
    }
    
    .setting-group {
        margin-bottom: 2rem;
    }
    
    .setting-group h2 {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #4f46e5;
    }
    
    .setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    
    .setting-item:last-child {
        border-bottom: none;
    }
    
    .form-select {
        padding: 0.5rem;
        border-radius: 0.375rem;
        border: 1px solid #d1d5db;
        width: 150px;
    }
    
    .text-link {
        color: #4f46e5;
        text-decoration: none;
    }
    
    /* Toggle switch styles */
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }
    
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
    }
    
    input:checked + .slider {
        background-color: #4f46e5;
    }
    
    input:focus + .slider {
        box-shadow: 0 0 1px #4f46e5;
    }
    
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    
    .slider.round {
        border-radius: 24px;
    }
    
    .slider.round:before {
        border-radius: 50%;
    }
    
    .btn-primary {
        background-color: #4f46e5;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 500;
        width: 100%;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .btn-primary:hover {
        background-color: #4338ca;
    }
    
    .form-actions {
        margin-top: 2rem;
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Fetch current settings
        axios.get('/api/mobile/profile')
            .then(response => {
                if (response.data.status === 'success') {
                    const settings = response.data.data.settings?.mobile || {};
                    
                    // Set form values based on user settings
                    if (settings.theme) {
                        document.getElementById('theme').value = settings.theme;
                    }
                    
                    if (settings.language) {
                        document.getElementById('language').value = settings.language;
                    }
                    
                    if (settings.push_notifications !== undefined) {
                        document.getElementById('push_notifications').checked = settings.push_notifications;
                    }
                    
                    if (settings.biometric_login !== undefined) {
                        document.getElementById('biometric_login').checked = settings.biometric_login;
                    }
                }
            })
            .catch(error => {
                console.error('Error fetching settings:', error);
            });
        
        // Handle form submission
        document.getElementById('mobile-settings-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                theme: document.getElementById('theme').value,
                language: document.getElementById('language').value,
                push_notifications: document.getElementById('push_notifications').checked,
                biometric_login: document.getElementById('biometric_login').checked
            };
            
            axios.post('/api/mobile/settings', formData)
                .then(response => {
                    if (response.data.status === 'success') {
                        // Show success message
                        alert(response.data.message || 'Settings updated successfully');
                        
                        // If language changed, reload page to apply changes
                        const currentLang = document.documentElement.lang;
                        if (formData.language !== currentLang) {
                            window.location.reload();
                        }
                    }
                })
                .catch(error => {
                    console.error('Error updating settings:', error);
                    alert('Failed to update settings. Please try again.');
                });
        });
        
        // Handle change password link
        document.getElementById('change-password-link').addEventListener('click', function(e) {
            e.preventDefault();
            // Implement password change functionality or redirect to password change page
            alert('Change password functionality will be implemented in a future update.');
        });
    });
</script>
@endpush