@extends('layouts/blankLayout')

@section('title', 'EGC Interview')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
  'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
  'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/select2/select2.js',
  'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
  'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
  'resources/assets/vendor/libs/flatpickr/flatpickr.js',
])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms_date_time_pickers.js'])
@endsection

<!-- <style>
:root {
  --primary: #ff7a00;
  --primary-soft: #ffb347;
  --dark: #2f2f2f;
  --muted: #6c757d;
  --bg: #f7f6f2;
  --white: #ffffff;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  --transition: 0.25s ease;
  --font: 'Inter', system-ui, sans-serif;
}


.interview_login{
  width: 100%;
   height: 100%;
  margin: 0;
  font-family: var(--font);
 background:url("{{ asset('assets/common/login_bg_1.jpg') }}") center/cover;
}

/* ---------------- WELCOME SCREEN ---------------- */
#welcomeScreen {
  position: fixed;
  inset: 0;
  background:url("{{ asset('assets/common/login_bg_1.jpg') }}") center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px;
  color: var(--white);
  z-index: 9999;
  transition: opacity .4s ease, visibility .4s ease;
}

#welcomeScreen.hidden {
  opacity: 0;
  visibility: hidden;
}

#welcomeScreen h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.45);
}

#welcomeScreen h2 {
  font-size: 1.2rem;
  letter-spacing: .14em;
  opacity: .9;
  margin-bottom: 16px;
   text-shadow: 0 1px 4px rgba(255, 255, 255, 0.45);
}

.jobDescription {
  max-width: 560px;
  max-height: 350px;
  overflow-y: auto;
  padding: 14px;
  border-radius: var(--radius);
  background: #ab2b2218;
  backdrop-filter: blur(4px);
  margin-bottom: 24px;
  text-align: justify;
  color:black;
}

.jobDescription::-webkit-scrollbar {
  display: none;
}

/* ---------------- BUTTON ---------------- */
#startInterview {
  padding: 14px 56px;
  border-radius: 999px;
  /* background: linear-gradient(135deg, var(--primary), var(--primary-soft)); */
  background: linear-gradient(135deg, #ab2b22, #FBA919);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

#startInterview:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255,122,0,.45);
}

/* ---------------- LOGIN CARD ---------------- */
#loginScreen {
  max-width: 460px;
  margin: 60px auto;
  background: var(--white);
  
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  display: none;
}

#loginScreen.active {
  display: block;
}

/* ---------------- FORM ---------------- */
.form-label {
  font-weight: 600;
  color: var(--dark);
}

.form-control {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,122,0,.2);
}

/* ---------------- OTP ---------------- */
.reset_container {
  position: absolute;
  right: 10px;
  top: 35px;
  display: flex;
  gap: 10px;
}

.reset_otp_timer,
.resent-otp-btn {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f1f1;
  cursor: pointer;
}

/* ---------------- MAIN BUTTON ---------------- */
.btn-main {
  width: 100%;
  border-radius: 999px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-soft));
  border: none;
  color: #fff;
}

.btn-main:disabled {
  opacity: .7;
  cursor: not-allowed;
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 520px) {
  #loginScreen {
    margin: 24px;
    padding: 32px 26px;
  }
  .interview_login{
    display:flex;
    align-items:center;
    justify-content:center;
     background:url("{{ asset('assets/common/login_bg_1.jpg') }}") center/cover;
  }
}
h3{
  color:black !important;
  font-size:1rem !important;
}
li{
  font-size:0.9rem !important;
  text-align:wrap !important;
}
p{
  font-size:0.9rem !important;
}
</style> -->
<style>
:root {
  --primary: #ff8a00;
  --primary-dark: #e66f00;
  --accent: #0d6efd;
  --text-dark: #1f2937;
  --text-muted: #6b7280;
  --bg-overlay: rgba(255,255,255,.92);
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-xl: 0 30px 60px rgba(0,0,0,.15);
  --font: 'Inter', system-ui, sans-serif;
}

body {
  font-family: var(--font);
}

/* ================= BACKGROUND ================= */
.interview_login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("{{ asset('assets/common/login_bg_1.jpg') }}") center/cover no-repeat;
  padding: 20px;
}

/* ================= WELCOME SCREEN ================= */
#welcomeScreen {
  position: fixed;
  inset: 0;
  background: url("{{ asset('assets/common/login_bg_1.jpg') }}") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  text-align: center;
  z-index: 9999;
  transition: opacity .4s ease, visibility .4s ease;
}

#welcomeScreen.hidden {
  opacity: 0;
  visibility: hidden;
}

#welcomeScreen h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #000000ff;
}

#welcomeScreen h2 {
  font-size: 1.1rem;
  letter-spacing: .12em;
  color: #303030ff;
  margin-bottom: 16px;
}

/* Job description card */
.jobDescription {
  max-width: 600px;
  max-height: 320px;
  overflow-y: auto;
  background: #ab2b2220;
  color: #111827;
  padding: 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  margin-bottom: 26px;
  text-align: left;
}

.jobDescription::-webkit-scrollbar {
  display: none;
}

