<?php $__env->startSection('title', 'Register'); ?>

<?php $__env->startSection('content'); ?>
<!-- Include Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>

<div class="register-wrapper py-5">
  <div class="container" style="max-width: 1000px;">
    <div class="row align-items-stretch card-glass-container">
      
      <!-- Left side: Form -->
      <div class="col-lg-7 p-4 p-md-5 d-flex flex-column justify-content-center">
        <div class="register-header mb-4">
          <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
              <h2 class="text-white fw-bold mb-1">Daftar Akun Baru</h2>
              <p class="text-gray-400 mb-0">Buat akun Anda untuk membeli tiket atau mengelola event konser.</p>
            </div>
            <!-- Dynamic Administrator Badge -->
            <div id="admin-badge-container">
              <span id="admin-badge" class="admin-badge-pill">
                <i data-lucide="shield-check" class="badge-icon me-1"></i> Administrator
              </span>
            </div>
          </div>
        </div>

        <form action="<?php echo e(route('register.process')); ?>" method="POST" id="unifiedRegisterForm" class="register-form" novalidate>
          <?php echo csrf_field(); ?>

          <!-- Pilihan Role (Card Selection) -->
          <div class="mb-4">
            <label class="form-label text-gray-300 fw-semibold mb-3 d-flex align-items-center gap-2">
              <i data-lucide="users" class="icon-label"></i> Pilihan Akun
            </label>
            <div class="row g-3">
              <!-- Card User -->
              <div class="col-sm-6">
                <label for="role-user" class="role-card-label" id="label-role-user">
                  <input type="radio" name="role" id="role-user" value="user" class="role-radio-hidden" <?php echo e(old('role', 'user') === 'user' ? 'checked' : ''); ?>>
                  <div class="role-card-content">
                    <div class="role-card-icon-wrapper user-icon">
                      <i data-lucide="user"></i>
                    </div>
                    <div class="role-card-details">
                      <span class="role-card-title">User</span>
                      <span class="role-card-desc">Beli tiket konser favorit dengan mudah</span>
                    </div>
                    <div class="role-card-check">
                      <i data-lucide="check-circle" class="check-icon"></i>
                    </div>
                  </div>
                </label>
              </div>

              <!-- Card Admin -->
              <div class="col-sm-6">
                <label for="role-admin" class="role-card-label" id="label-role-admin">
                  <input type="radio" name="role" id="role-admin" value="admin" class="role-radio-hidden" <?php echo e(old('role') === 'admin' ? 'checked' : ''); ?>>
                  <div class="role-card-content">
                    <div class="role-card-icon-wrapper admin-icon">
                      <i data-lucide="shield"></i>
                    </div>
                    <div class="role-card-details">
                      <span class="role-card-title">Admin</span>
                      <span class="role-card-desc">Kelola event dan transaksi tiket konser</span>
                    </div>
                    <div class="role-card-check">
                      <i data-lucide="check-circle" class="check-icon"></i>
                    </div>
                  </div>
                </label>
              </div>
            </div>
            <?php $__errorArgs = ['role'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
              <div class="invalid-feedback-custom mt-2">
                <i data-lucide="alert-circle" class="error-icon"></i> <?php echo e($message); ?>

              </div>
            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
          </div>

          <div class="row g-3">
            <!-- Nama Lengkap -->
            <div class="col-md-6 mb-3">
              <div class="input-glass-group <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> has-error <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                <label class="input-glass-label"><i data-lucide="user-round" class="me-1"></i> Nama Lengkap</label>
                <div class="input-glass-wrapper">
                  <input type="text" name="name" class="input-glass-control" placeholder="Nama Lengkap Anda" value="<?php echo e(old('name')); ?>" required>
                </div>
                <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                  <div class="invalid-feedback-custom mt-1">
                    <i data-lucide="alert-circle" class="error-icon"></i> <?php echo e($message); ?>

                  </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
              </div>
            </div>

            <!-- Username -->
            <div class="col-md-6 mb-3">
              <div class="input-glass-group <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> has-error <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                <label class="input-glass-label"><i data-lucide="at-sign" class="me-1"></i> Username</label>
                <div class="input-glass-wrapper">
                  <input type="text" name="username" class="input-glass-control" placeholder="username_kamu" value="<?php echo e(old('username')); ?>" required>
                </div>
                <?php $__errorArgs = ['username'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                  <div class="invalid-feedback-custom mt-1">
                    <i data-lucide="alert-circle" class="error-icon"></i> <?php echo e($message); ?>

                  </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
              </div>
            </div>

            <!-- Email -->
            <div class="col-12 mb-3">
              <div class="input-glass-group <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> has-error <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                <label class="input-glass-label"><i data-lucide="mail" class="me-1"></i> Email</label>
                <div class="input-glass-wrapper">
                  <input type="email" name="email" class="input-glass-control" placeholder="alamat_email@domain.com" value="<?php echo e(old('email')); ?>" required>
                </div>
                <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                  <div class="invalid-feedback-custom mt-1">
                    <i data-lucide="alert-circle" class="error-icon"></i> <?php echo e($message); ?>

                  </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
              </div>
            </div>

            <!-- Password -->
            <div class="col-md-6 mb-3">
              <div class="input-glass-group <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> has-error <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                <label class="input-glass-label"><i data-lucide="lock" class="me-1"></i> Password</label>
                <div class="input-glass-wrapper">
                  <input type="password" name="password" class="input-glass-control" placeholder="Minimal 8 karakter" required>
                </div>
                <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                  <div class="invalid-feedback-custom mt-1">
                    <i data-lucide="alert-circle" class="error-icon"></i> <?php echo e($message); ?>

                  </div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
              </div>
            </div>

            <!-- Konfirmasi Password -->
            <div class="col-md-6 mb-3">
              <div class="input-glass-group">
                <label class="input-glass-label"><i data-lucide="shield-check" class="me-1"></i> Konfirmasi Password</label>
                <div class="input-glass-wrapper">
                  <input type="password" name="password_confirmation" class="input-glass-control" placeholder="Ulangi password" required>
                </div>
              </div>
            </div>
          </div>

          <!-- Submit Button -->
          <div class="d-grid mt-4">
            <button type="submit" id="btnSubmitRegister" class="btn-gradient-submit">
              <span class="btn-text">Daftar Akun</span>
              <span class="btn-spinner d-none">
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Mendaftarkan...
              </span>
            </button>
          </div>
        </form>

        <div class="mt-4 text-center text-gray-400">
          Sudah memiliki akun? <a href="<?php echo e(route('login')); ?>" class="text-accent-purple hover-link fw-semibold">Masuk disini</a>
        </div>
      </div>

      <!-- Right side: Information panel -->
      <div class="col-lg-5 register-info-panel d-none d-lg-flex flex-column justify-content-between p-5 text-white">
        <div>
          <div class="info-logo-container mb-4">
            <div class="info-logo">KT</div>
            <span class="info-brand fw-bold fs-5">KonserTix</span>
          </div>
          <h3 class="fw-bold mb-3 mt-4">Satu Akun untuk Semua Event</h3>
          <p class="text-white-50">Daftarkan akun Anda hari ini untuk mendapatkan kemudahan dalam pembelian tiket konser musik internasional, lokal, dan festival terbaik di Indonesia.</p>
        </div>

        <div class="info-features-list">
          <div class="info-feature-item d-flex gap-3 align-items-start mb-3">
            <div class="info-feature-icon"><i data-lucide="ticket"></i></div>
            <div>
              <span class="d-block fw-semibold">Diskon Tiket</span>
              <small class="text-white-50">Dapatkan promo eksklusif untuk konser impian Anda.</small>
            </div>
          </div>
          <div class="info-feature-item d-flex gap-3 align-items-start">
            <div class="info-feature-icon"><i data-lucide="clock"></i></div>
            <div>
              <span class="d-block fw-semibold">Bebas Antre</span>
              <small class="text-white-50">Sistem pembayaran cepat dan e-tiket langsung dikirim ke email.</small>
            </div>
          </div>
        </div>

        <div class="info-footer text-white-50 fs-7">
          &copy; <?php echo e(date('Y')); ?> KonserTix. All rights reserved.
        </div>
      </div>

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

<!-- Custom Page Styles -->
<?php $__env->startPush('styles'); ?>
<style>
  /* Dark mode and glassmorphism styling for unified registration */
  .register-wrapper {
    background: radial-gradient(1200px 600px at 50% 50%, rgba(124, 58, 237, 0.15), transparent 55%),
                radial-gradient(900px 500px at 80% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
                #0f172a;
    border-radius: 24px;
    margin: 20px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }

  /* Glassmorphic Container */
  .card-glass-container {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  }

  /* Text & Labels */
  .text-gray-400 { color: #9ca3af; }
  .text-gray-300 { color: #d1d5db; }
  .text-accent-purple { color: #a855f7; }
  .text-accent-purple:hover { color: #c084fc; text-decoration: underline; }
  .hover-link { transition: color 0.2s ease; }
  .icon-label { width: 18px; height: 18px; color: #a855f7; }

  /* Administrator Badge */
  .admin-badge-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.9);
    opacity: 0;
  }
  .admin-badge-pill.show {
    transform: scale(1);
    opacity: 1;
  }
  .badge-icon { width: 16px; height: 16px; animation: pulse 2s infinite; }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  /* Role Selection Cards */
  .role-card-label {
    display: block;
    cursor: pointer;
    width: 100%;
    margin-bottom: 0;
  }

  .role-radio-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .role-card-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .role-card-content:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
  }

  .role-card-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .user-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
  }

  .admin-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
  }

  .role-card-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .role-card-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
  }

  .role-card-desc {
    color: #9ca3af;
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 2px;
  }

  .role-card-check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #a855f7;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.25s ease;
  }

  .role-card-check .check-icon {
    width: 18px;
    height: 18px;
  }

  /* Checked states styling */
  .role-radio-hidden:checked + .role-card-content {
    background: rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.6);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
  }

  .role-radio-hidden:checked + .role-card-content .role-card-check {
    opacity: 1;
    transform: scale(1);
  }

  #role-admin:checked + .role-card-content {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
  }

  #role-admin:checked + .role-card-content .role-card-check {
    color: #ef4444;
  }

  /* Input fields */
  .input-glass-group {
    display: flex;
    flex-direction: column;
  }

  .input-glass-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
  }

  .input-glass-wrapper {
    position: relative;
    width: 100%;
  }

  .input-glass-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 11px 14px;
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.25s ease;
  }

  .input-glass-control::placeholder {
    color: rgba(156, 163, 175, 0.45);
  }

  .input-glass-control:focus {
    border-color: rgba(168, 85, 247, 0.65);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2);
  }

  /* Error state */
  .input-glass-group.has-error .input-glass-control {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
  }

  .input-glass-group.has-error .input-glass-label {
    color: #f87171;
  }

  .invalid-feedback-custom {
    color: #f87171;
    font-size: 0.76rem;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .invalid-feedback-custom .error-icon {
    width: 14px;
    height: 14px;
  }

  /* Submit Button */
  .btn-gradient-submit {
    background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .btn-gradient-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.4);
    background: linear-gradient(90deg, #8b5cf6 0%, #3b82f6 100%);
  }

  .btn-gradient-submit:active {
    transform: translateY(1px);
  }

  .btn-gradient-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
  }

  /* Left Panel Info styling */
  .register-info-panel {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.45) 0%, rgba(15, 23, 42, 0.6) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }

  .info-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .info-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #ffffff;
  }

  .info-features-list {
    margin: 40px 0;
  }

  .info-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a855f7;
    flex-shrink: 0;
  }

  .info-feature-icon i {
    width: 20px;
    height: 20px;
  }

  /* SweetAlert2 Styling Customization */
  .swal2-popup-custom {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
  }
  .swal2-title-custom {
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
  }
  .swal2-html-custom {
    color: #9ca3af !important;
    font-family: 'Poppins', sans-serif !important;
  }
