@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;
        }
        
        /* Desktop Layout (Original) */
        .desktop-view {
            min-height: 100vh;
        }

        .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;
        }

        .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: #343a40;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

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

        /* Mobile View Styles */
        .mobile-view {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-image: url('{{ asset($bgImg) }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            z-index: 9999;
        }

        .mobile-view::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4); /* Dark layout overlay */
            backdrop-filter: blur(5px);
        }

        .mobile-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            width: 100%;
            max-width: 400px;
            position: relative;
            z-index: 2;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
        }

        .mobile-logo {
            height: 70px;
            width: auto;
            margin-bottom: 1.5rem;
        }

        .mobile-heading {
            font-size: 1.75rem;
            font-weight: 800;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .mobile-subheading {
            color: #7f8c8d;
            font-size: 0.95rem;
            margin-bottom: 2rem;
        }
    </style>
@endsection

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

@section('body')
    <!-- DESKTOP VIEW -->
    <div class="container-fluid p-0 desktop-view d-none d-md-block">
        <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">Welcome Back</h1>
                        <p class="login-subheading">Sign in to access your HR dashboard</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
                        @if(session('success'))
                            <div class="alert alert-success fade show" role="alert">
                                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
                            </div>
                        @endif
                    </div>

                    <!-- Login Form -->
                    <form action="{{ route('login.azure') }}" method="GET" id="loginFormDesktop">
                        <button type="submit" class="btn {{ $btnClass }} btn-block btn-lg btn-login" id="loginBtnDesktop">
                            <iconify-icon icon="streamline-logos:microsoft-azure-logo-solid" width="24" height="24"></iconify-icon>
                            <span id="btnTextDesktop">Login with Azure</span>
                            <div class="spinner-border spinner-border-sm text-light d-none" role="status" id="btnSpinnerDesktop">
                                <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 login-right"></div>
        </div>
    </div>

    <!-- MOBILE VIEW -->
    <div class="mobile-view d-flex d-md-none">
        <div class="mobile-card">
            <!-- Logo -->
            <img src="{{ asset($logo) }}" alt="{{ $logAlt }}" class="mobile-logo">
            
            <!-- Text -->
            <h2 class="mobile-heading">Welcome Back</h2>
            <p class="mobile-subheading">Sign in to access your HR dashboard</p>

            <!-- Alerts (Mobile) -->
            <div class="text-left mb-3">
                @if(session('error'))
                    <div class="alert alert-danger fade show p-2 small" role="alert">
                        {{ session('error') }}
                    </div>
                @endif
                @if(session('success'))
                    <div class="alert alert-success fade show p-2 small" role="alert">
                        {{ session('success') }}
                    </div>
                @endif
            </div>

            <!-- Mobile Form -->
            <form action="{{ route('login.azure') }}" method="GET" id="loginFormMobile">
                <button type="submit" class="btn {{ $btnClass }} btn-block btn-lg btn-login shadow-sm" id="loginBtnMobile">
                    <iconify-icon icon="streamline-logos:microsoft-azure-logo-solid" width="24" height="24"></iconify-icon>
                    <span id="btnTextMobile" class="ml-2">Login with Microsoft</span>
                    <div class="spinner-border spinner-border-sm text-light d-none" role="status" id="btnSpinnerMobile">
                        <span class="sr-only">Loading...</span>
                    </div>
                </button>
            </form>

            <div class="mt-4 text-muted small">
                &copy; {{ date('Y') }} {{ $appName }}
            </div>
        </div>
    </div>
@endsection

@section('adminlte_js')
<script>
    function handleLoginSubmit(formId, btnId, btnTextId, btnSpinnerId) {
        var form = document.getElementById(formId);
        if (form) {
            form.addEventListener('submit', function() {
                var btn = document.getElementById(btnId);
                var btnText = document.getElementById(btnTextId);
                var btnSpinner = document.getElementById(btnSpinnerId);
                
                // Disable button and show spinner
                btn.classList.add('disabled');
                btnText.innerText = 'Logging in...';
                btnSpinner.classList.remove('d-none');
            });
        }
    }

    // Initialize for Desktop
    handleLoginSubmit('loginFormDesktop', 'loginBtnDesktop', 'btnTextDesktop', 'btnSpinnerDesktop');

    // Initialize for Mobile
    handleLoginSubmit('loginFormMobile', 'loginBtnMobile', 'btnTextMobile', 'btnSpinnerMobile');
</script>
@endsection