/* Start button */
#startInterview {
  padding: 14px 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a00, #ffb347);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  cursor: pointer;
  transition: all .25s ease;
}

#startInterview:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255,138,0,.45);
}

/* ================= LOGIN CARD ================= */
#loginScreen {
  width: 100%;
  max-width: 420px;
  background: var(--bg-overlay);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  box-shadow: var(--shadow-xl);
  display: none;
}

#loginScreen.active {
  display: block;
}

/* Logo */
.logo {
  max-height: 56px;
  margin-bottom: 14px;
}

/* Headings */
#loginScreen h5 {
  color: var(--text-muted);
  font-size: .95rem;
}

#loginScreen h6 {
  color: var(--primary-dark);
  font-weight: 700;
}

/* ================= FORM ================= */
.form-label {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.form-control {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .95rem;
  border: 1px solid #d1d5db;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255,138,0,.2);
}

/* OTP tools */
.reset_container {
  position: absolute;
  right: 10px;
  top: 35px;
  display: flex;
  gap: 8px;
}

.reset_otp_timer,
.resent-otp-btn {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

/* Main button */
.btn-main {
  width: 100%;
  border-radius: 999px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), #ffb347);
  border: none;
  color: #fff;
  transition: all .25s ease;
}

.btn-main:hover {
  box-shadow: 0 14px 30px rgba(255,138,0,.35);
}

.btn-main:disabled {
  opacity: .7;
}

/* ================= MOBILE ================= */
@media (max-width: 480px) {
  #loginScreen {
    padding: 28px 22px;
  }
}

h3{
  color:black !important;
  font-size:1rem !important;
}
li{
  font-size:0.9rem !important;
  text-align:wrap !important;
}
p{
  font-size:0.9rem !important;
}

.error-text {
    font-size: 13px;
    color: #d93025;
    margin-top: 8px;
}
</style>


@section('content')

<div class="interview_login">
<!-- WELCOME SCREEN -->
<section id="welcomeScreen" role="region" aria-label="Welcome Screen">
    <div class="d-flex justify-content-center">
        @if ($schedule->entity_logo)
            <img src="{{ asset('Entity_logos/' . $schedule->company_id . '/' . $schedule->entity_logo) }}"
                class="logo logo_right bg-white px-2 py-1 rounded" alt="Logo">
        @else
            <img src="{{ asset('assets/common/logo_full.png') }}"
                class="logo logo_right bg-white rounded" alt="Logo">
        @endif
    </div>

  <h1 id="jobTitle">{{ $schedule->job_role_name }}</h1>

  <h2 id="interviewType">{{ $schedule->interview_category_name }}</h2>

  <div  class="jobDescription hide-scrollbar">{!! $schedule->job_description !!}</div>

  <button id="startInterview" aria-label="Start Interview">Let's Start</button>
</section>

<!-- LOGIN SCREEN -->
<section id="loginScreen" role="region" aria-label="Login Screen" aria-live="polite" aria-atomic="true">
  <div class="login-box text-center">
        <div class="d-flex justify-content-center">
        @if ($schedule->entity_logo)
            <img src="{{ asset('Entity_logos/' . $schedule->company_id . '/' . $schedule->entity_logo) }}"
                class="logo logo_right" alt="Logo">
        @else
            <img src="{{ asset('assets/common/logo_full.png') }}"
                class="logo logo_right" alt="Logo">
        @endif
        </div>
        <h5 class="mb-4 fw-semibold">{{$schedule->interview_category_name}}</h5>
        <h6 class="mb-4 fw-semibold text-primary">{{$schedule->job_role_name}}</h6>
        
        
        <!-- LOGIN FORM -->
        <form id="loginForm">
            @csrf

            <!-- <div class="mb-3 text-start">
                <label class="form-label">Full Name</label>
                <input type="text" id="full_name" class="form-control" placeholder="Enter your full name" oninput="this.value=this.value.replace(/^\w/, txt=>txt.toUpperCase());" Autocomplete="off">
                <div class="error-text d-none" id="errorMsg_name"></div>
            </div> -->
            <input type="hidden" id="job_request_id" name="job_request_id" value="{{ $schedule->sno }}">
            <input type="hidden" id="interview_schedule_id" name="interview_schedule_id" value="{{ $schedule->schedule_id }}">
            <input type="hidden" id="interview_schedule_stage_id" name="interview_schedule_stage_id" value="{{ $schedule->schedule_stage_id }}">
            <div class="mb-3 text-start">
                <label class="form-label">Mobile Number</label>
                <input type="text" id="mobile" class="form-control" placeholder="Enter mobile number" maxLength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');">
                    <div class="error-text d-none" id="errorMsg_mobile"></div>
            </div>

            <!-- <div class="mb-3 text-start">
                <label class="form-label">Email Address</label>
                <input type="email" id="email" class="form-control" placeholder="Enter email address" oninput="this.value=this.value.toLowerCase();">
                <div class="error-text d-none" id="errorMsg_email"></div>
            </div> -->

            <!-- OTP FIELD -->
            <div class="mb-3 mt-2 text-start position-relative d-none" id="otpBlock">
                <div>
                    <label class="form-label">OTP</label>
                    <input type="text" id="otp" class="form-control" placeholder="Enter OTP">
                    <div class="d-flex justify-content-between align-items-center reset_container">
                        
                        <div id="otpTimerBlock" class="reset_otp_timer d-none">
                            <span id="otpTimer" class="fw-bold text-primary ">01:00</span>
                        </div>
                        <span class="link-btn text-primary resent-otp-btn" id="resendOtp" style="cursor:pointer; display:none;">
                            Resend
                        </span>
                    </div>
                </div>
            </div>
            <div class="error-text d-none" id="errorMsg_otp"></div>
            <div class="error-text d-none" id="errorMsg"></div>

            <button type="button" class="btn btn-main w-100 mt-3 text-white fw-bold border border-none" id="actionBtn">
                Send OTP
            </button>

            
        </form>


        <!-- <div class="footer-text">
            © {{ date('Y') }} EGC. All rights reserved.
        </div> -->
    </div>