</style>
<?php $__env->stopPush(); ?>

<!-- JavaScript logic -->
<?php $__env->startPush('scripts'); ?>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide Icons
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }

    const form = document.getElementById('unifiedRegisterForm');
    const roleUserRadio = document.getElementById('role-user');
    const roleAdminRadio = document.getElementById('role-admin');
    const adminBadge = document.getElementById('admin-badge');
    const btnSubmit = document.getElementById('btnSubmitRegister');
    const btnText = btnSubmit.querySelector('.btn-text');
    const btnSpinner = btnSubmit.querySelector('.btn-spinner');

    // Function to handle showing/hiding admin badge
    function toggleAdminBadge() {
      if (roleAdminRadio.checked) {
        adminBadge.classList.add('show');
      } else {
        adminBadge.classList.remove('show');
      }
    }

    // Event listeners for role radio cards
    roleUserRadio.addEventListener('change', toggleAdminBadge);
    roleAdminRadio.addEventListener('change', toggleAdminBadge);

    // Run once on load to initialize state
    toggleAdminBadge();

    // Intercept form submission
    form.addEventListener('submit', function(e) {
      e.preventDefault();

      // Check if Admin role is selected
      if (roleAdminRadio.checked) {
        // Show SweetAlert2 confirmation dialog
        if (typeof Swal !== 'undefined') {
          Swal.fire({
            title: 'Konfirmasi Akun Admin',
            text: 'Apakah Anda yakin ingin membuat akun Administrator?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#4b5563',
            confirmButtonText: 'Ya, Yakin',
            cancelButtonText: 'Batal',
            customClass: {
              popup: 'swal2-popup-custom',
              title: 'swal2-title-custom',
              htmlContainer: 'swal2-html-custom'
            }
          }).then((result) => {
            if (result.isConfirmed) {
              submitForm();
            }
          });
        } else {
          // Fallback if SweetAlert2 is not loaded
          if (confirm('Apakah Anda yakin ingin membuat akun Administrator?')) {
            submitForm();
          }
        }
      } else {
        // For standard user role, submit immediately
        submitForm();
      }
    });

    function submitForm() {
      // Show loading state on button
      btnSubmit.disabled = true;
      btnText.classList.add('d-none');
      btnSpinner.classList.remove('d-none');

      // Submit the form programmatically (by bypassing this listener)
      form.submit();
    }
  });
</script>
<?php $__env->stopPush(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\tugas pa asur\konser-ticket\resources\views/auth/register.blade.php ENDPATH**/ ?>