@extends('backend.layouts.login')

@section('content')
<div class="bg-dark card text-white rounded-0 h-100">
    <img src="{{ asset('images/super-admin-banner.jpg') }}" class="card-img login-img object-fit-cover w-100" alt="credentials-background">
    <div class="card-img-overlay">
        <div class="d-flex flex-column align-items-center justify-content-center pt-0 min-h-100 pb-4">

            <div class="login-box-body my-auto rounded-16 w-100 flex-wrap">
                <div class="pt-0 pb-4 d-flex justify-content-between align-items-center flex-wrap">
                    <a href="/">
                        <img src="{{ asset('images/logo.svg') }}" alt="Logo Image"/>
                    </a>
                    <span class="badge badge-bg fs-14 px-3 py-11 text-primary">{{ $roleTitles[$role] }} Portal</span>
                </div>
                {{-- Monitoring Text --}}
                @if($role != 'superadmin')
                    <div class="mb-3 w-100">
                        <p class="fs-14 mb-0 text-primary text-center w-100" style="display: block; padding: 8px 12px; white-space: normal; word-wrap: break-word; line-height: 1.4;">
                            <strong>Datapact AI is continuously monitoring jobs, vehicle movement, and operational behaviour.</strong>
                        </p>
                    </div>
                @endif
                {{-- Alerts --}}
                @if($errors->has('deactivated'))
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        {{ $errors->get('deactivated')[0] }}
                    </div>
                @endif
                @if (session('status'))
                    <div class="alert alert-success">{{ session('status') }}</div>
                @endif
                @if (Session::has('isExhibitor'))
                    <div class="alert alert-danger">{{ session('isExhibitor') }}</div>
                @endif

                {{-- Login Header --}}
                <div class="fs-16 text-dark-gray">Welcome Back</div>
                <h1 class="login-box-msg primary-color text-black text-start p-0 mb-3 fw-600 fs-36">
                    Log In To Your Account
                </h1>

                <form action="{{ route('role.login.submit', ['role' => request()->role]) }}{{ request()->getQueryString() ? '?' . request()->getQueryString() : '' }}" class="m-login__form m-form mb-2" method="POST">
                    @csrf

                    {{-- Email --}}
                    <div class="form-group has-feedback">
                        <label for="email" class="fs-14 fw-normal">Email Address</label>
                        <div class="position-relative">
                            <input type="text" name="email" id="email" class="form-control required @error('email') is-invalid @enderror" placeholder="Enter your email address">
                            @error('email')
                                <span class="invalid-feedback text-danger" role="alert"><strong>{{ $message }}</strong></span>
                            @enderror
                            <div class="pass-show-hide-btn">
                                <span class="form-icon">
                                    <em class="iconsax text-8E8E93 fs-20" icon-name="mail"></em>
                                </span>
                            </div>
                        </div>
                    </div>

                    {{-- Password --}}
                    <div class="form-group has-feedback">
                        <div class="pass-show-hide">
                            <label for="password" class="fs-14 fw-normal">Password</label>
                            <div class="position-relative">
                                <input id="password" type="password" autocomplete="off" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter password">
                                <div class="pass-show-hide-btn" toggle="#password">
                                    <span class="eye-slash-icon active"><em class="iconsax text-8E8E93 fs-20" icon-name="eye-slash"></em></span>
                                    <span class="eye-icon"><em class="iconsax text-8E8E93 fs-20" icon-name="eye"></em></span>
                                </div>
                                @error('password')
                                    <span class="invalid-feedback text-danger" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Remember & Forgot Password --}}
                    <div class="row my-3">
                        <div class="col">
                            <div class="form-check p-0">
                                <input class="form-check-input checkbox" type="checkbox" value="" id="flexCheckDefault">
                                <label class="form-check-label text-black fs-14 fw-400" for="flexCheckDefault">
                                    Remember Me
                                </label>
                            </div>
                        </div>
                        <div class="col text-end">
                            <a href="{{ url('password/forgot?role=' . $role) }}" class="m-link link fs-14 fw-600">Forgot password?</a>
                        </div>
                    </div>

                    {{-- reCAPTCHA --}}
                    <x-recaptcha />

                    {{-- Submit --}}
                    <div class="row mt-12">
                        <div class="col text-right">
                            <button id="m_login_signin_submit" class="btn btn-primary w-100 fs-14 fw-600 text-white" type="submit">Login</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection