@extends('auth.layouts.app')

@section('title', 'Login')

@section('content-section')
    <div class="container container-tight py-4" style="margin-top: 6rem !important;">
        <div class="text-center mb-6">
            <a href="." class="navbar-brand navbar-brand-autodark">
                <img src="{{ asset('static/logo.png') }}" width="110" height="32" alt="Tabler"
                    class="navbar-brand-image h-7">
            </a>
        </div>
        
        <h3 class="left-0 my-2 text-center" style="margin-top: 2rem !important;">
                Welcome to DH Express Ticketing System
        </h3>

        <div class="card card-md" style="margin-top: 2rem !important;">
            <div class="card-body">
                <h2 class="h2 text-center mb-4">Login to your account</h2>
                <form action="{{ url('/login') }}" id="loginForm2" method="POST">
                    {{-- {{ csrf_field() }} --}}
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Email address</label>
                        <input type="email" id="email" name="email"
                            class="form-control @error('email') is-invalid @enderror" placeholder="your@email.com"
                            value="{{ old('email') }}" autofocus>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-2">
                        <label class="form-label">
                            Password
                            <span class="form-label-description">
                                <a href="{{ route('password.request') }}">Forgot password ?</a>
                            </span>
                        </label>
                        <div class="input-group input-group-flat">
                            <input type="password" id="password" name="password"
                                class="form-control @error('password') is-invalid @enderror" placeholder="Your password"
                                autocomplete="off" value="">
                            <span class="input-group-text">
                                <a href="#" class="link-secondary show-pass" onclick="togglePass('#password','show')"
                                    data-bs-toggle="tooltip" aria-label="Show Password"
                                    data-bs-original-title="Show password">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24"
                                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <circle cx="12" cy="12" r="2"></circle>
                                        <path
                                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">
                                        </path>
                                    </svg>
                                </a>
                                <a href="#" class="link-secondary hide-pass d-none"
                                    onclick="togglePass('#password','hide')" data-bs-toggle="tooltip"
                                    aria-label="Hide Password" data-bs-original-title="Hide password">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off"
                                        width="32" height="32" viewBox="0 0 24 24" stroke-width="2"
                                        stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <line x1="3" y1="3" x2="21" y2="21">
                                        </line>
                                        <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path>
                                        <path
                                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341">
                                        </path>
                                    </svg>
                                </a>
                            </span>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input" name="remember" />
                            <span class="form-check-label">Remember me on this device</span>
                        </label>
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100" id="submitBtn">Sign in</button>
                    </div>
                    @error('account_inactive')
                        <div class="invalid-feedback mt-2" style="display: block !important;">{{ $message }}</div>
                    @enderror
                </form>
            </div>
        </div>
    </div>


            <!-- Page-Wrapper -->
            <!-- Footer -->
                <div class="page-wrapper " style="margin-top: 3.5rem">
                    @yield('page-wrapper')
                    @if (!Route::is('bookings.print'))
                    @include('layouts.footer')
                    @endif
                </div>

                
@endsection
@if (session('passwordUpdated'))
    <script>
        // Ensure this code runs after the page is loaded
        document.addEventListener('DOMContentLoaded', function() {
            showSuccessMessage("Password updated successfully!");
        });
    </script>
@endif
@if (session('message'))
    <script>
        // Ensure this code runs after the page is loaded
        document.addEventListener('DOMContentLoaded', function() {
            showWarningMessage("Your session has expired. Please log in again.");
        });
    </script>
@endif
@if (session('inactiveorDeleted'))
    <script>
        // Ensure this code runs after the page is loaded
        document.addEventListener('DOMContentLoaded', function() {
            showWarningMessage("Your account has been inactivated by admin.");
        });
    </script>
@endif
@section('scripts')
    <script>
        document.getElementById("email")?.addEventListener("click", function() {
            document.getElementById("email").value = "";
        });
    </script>
@endsection