@extends('theme.master')
@section('title', 'Exampay')
@section('content')

@include('admin.message')
@include('sweetalert::alert')

@section('meta_tags')
<meta name="title" content="{{ $gsetting['project_title'] }}">
<meta name="description" content="{{ $gsetting['meta_data_desc'] }} ">
<meta property="og:title" content="{{ $gsetting['project_title'] }} ">
<meta property="og:url" content="{{ url()->full() }}">
<meta property="og:description" content="{{ $gsetting['meta_data_desc'] }}">
<meta property="og:image" content="{{ asset('images/logo/'.$gsetting['logo']) }}">
<meta itemprop="image" content="{{ asset('images/logo/'.$gsetting['logo']) }}">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ asset('images/logo/'.$gsetting['logo']) }}">
<meta property="twitter:title" content="{{ $gsetting['project_title'] }} ">
<meta property="twitter:description" content="{{ $gsetting['meta_data_desc'] }}">
<meta name="twitter:site" content="{{ url()->full() }}" />

<link rel="canonical" href="{{ url()->full() }}"/>
<meta name="robots" content="all">
<meta name="keywords" content="{{ $gsetting->meta_data_keyword }}">
@endsection

@section('content')

<style>
    body {
        font-family: Arial, sans-serif;
        background: #f4f4f4;
    }

    .login-container {
        max-width: 400px;
        margin: 40px auto;
        padding: 30px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        border-radius: 10px;
    }

    .login-container h3 {
        text-align: center;
        margin-bottom: 20px;
    }

    .login-container select, 
    .login-container input, 
    .login-container button {
        width: 100%;
        margin: 8px 0;
        padding: 10px;
        font-size: 16px;
    }

    .login-container button {
        background-color: #4CAF50;
        color: white;
        border: none;
    }

    .login-container button:hover {
        background-color: #45a049;
    }
</style>

<div class="login-container">
    <h3>Join Live Class</h3>

    <select id="userRole" onchange="handleRoleChange(this.value)">
        <option value="">-- Select Role --</option>
        <option value="admin">Admin</option>
        <option value="student">Student</option>
    </select>

    <div id="adminLogin" style="display: none;">
        <input type="text" id="adminUsername" placeholder="Admin Username" />
        <input type="password" id="adminPassword" placeholder="Admin Password" />
        <button onclick="loginAdmin()">Login as Admin</button>
    </div>

    <div id="studentForm" style="display: none;">
        <input type="text" id="studentName" placeholder="Your Name" />
        <select id="className">
            <option value="">-- Select Class --</option>
            <option value="9">Class 9</option>
            <option value="10">Class 10</option>
            <option value="11">Class 11</option>
            <option value="12">Class 12</option>
        </select>
        <select id="course">
            <option value="">-- Select Course --</option>
            <option value="IIT-JEE">IIT-JEE</option>
            <option value="NEET">NEET</option>
        </select>
        <input type="text" id="mobile" placeholder="Mobile Number" />
        <button onclick="joinAsStudent()">Join Class</button>
    </div>
</div>

@endsection

<script>
function handleRoleChange(role) {
    document.getElementById("adminLogin").style.display = role === "admin" ? "block" : "none";
    document.getElementById("studentForm").style.display = role === "student" ? "block" : "none";
}

function loginAdmin() {
    const user = document.getElementById("adminUsername").value;
    const pass = document.getElementById("adminPassword").value;

    fetch('/admin-login-check', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ username: user, password: pass })
    }).then(res => res.json())
      .then(data => {
          if (data.success) {
              window.location.href = '/live-class-room?type=admin';
          } else {
              alert("Invalid admin credentials");
          }
      });
}

function joinAsStudent() {
    const name = document.getElementById("studentName").value;
    const className = document.getElementById("className").value;
    const course = document.getElementById("course").value;
    const mobile = document.getElementById("mobile").value;

    // Basic validation
    if (!name || !className || !course || !mobile) {
        alert("Please fill in all fields.");
        return;
    }

    sessionStorage.setItem("studentName", name);

    window.location.href = `/live-class-room?type=student&name=${encodeURIComponent(name)}&class=${encodeURIComponent(className)}&course=${encodeURIComponent(course)}&mobile=${encodeURIComponent(mobile)}`;
}
</script>