@extends('landing.layout')

@section('title', 'Membership')

@section('content')

<!--Title Area-->
<div class="container-fluid sacco-downloads-container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <h2 class="sacco-downloads-title">Membership</h2>
            <h6 style="text-align: center; font-weight:300">We have made our membership registration process as easy as possible.</h6>
        </div>
    </div>
</div>
<!--End Title Area-->

@if($errors->has('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ $errors->first('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert" id="success-alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<!--Section Register-->
<section class="downloads">
<div class="container">  
    <!-- Section: Design Block -->
<section class="text-center text-lg-start">
      
    <!-- Jumbotron -->
    <div class="container py-4">
      <div class="row g-2 align-items-center">
        <div class="col-lg-6 mb-5 mb-lg-0">
            <img src="{{asset('assets/images/website/membership/FLYER.png')}}" class="w-100 rounded-4 shadow-4"
              alt="" />
          </div>
        <div class="col-lg-6 mb-5 mb-lg-0">
          <div class="card cascading-right" style="
              background: hsla(0, 0%, 100%, 0.55);
              backdrop-filter: blur(30px);
              ">
            <div class="card-body p-4 shadow-5 text-center">
              <h2 class="fw-bold mb-5">Register now</h2>
              <form method="POST" action="{{ route('registration.store') }}">
                @csrf
                
                <div class="row">
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                        <label class="form-label" for="fname">First name <h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="text" class="form-control @error('fname') is-invalid @enderror" id="fname" name="fname" required>
                        @error('fname')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror                     
                    </div>
                  </div>
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                        <label class="form-label" for="lname">Last name<h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="text" class="form-control" id="lname" name="lname" autocomplete="name" required>                     
                        @error('lname')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                        <label class="form-label" for="email">Email address <h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="email" class="form-control" id="email" name="email" autocomplete="email" required>                        
                    </div>
                  </div>
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                        <label class="form-label" for="phone">Phone <h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="tel" class="form-control" id="phone" name="phone" autocomplete="mobile" required>                      
                    </div>
                  </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label class="form-label" for="dob">Date of Birth<h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="date" class="form-control" id="dob" name="dob" required>                          
                      </div>
                    </div>
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label class="form-label" for="gender">Gender<h6 style="display: inline-block; color:red">*</h6></label>
                        <select class="form-select" id="gender" name="gender" required>
                            <option value="Female">Female</option>
                            <option value="Male">Male</option>
                        </select>                        
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label for="occupation" class="form-label">Occupation<h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="text" class="form-control" id="occupation" name="occupation" required>                         
                      </div>
                    </div>
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label for="address" class="form-label">Address</label>
                        <textarea class="form-control" id="address" name="address" rows="1"></textarea>                  
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label for="kra_pin" class="form-label">KRA PIN<h6 style="display: inline-block; color:red">*</h6></label>
                        <input type="text" class="form-control" id="kra_pin" name="kra_pin" required>                         
                      </div>
                    </div>
                    <div class="col-md-6 mb-4">
                      <div class="form-outline">
                        <label for="monthly_deductions" class="form-label">Monthly Deductions (Ksh.)<h6 style="display: inline-block; color:red">*</h6> </label>
                        <input type="number" class="form-control" id="monthly_deductions" name="monthly_deductions" required>
                      </div>
                    </div>
                  </div>
                <div class="form-outline mb-4">
                    <label for="nominated_by" class="form-label">Nominated By<h6 style="display: inline-block; color:red">*</h6></label>
                    <select class="form-select" id="nominated_by" name="nominated_by" required>
                        <option value="">Select a nominator</option>
                        @foreach($registeredMembers as $member)
                            <option value="{{ $member->id }}">{{ $member->fname }} {{ $member->lname }}</option>
                        @endforeach
                    </select>
                </div>  
                  
                <!-- Checkbox -->
                <div class="form-check d-flex justify-content-center mb-4">
                  <input class="form-check-input me-2" type="checkbox" value="1" id="form2Example33" name="accept_terms" />
                  <label class="form-check-label" for="form2Example33">
                    I accept terms and conditions
                  </label>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary btn-block shadow" style="width: 100%; background: #4e73df">
                        Register
                    </button>
                </div>
                
               
              </form>
            </div>
          </div>
        </div>  
        
      </div>
    </div>
    <!-- Jumbotron -->
  </section>
  <!-- Section: Design Block -->     
   
</div>

</section>

@endsection