@extends('layouts.metor.login')
@section('title', 'Login')
@section('content')

<div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5">
                <div class="card auth-card">
                    <div class="card-body">
                        <div class="p-3">
                            <div class="mx-auto mb-5 auth-logo text-center">
                                <a href="{{ url('/admin') }}" class="logo-dark">
                                    <img src="{{ asset('metor/images/logo-dark.png') }}" height="100" alt="logo dark">
                                </a>

                                <a href="{{ url('/admin') }}" class="logo-light">
                                    <img src="{{ asset('metor/images/logo-white.png') }}" height="100" alt="logo light">
                                </a>
                </div>
                            <div class="text-center">
                                <h3 class="fw-bold text-dark fs-20">Hi , Welcome Back 👋 </h3>
                                <p class="text-muted mt-1 mb-4">Enter your credentials to access your account.</p>
            </div>
                            <div class="p-3">
                                <form action="{{ route('login') }}" method="POST" class="authentication-form">
                        @csrf
                        <input type="hidden" name="device_index_view" id="device_index_view" value="" />
                        <div class="mb-4">
                                        <label class="form-label" for="UserEmail">Email</label>
                                        <div class="position-relative w-100">
                                            <input type="email" name="email" maxlength='64' class="form-control form-control-lg rounded" id="UserEmail" placeholder="Enter Email" value="{{ old('email') }}" autocomplete="off" required>
                                            <p class="text-muted p-0 position-absolute end-0 top-50 border-0 fs-4 translate-middle-y me-2 mb-0">
                                                <iconify-icon icon="solar:letter-bold-duotone" class="fs-20 mt-1 text-muted"></iconify-icon>
                                            </p>
                                        </div>
                            @error('email')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="mb-4">
                                        <a href="{{ url('/forgot-password') }}" class="float-end fw-semibold text-reset ms-1">Reset password</a>
                                        <label class="form-label" for="UserPass">Password</label>
                                        <div class="position-relative w-100">
                                            <input type="password" name="password" id="UserPass" class="form-control form-control-lg rounded" placeholder="Enter password" value="{{ old('password') }}" autocomplete="off" maxlength='64' required>
                                            <button type="button" class="btn text-muted p-0 position-absolute end-0 top-50 border-0 fs-4 translate-middle-y me-2" onclick="doShowPassword('UserPass', this);">
                                                <iconify-icon icon="solar:eye-bold-duotone" class="fs-20 mt-1 text-muted"></iconify-icon>
                                            </button>
                            </div>
                            @error('password')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="checkbox-signin" name="remember">
                                            <label class="form-check-label" for="checkbox-signin">Remember me</label>
                                        </div>
                                    </div>
                                    <div class="text-center d-grid">
                                        <button class="btn btn-primary d-flex align-items-center justify-content-center gap-1 fw-medium" type="submit">
                                            <i class='bx bx-log-in fs-18'></i> Sign In
                                        </button>
                        </div>
                    </form>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var form = document.querySelector('form.authentication-form');
    if (!form) return;
    form.addEventListener('submit', function () {
        var el = document.getElementById('device_index_view');
        if (!el) return;
        var isMobile = window.matchMedia && window.matchMedia('(max-width: 767.98px)').matches;
        el.value = isMobile ? 'mobile' : 'desktop';
    });
})();
</script>
@endsection
