@extends('layout.app')

@section('content')
<div class="container py-4">
    <div class="card shadow-lg p-4">

        <!-- Header -->
        <div class="d-flex align-items-center mb-3">
            <i class="bi bi-gear fs-1 me-3 text-primary"></i>
            <h3 class="mb-0">{{ lang_value('settings','அமைப்பு ') }}</h3>
        </div>
     @if(session('role_id') == 2 || session('role_id') == 1)
            <h5 class="mb-3">{{ lang_value('Administration','நிர்வாகம்') }}</h5>

            <a href="{{ route('settings.users.index') }}"
               class="btn btn-outline-primary">
                <i class="bi bi-people me-1"></i>
                {{ lang_value('User Management',  'பயணர் நிர்வாகம்') }}
            </a>
        @endif
        <hr>

        <!-- ===================== -->
        <!-- System Settings -->
        <!-- ===================== -->
        <h5 class="mb-3">{{lang_value('system settings',' சிஸ்டம் அமைப்பு ') }}</h5>
        <div class="row mb-4">

            <!-- Theme Toggle -->
            <div class="col-md-6 mb-3">
                <p><strong>{{ lang_value('Theme','நிறம்  ') }}:</strong></p>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="themeToggle">
                    <label class="form-check-label" for="themeToggle" id="themeLabel">
                        {{ lang_value('Light','வெள்ளை' ) }}
                    </label>
                </div>
            </div>

            <!-- Language Toggle -->
            <div class="col-md-6 mb-3">
                <p><strong>{{ lang_value('Language','மொழி ') }}:</strong></p>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="languageToggle"
                        {{ session('locale') == 'ta' ? 'checked' : '' }}>
                    <label class="form-check-label" for="languageToggle">
                        {{ session('locale') == 'ta' ? 'English' : 'தமிழ்' }}
                    </label>
                </div>
            </div>

        </div>

        <hr>

        <!-- ===================== -->
        <!-- Security -->
        <!-- ===================== -->
         @if (session('role_id') == 1)
         
     
        <h5 class="mb-3">{{ lang_value('password','கடவுசொல் ') }}</h5>

        <form action="{{ route('account.password.update') }}" method="POST" class="mb-4">
            @csrf

            <div class="mb-3">
                <label class="form-label">{{ lang_value('current password','தற்போதய  கடவுசொல்') }}</label>
                <input type="password" name="current_password" class="form-control" required>
            </div>

            <div class="mb-3">
                <label class="form-label">{{ lang_value('new password','புது  கடவுசொல்') }}</label>
                <input type="password" name="new_password" class="form-control" required>
            </div>

            <div class="mb-3">
                <label class="form-label">{{ lang_value('confirm password','உறுதி  கடவுசொல்') }}</label>
                <input type="password" name="new_password_confirmation" class="form-control" required>
            </div>

            <button type="submit" class="btn btn-success">
                {{ lang_value('update password','கடவுசொல் மாற்று ') }}
            </button>
        </form>

        <hr>
    @endif
        <!-- ===================== -->
        <!-- Administration -->
        <!-- ===================== -->


        <div id="alert-msg" class="alert mt-3 d-none"></div>

    </div>
</div>

<!-- ===================== -->
<!-- Scripts -->
<!-- ===================== -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {

    // THEME
    const backendTheme = "{{ $settings['theme'] ?? 'light' }}";
    let savedTheme = localStorage.getItem('theme') || backendTheme;

    applyTheme(savedTheme);
    $('#themeToggle').prop('checked', savedTheme === 'dark');
    $('#themeLabel').text(savedTheme === 'dark' ? 'Dark' : 'Light');

    $('#themeToggle').change(function () {
        let theme = $(this).is(':checked') ? 'dark' : 'light';
        $('#themeLabel').text(theme === 'dark' ? 'Dark' : 'Light');
        applyTheme(theme);
        localStorage.setItem('theme', theme);
    });

    function applyTheme(theme) {
        $('body').removeClass('light dark').addClass(theme);
    }

    // LANGUAGE
    $('#languageToggle').change(function () {
        let locale = $(this).is(':checked') ? 'ta' : 'en';
        window.location.href = "/lang/" + locale;
    });

});
</script>
<script>
document.addEventListener("keydown", function(e) {

    // If user is typing inside input, textarea — ignore backspace
    const active = document.activeElement;
    const typingTags = ["INPUT", "TEXTAREA"];

    if (typingTags.includes(active.tagName)) return;

    // Backspace = go back
    if (e.key === "Backspace") {
        e.preventDefault();
        window.location.href = "{{ route('user.dashboard') }}";
    }
});
</script>
@endsection