@extends('theme.partial.master')
@section('page-title', 'انشاء حساب')
@section('content')

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-7 p-0" style="background-color: rgba(255, 255, 255, 0.95);">
      <div class="login-card login-dark login-bg">
        <div>
          <div>
            <a class="logo text-center mb-5" href="{{ route('theme.home') }}">
              <img class="img-fluid for-light" src="{{ asset('assets/images/logo/logo-main.png') }}" alt="looginpage" width="300">
              <img class="img-fluid for-dark" src="{{ asset('assets/images/logo/logo-main.png') }}" alt="looginpage" width="300">
            </a>
          </div>
          <div class="login-main">
            <form class="theme-form" method="POST" action="{{ route('register') }}">
              @csrf

              <h4>انشئ حسابك على {{ config('app.name') }}</h4>
              <p class="mt-3">تأكد من إدخال معلوماتك بشكل صحيح</p>

              <div class="form-group">
                <label class="col-form-label">الاسم</label>
                <input class="form-control" type="text" name="name" required placeholder="Test@gmail.com" value="{{ old('name') }}">
                @error('name')
                <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>

              <div class="form-group">
                <label class="col-form-label">البريد الإلكتروني</label>
                <input class="form-control" type="email" name="email" required placeholder="Test@gmail.com" value="{{ old('email') }}">
                @error('email')
                <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>

              <div class="form-group">
                <label class="col-form-label">رقم الهاتف</label>
                <input class="form-control" type="text" name="phone_number" required placeholder="" value="{{ old('phone_number') }}">
                @error('phone_number')
                <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>

              <div class="form-group">
                <label class="col-form-label">كلمة المرور</label>
                <div class="form-input position-relative">
                  <input class="form-control" type="password" name="password" required placeholder="*********">
                  <div class="show-hide">
                    <span class="show"></span>
                  </div>
                </div>
                @error('password')
                <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>

              <div class="form-group">
                <label class="col-form-label">تأكيد كلمة المرور</label>
                <div class="form-input position-relative">
                  <input class="form-control" type="password" name="password_confirmation" required placeholder="*********">
                  <div class="show-hide">
                    <span class="show"></span>
                  </div>
                </div>
                @error('password_confirmation')
                <span class="text-danger">{{ $message }}</span>
                @enderror
              </div>

              <div class="form-group mb-0 mt-4">
                <button class="btn btn-primary btn-block w-100" name="login" type="submit">تسجيل الدخول</button>
              </div>
              <p class="mt-4 mb-0 text-center">هل تملك حساب؟<a class="ms-2" href="{{ route('login') }}">تسجيل الدخول</a></p>

            </form>
          </div>
          <div class="login-footer text-center mt-4 text-muted">
            <p>© {{ date("Y") }} جميع الحقوق محفوظة</p>
          </div>
                  </div>
      </div>
    </div>
    <div class="col-xl-5 p-0 text-center d-flex justify-content-center align-items-center d-none d-xl-flex" style="background: linear-gradient(135deg, rgba(26, 35, 126, 0.9), rgba(38, 166, 154, 0.9)); flex-direction: column;">
      <img src="assets/images/logo/logo-white.png" alt="شعار" width="200" class="img-fluid mb-3">
      <h2 class="text-white">منصة شاملة لإدارة وتتبع دعواتك</h2>
    </div>
  </div>
</div>



@endsection