@extends('layout.auth_layout', ['title' => 'Đăng nhập'])

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

@section('content')
  <div class="d-flex register_wrapper">
    <div class="register_side">
      <div class="slick_image">
        <div class="position-relative">
          <img class="left_banner_image" src="{{ asset('img/banner/banner-login.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-login.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-login.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>
    </div>
    <div class="register_side register_right">
      <h2 class="header">Đăng Nhập</h2>
      <form class="register_form" method="POST" action="{{ route('auth.signin') }}">
        @csrf
        <div class="d-flex flex-column">
          <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 của bạn"
              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">
            <div class="checkbox_wrapper position-relative d-flex justify-content-between">
              <label class="term_label">
                Lưu mật khẩu
                <input type="checkbox" name="save_password" class="term_checkbox"
                  @if (old('save_password')) checked @endif />
                <span class="term_checkmark"></span>
              </label>
              <a href="{{ route('forgotpassword.index') }}" class="text-decoration-none login_link">Quên mật khẩu?</a>
            </div>
            @error('save_password')
              <span class="error_text">{{ $message }}</span>
            @enderror
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
            <symbol id="check-circle-fill" viewBox="0 0 16 16">
              <path
                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
            </symbol>
            <symbol id="info-fill" viewBox="0 0 16 16">
              <path
                d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
            </symbol>
            <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
              <path
                d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
            </symbol>
          </svg>
          @if (session()->has('error'))
            <div class="alert alert-danger d-flex align-items-center w-100" role="alert">
              <svg class="alert-icon bi me-2 flex-shrink-0" role="img" aria-label="Danger:">
                <use xlink:href="#exclamation-triangle-fill" />
              </svg>
              <div>
                <p class="mb-0">{{ session('error') }}</p>
              </div>
            </div>
          @endif
          @if (session()->has('message'))
            <div class="alert alert-success d-flex align-items-center w-100" role="alert">
              <svg class="alert-icon bi me-2 flex-shrink-0" role="img" aria-label="Success:">
                <use xlink:href="#check-circle-fill" />
              </svg>
              <div>
                <p class="mb-0">{{ session('message') }}</p>
              </div>
            </div>
          @endif
          <button class="btn-4 btn-4-fill register_button">Đăng Nhập</button>
          <p class="common-text">
            Bạn chưa có tài khoản?
            <a class="text-decoration-none login_link" href="{{ route('auth.viewSignup') }}">Đăng ký ngay</a>
          </p>
          <div class="d-flex flex-column justify-content-center other_regist_wrapper mt-5">
            <p class="other_regist_text text-center">Hoặc đăng nhập bằng</p>
            <a href="{{ route('auth.google.loginUser') }}" class="btn btn_other_login">
              <img src="{{ asset('img/google-icon.png') }}" class="icon" />
              <span class="text">Đăng nhập bằng Google</span>
            </a>
            <a href="{{ route('auth.facebook.loginUser') }}" class="btn btn_other_login">
              <img src="{{ asset('img/facebook-icon.png') }}" class="icon" />
              <span class="text">Đăng nhập bằng Facebook</span>
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('script')
  @vite('resources/js/register.js')
@endpush