</section>
</div>

<script>
  document.getElementById('startInterview').addEventListener('click', () => {
    const welcome = document.getElementById('welcomeScreen');
    const login = document.getElementById('loginScreen');
    welcome.classList.add('hidden');
    setTimeout(() => {
      login.classList.add('active');
      document.getElementById('mobile').focus();
    }, 500);
  });

  let otpSent = false;
  let timerInterval;

  function startTimer() {
    let timeLeft = 60;
    const timerBlock = document.getElementById('otpTimerBlock');
    const timerText = document.getElementById('otpTimer');
    const resendBtn = document.getElementById('resendOtp');

    timerBlock.classList.remove('d-none');
    resendBtn.style.display = 'none';

    clearInterval(timerInterval);

    timerInterval = setInterval(() => {
      timeLeft--;
      const sec = String(timeLeft % 60).padStart(2, '0');
      timerText.textContent = `00:${sec}`;

      if (timeLeft <= 0) {
        clearInterval(timerInterval);
        timerBlock.classList.add('d-none');
        resendBtn.style.display = 'inline';
      }
    }, 1000);
  }


  // Resend OTP
  document.getElementById('resendOtp').addEventListener('click', () => {
    const mobile = document.getElementById('mobile').value.trim();
    if (!mobile || !/^[6-9]\d{9}$/.test(mobile)) {
      showError('#errorMsg_mobile', 'Please enter a valid mobile number');
      return;
    }
    this.style.display = 'none';

    $.ajax({
      url: '{{ route("interview.sendOtp") }}',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        mobile,
        job_request_id: $('#job_request_id').val().trim(),
        interview_schedule_id: $('#interview_schedule_id').val().trim(),
        resend: true
      },
      success(res) {
        startTimer();
        clearError('#errorMsg_otp');
      },
      error(xhr) {
        showError('#errorMsg_otp', 'Failed to resend OTP. Try again.');
        document.getElementById('resendOtp').style.display = 'inline';
      }
    });
  });

  // Send/Verify OTP
  document.getElementById('actionBtn').addEventListener('click', function () {
    clearError('#errorMsg');
    clearError('#errorMsg_mobile');
    clearError('#errorMsg_otp');

    const mobile = document.getElementById('mobile').value.trim();
    const otp = document.getElementById('otp').value.trim();

    if (!mobile || !/^[6-9]\d{9}$/.test(mobile)) {
      return showError('#errorMsg_mobile', 'Please enter a valid mobile number');
    }
    if (otpSent && !otp) {
      return showError('#errorMsg_otp', 'Please enter OTP');
    }

    this.disabled = true;
    this.textContent = 'Please wait...';

    let url = otpSent ? '{{ route("interview.verifyOtp") }}' : '{{ route("interview.sendOtp") }}';

    $.ajax({
        url,
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            job_request_id: $('#job_request_id').val().trim(),
            interview_schedule_id: $('#interview_schedule_id').val().trim(),
            schedule_stage_id: $('#interview_schedule_stage_id').val().trim(),
            mobile,
            otp
        },
        success(res) {
          if (!otpSent) {
            otpSent = true;
            $('#mobile').prop('readonly', true);
            $('#otpBlock').removeClass('d-none');
            startTimer();
            document.getElementById('actionBtn').textContent = "Let's Start";
            document.getElementById('actionBtn').disabled = false;
            document.getElementById('otp').focus();
          }else {
            window.location.href = res.redirect;
            }
        },
        error: (xhr) => {
            showError('#errorMsg', xhr.responseJSON?.message || 'Something went wrong');
            document.getElementById('actionBtn').disabled = false;
            document.getElementById('actionBtn').textContent = otpSent ? "Let's Start" : 'Send OTP';
        }
    });
  });

  function showError(selector, message) {
    const el = document.querySelector(selector);
    if (!el) return;
    el.classList.remove('d-none');
    el.textContent = message;
  }

  function clearError(selector) {
    const el = document.querySelector(selector);
    if (!el) return;
    el.classList.add('d-none');
    el.textContent = '';
  }
</script>

@endsection