@extends('layouts.auth')

@section('title', 'تسجيل دخول المشرف')
@section('theme-class', 'supervisor-theme')

@section('custom-styles')
    <style>
        body {
            background: linear-gradient(135deg, #0093E9 0%, #80D0C7 50%, #4facfe 100%);
        }
    </style>
@endsection

@section('content')
    <div class="login-card">
        <div class="login-header">
            <div class="login-icon">
                <i class="bi bi-person-badge"></i>
            </div>
            <h1 class="login-title">لوحة تحكم المشرف</h1>
            <p class="login-subtitle">مرحباً بك، قم بتسجيل الدخول للمتابعة</p>
        </div>

        @if(session('success'))
            <div class="alert alert-success">
                <i class="bi bi-check-circle"></i>
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-circle"></i>
                {{ session('error') }}
            </div>
        @endif

        <form action="{{ route('supervisor.login.submit') }}" method="POST">
            @csrf

            <div class="form-group">
                <label class="form-label" for="email">
                    <i class="bi bi-envelope me-1"></i>
                    البريد الإلكتروني
                </label>
                <div class="input-wrapper">
                    <input type="email" id="email" name="email" class="form-control @error('email') is-invalid @enderror"
                        value="{{ old('email') }}" placeholder="supervisor@example.com" autocomplete="email" required>
                    <i class="bi bi-envelope input-icon"></i>
                </div>
                @error('email')
                    <span class="invalid-feedback">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group">
                <label class="form-label" for="password">
                    <i class="bi bi-lock me-1"></i>
                    كلمة المرور
                </label>
                <div class="input-wrapper">
                    <input type="password" id="password" name="password"
                        class="form-control @error('password') is-invalid @enderror" placeholder="••••••••"
                        autocomplete="current-password" required>
                    <i class="bi bi-lock input-icon"></i>
                    <button type="button" class="password-toggle" onclick="togglePassword('password')">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
                @error('password')
                    <span class="invalid-feedback">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-options">
                <label class="remember-me">
                    <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                    <span>تذكرني</span>
                </label>
            </div>

            <button type="submit" class="btn-login">
                <i class="bi bi-box-arrow-in-left"></i>
                تسجيل الدخول
            </button>
        </form>

        <div class="switch-portal">
            <a href="{{ route('admin.login') }}">
                <i class="bi bi-shield-lock"></i>
                تسجيل دخول المديرين
            </a>
        </div>
    </div>
@endsection