@extends('template.main')
@section('title', 'Add User')
@section('content')

<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">@yield('title')</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/user">User</a></li>
            <li class="breadcrumb-item active">@yield('title')</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <div class="content">
    <div class="container-fluid">
      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <div class="text-right">
                <a href="/user" class="btn btn-warning btn-sm"><i class="fa-solid fa-arrow-rotate-left"></i>
                  Back
                </a>
              </div>
            </div>
            <form class="needs-validation" novalidate action="/user" method="POST">
              @csrf
              <div class="card-body">
                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="FirstName">First Name</label>
                      <input type="text" name="FirstName" class="form-control @error('FirstName') is-invalid @enderror" id="FirstName" placeholder="First Name" value="{{old('FirstName')}}" required>
                      @error('FirstName')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="LastName">Last Name</label>
                      <input type="text" name="LastName" class="form-control @error('LastName') is-invalid @enderror" id="category" placeholder="Last Name" value="{{old('LastName')}}" required>
                      @error('LastName')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="Password">Password</label>
                      <input type="password" name="Password" class="form-control @error('Password') is-invalid @enderror" id="Password" placeholder="Password" value="{{old('Password')}}" required>
                      @error('Password')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="PasswordConfirm">Password Confirm</label>
                      <input type="password" name="PasswordConfirm" class="form-control @error('PasswordConfirm') is-invalid @enderror" id="PasswordConfirm" placeholder="Password Confirm" value="{{old('PasswordConfirm')}}" required>
                      @error('PasswordConfirm')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="DateOfBirth">Date Of Birth</label>
                      <input type="date" name="DateOfBirth" class="form-control @error('DateOfBirth') is-invalid @enderror" id="DateOfBirth" placeholder="Date Of Birth" value="{{old('DateOfBirth')}}" required>
                      @error('DateOfBirth')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="Province">Province</label>
                      <select name="Province" id="Province" class="form-control" required> 
                        <option value=""> - Select Province - </option>                
                        <option {{ old('Province') == 'Gauteng' ? "selected" : "" }} value="Gauteng">Gauteng</option> 
                        <option {{ old('Province') == 'Mpumalanga' ? "selected" : "" }} value="Mpumalanga">Mpumalanga</option> 
                        <option {{ old('Province') == 'KwaZulu-Natal' ? "selected" : "" }} value="KwaZulu-Natal">KwaZulu-Natal</option> 
                        <option {{ old('Province') == 'North West' ? "selected" : "" }} value="NorthWest">North West</option> 
                        <option {{ old('Province') == 'Limpopo' ? "selected" : "" }} value="Limpopo">Limpopo</option> 
                        <option {{ old('Province') == 'Western Cape' ? "selected" : "" }} value="Western Cape">Western Cape</option> 
                        <option {{ old('Province') == 'Free State' ? "selected" : "" }} value="Free State">Free State</option> 
                        <option {{ old('Province') == 'Eastern Cape' ? "selected" : "" }} value="Eastern Cape">Eastern Cape</option> 
                        <option {{ old('Province') == 'Northern Cape' ? "selected" : "" }} value="Northern Cape">Northern Cape</option>
                    </select>
                      @error('Province')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="Gender">Gender</label>
                      <select name="Gender" id="Gender" class="form-control" required> 
                        <option value=""> - Select Gender - </option>                
                        <option {{ old('Gender') == 'Male' ? "selected" : "" }} value="Male">Male</option> 
                        <option {{ old('Gender') == 'Female' ? "selected" : "" }} value="Female">Female</option> 
                      </select>
                      @error('Gender')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                  <div class="col-lg-6">
                    <div class="form-group">
                      <label for="Facilitator">Is Facilitator</label>
                      <input type="radio" id="Facilitator" name="Facilitator" value="1" {{ old('Facilitator') == '1' ? 'checked="checked"' : "" }} >
                        <label for="Yes">Yes</label>
                        <input type="radio" id="Facilitator" name="Facilitator" value="0" {{ old('Facilitator') == '0' ? 'checked="checked"' : "" }}>
                        <label for="No">No</label>

                      
                      @error('Facilitator')
                      <span class="invalid-feedback text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer text-right">
                <button class="btn btn-dark mr-1" type="reset"><i class="fa-solid fa-arrows-rotate"></i>
                  Reset</button>
                <button class="btn btn-success" type="submit"><i class="fa-solid fa-floppy-disk"></i>
                  Save</button>
              </div>
            </form>
          </div>
        </div>
        <!-- /.content -->
      </div>
    </div>
  </div>
</div>

@endsection