@extends('adminlte::master')

@php
    $appName = config('app.name');
    if ($appName === 'HR - Touch :: Intermodal Tank Transport') {
        $logo = 'img/itt/ITT_Logo.jpg';
        $logAlt = 'Intermodal Tank Transport';
        $bgImg = 'img/itt/ITT_Tanks.jpg';
    } else {
        //Bulk Tainer Group
        $logo = 'img/BTG_logo.png';
        $logAlt = 'Bulk Tainer Logistics';
        $bgImg = 'img/BTL_Tanks.png';
    }
    
    $env = config('app.env');
    $btnClass = 'btn-primary'; // Default Blue
    if ($env === 'local') {
        $btnClass = 'btn-success'; // Green
    } elseif ($env === 'dev') {
        $btnClass = 'btn-success'; // Green
    } elseif ($env === 'release') {
        $btnClass = 'btn-info'; // Teal/Info
    }
@endphp

@section('adminlte_css')
    <style>
        /* Split-Screen Layout Styles */
        body {
            overflow-x: hidden;
            background-color: #ffffff;
        }
        
        .login-container {
            min-height: 100vh;
        }

        /* Left Panel (Form) */
        .login-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 4rem;
            background-color: #ffffff;
            position: relative;
            z-index: 10;
            border-right: 1px solid #dee2e6;
        }

        /* Right Panel (Image) */
        .login-right {
            background-image: url('{{ asset($bgImg) }}');
            background-size: cover;
            background-position: center;
            position: relative;
            min-height: 100vh;
        }

        .login-right::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
        }

        /* Typography & Elements */
        .brand-logo {
            height: 80px;
            width: auto;
            margin-bottom: 2rem;
        }
        
        .login-heading {
            font-weight: 700;
            color: #dc3545; /* Danger Red for Access Denied */
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .login-subheading {
            color: #6c757d;
            font-size: 1rem;
            margin-bottom: 2rem;
        }
        
        /* Button Styling - Standard Bootstrap */
        .btn-login {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-weight: 600;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .login-left {
                padding: 2rem;
                border-right: none;
            }
            .brand-logo {
                height: 60px;
            }
        }
    </style>
@endsection

@section('classes_body', 'login-page')

@section('body')
    <div class="container-fluid p-0 login-container">
        <div class="row no-gutters h-100">
            <!-- Left Column: Login Form -->
            <div class="col-md-6 col-lg-5 login-left">
                <div class="w-100 mx-auto" style="max-width: 450px;">
                    <!-- Logo -->
                    <div class="text-center">
                        <img src="{{ asset($logo) }}" alt="{{ $logAlt }}" class="brand-logo">
                    </div>

                    <!-- Welcome Text -->
                    <div class="text-center">
                        <h1 class="login-heading">Access Denied</h1>
                        <p class="login-subheading">
                            You do not have permission to access this application. <br>
                            Please contact your Administrator.
                        </p>
                    </div>
                    
                    <!-- Alerts -->
                    <div>
                        @if(session('error'))
                            <div class="alert alert-danger fade show" role="alert">
                                <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
                            </div>
                        @endif
                    </div>

                    <!-- Login Form -->
                    <form action="{{ url('login/azure') }}" method="GET" id="loginForm">
                        <button type="submit" class="btn {{ $btnClass }} btn-block btn-lg btn-login" id="loginBtn">
                            <iconify-icon icon="streamline-logos:microsoft-azure-logo-solid" width="24" height="24"></iconify-icon>
                            <span id="btnText">Login with Azure</span>
                            <div class="spinner-border spinner-border-sm text-light d-none" role="status" id="btnSpinner">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </button>
                    </form>

                    <!-- Footer -->
                    <div class="mt-5 text-muted small text-center">
    <p class="mb-0">&copy; {{ date('Y') }} {{ $appName }}</p>
</div>
                </div>
            </div>

            <!-- Right Column: Hero Image -->
            <div class="col-md-6 col-lg-7 d-none d-md-block login-right">
                <!-- Optional: Content overlay on image could go here -->
            </div>
        </div>
    </div>
@endsection

@section('adminlte_js')
<script>
    document.getElementById('loginForm').addEventListener('submit', function() {
        var btn = document.getElementById('loginBtn');
        var btnText = document.getElementById('btnText');
        var btnSpinner = document.getElementById('btnSpinner');
        
        // Disable button and show spinner
        btn.classList.add('disabled');
        btn.style.pointerEvents = 'none';
        btn.style.opacity = '0.7';
        btnText.innerText = 'Redirecting...';
        btnSpinner.classList.remove('d-none');
    });
</script>
@endsection