<div class="content-wrapper">
  <div class="content-header">
     <div class="container-fluid">
        <div class="row mb-2">
           <div class="col-sm-6">
              <h1 class="m-0 text-dark">Add Member</h1>
           </div>
           <div class="col-sm-6">
              <ol class="breadcrumb float-sm-right">
                 <li class="breadcrumb-item"><a href="<?php echo base_url() ?>admin/admin/dashboard">Dashboard</a></li>
                 <li class="breadcrumb-item"><a href="#">Member</a></li>
                 <li class="breadcrumb-item active">Add Member</li>
              </ol>
           </div>
        </div>
     </div>
  </div>

   <section class="content">
      <div class="container">
         <div class="row"> 
            <div class="col-md-12 col-lg-12">
               <div class="container-fluid">
                  
                  <div class="card card-default">
                     <div class="card-header">
                        <h3 class="card-title">Add New Member</h3>
                        <div class="float-right">
                           <a href="<?php echo base_url() ?>/admin/member/view_all_designation" class="btn btn-warning btn-sm">Add New Designation</a>
                           <a href="<?php echo base_url() ?>/admin/member/view_all_member" class="btn btn-success btn-sm">View All Member</a>
                        </div>
                     </div>
                     <?php echo form_open_multipart('admin/member/add_member'); ?>
                     <div class="card-body">
                        <div class="row">
                           <div class="col-sm-8">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Name (सदस्य का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_name" class="form-control" placeholder="Enter Member Name" required="required">
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Designation (सदस्य पदनाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select type="text" name="user_designation" class="form-control" placeholder="Enter Member Designation" required="required">
                                       <option value="">Select</option>
                                       <?php foreach ($role_permission as $key => $designation):?>
                                          <option value="<?php echo $designation->role_name; ?>"><?php echo $designation->role_name; ?></option>
                                       <?php endforeach; ?>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-3">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Gurdian (सदस्य संरक्षक)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select type="text" name="user_gurdian_status" onchange="checkguardian(this.value)" class="form-control" required="required" >
                                       <option value="">Select</option>
                                       <option value="Father">Father</option>
                                       <option value="Father & Mother">Father & Mother</option>
                                       <option value="Mother">Mother</option>
                                       <option value="Gurdian">Gurdian</option>
                                       <option value="Orphange">Orphange</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           
                           <div class="col-sm-5" id="father_filed">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Father's Name (पिता का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="father_name" id="father_input"  class="form-control" placeholder="Enter Member Father Name" >
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4" id="mother_filed">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Mother's Name (मां का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="mother_name" id="mother_input"  class="form-control" placeholder="Enter Member Mother Name" >
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-9" id="gurdian_filed">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Gurdian Name (अभिभावक का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="gurdian_name" id="gurdian_input"  class="form-control" placeholder="Enter Member Gurdian Name" >
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-9" id="orphange_filed">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Orphange Name (अनाथालय का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="orphange_name" id="orphange_input"  class="form-control" placeholder="Enter Member Orphange Name" >
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Mobile No. (सदस्य मोबाइल नं.)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_mobile" onchange="checkmobile(this.value)" class="form-control" placeholder="Enter Member Mobile No" required="required" pattern="[1-9]{1}[0-9]{9}">
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Email ID (सदस्य ईमेल आईडी)</label>
                                 <div class="col-sm-12">
                                    <input type="email" name="user_email" class="form-control" placeholder="Enter Member Email ID" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" onchange="checkemail(this.value)">
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Gender (सदस्य लिंग)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select type="text" name="user_gender" class="form-control" required>
                                       <option value="Male">Male</option>
                                       <option value="Female">Female</option>
                                       <option value="Transgender">Transgender</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member date of Birth (सदस्य जन्म तिथि)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="date" name="user_dob" class="form-control" placeholder="Enter Email ID" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Highest Education (उच्चतम शिक्षा)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_education" class="form-control" placeholder="Enter Memeber Highest Education" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Nature of Employment (रोज़गार की प्रकृति)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_employment" class="form-control" placeholder="Enter Memeber Nature of Employment" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-6">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Pin Code (सदस्य पिन कोड)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="number" name="user_pin_code" id="pin_code" class="form-control" placeholder="Enter Member Pin Code" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-12">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Address (सदस्य का पता)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <textarea type="text" name="user_address" required class="form-control" placeholder="Enter Member Address" ></textarea>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Post Office (सदस्य का डाकघर)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select name="user_post" id="area" class="form-control" required>
                                       <option value="">Enter Pin Code First</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Dist (सदस्‍य का जिला)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_dist" id="city" class="form-control" placeholder="Member Dist"  readonly="" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member State (सदस्‍य का राज्य)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_state" id="state" class="form-control" placeholder="Member State" readonly="" required>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Nature of Employment (सदस्य रोजगार की प्रकृति)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select type="text" name="user_employment_nature" onchange="check_nature_employment(this.value)" class="form-control" placeholder="Member State"  required>
                                       <option value="">Select</option>
                                       <option value="Employed">Employed</option>
                                       <option value="Self Employed">Self Employed</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4" id="name_of_company">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Company Name (कंपनी का नाम)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_empoyed_company_name" class="form-control" placeholder="Member Company Name" id="company_name">
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4" id="work_nature">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Nature of Work (कार्य की प्रकृति)<span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_work_nature" class="form-control" placeholder="Member Company Name" id="nature_work">
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-8 hide_1"></div>
                           <div class="col-sm-4 hide_2"></div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Availability (सदस्य उपलब्धता)<span style="color:red">*</span></label>
                                 
                              </div>
                           </div>
                           <div class="col-sm-8"></div>
                           <?php
                              $days = array(
                                  'mon' => 'Monday',
                                  'tue' => 'Tuesday',
                                  'wed' => 'Wednesday',
                                  'thu' => 'Thursday',
                                  'fri' => 'Friday',
                                  'sat' => 'Saturday',
                                  'sun' => 'Sunday'
                              );
                           ?>
                           <div class="col-md-4">
                              <table width="100%">
                                 <?php foreach ($days as $dayKey => $dayName): ?>
                                     <tr>
                                         <td>
                                             <label><input type="checkbox" id="<?php echo $dayKey; ?>-checkbox" onclick="toggleWorkingHours('<?php echo $dayKey; ?>')">&nbsp;&nbsp;<?php echo $dayName; ?></label>
                                         </td>
                                         <td>
                                             <select class="form-control" name="<?php echo $dayKey; ?>-start" id="<?php echo $dayKey; ?>-start" disabled>
                                                <option value="">Select</option>
                                                <option value="2-4">2-4 Hrs.</option>
                                                <option value="5-8">5-8 Hrs.</option>
                                                <option value="9-12">9-12 Hrs.</option>
                                             </select>
                                         </td>
                                     </tr>
                                 <?php endforeach; ?>
                              </table>
                           </div>
                           <div class="col-sm-8"></div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Member Image (सदस्य का छवि)</label>
                                 <div class="col-sm-12">
                                    <input type="file" name="user_image" class="form-control" placeholder="Member State" >
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Is Teacher ? (शिक्षक है ?) <span style="color:red">*</span></label>
                                 <div class="col-sm-12">
                                    <select name="user_is_teacher" class="form-control" placeholder="Member State" required>
                                       <option value="">Select</option>
                                       <option value="1">Yes</option>
                                       <option value="0">No</option>
                                    </select>
                                 </div>
                              </div>
                           </div>
                           <div class="col-sm-4">
                              <div class="form-group row">
                                 <label for="inputName" class="col-sm-12 col-form-label">Associated with any other social welfare organisation? Enter Name</label>
                                 <div class="col-sm-12">
                                    <input type="text" name="user_other_organisation" class="form-control" placeholder="Member Other Organisation Name" >
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="form-group row" id="submit_button">
                           <div class="offset-sm-0 col-sm-10">
                              <button onclick="return confirm('Are You Sure ? You Want to Add Member.')"  type="submit" class="btn btn-success setting-submit" name="submit">Save</button>
                           </div>
                        </div>   
                       
                     </div>
                     <?php echo form_close(); ?>
                  </div>
               </div>
            </div>
          </div>
         </div>
      </div>
   </div>
</section>
  
</div>
<style type="text/css">
   #name_of_company, #work_nature, .hide_2
   {
      display: none;
   }
</style>
<script type="text/javascript">
$('body').on('change', '#pin_code', function () {
    let pin_code = $('#pin_code').val();
    if (pin_code == 0) {
            swal ( "Oops" ,  "Please Enter Pin Code!" ,  "warning" );
        return false;
    }
    $.ajax({
      beforeSend: function() {
         $(".loader").show();
      },
      type: "GET",
      dataType:"JSON",
      async: true,
      url: '<?php echo base_url(); ?>/admin/admin/get_aadress_detaile_by_pin_code/'+pin_code,
      success: function (data) 
      {
          $('#area').html(data.area);
          $('#city').val(data.city);
          $('#state').val(data.state);
          $(".loader").hide();
      },
      error: function () {
        $(".loader").hide();
      }
    });
});
function toggleWorkingHours(day) {
   var startInput = document.getElementById(day + '-start');
   var checkbox = document.getElementById(day + '-checkbox');
     
   startInput.disabled = !checkbox.checked;
     
   if (checkbox.checked) {
       startInput.setAttribute('required', 'required');
   } else {
       startInput.removeAttribute('required');
   }
}
function checkemail(e) 
{
   $.ajax({
      beforeSend: function() {
         $(".loader").show();
      },
      type: "POST",
      dataType:"JSON",
      async: true,
      data : {email: e},
      url: '<?php echo base_url(); ?>/admin/admin/check_email',
      success: function (data) 
      {
          if(data)
          {
            swal('Opps!', "Email ID Already Exits", 'error');
            $('#submit_button').hide();
          }
          else
          {
            $('#submit_button').show();
          }
          $(".loader").hide();
      },
      error: function () {
        $(".loader").hide();
      }
    });
}
function checkmobile(e) 
{
   $.ajax({
      beforeSend: function() {
         $(".loader").show();
      },
      type: "POST",
      dataType:"JSON",
      async: true,
      data : {mobile: e},
      url: '<?php echo base_url(); ?>/admin/admin/check_mobile_avaliblity',
      success: function (data) 
      {
          if(data)
          {
            swal('Opps!', "Mobile No. Already Exits", 'error');
            $('#submit_button').hide();
          }
          else
          {
            $('#submit_button').show();
          }
          $(".loader").hide();
      },
      error: function (e) {
        $(".loader").hide();
        console.log(e.responseText)
      }
    });
}
function check_nature_employment(e) 
{
   if(e == 'Employed')
   {
      $('#name_of_company').show();
      $('#work_nature').show();
      $('#company_name').attr('required', true);
      $('#nature_work').attr('required', true);
      $('.hide_1').hide();
      $('.hide_2').hide();
   }
   else
   {
      $('#name_of_company').hide();
      $('#work_nature').show();
      $('#company_name').attr('required', false);
      $('#nature_work').attr('required', true);
      $('.hide_2').show();
      $('.hide_1').hide();
   }
}
</script>
<style type="text/css">
   #father_filed, #mother_filed, #gurdian_filed, #orphange_filed
   {
      display: none;
   }
</style>
<script type="text/javascript">
   function checkguardian(e) 
   {
      if(e == 'Father')
      {
         $('#father_filed').show();
         $('#father_input').attr('required', true);
         $('#mother_filed').hide();
         $('#mother_input').attr('required', false);
         $('#gurdian_filed').hide();
         $('#gurdian_input').attr('required', false);
         $('#orphange_filed').hide();
         $('#orphange_input').attr('required', false);
      }
      else if(e == 'Father & Mother')
      {
         $('#father_filed').show();
         $('#father_input').attr('required', true);
         $('#mother_filed').show();
         $('#mother_input').attr('required', true);
         $('#gurdian_filed').hide();
         $('#gurdian_input').attr('required', false);
         $('#orphange_filed').hide();
         $('#orphange_input').attr('required', false);
      }
      else if(e == 'Mother')
      {
         $('#father_filed').hide();
         $('#father_input').attr('required', false);
         $('#mother_filed').show();
         $('#mother_input').attr('required', true);
         $('#gurdian_filed').hide();
         $('#gurdian_input').attr('required', false);
         $('#orphange_filed').hide();
         $('#orphange_input').attr('required', false);
      }
      else if(e == 'Gurdian')
      {
         $('#father_filed').hide();
         $('#father_input').attr('required', false);
         $('#mother_filed').hide();
         $('#mother_input').attr('required', false);
         $('#gurdian_filed').show();
         $('#gurdian_input').attr('required', true);
         $('#orphange_filed').hide();
         $('#orphange_input').attr('required', false);
      }
      else if(e == 'Orphange')
      {
         $('#father_filed').hide();
         $('#father_input').attr('required', false);
         $('#mother_filed').hide();
         $('#mother_input').attr('required', false);
         $('#gurdian_filed').hide();
         $('#gurdian_input').attr('required', false);
         $('#orphange_filed').show();
         $('#orphange_input').attr('required', true);
      }
   }

</script>