@extends('layout.auth_layout', ['title' => 'Đăng ký'])

@push('style')
  @vite('resources/css/register.css')
@endpush

@section('content')
  <div class="container-fluid">
    <div class="row register_wrapper">
      <div class="col-12 d-none d-lg-block col-lg-6 p-0">
        <div class="register_side">
          <div class="slick_image">
            @if (!is_null($signUpImage) && $signUpImage != [])
              @foreach ($signUpImage as $item)
                <div class="position-relative">
                  <img class="left_banner_image" src="{{ Storage::url($item) }}" />
                </div>
              @endforeach
            @else
              <div class="position-relative">
                <img class="left_banner_image" src="{{ asset('img/banner/banner-register.png') }}" />
                <div class="slick_group_text">
                  <h3>Chào mừng đến với</h3>
                  <h2>Trí tuệ siêu việt</h2>
                  <p>Chào mừng bạn đến với hệ thống học khóa học Online. Bạn vui lòng đăng ký tài khoản để được sử dụng
                    các
                    tính năng và ưu đãi tốt nhất đến từ hệ thống !</p>
                </div>
              </div>
              <div class="position-relative">
                <img class="left_banner_image" src="{{ asset('img/banner/banner-register.png') }}" />
                <div class="slick_group_text">
                  <h3>Chào mừng đến với</h3>
                  <h2>Trí tuệ siêu việt</h2>
                  <p>Chào mừng bạn đến với hệ thống học khóa học Online. Bạn vui lòng đăng ký tài khoản để được sử dụng
                    các
                    tính năng và ưu đãi tốt nhất đến từ hệ thống !</p>
                </div>
              </div>
              <div class="position-relative">
                <img class="left_banner_image" src="{{ asset('img/banner/banner-register.png') }}" />
                <div class="slick_group_text">
                  <h3>Chào mừng đến với</h3>
                  <h2>Trí tuệ siêu việt</h2>
                  <p>Chào mừng bạn đến với hệ thống học khóa học Online. Bạn vui lòng đăng ký tài khoản để được sử dụng
                    các
                    tính năng và ưu đãi tốt nhất đến từ hệ thống !</p>
                </div>
              </div>
            @endif
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 h-100 p-0" style="overflow: auto">
        <div class="register_side register_right">
          <h2 class="header">Đăng Ký</h2>
          <p class="common-text">Bạn vui lòng đăng ký tài khoản mới để có thể sử dụng tính năng của <span
              class="login_link">SIEUHOC.COM</span></p>
          @include('custom_errors.session-errors')
          <form class="register_form" method="POST" action="{{ route('auth.signup') }}">
            @csrf
            <div class="d-flex flex-column">
              <div class="d-flex flex-column form_item">
                <label class="item_label">Tên của bạn ?</label>
                <input class="item_input @error('fullname') invalid @enderror" name="fullname"
                  placeholder="Nhập họ và tên của bạn" value="{{ old('fullname') }}" />
                @error('fullname')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="d-flex flex-column form_item">
                <label class="item_label">Email</label>
                <input class="item_input @error('email') invalid @enderror" name="email" placeholder="Nhập email"
                  value="{{ old('email') }}" />
                @error('email')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="d-flex flex-column form_item">
                <label class="item_label">Mật Khẩu</label>
                <div class="position-relative">
                  <input type="password" class="item_input w-100 @error('password') invalid @enderror" name="password"
                    id="password" placeholder="Nhập mật khẩu" />
                  <i class="toggle-password position-absolute top-50 translate-middle-y fa-solid fa-eye-slash"
                    toggle="#password"></i>
                </div>
                @error('password')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="d-flex flex-column form_item">
                {!! NoCaptcha::display() !!}
                @error('g-recaptcha-response')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <div class="d-flex flex-column form_item">
                <div class="checkbox_wrapper position-relative">
                  <label class="term_label">
                    Bằng cách đăng ký tôi đồng ý với các <a href="#" class="term_link">điều khoản</a> và <a
                      href="#" class="term_link">điều kiện</a>.
                    <input type="checkbox" name="agree_term" class="term_checkbox"
                      @if (old('agree_term')) checked @endif />
                    <span class="term_checkmark"></span>
                  </label>
                </div>
                @error('agree_term')
                  <span class="error_text">{{ $message }}</span>
                @enderror
              </div>
              <button class="btn-4 btn-4-fill register_button">Đăng Ký</button>
              <p class="common-text">
                Bạn đã có tài khoản?
                <a class="text-decoration-none login_link" href="{{ route('landingpage') }}">Đăng nhập</a>
              </p>
              <p class="other_regist_text text-center">Hoặc đăng ký bằng</p>
              <div class="d-flex justify-content-between align-item-center">
                <a class="btn btn-outline-blue w-100 py-lg-3 d-flex me-4 py-2"
                  href="{{ route('auth.google.loginUser') }}">
                  <img src="{{ asset('img/google-icon.png') }}" class="icon" />
                  <span class="text">Google</span>
                </a>
                <a class="btn btn-outline-blue w-100 py-lg-3 d-flex ms-4 py-2"
                  href="{{ route('auth.facebook.loginUser') }}">
                  <img src="{{ asset('img/facebook-icon.png') }}" class="icon" />
                  <span class="text">Facebook</span>
                </a>
              </div>
            </div>
          </form>
          @include('modals.show_notice')
        </div>
      </div>
    </div>
  </div>
@endsection

@push('script')
  @vite('resources/js/register.js')
  {!! NoCaptcha::renderJs() !!}
  @if (session()->has('registerData') && isset($message))
    <script>
      var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {
        keyboard: false
      });
      myModal.show();
    </script>
  @endif
@endpush