@extends('layouts.app')
@section('title', '2FA Settings')

@push('stylesheets')
    @include('admin-controls.partials.settings-styles')
    <style>
        .twofa-toggle-wrapper {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.25rem;
            background: #f8f9fa;
            border-radius: 0.5rem;
            border: 1px solid #e9ecef;
        }
        .dark-mode .twofa-toggle-wrapper {
            background: rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .twofa-toggle-label {
            flex: 1;
        }
        .twofa-toggle-label h5 {
            margin: 0 0 0.15rem;
            font-size: 0.9rem;
            font-weight: 600;
            color: #343a40;
        }
        .dark-mode .twofa-toggle-label h5 {
            color: #f8f9fa;
        }
        .twofa-toggle-label p {
            margin: 0;
            font-size: 0.8rem;
            color: #6c757d;
        }
        .dark-mode .twofa-toggle-label p {
            color: #adb5bd;
        }
        .bypass-section {
            transition: opacity 0.3s ease;
        }
        .bypass-section.disabled {
            opacity: 0.4;
            pointer-events: none;
        }
    </style>
    
<!-- Select2 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4-custom.css') }}">
@endpush

@section('contents')
<x-layouts.page-wrapper
    title="2FA Settings"
    :breadcrumbs="[
        'Admin Controls' => null,
        '2FA Settings' => null,
    ]"
>
    <div class="col-12 col-xl-10 mx-auto">
        <x-admin-controls.settings-form
            :action="route('admin-controls.two-factor-settings.update')"
            method="PUT"
            :backRoute="route('dashboard')"
            guideText="Control Two-Factor Authentication for the entire system. When enabled, users must verify their identity with an OTP code sent to their email during login."
        >
            <x-admin-controls.settings-section icon="fas fa-shield-alt" title="General">
                <div class="twofa-toggle-wrapper">
                    <div class="twofa-toggle-label">
                        <h5>Enable Two-Factor Authentication</h5>
                        <p>When enabled, all users will be required to enter a verification code sent to their email during login.</p>
                    </div>
                    <div class="custom-control custom-switch">
                        <input type="hidden" name="is_enabled" value="0">
                        <input type="checkbox" class="custom-control-input" id="is_enabled" name="is_enabled" value="1"
                            {{ old('is_enabled', $settings->is_enabled) ? 'checked' : '' }}>
                        <label class="custom-control-label" for="is_enabled"></label>
                    </div>
                </div>
            </x-admin-controls.settings-section>

            <x-admin-controls.settings-section icon="fas fa-user-shield" title="Bypass Users">
                <p class="text-muted mb-3" style="font-size:0.85rem;">
                    Select users who should <strong>skip 2FA</strong> and login directly with email + password.
                </p>
                <div id="bypass-section" class="bypass-section {{ old('is_enabled', $settings->is_enabled) ? '' : 'disabled' }}">
                    <div class="form-group">
                        <label for="bypass_user_ids">Users who bypass 2FA</label>
                        <select name="bypass_user_ids[]" id="bypass_user_ids" multiple class="form-control" data-placeholder="Search and select users...">
                            @foreach ($allUsers as $value => $text)
                                <option value="{{ $value }}" {{ in_array($value, old('bypass_user_ids', $displayBypassUserIds ?? [])) ? 'selected' : '' }}>
                                    {{ $text }}
                                </option>
                            @endforeach
                        </select>
                        <!-- <small class="form-text text-muted">Leave empty if no users should bypass 2FA.</small> -->
                    </div>
                </div>
            </x-admin-controls.settings-section>
        </x-admin-controls.settings-form>
    </div>
</x-layouts.page-wrapper>
@endsection

@push('scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
$(function () {
    var $toggle = $('#is_enabled');
    var $bypassSection = $('#bypass-section');

    function updateBypassVisibility() {
        if ($toggle.is(':checked')) {
            $bypassSection.removeClass('disabled');
        } else {
            $bypassSection.addClass('disabled');
        }
    }

    $toggle.on('change', updateBypassVisibility);
    updateBypassVisibility();

    $('#bypass_user_ids').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Search and select users...',
        allowClear: true
    });
});
</script>
@endpush