@push('metadata')
@php
$page_id = 36;
$mTitle = @$seoData['seo_title'];
$mDescr = @$seoData['meta_description'];
$faqs = $seoData['faq'] ?? '[]';
$mKWords= $seoData['meta_keywords'];
$mUrl = url()->current();
$mImage = config('constants.login');
@endphp

<title>{{ @$mTitle }}</title>
<meta name="keywords" content="{{ @$mKWords }}" />
<meta name="description" content="{{ @$mDescr }}" />
<meta property=og:locale content="{{ app()->getLocale() }}" />
<meta property=og:type content="{{config('constants.organisation_type_news')}}" />
<meta property="og:site_name" content="Crypto Presale" />
<meta property="og:title" content="{{ @$mTitle }}" />
<meta property="og:description" content="{{ @$mDescr }}" />
<meta property="og:url" content="{{ @$mUrl }}" />
<meta property="og:image" content="{{ @$mImage }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="{{ @$mTitle }}" />
<meta property="twitter:description" content="{{ @$mDescr }}" />
<meta property="twitter:url" content="{{ @$mUrl }}" />
<meta property="twitter:image" content="{{ @$mImage }}" />
<meta name="twitter:site" content="{{config('constants.twitter_url')}}" />
<meta name="twitter:creator" content="{{config('constants.twitter_url')}}" />
@endpush

<div>
  <section class="bg-breadcrumb bg-pink p-2">
    <div class="container">
      <div class="row">
        <div class="col-xl-12 text-center">
          <div class="d-flex gap-2 p-0 m-0 list-unstyled justify-content-center text-white">
            <ul class="d-flex p-0 m-0 list-unstyled align-items-center">

              <li class="position-relative"><a href="{{ route('home') }}" title="Home" class="text-white text-decoration-none">Home</a></li>
              <li class="position-relative"> {{ !empty($seoData['breadcrumb']) ? $seoData['breadcrumb'] : 'Login' }} </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-lightgray py-3 mt-2">
    <div class="container">
      <div class="row">
        <div class="col-xl-12 col-12 text-center">
          {!! $seoData['top_page_content'] !!}
        </div>
      </div>
      <div class="row my-3">
        <div class="col-xl-5 mx-auto">
          <div class="bg-white shadow rounded-4 p-5">

            {{-- Global error for login failure --}}
            @error('email')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror

            <form wire:submit.prevent="login">

              <label class="fw-bold h6 text-black mb-1">Username or Email <span class="text-danger">*</span></label>
              <input type="text" class="form-control mb-1" wire:model.defer="email">
              @error('email') <span class="text-danger small">{{ $message }}</span> @enderror
              <br>

              <div class="position-relative">
                <input id="passwordField" type="password" class="form-control mb-1" wire:model.defer="password">

                <span
                  id="togglePassword"
                  class="position-absolute top-50 end-0 translate-middle-y me-3"
                  style="cursor: pointer;">
                  <i class="fa fa-eye"></i>
                </span>
              </div>

              @error('password') <span class="text-danger small">{{ $message }}</span> @enderror

              <div class="d-flex justify-content-between align-items-center mt-2">
                <label>
                  <input type="checkbox" wire:model="remember"> <span>Remember Me</span>
                </label>
                <p class="lost_password mb-0">
                  <a href="{{ route('lost-password') }}">Lost your password?</a>
                </p>
              </div>

              <button
                type="submit"
                class="btn btn-primary w-100 mb-3 mt-3"
                wire:loading.attr="disabled">
                <span wire:loading.remove>Login</span>
                <span wire:loading>Logging in...</span>
              </button>


                <!-- Google Login -->
                <div class="mt-3">
                    <div
                        class="d-flex mx-auto gap-2 border border-muted px-3 py-2 shadow-sm rounded-3 w-fit align-items-center bg-white">
                        <button type="button" wire:click.prevent="redirectToGoogle"
                            class="border-0 bg-transparent text-decoration-none p-0">
                            <img src="{{ asset('assets/images/google-login.png') }}" alt="Google" width="24" height="24"
                               >
                            <span class="fs-14 text-secondary">Sign In with Google</span>
                        </button>
                    </div>
                </div>
              <a href="{{ url('register') }}" class="btn btn-link text-pink mt-2">
                Not a member yet? Register now.
              </a>
            </form>
          </div>

        </div>
      </div>
    </div>
  </section>

  <section>
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="content-view">
                    {!! CommonHelper::addNoFollowToExternalLinks(@$seoData['description']) !!}
                </div>
            </div>
        </div>
    </div>
  </section>

    @if(!empty($faqs))
    <livewire:faq-section pageType="login" />
    @endif
</div>

@push('scripts')
<script>
  document.addEventListener("DOMContentLoaded", function() {

    const passwordField = document.getElementById("passwordField");
    const togglePassword = document.getElementById("togglePassword");
    const icon = togglePassword.querySelector("i");

    togglePassword.addEventListener("click", function() {
      const isPassword = passwordField.type === "password";

      passwordField.type = isPassword ? "text" : "password";

      // Toggle icon
      icon.classList.toggle("fa-eye", !isPassword);
      icon.classList.toggle("fa-eye-slash", isPassword);
    });

  });
</script>

@endpush