@extends('layouts.auth',["title"=>"Login"])
@section('content')
 <div class="account-pages py-5 pt-sm-5 dark-theme">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                {{-- @if (session('status'))
                <div class="alert alert-success text-center mb-4" role="alert">
                    {{ session('status') }}
                </div>
                @endif
                @if($errors->has('message'))
                    <div class="alert alert-danger mb-4" role="alert">
                        {{ $errors->first('message') }}
                        
                    </div>
                @endif --}}
                <div class="card overflow-hidden">
                    <div class="account-form-header">
                        <div class="row">
                            <div class="col-5">
                                <div class="">
                                    <a href="#" class="auth-logo-dark">
                                    <div class="">
                                            <img src="assets/images/bloxby.svg" alt="logo" height="40">
                                    </div>
                                </div>
                            </a>
                            </div>
                            <div class="col-7 text-end">
                                <div class="">
                                    <h5 class="">Welcome Back !</h5>
                                    <p class="mb-0">Sign in to continue to Bloxby.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="auth-logo">
                            <a href="index.html" class="auth-logo-light">
                                <div class="avatar-xl profile-user-wid mb-4">
                                    <span class="avatar-title rounded-circle bg-light">
                                        <img src="assets/images/logo-light.svg" alt="" class="rounded-circle"
                                            height="46">
                                    </span>
                                </div>
                            </a>

                        </div>
                        <div class="p-2">
                            <div class="mt-0">
                                
                                <button type="button" id="googleLoginBtn" style="color:#000;width:100%;padding:10px 20px;border:none;border-radius:4px;cursor:pointer;">
                                    <img src="{{asset('assets/images/google.png')}}" style="width:20px;margin-right:8px;vertical-align:middle;">
                                    Continue with Google
                                </button>
                            </div>
                            <div class="divider">
                                <span>OR</span>
                            </div>
                            <form id="login-form"  method="POST" class="form-horizontal" >
                                @csrf
                                <div class="mb-3">
                                    <label for="input_email" class="form-label">Email <span class="required-text">*</span></label>
                                    <input type="email" name="email" value="{{ old('email') }}" required autofocus class="form-control" id="input_email"
                                        placeholder="Enter email" />
                                    @error('email')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Password <span class="required-text">*</span></label>
                                    <div class="input-group auth-pass-inputgroup">
                                        
                                        <input type="password" class="form-control" placeholder="Enter password"
                                            aria-label="Password" aria-describedby="password-addon" name="password" required>
                                        <button class="btn btn-light btn-border" type="button" id="password-addon"><i
                                                class="mdi mdi-eye-outline"></i></button>

                                        @error('password')
                                            <div class="text-danger mt-2">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div id="password-error-container">
                                        
                                    </div>
                                </div>

                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="remember-check" value="remember-me" name="remember-me" checked />
                                    <label class="form-check-label" for="remember-check">
                                        Remember me
                                    </label>
                                </div>

                                <div class="mt-3 d-grid">
                                    <button class="btn btn-primary waves-effect waves-light button-text" type="submit">Log
                                        In</button>
                                </div>
                               
                                <div class="mt-4 text-center">
                                    <a href="{{route('password.request')}}" class="text-muted text-ps"><i
                                            class="mdi mdi-lock me-1"></i> Forgot password?</a>
                                </div>
                                <div class="text-center mt-3 text-white">
                                    Don't have an account? <a href="/register" class="text-ps">Sign up</a>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
                @include("layouts.partials.auth_footer")
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="{{ asset('assets/validate/jquery.validate.min.js')}}"></script>
<script type="text/javascript">
    $(function() {
		
        jQuery.validator.addMethod("fullname", function(value, element) {
            return this.optional(element) || /^[A-Za-z]+(?:\s[A-Za-z]+)?$/.test(value);
        }, "Please enter a valid name.");

		$("#login-form").validate({
            submitHandler: function(form) {
                // Disable button to prevent duplicate submissions
                $("#submitBtn").prop("disabled", true);
                
                form.submit(); // submit the form after disabling
            },
            rules: {
                email: {
                    required: true,
                    email: true,
                    
                },
                password: {
                    required: true
                }
            },
            messages: {
                password: {
                    required: "This field is required."
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "password") {
                    error.appendTo("#password-error-container");  // Custom container for fullname
                } else {
                    error.insertAfter(element); // Default placement
                }
            }
        })
	});
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
  function handleCredentialResponse(id_token) {
    // This is a JWT ID token
    //const id_token = response.credential;

    // Optionally decode JWT (to see profile info directly in JS)
    const payload = JSON.parse(atob(id_token.split(".")[1]));
    console.log("User ID: " + payload.sub);
    console.log("Full Name: " + payload.name);
    console.log("Email: " + payload.email);

    const token = document.querySelector('meta[name="csrf-token"]').getAttribute("content");

    // Send ID token to your backend for verification & login
    fetch("/google/login", {
      method: "POST",
      headers: { 
        "Content-Type": "application/json",
        "X-CSRF-TOKEN": token
       },
      body: JSON.stringify({ id_token: id_token })
    })
    .then(res => res.json())
    .then((data )=> {
        if(data.success){
            top.location.href = "/dashboard";
        } else {
            alert(data.message)
        }
    });
  }

  /*window.onload = function () {
    google.accounts.id.initialize({
      client_id: "{{ env('GOOGLE_CLIENT_ID') }}",
      callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(
      document.querySelector(".g_id_signin"),
      { theme: "outline", size: "large" }
    );
  };*/
   function openGoogleLoginPopup() {
    const clientId = "{{ env('GOOGLE_CLIENT_ID') }}";
    const redirectUri = "{{ url('/google/callback') }}"; // server route to handle callback
    const scope = "openid email profile";

    const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
      `client_id=${clientId}` +
      `&redirect_uri=${redirectUri}` +
      `&response_type=id_token` +
      `&scope=${scope}` +
      `&nonce=${Math.random()}` + // simple nonce
      `&prompt=select_account`;

    const width = 500;
    const height = 600;
    const left = (screen.width / 2) - (width / 2);
    const top = (screen.height / 2) - (height / 2);

    // Open OAuth popup
    const popup = window.open(authUrl, "GoogleLogin", `width=${width},height=${height},top=${top},left=${left}`);

    // Listen for message from popup
    window.addEventListener("message", function receiveMessage(event) {
      if(event.origin !== window.location.origin) return;
      if(event.data.id_token){
        handleCredentialResponse(event.data.id_token);
        window.removeEventListener("message", receiveMessage);
        //popup.close();
      }
    }, false);
  }

  // Attach click to your custom button
  document.getElementById("googleLoginBtn").addEventListener("click", openGoogleLoginPopup);
</script>

@endpush