<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Vitxpert Cloud HR System</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa;
        }

        .tab-active {
            @apply text-orange-600 bg-orange-50 font-semibold border border-orange-200;
        }

        .tab-inactive {
            @apply text-gray-600 bg-transparent font-semibold border-none;
        }
    </style>
</head>

<body class="text-gray-800 min-h-screen flex flex-col relative">

    @include('frontend.partials.header')

    <!-- Main Content -->
    <main class="flex-1 flex flex-col px-12 py-8 max-w-7xl mx-auto w-full relative">

        <!-- Top Section -->
        <div class="flex flex-col md:flex-row gap-12 mb-12">

            <!-- Left Graphic Side -->
            <div class="w-full md:w-3/5 flex flex-col items-center">
                <!-- Infographic Placeholder (Simulating the complex graphic) -->
                <div
                    class="w-full aspect-[4/3] bg-white rounded-lg shadow-sm border border-gray-100 flex items-center justify-center p-4 relative mb-4">
                    <div class="text-center text-gray-400 font-semibold flex flex-col items-center">
                        <i class="fa-solid fa-network-wired text-6xl mb-4 text-blue-200"></i>
                        <p>Cloud Architecture Infographic</p>
                        <p class="text-xs font-normal mt-2">(Bangalore, Hyderabad, Mumbai Data Push Network)</p>
                    </div>
                </div>

                <!-- Software Training Videos Button -->
                <div class="flex items-center w-full max-w-lg mt-2">
                    <button
                        class="flex-1 bg-[#28a745] hover:bg-[#218838] text-white text-2xl font-bold py-3 px-6 rounded-lg shadow-md transition duration-200 text-center">
                        Software Training Videos
                    </button>
                    <i class="fa-regular fa-hand-point-left text-5xl text-green-600 ml-4"></i>
                </div>
            </div>

            <!-- Right Login Side -->
            <div class="w-full md:w-2/5 flex flex-col relative pt-4">

                <!-- Login Box -->
                <div class="w-full bg-[#fceade] p-6 rounded-xl shadow-md border border-orange-100 relative z-10">

                    <!-- Promotional Banner -->
                    <div class="bg-[#ff4500] text-white text-center rounded-lg p-4 mb-6 shadow-sm">
                        <p class="font-bold text-sm leading-relaxed">Sign up now and(Get 250 Users for 12 Months ) for
                            New<br>Device only</p>
                    </div>

                    <!-- Tabs Container -->
                    <div class="border border-orange-200 rounded-lg p-1 bg-white flex mb-6 shadow-sm">
                        <button id="tabMobile"
                            class="flex-1 py-3 rounded-md flex items-center justify-center transition tab-active text-sm">
                            <i class="fa-solid fa-phone mr-2"></i> Mobile Number
                        </button>
                        <div class="w-px bg-gray-200 mx-1"></div>
                        <button id="tabCorporate"
                            class="flex-1 py-3 rounded-md flex items-center justify-center transition tab-inactive text-sm hover:bg-gray-50">
                            <i class="fa-regular fa-user mr-2"></i> Corporate ID
                        </button>
                    </div>

                    @if ($errors->any())
                        <div class="bg-red-100 text-red-700 p-3 rounded mb-4 text-sm font-semibold">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    <!-- Mobile Number Form -->
                    <div id="mobileForm">
                        <div class="mb-6">
                            <label class="block text-[#474f6b] text-sm font-bold mb-3">Enter your registered phone
                                number</label>
                            <input type="text" id="mobileInput"
                                class="w-full bg-white border border-gray-200 rounded-lg py-4 px-4 focus:outline-none focus:border-[#ff5722] focus:ring-1 focus:ring-[#ff5722] text-gray-700 shadow-inner"
                                placeholder="Phone Number">
                        </div>

                        <button type="button" id="proceedBtn"
                            class="bg-[#ff4500] hover:bg-[#e63c00] text-white font-bold py-3 px-12 rounded-lg shadow-md transition duration-200 inline-block text-lg mt-2">
                            Proceed
                        </button>
                    </div>

                    <!-- Corporate ID Form -->
                    <div id="corporateForm" class="hidden">
                        <form action="{{ url('login') }}" method="POST">
                            @csrf

                            <div class="mb-4">
                                <label class="block text-gray-700 text-xs font-bold mb-2">Corporate ID <span
                                        class="text-red-500">*</span></label>
                                <div class="relative">
                                    <i class="fa-solid fa-id-badge absolute left-3 top-3.5 text-gray-400"></i>
                                    <input type="text" name="corporate_id" id="corporateIdInput" required
                                        class="w-full bg-white border border-gray-200 rounded-lg py-3 pl-9 pr-4 focus:outline-none focus:border-[#ff5722]"
                                        placeholder="Corporate ID">
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="block text-gray-700 text-xs font-bold mb-2">User Name <span
                                        class="text-red-500">*</span></label>
                                <div class="relative">
                                    <i class="fa-solid fa-user absolute left-3 top-3.5 text-gray-400"></i>
                                    <input type="text" name="username" id="usernameInput" required
                                        class="w-full bg-white border border-gray-200 rounded-lg py-3 pl-9 pr-4 focus:outline-none focus:border-[#ff5722]"
                                        placeholder="Username">
                                </div>
                            </div>

                            <div class="mb-6">
                                <label class="block text-gray-700 text-xs font-bold mb-2">Password <span
                                        class="text-red-500">*</span></label>
                                <div class="relative">
                                    <i class="fa-solid fa-lock absolute left-3 top-3.5 text-gray-400"></i>
                                    <input type="password" name="password" required
                                        class="w-full bg-white border border-gray-200 rounded-lg py-3 pl-9 pr-4 focus:outline-none focus:border-[#ff5722]"
                                        placeholder="Password">
                                </div>
                            </div>

                            <button type="submit"
                                class="w-full bg-[#ff4500] hover:bg-[#e63c00] text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-200 text-lg">
                                Log in
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Below Form Links -->
                <div class="flex justify-between items-center mt-4 text-sm font-semibold px-2">
                    <a href="#" class="text-[#ff4500] hover:underline">Forgot password?</a>
                    <span class="text-gray-500">Don't have an account? <a href="{{ url('register') }}"
                            class="text-[#ff4500] hover:underline">Sign up</a></span>
                </div>

                <!-- Try New Cloud Button -->
                <button
                    class="w-full bg-[#ff4500] hover:bg-[#e63c00] text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-200 mt-8 text-lg">
                    Try New Cloud
                </button>

                <!-- Demo Login Vertical Banner -->
                <div
                    class="absolute -right-12 top-24 bottom-24 w-12 bg-[#7e57c2] rounded-r-lg shadow-xl flex items-center justify-center">
                    <span class="text-white font-bold tracking-widest text-lg"
                        style="writing-mode: vertical-rl; text-orientation: upright;">DEMO LOGIN</span>
                </div>
            </div>
        </div>

        <!-- Training Videos Section -->
        <div
            class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 flex flex-col md:flex-row gap-8 mt-4 mb-20">
            <!-- Left Side Video Thumbnail -->
            <div
                class="w-full md:w-1/2 relative bg-gray-100 rounded-lg overflow-hidden border border-gray-200 aspect-[16/9] flex items-center justify-center flex-col">
                <h2 class="text-4xl font-bold text-gray-800 text-center leading-tight mb-8">ऑफ़िस अटेंडेंस देखने<br>का
                    आसान तरीका</h2>
                <div class="absolute inset-0 flex items-center justify-center">
                    <i
                        class="fa-regular fa-circle-play text-7xl text-[#ff5722] bg-white rounded-full bg-opacity-80 shadow-xl cursor-pointer hover:scale-110 transition"></i>
                </div>
                <div class="w-full bg-gray-500 text-white text-center py-3 absolute bottom-0 font-semibold text-xl">
                    Full training of Vitxpert cloud software
                </div>
            </div>

            <!-- Right Side Video Links -->
            <div class="w-full md:w-1/2 flex flex-col space-y-3">
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to create new
                        account?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to connect your Biometric
                        Device to the cloud?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to create Masters?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to get the report?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to setup Payroll?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to setup Leave
                        Register?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to create AutoShift and
                        Process?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to manage NightShift and
                        Process?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
                <a href="#"
                    class="flex items-center justify-between bg-white border border-gray-200 rounded-full py-3 px-6 hover:shadow-md transition group">
                    <span class="text-orange-400 font-medium group-hover:text-orange-500">How to insert manual Punch in
                        Cloud Software?</span>
                    <i
                        class="fa-solid fa-play text-orange-400 border border-orange-400 rounded-full w-6 h-6 flex items-center justify-center text-xs group-hover:bg-orange-50"></i>
                </a>
            </div>
        </div>
    </main>

    <!-- Footer & Floating Icons -->
    <div class="fixed bottom-0 w-full flex justify-center pb-4 z-10 pointer-events-none">
        <p class="text-gray-400 text-sm font-semibold pointer-events-auto bg-white/80 px-4 rounded-full py-1">2026 © All
            rights reserved. Made by <span class="text-[#ff5722]">Vitxpert India (P) Limited</span></p>
    </div>

    <!-- Whatsapp Floating -->
    <div class="fixed bottom-6 left-6 flex flex-col items-center cursor-pointer z-50">
        <div
            class="w-14 h-14 bg-[#25D366] rounded-full flex items-center justify-center shadow-lg mb-2 hover:scale-110 transition">
            <i class="fa-brands fa-whatsapp text-white text-3xl"></i>
        </div>
        <span class="font-bold text-gray-800 text-sm bg-white/80 px-2 rounded">Whatsapp Support</span>
    </div>

    <!-- Ask Ria Chatbot Floating -->
    <div class="fixed bottom-6 right-6 flex flex-col items-center cursor-pointer z-50">
        <div
            class="w-16 h-16 bg-white rounded-full shadow-xl mb-1 border-2 border-orange-100 flex items-center justify-center hover:scale-110 transition overflow-hidden">
            <i class="fa-solid fa-headset text-orange-500 text-3xl"></i>
        </div>
        <span class="font-bold text-orange-500 text-sm bg-white/90 px-2 rounded shadow-sm">Ask Ria</span>
    </div>

    <script>
        $(document).ready(function () {
            const activeClass = 'flex-1 py-3 rounded-md flex items-center justify-center transition tab-active text-sm';
            const inactiveClass = 'flex-1 py-3 rounded-md flex items-center justify-center transition tab-inactive text-sm hover:bg-gray-50';

            function showMobile() {
                $('#tabMobile').attr('class', activeClass);
                $('#tabCorporate').attr('class', inactiveClass);
                $('#mobileForm').removeClass('hidden');
                $('#corporateForm').addClass('hidden');
            }

            function showCorporate() {
                $('#tabCorporate').attr('class', activeClass);
                $('#tabMobile').attr('class', inactiveClass);
                $('#corporateForm').removeClass('hidden');
                $('#mobileForm').addClass('hidden');
            }

            $('#tabMobile').click(showMobile);
            $('#tabCorporate').click(showCorporate);

            $('#proceedBtn').click(function () {
                const phone = $.trim($('#mobileInput').val());
                if (phone.length >= 10) {

                    // Fetch data from backend using mobile number
                    $.ajax({
                        url: "{{ url('/get-user-by-phone') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            phone: phone
                        },
                        success: function (response) {
                            if (response.success) {
                                showCorporate();
                                $('#corporateIdInput').val(response.corporate_id);
                                // Focus the username input so the user can type it
                                $('#usernameInput').focus();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function () {
                            alert("An error occurred while fetching your details.");
                        }
                    });

                } else {
                    alert('Please enter a valid mobile number');
                }
            });
        });
    </script>
</body>

</html>