@php
  use App\Enums\UserRole;
  $currentRouteName = Route::currentRouteName();
  $parts = explode('.', $currentRouteName);
  $section = $parts[0];
  $role_id = UserRole::arrayRole[$section]->value;
@endphp
@extends('layout.auth_layout', ['title' => \App\Enums\PageTitle::titleName[$section] . ' | Đăng ký'])

@push('style')
  @vite(['resources/css/shared_register_form.css', 'resources/css/layout/modal.css'])
@endpush

@section('content')
  <section class="page-register">
    <div class="container-fluid">
      <div class="row position-relative h-100">
        <div class="d-none d-md-block col-12 col-md-6 register-leftside">
          <div class="h-100 d-flex flex-column justify-content-center">
            <div class="policy-item responsibility-policy">
              @if (Request::is('tutors/register') && !is_null($signUpContent['tutor']))
                {!! $signUpContent['tutor']->content !!}
                <div class="btn btn-primary text-center">
                  <a id="videoInstructionRegister" data-video="{{ $signUpContent['tutor']->video_link }}"
                    class="d-flex align-items-center video-instruction-link fs-14 fw-600 text-decoration-none videoInstructionRegister gap-1">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 21 20"
                        fill="none">
                        <path
                          d="M8.06917 18.3334H13.0692C17.2358 18.3334 18.9025 16.6667 18.9025 12.5001V7.50008C18.9025 3.33341 17.2358 1.66675 13.0692 1.66675H8.06917C3.90251 1.66675 2.23584 3.33341 2.23584 7.50008V12.5001C2.23584 16.6667 3.90251 18.3334 8.06917 18.3334Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M8.15283 9.99999V8.76666C8.15283 7.17499 9.27783 6.53333 10.6528 7.32499L11.7195 7.94166L12.7862 8.55833C14.1612 9.34999 14.1612 10.65 12.7862 11.4417L11.7195 12.0583L10.6528 12.675C9.27783 13.4667 8.15283 12.8167 8.15283 11.2333V9.99999Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>
                    <span class="download-text fs-13 text-light text-nowrap">
                      Video hướng dẫn
                    </span>
                  </a>
                </div>
              @elseif (Request::is('teachers/register') && !is_null($signUpContent['teacher']))
                {!! $signUpContent['teacher']->content !!}
                <div class="btn btn-primary text-center">
                  <a id="videoInstructionRegister" data-video="{{ $signUpContent['teacher']->video_link }}"
                    class="d-flex align-items-center video-instruction-link fs-14 fw-600 text-decoration-none videoInstructionRegister gap-1">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 21 20"
                        fill="none">
                        <path
                          d="M8.06917 18.3334H13.0692C17.2358 18.3334 18.9025 16.6667 18.9025 12.5001V7.50008C18.9025 3.33341 17.2358 1.66675 13.0692 1.66675H8.06917C3.90251 1.66675 2.23584 3.33341 2.23584 7.50008V12.5001C2.23584 16.6667 3.90251 18.3334 8.06917 18.3334Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M8.15283 9.99999V8.76666C8.15283 7.17499 9.27783 6.53333 10.6528 7.32499L11.7195 7.94166L12.7862 8.55833C14.1612 9.34999 14.1612 10.65 12.7862 11.4417L11.7195 12.0583L10.6528 12.675C9.27783 13.4667 8.15283 12.8167 8.15283 11.2333V9.99999Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>
                    <span class="download-text fs-13 text-light text-nowrap">
                      Video hướng dẫn
                    </span>
                  </a>
                </div>
              @elseif (Request::is('agencies/register') && !is_null($signUpContent['agency']))
                {!! $signUpContent['agency']->content !!}
                <div class="btn btn-primary text-center">
                  <a id="videoInstructionRegister" data-video="{{ $signUpContent['agency']->video_link }}"
                    class="d-flex align-items-center video-instruction-link fs-14 fw-600 text-decoration-none videoInstructionRegister gap-1">
                    <span>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 21 20"
                        fill="none">
                        <path
                          d="M8.06917 18.3334H13.0692C17.2358 18.3334 18.9025 16.6667 18.9025 12.5001V7.50008C18.9025 3.33341 17.2358 1.66675 13.0692 1.66675H8.06917C3.90251 1.66675 2.23584 3.33341 2.23584 7.50008V12.5001C2.23584 16.6667 3.90251 18.3334 8.06917 18.3334Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        <path
                          d="M8.15283 9.99999V8.76666C8.15283 7.17499 9.27783 6.53333 10.6528 7.32499L11.7195 7.94166L12.7862 8.55833C14.1612 9.34999 14.1612 10.65 12.7862 11.4417L11.7195 12.0583L10.6528 12.675C9.27783 13.4667 8.15283 12.8167 8.15283 11.2333V9.99999Z"
                          stroke="#FFFFFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"
                          stroke-linejoin="round" />
                      </svg>
                    </span>
                    <span class="download-text fs-13 text-light text-nowrap">
                      Video hướng dẫn
                    </span>
                  </a>
                </div>
              @else
                <div class="policy-header">
                  <h2 class="m-0">Chính sách chia sẻ trách nhiệm</h2>
                </div>
                <div class="policy-content">
                  <p class="m-0">Phí trách nhiệm này là của các bạn, chúng tôi chỉ phụ thu để đảm bảo rằng
                    bạn sẽ làm đúng
                    công việc mà
                    bạn đã đồng ý đảm nhận. Tránh trường hợp các bạn không làm đúng công việc ảnh hưởng đến
                    Uy Tín của
                    Sieuhoc.com.
                    <br><br>
                    Chúng tôi dẽ hoàn trả lại phí này ngay sau khi bạn chấm dứt hợp đồng với Sieuhoc.com.
                  </p>
                </div>
                <div class="policy-item interest-policy">
                  <div class="policy-header">
                    <h2 class="m-0">Chính sách chia sẻ Quyền lợi</h2>
                  </div>
                  <div class="policy-content">
                    <p class="m-0">Tiền sẽ được chuyển vào tài khoản của bạn ngay sau khi học viên chấp nhận
                      đặt lịch học.
                      <br><br>
                      Sieuhoc.com sẽ khấu trừ 20% cho chi phí Marketting và giới thiệu.
                    </p>
                  </div>
                </div>
              @endif
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 register-rightside">
          <div class="page-register-wrap">
            <form class="register_form" method="POST" action="{{ route('auth.shared.register') }}">
              @csrf
              <div class="page-register-header">
                <h4 class="text-red-main fw-semibold text-capitalize mb-3 mt-5">đăng ký tài khoản</h4>
                <p class="common-text">Một địa chỉ Gmail chỉ tạo được một tài khoản trên website, nên bạn nhớ dùng địa chỉ
                  chưa đăng ký nhé!</p>
                <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 mt-3" 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 text-center">{{ session('error') }}</p>
                    </div>
                  </div>
                @endif
                @if (session()->has('message'))
                  <div class="alert alert-success d-flex align-items-center w-100 mt-3" 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 text-center">{{ session('message') }}</p>
                    </div>
                  </div>
                @endif
              </div>
              <div class="page-register-content">
                <input type="hidden" name="role_id" value="{{ \App\Enums\UserRole::arrayRole[$section] }}">
                <div class="page-register-input-wrap">
                  <label for="fullname" class="label-header text-blue fw-500 text-capitalize mb-2">Tên của bạn ?</label>
                  <input type="text" name="fullname" id="fullname" class="input-register-value w-100"
                    placeholder="Nhập họ và tên của bạn" value="{{ old('fullname') }}">
                  @error('fullname')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>
                <div class="page-register-input-wrap">
                  <label for="email" class="label-header text-blue fw-500 text-capitalize mb-2">Email</label>
                  <div class="position-relative">
                    <input type="email" name="email" id="email" class="input-register-value w-100"
                      placeholder="Nhập địa chỉ Email" value="{{ old('email') }}">
                  </div>
                  @error('email')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>
                <div class="page-register-input-wrap">
                  <label for="password" class="label-header text-blue fw-500 text-capitalize mb-2">Mật Khẩu</label>
                  <div class="position-relative">
                    <input type="password" name="password" id="password" class="input-register-value w-100"
                      placeholder="Nhập mật khẩu">
                    <span toggle="#password"
                      class="position-absolute fa fa-eye-slash fa-fw field-icon hover-text-primary toggle-password"></span>
                  </div>
                  @error('password')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>

                <div class="d-flex flex-column form_item">
                  {!! NoCaptcha::display() !!}
                  @error('g-recaptcha-response')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>
                <div class="page-register-input-wrap my-4">
                  <input type="checkbox" name="agree_terms" id="agree_terms">
                  <span class="ms-2">Bằng cách đăng ký tài
                    khoản, bạn đồ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> của Sieuhoc.com</span>
                  <br>
                  @error('agree_terms')
                    <span class="text-danger">{{ $message }}</span>
                  @enderror
                </div>
                <button type="submit" class="btn-register-tutor btn-fill-primary w-100">Đăng Ký</button>
              </div>
            </form>
            @include('modals.show_notice')
            <p class="common-text-regiter mt-4">
              Bạn đã có tài khoản?
              <a class="text-decoration-none login_link" href="{{ route('landingpage') }}">Đăng nhập</a>
            </p>
            <p class="or-register-with fs-20 text-center">Hoặc đăng ký bằng</p>
            <div class="d-flex justify-content-between">
              <a href="{{ route('auth.google.loginUser', ['role_id' => $role_id]) }}"
                class="btn btn-outline-blue w-100 btn-google-login me-4">
                <span class="btn-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"
                    fill="none">
                    <path
                      d="M29.0733 13.388H27.9993V13.3327H15.9993V18.666H23.5347C22.4353 21.7707 19.4813 23.9993 15.9993 23.9993C11.5813 23.9993 7.99935 20.4173 7.99935 15.9993C7.99935 11.5813 11.5813 7.99935 15.9993 7.99935C18.0387 7.99935 19.894 8.76868 21.3067 10.0253L25.078 6.25402C22.6967 4.03468 19.5113 2.66602 15.9993 2.66602C8.63602 2.66602 2.66602 8.63602 2.66602 15.9993C2.66602 23.3627 8.63602 29.3327 15.9993 29.3327C23.3627 29.3327 29.3327 23.3627 29.3327 15.9993C29.3327 15.1053 29.2407 14.2327 29.0733 13.388Z"
                      fill="#FFC107" />
                    <path
                      d="M4.20312 9.79335L8.58379 13.006C9.76912 10.0713 12.6398 7.99935 15.9991 7.99935C18.0385 7.99935 19.8938 8.76868 21.3065 10.0253L25.0778 6.25402C22.6965 4.03468 19.5111 2.66602 15.9991 2.66602C10.8778 2.66602 6.43646 5.55735 4.20312 9.79335Z"
                      fill="#9E0A1A" />
                    <path
                      d="M16.0009 29.3338C19.4449 29.3338 22.5742 28.0158 24.9402 25.8725L20.8135 22.3805C19.4299 23.4327 17.7392 24.0018 16.0009 24.0005C12.5329 24.0005 9.58819 21.7891 8.47886 18.7031L4.13086 22.0531C6.33753 26.3711 10.8189 29.3338 16.0009 29.3338Z"
                      fill="#1976D2" />
                    <path
                      d="M29.074 13.3893H28V13.334H16V18.6673H23.5353C23.0095 20.1449 22.0622 21.4361 20.8107 22.3813L20.8127 22.38L24.9393 25.872C24.6473 26.1373 29.3333 22.6673 29.3333 16.0007C29.3333 15.1067 29.2413 14.234 29.074 13.3893Z"
                      fill="#1976D2" />
                  </svg>
                </span>
                Google
              </a>
              <a href="{{ route('auth.facebook.loginUser', ['role_id' => $role_id]) }}"
                class="btn btn-outline-blue w-100 btn-facebook-login ms-4">
                <span class="btn-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32"
                    fill="none">
                    <g clip-path="url(#clip0_512_18550)">
                      <path
                        d="M32.5 16C32.5 7.1635 25.3365 0 16.5 0C7.6635 0 0.5 7.16337 0.5 16C0.5 23.986 6.351 30.6054 14 31.8056V20.625H9.9375V16H14V12.475C14 8.465 16.3888 6.25 20.0434 6.25C21.794 6.25 23.625 6.5625 23.625 6.5625V10.5H21.6075C19.6198 10.5 19 11.7334 19 12.9987V16H23.4375L22.7281 20.625H19V31.8056C26.649 30.6054 32.5 23.9861 32.5 16Z"
                        fill="#1877F2" />
                      <path
                        d="M22.7281 20.625L23.4375 16H19V12.9987C19 11.7332 19.6199 10.5 21.6075 10.5H23.625V6.5625C23.625 6.5625 21.794 6.25 20.0434 6.25C16.3888 6.25 14 8.465 14 12.475V16H9.9375V20.625H14V31.8056C14.827 31.9352 15.6629 32.0002 16.5 32C17.3371 32.0002 18.173 31.9353 19 31.8056V20.625H22.7281Z"
                        fill="white" />
                    </g>
                    <defs>
                      <clipPath id="clip0_512_18550">
                        <rect width="32" height="32" fill="white" transform="translate(0.5)" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                Facebook
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    @include('landing.modal_video_guide_register')
  </section>
@endsection

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