@extends('layouts.argon')


@section('content')


  <main class="main-content  mt-0">
    <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signup-cover.jpg'); background-position: top;">
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-5 text-center mx-auto">
            <!-- <h1 class="text-white mb-2 mt-5">Welcome!</h1> -->
            <p class="text-lead text-white">Please fill out the details to register a new Member.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
        <div class="col-xl-8 col-lg-5 col-md-7 mx-auto">
          <div class="card z-index-0">
            <div class="card-header text-center pt-4">
              <h5>Registeration form</h5>
            </div>
            
            <div class="card-body">
              <form role="form" method="POST" action="{{ route('storemember') }}" enctype="multipart/form-data">
              @csrf
              
             
               <label>Name</label>
             
                <div class="mb-3">
                   
                    <input type="text" class="form-control" placeholder="Name" name="membername" style="width: 49%;display: initial;" required>
                  
                   <input type="email" class="form-control" placeholder="Email" name="memberemail" style="width: 49%;display: initial;" required>
                  
                </div>
            
                
                <div class="mb-3">
                                          <select name="jobtitle" class="form-select" data-search="on" style="width: 49%;display: initial;">
                                                                <option value="select" selected disabled hidden>Select Job Title</option>
                                                                @foreach ($jobtitles as $jobtitle)
                                                                <option value="{{ $jobtitle->name   }}">{{ $jobtitle->name  }}</option>
                                                        @endforeach
                                                            </select>
                                                            
                                                            
                                                            <select name="memberdep" class="form-select" data-search="on" style="width: 49%;display: initial;">
                                                                <option value="select" selected disabled hidden>Select Section</option>
                                                                @foreach ($dep as $deps)
                                                                <option value="{{ $deps->id   }}">{{ $deps->name  }}</option>
                                                        @endforeach
                                                            </select>

                </div>
                

         
                <div class="mb-3">
                                          <select name="odep" class="form-select" data-search="on" required style="width: 49%;display: initial;">
                                                                <option value="select" selected disabled hidden>Select Department</option>
                                                                @foreach ($odep as $odeps)
                                                                <option value="{{ $odeps->id   }}">{{ $odeps->name  }}</option>
                                                                @endforeach
                                                            </select>
                                                            
                                                            
                                         <input type="number" class="form-control" placeholder="Allow Leaves" name="allowleaves" style="width: 49%;display: initial;">

                </div>
                 
                
           
                
                
                
                 <div class="mb-3">
                                          <select name="job_status" class="form-select" data-search="on" style="width: 49%;display: initial;">
                                                              
                                                                <option value="Permanent" selected>Permanent</option>
                                                                <option value="Ad-hoc">Ad-hoc</option>
                                                                <option value="Temporary">Temporary</option>
                                                            </select>
                                                            
                                        <select name="active" class="form-select" data-search="on" style="width: 49%;display: initial;">
                                                                
                                                                <option value="1" selected>Active</option>
                                                                <option value="0">Inactive</option>
                                                               
                                                            </select>

                </div>
                
             
             
             
             <div class="mb-3">
                 <label style="width: 49%;display: inline-block;">Joining date
                 <input type="date" class="form-control" placeholder="Date of joining" name="date_of_joining" ></label>
                  
                  <label style="width: 49%;display: inline-block;">Transfer date
                    <input type="date" class="form-control" placeholder="Date of transfer" name="date_of_transfer" >
                    </label>
                  
                </div>
                
                
                
                
                
                
                <div class="mb-3">
                  <input type="textarea" class="form-control" placeholder="Notes" name="notes">
                </div>
                
                
                
                
                
            <div class="mb-3">
                 <label style="width: 49%;display: inline-block;">Attachment (If any)
                <input type="file" class="form-control" placeholder="Attachment" name="file">
                  </label>
                  <label style="width: 49%;display: inline-block;">Signature
                    <input type="file" class="form-control" placeholder="Signature" name="signature">
                    </label>
                  
                </div>
                
                
                
               
               
                
                <div class="mb-3">
                    
                    
                     <label style="width: 49%;display: inline-block;">Date of transfer out
                <input type="date" class="form-control" placeholder="Date of transfer out" name="date_of_transfer_out">
                  </label>
                  <label style="width: 24%;display: inline-block;">
                   <input type="password" class="form-control" placeholder="Password" name="memberpassword" required>
                    </label>


                    <label style="width: 24%;display: inline-block;">
                   <input type="password" class="form-control" placeholder="Pin" name="memberpin" required>
                    </label>
                    
                </div>
            
               
                <div class="text-center">
                  <button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign up</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>



  @endsection