<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Register</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="{{ asset('logo/baru/dutdut.png') }}" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ asset('assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">

  <style>
    body {
      font-family: 'Nunito', sans-serif;
      background: #f8f9fa;
    }

    .register-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .register-card {
      width: 100%;
      max-width: 500px;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
      background-color: #ffffff;
    }

    .register-card .card-body {
      padding: 2rem;
    }

    .register-card h5 {
      font-size: 1.75rem;
    }

    .register-card p {
      font-size: 1rem;
    }

    /* Responsive design for smaller screens */
    @media (max-width: 768px) {
      .register-card .card-body {
        padding: 1.5rem;
      }

      .register-card h5 {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 576px) {
      .register-card {
        max-width: 100%;
      }

      .register-card h5 {
        font-size: 1.25rem;
      }

      .register-card p {
        font-size: 0.875rem;
      }

      .register-card .card-body {
        padding: 1rem;
      }
    }
  </style>
</head>

<body>

  <main>
    <div class="container">

      <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
        <div class="row justify-content-center w-100">
          <div class="col-12 col-md-8 col-lg-6 d-flex flex-column align-items-center justify-content-center">

            <div class="card mb-3 register-card">

              <div class="card-body">

                <div class="pt-4 pb-2">
                  <h5 class="card-title text-center pb-0 fs-4">Create an Account</h5>
                  <p class="text-center small">Enter your personal details to create an account</p>
                </div>

                <form class="row g-3 needs-validation" action="{{ route('register.post') }}" method="POST" novalidate>
                  @csrf
                  <div class="col-12">
                      <label for="yourName" class="form-label">Your Name</label>
                      <input type="text" name="name" class="form-control" id="yourName" required>
                      <div class="invalid-feedback">Please, enter your name!</div>
                  </div>
              
                  <div class="col-12">
                      <label for="yourEmail" class="form-label">Your Email</label>
                      <input type="email" name="email" class="form-control" id="yourEmail" required>
                      <div class="invalid-feedback">Please enter a valid Email address!</div>
                  </div>
              
                  <div class="col-12">
                      <label for="phoneNumber" class="form-label">Phone Number</label>
                      <div class="input-group has-validation">
                          <input type="tel" name="no_telp" class="form-control" id="phoneNumber" required placeholder="08...">
                          <div class="invalid-feedback">Please enter a valid phone number.</div>
                      </div>
                  </div>
              
                  <div class="col-12">
                      <label for="yourPassword" class="form-label">Password</label>
                      <input type="password" name="password" class="form-control" id="yourPassword" required placeholder="input min 6 characters">
                      <div class="invalid-feedback">Please enter your password!</div>
                  </div>
              
                  <div class="col-12">
                      <label for="yourPasswordConfirmation" class="form-label">Confirm Password</label>
                      <input type="password" name="password_confirmation" class="form-control" id="yourPasswordConfirmation" required placeholder="Re-enter password">
                      <div class="invalid-feedback">Please confirm your password!</div>
                  </div>
              
                  <div class="col-12">
                      <button class="btn btn-primary w-100" type="submit">Create Account</button>
                  </div>
              
                  <div class="col-12">
                      <p class="small mb-0">Already have an account? <a href="{{ route('login') }}">Log in</a></p>
                  </div>
                </form>

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

      </section>

    </div>
  </main>

  <!-- Back to Top -->
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i>
  </a>

  <!-- Vendor JS -->
  <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  <script>
    // Bootstrap validation script
    (() => {
      'use strict'
      const forms = document.querySelectorAll('.needs-validation')
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>

</body>

</html>
