@extends('admin.layouts.app')
@section('page-title', 'Login Security')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/settings.css') }}?v={{ filemtime(public_path('assets/settings.css')) }}">
@endpush
@section('content')
<section class="panel security-panel" aria-labelledby="security-heading">
    <header class="settings-heading">
        <span class="settings-group-icon tone-violet"><x-icon name="phone" :size="20" /></span>
        <div><h2 id="security-heading">Login Security</h2><p>Mobile OTP for staff sign-in</p></div>
        <span class="security-state {{ $security->login_otp_enabled ? 'is-enabled' : '' }}">{{ $security->login_otp_enabled ? 'Enabled' : 'Disabled' }}</span>
    </header>
    <div class="security-content">
        @if(session('status'))<p class="security-success" role="status">{{ session('status') }}</p>@endif
        @if($errors->any())<div class="security-error" role="alert">{{ $errors->first() }}</div>@endif
        <form action="{{ route('admin.settings.security.update') }}" method="post" class="security-form">
            @csrf
            <input type="hidden" name="login_otp_enabled" value="0">
            <label class="security-toggle" for="login-otp-enabled">
                <span><strong>Mobile OTP for Login</strong><small>Require a mobile verification code after a correct password.</small></span>
                <input id="login-otp-enabled" name="login_otp_enabled" type="checkbox" role="switch" value="1" @checked((bool) old('login_otp_enabled', $security->login_otp_enabled)) aria-describedby="login-otp-behavior">
            </label>
            <div class="security-behavior" id="login-otp-behavior">
                <p><strong>Disabled</strong><span>Mobile number + password</span></p>
                <p><strong>Enabled</strong><span>Mobile number + password + SMS OTP</span></p>
            </div>
            <p class="security-provider"><x-icon :name="$smsConfigured ? 'check' : 'clock'" :size="15" />{{ $smsConfigured ? 'SMS provider is connected.' : 'Connect an SMS provider before enabling OTP.' }}</p>
            <label class="security-password" for="current-password">Confirm your current password
                <input id="current-password" name="current_password" type="password" autocomplete="current-password" required maxlength="128">
            </label>
            <div class="security-actions"><button type="submit" class="security-save">Save settings</button><a href="{{ route('admin.module', 'settings') }}">Back to Settings</a></div>
        </form>
        <p class="security-footnote">Applies to future staff sign-ins. Existing sessions stay signed in. Account registration mobile verification is managed separately.</p>
    </div>
</section>
@endsection