@extends('layouts.app')
@section('content')
<!-- Fonts & Icons -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
    :root {
        --primary-green: #006400;
        --light-green: #e0f0e0;
        --border-color: #ddd;
        --radius: 8px;
    }

    html, body {
        height: 100%;
        font-family: 'Nunito', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f8f9fa;
    }

    .container-fluid {
        display: flex;
        height: 100vh;
    }

    /* --- Left Panel (Slider) --- */
    .left-panel {
        width: 50%;
        background: linear-gradient(135deg, #006400 0%, #004d00 100%);
        position: relative;
        overflow: hidden;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .slide.active {
        opacity: 1;
    }

    .slide-content {
        background-color: darkgreen;
        border-radius: 12px;
        padding: 2rem;
        max-width: 500px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .wapschat-logo {
        width: 140px;
        height: auto;
        margin-bottom: 1rem;
    }

    .notice-title {
        color: red;
        font-size: 1.8rem;
        font-weight: 700;
        margin: 1rem 0;
    }

    .notice-text {
        color: #fff;
        line-height: 1.6;
        font-size: 1rem;
    }

    .slide-indicators {
        position: absolute;
        bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
    }

    .indicator.active {
        background-color: ;
    }

    /* --- Right Panel (Login Form) --- */
    .right-panel {
        width: 50%;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .login-card {
        width: 100%;
        max-width: 420px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        padding: 2.5rem 2rem;
    }

    .login-header {
        text-align: center;
        margin-bottom: 1.5rem;
        color: var(--primary-green);
        font-size: 1.8rem;
    }

    .tab-container {
        display: flex;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid #ddd;
    }

    .tab {
        padding: 12px 15px;
        cursor: pointer;
        transition: 0.3s;
        color: #555;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tab.active {
        background-color: var(--light-green);
        color: var(--primary-green);
        font-weight: 600;
        border-radius: 6px 6px 0 0;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .input-group {
        position: relative;
    }

    .input-group-text {
        background-color: #f1f1f1;
        border-right: 1px solid #ddd;
        color: #555;
    }

    .form-control {
        border: 1px solid #ddd;
        border-radius: var(--radius);
    }

    .btn-success {
        background-color: var(--primary-green);
        border: none;
        color: white;
    }

    .btn-success:hover {
        background-color: #005000;
    }

    .btn-outline-danger {
        color: var(--primary-green);
        border-color: var(--primary-green);
    }

    .btn-outline-danger:hover {
        background-color: var(--primary-green);
        color: white;
    }

    .forgot-password a,
    .signup-link a {
        color: var(--primary-green);
        text-decoration: none;
    }

    @media (max-width: 767.98px) {
        .left-panel {
            display: none !important;
        }
        .right-panel {
            width: 100%;
        }
    }
</style>
<br><br><br><br>
<div class="container-fluid h-100 p-0">
    <!-- Left Panel: Slider -->
    <div class="left-panel">
        <!-- Slide 1 -->
        <div class="slide active">
            <div class="slide-content">
                <img src="https://wapschat.ng/assets/img/yy.png" alt="WapsChat" class="WapsChat-logo">
                <h2 class="notice-title">NOTICE OF USAGE</h2>
                <p class="notice-text">
                WapsChat provides secure access to WhatsApp Business communication tools designed exclusively for professional and customer engagement purposes.<br> This service is intended to help businesses manage conversations, send notifications, and build trusted customer relationships at scale.
                </p>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="slide">
            <div class="slide-content">
                <img src="https://wapschat.ng/assets/img/yy.png" alt="WapsChat" class="WapsChat-logo">
                <h2 class="notice-title"> TEST DELIVERY</h2>
                <p class="notice-text">
                  WapsChat allows you to perform test message delivery with just a click. Simply login to your account and clink Demo link  to check how your bot reply works in real time.<br><br>  ✅ Don’t delay customer chats :use WapsChat to stay ready responsive.
                </p>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="slide">
            <div class="slide-content">
               <img src="https://wapschat.ng/assets/img/hero/mamawhatsapp.png" alt="WapsChat">
               
            </div>
        </div>

        <!-- Slide Indicators -->
        <div class="slide-indicators">
            <div class="indicator active" data-slide="0"></div>
            <div class="indicator" data-slide="1"></div>
            <div class="indicator" data-slide="2"></div>
        </div>
    </div>
<br><br><br><br>
    <!-- Right Panel: Login Form -->
   
    <div class="right-panel">
        <div class="login-card">
             <br><br><br><br><br><br><br><br> <br><br>
            <div class="text-center mb-4">
                <i class="fa fa-lock text-success fa-2x"></i>
                <h4 class="mt-2">{{ __tr('Account Access') }}</h4>
            </div>

            <!-- Agent & Test Delivery -->
            <div class="d-grid gap-2 mb-3">
                <a href="https://wapschat.ng/agent/v2/login" class="btn btn-outline-danger btn-block mb-2">
                    <i class="fas fa-user-shield"></i> {{ __tr('Agent Dashboard') }}
                </a>
                <!--<a href="https://link.wapschat.ng/testdelivery" class="btn btn-outline-danger w-100">
                    <i class="fas fa-truck"></i> {{ __tr('Test Delivery') }}
                </a>-->
            </div>

            <!-- Demo Buttons -->
            @if (isDemo())
                <div class="d-grid gap-2 mb-3">
                    <button class="btn btn-outline-danger btn-sm"
                            onclick="document.getElementById('lwLoginEmail').value='demosuperadmin';
                                     document.getElementById('lwLoginPassword').value='demopass12';">
                        {{ __tr('Super Admin') }}
                    </button>
                    <button class="btn btn-outline-danger btn-sm"
                            onclick="document.getElementById('lwLoginEmail').value='testcompany';
                                     document.getElementById('lwLoginPassword').value='demopass12';">
                        {{ __tr('Company') }}
                    </button>
                </div>
            @endif

         <style>
    .tab-container {
        display: flex;
        flex-wrap: wrap; /* Allows tabs to move to next line on small screens */
        gap: 0.5rem;    /* Space between tabs */
        justify-content: center; /* Center tabs horizontally */
    }

    .tab-container .tab {
        flex: 1 1 150px; /* Grow, shrink, min-width 150px */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        text-decoration: none;
        color: #333;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
        text-align: center;
    }

    .tab-container .tab i {
        margin-right: 0.5rem;
    }

    .tab-container .tab.active {
        background-color: #45ba8b;
        color: #fff;
        border-color: #45ba8b;
    }

    .tab-container .tab:hover {
        background-color: #e2e6ea;
    }

    @media (max-width: 576px) {
        .tab-container .tab {
            flex: 1 1 100%; /* Full width on very small screens */
        }
    }
</style>

<div class="tab-container">
    <div class="tab active" data-field="username">
        <i class="fas fa-user"></i> Username
    </div>
    <div class="tab" data-field="email">
        <i class="fas fa-envelope"></i> Email
    </div>
    <!-- demo link popup Link --
   <!DOCTYPE html>
<html>
<head>
  <style>
    /* Popup container */
    .popup {
      position: fixed;
      top: 0; left: 0;
      width: 60%; height: 60%;
      background: rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s;
    }
    .popup.show {
      opacity: 3;
      visibility: visible;
    }

    /* Popup content */
    .popup-content {
      background: white;
      padding: 20px 30px;
      border-radius: 0px;
      text-align: center;
      box-shadow: 0 ;
      max-width: 90%;
    }

    /* Button */
    .popup-btn {
      margin-top: 15px;
      padding: 8px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .popup-btn:hover {
      background: #0069d9;
    }
  </style>
</head>
<body>
   <!--Trigger Button --
  <button onclick="showPopup()"></button>

  <!-- Popup --
  <div class="popup" id="myPopup">
    <div class="popup-content">
     <p>Log in to access the full Demo test. Navigate via the Side Menu → WhatsApp Onboarding → Demo Test buttons to try out the bot and template messages in real time.</p>
      <button class="popup-btn" onclick="hidePopup()">Close</button>
    </div>
  </div>

  <script>
    function showPopup() {
      document.getElementById('myPopup').classList.add('show');
    }
    function hidePopup() {
      document.getElementById('myPopup').classList.remove('show');
    }
    
    // Close if clicked outside content
    document.getElementById('myPopup').addEventListener('click', (e) => {
      if (e.target === e.currentTarget) hidePopup();
    });
  </script>
</body>
</html>
</div>


            <!-- Login Form -->
            <x-lw.form id="lwLoginForm" data-secured="true" :action="route('auth.login.process')">
                <div class="mb-3">
                    <label class="form-label" id="credentialLabel">{{ __tr('Username or Email') }}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input id="lwLoginEmail" type="text" name="email"
                               class="form-control" placeholder="{{ __tr('Enter your credentials') }}" required autofocus>
                    </div>
                    <small class="text-muted">{{ __tr('Your Username or Email') }}</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">{{ __tr('Password') }}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input id="lwLoginPassword" type="password" name="password"
                               class="form-control" placeholder="{{ __tr('Enter your password') }}" required>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="rememberCheck" {{ old('remember') ? 'checked' : '' }}>
                        <label class="form-check-label" for="rememberCheck">{{ __tr('Remember me') }}</label>
                    </div>
                    @if (Route::has('auth.password.request'))
                        <a href="{{ route('auth.password.request') }}" class="small forgot-password">{{ __tr('Forgot password?') }}</a>
                    @endif
                </div>

                <button type="submit" class="btn btn-success btn-lg w-100 mb-3">{{ __tr('Log in') }}</button>
            </x-lw.form>

            <!-- Social & Register -->
          <div class="text-center mt-2">
    <div class="d-grid gap-2 d-md-flex justify-content-md-center mb-1">

        @if(getAppSettings('allow_google_login'))
            <a href="{{ route('login.google') }}"
               class="btn btn-outline-danger d-flex align-items-center justify-content-center">
                <i class="fab fa-google me-2"></i>
                {{ __tr('Continue with Google') }}
            </a>
        @endif

        @if(getAppSettings('allow_facebook_login'))
            <a href="{{ route('login.facebook') }}"
               class="btn btn-outline-primary d-flex align-items-center justify-content-center">
                <i class="fab fa-facebook-f me-2"></i>
                {{ __tr('Continue with Facebook') }}
            </a>
        @endif

    </div>

   <p class="small text-muted text-left text-md-start mb-0">
    By continuing with social login, you agree to our Terms, Privacy &amp; Refund Policy.
</p>

</div>

                @if(getAppSettings('enable_vendor_registration'))
                    <p class="mt-3 mb-2 small">{{ __tr("Don't have an account yet?") }}</p>
                    <a href="{{ route('auth.register') }}" class="btn btn-warning btn-block signup-link">{{ __tr('Create new account') }}</a>
                @elseif(getAppSettings('message_for_disabled_registration'))
                    <p class="mt-3 mb-2 small">{{ __tr('Want to create a new account?') }}</p>
                    <a href="{{ route('auth.register') }}" class="btn btn-warning btn-block btn-sm signup-link">{{ __tr('More info') }}</a>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    // Auto-rotating slider
    const slides = document.querySelectorAll('.slide');
    const indicators = document.querySelectorAll('.indicator');
    let currentSlide = 0;

    function showSlide(index) {
        slides.forEach(s => s.classList.remove('active'));
        indicators.forEach(ind => ind.classList.remove('active'));
        slides[index].classList.add('active');
        indicators[index].classList.add('active');
    }

    setInterval(() => {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }, 5000);

    indicators.forEach((indicator, idx) => {
        indicator.addEventListener('click', () => {
            currentSlide = idx;
            showSlide(currentSlide);
        });
    });

    // Tab switching for non-link tabs
    const tabs = document.querySelectorAll('.tab:not(a)');
    const label = document.getElementById('credentialLabel');
    const input = document.getElementById('lwLoginEmail');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            // Remove active from all
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            // Add active to clicked
            tab.classList.add('active');

            const method = tab.getAttribute('data-field');
            const placeholderMap = {
                'username': 'Enter Username',
                'email': 'Enter Email',
                'accredited': 'Enter Accredited Number'
            };

            label.textContent = placeholderMap[method] || 'Enter Credential';
            input.placeholder = placeholderMap[method] || 'Enter Credential';
            input.name = method === 'email' ? 'email' : 'credential';
        });
    });
</script>

@endsection