<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 Sharnarthi</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="#">Sharnarthi</a></li>
                  <li class="breadcrumb-item active">Add Sharnarthi </li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <section class="content">
      <div class="container-fluid">
         <div class="card card-default">
            <div class="card-header">
               <h3 class="card-title">Add New Sharnarthi</h3>
               <div class="card-tools">
                  <a href="<?php echo base_url()?>/admin/sharnarthi/view_all_sharnarthi" class="btn btn-success btn-sm"><i class="fa fa-eye" aria-hidden="true"></i> View All Sharnarthi</a>
               </div>
            </div>
            <?php echo form_open_multipart('admin/sharnarthi/add_sharnarthi'); ?>
            <div class="card-body">
               <div class="row">
                  <div class="col-md-5">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Name (नाम)<span class="required">*</span></label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_name" placeholder="Enter Sharnarthi Name" required="required" >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Mobile (फोन)</label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_mobile" placeholder="Enter Sharnarthi Name"  >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Country Migrated From (देश से प्रवासित)<span class="required">*</span></label>
                        <div class="col-sm-12">
                           <select type="text" onchange="check_migrated(this.value)" class="form-control" name="sharnarthi_migrated_from" placeholder="Enter Sharnarthi Name" required="required" >
                              <option value="">Select</option>
                              <option value="Pakisthan">Pakisthan</option>
                              <option value="Bangladesh">Bangladesh</option>
                              <option value="East Pakisthan">East Pakisthan</option>
                              <option value="Afghanistan">Afghanistan</option>
                              <option value="India">India</option>
                           </select>
                        </div>
                     </div>
                  </div>

                  <div class="col-sm-7 migrate_show">
                     <div class="form-group">
                        <label for="inputName" class="col-sm-12 col-form-label">Migrate Address (माइग्रेट पता)</label>
                        <div class="col-sm-12">
                           <input type="text" name="sharnarthi_migrated_address" class="form-control" placeholder="Enter Migrate Address" />
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-5 migrate_show">
                     <div class="form-group">
                        <label for="inputName" class="col-sm-12 col-form-label">Migrate Pin Code (माइग्रेट पिन कोड)</label>
                        <div class="col-sm-12">
                           <input type="number" name="sharnarthi_migrated_pin_code" id="pin_code" class="form-control" placeholder="Enter Migrate Pin Code">
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-4 migrate_show">
                     <div class="form-group">
                        <label for="inputName" class="col-sm-12 col-form-label">Migrate Post Office (माइग्रेट डाकघर)</label>
                        <div class="col-sm-12">
                           <select name="sharnarthi_migrated_post_office" id="area" class="form-control" >
                              <option value="">Select A Area</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-4 migrate_show">
                     <div class="form-group">
                        <label for="inputName" class="col-sm-12 col-form-label">Migrate Dist (माइग्रेट जिला)</label>
                        <div class="col-sm-12">
                           <input type="text" name="sharnarthi_migrated_dist" id="city" class="form-control" placeholder="Migrate Dist" readonly="">
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-4 migrate_show">
                     <div class="form-group">
                        <label for="inputName" class="col-sm-12 col-form-label">Migrate State (माइग्रेट राज्य)</label>
                        <div class="col-sm-12">
                           <input type="text" name="sharnarthi_migrated_state" id="state" class="form-control" placeholder="Migrate State" readonly="">
                        </div>
                     </div>
                  </div>

                  <div class="col-md-12 migrate_show">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Migrate Reason (माइग्रेट के कारण)</label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_migrated_reason" placeholder="Enter Sharnarthi Migrate Reason" >
                              
                        </div>
                     </div>
                  </div>

                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Religion (धर्म)<span class="required">*</span></label>
                        <div class="col-sm-12">
                           <select type="text" class="form-control" name="sharnarthi_religion" placeholder="Enter Sharnarthi Name" required="required" >
                              <option value="">Select</option>
                              <option value="Hinduism">Hinduism</option>
                              <option value="Christianity">Christianity</option>
                              <option value="Buddhism">Buddhism</option>
                              <option value="Jainism">Jainism</option>
                              <option value="Zoroastrianism">Zoroastrianism</option>
                              <option value="Sikhism">Sikhism</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Living in India Since (कव से भारत में रह रहे हैं)</label>
                        <div class="col-sm-12">
                           <select type="text" class="form-control" name="sharnarthi_living_since" placeholder="Enter Sharnarthi Name" >
                              <option value="">Select Year</option>
                              <?php 
                              for ($year = date('Y'); $year >= 1965; $year--) {
                                  echo '<option value="' . $year . '">' . $year . '</option>';
                              }
                              ?>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Camp (शिविर)</label>
                        <div class="col-sm-12">
                           <select type="text" class="form-control" name="sharnarthi_camp" placeholder="Enter Sharnarthi Camp Name">
                              <option value="">Select Camp</option>
                              <?php foreach ($all_camp as $key => $camp):?>
                                 <option value="<?php echo $camp->camp_id; ?>"><?php echo $camp->camp_name; ?></option>
                              <?php endforeach; ?>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Source Of Earning (आय का स्रोत)</label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_earning_source" placeholder="Enter Sharnarthi Source Of Earning"  >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Monthly Income (मासिक आय)</label>
                        <div class="col-sm-12">
                           <input type="number" min="1" class="form-control" name="sharnarthi_income" placeholder="Enter Sharnarthi Monthly Income" >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">No.Of Members in Family (परिवार में सदस्यों की संख्या)</label>
                        <div class="col-sm-12">
                           <input type="number" min="1" class="form-control" name="sharnarthi_no_of_member_family" placeholder="Enter Sharnarthi No.Of Members" >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Gender (लिंग)</label>
                        <div class="col-sm-12">
                           <select type="text" class="form-control" name="sharnarthi_gender" placeholder="Enter Sharnarthi Name" >
                              <option value="">Select</option>
                              <option value="Male ">Male</option>
                              <option value="Female">Female</option>
                              <option value="Other">Other</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Age (आयु)</label>
                        <div class="col-sm-12">
                           <input type="number" min="1" class="form-control" name="sharnarthi_age" placeholder="Enter Sharnarthi Age">
                        </div>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Husband/Wife Name (पति/पत्नी का नाम)</label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_guardian_name" placeholder="Enter Sharnarthi Husband/Wife Name"  >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Specially Abled (विशेष रूप से सक्षम)</label>
                        <div class="col-sm-12">
                           <select class="form-control" name="sharnarthi_sp_abled" placeholder="Enter Sharnarthi Age" onchange="check_sa_status(this.value)">
                              <option value="">Select</option>
                              <option value="Yes">Yes</option>
                              <option value="No">No</option>
                           </select>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-9" id="sa_des">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Specially Abled Description (विशेष योग्यजन विवरण) <span class="required">*</span></label>
                        <div class="col-sm-12">
                           <input type="text" class="form-control" name="sharnarthi_sp_abled_description" placeholder="Enter Specially Abled Description"  id="sa_des_filed">
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Children Details (बच्चों का विवरण)</label>
                        <div class="col-sm-12">
                           <div class="table-responsive children">
                              <table id="input-table" class="table table-bordered">
                                  <tr>
                                       <th width="5%"><button type="button" class="btn btn-success btn-xs" onclick="addRow()"><i class="fa fa-plus"></i></button></th>
                                      <th width="25%">Name (नाम)</th>
                                      <th width="10%">Gender (लिंग)</th>
                                      <th width="10%">Age (आयु)</th>
                                      <th width="15%">Studying in school? (स्कूल में पढ़ रहे हो?)</th>
                                      <th width="20%">They are working and earning? (वे काम कर रहे हैं और कमा रहे हैं?)</th>
                                      <th width="25%">Specially Abled (विशेष रूप से सक्षम)</th>
                                  </tr>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                           <label for="inputEmail" class="col-sm-12 col-form-label">
                           <input type="checkbox" id="myCheckbox" name="is_other_member" value="1">&nbsp;&nbsp;Any Other Family Member? (परिवार का कोई और सदस्य?)
                        </label>

                        <div class="col-sm-12" id="is_other_member">
                           <div class="table-responsive member">
                              <table id="input-table-2" class="table table-bordered">
                                  <tr>
                                      <th width="5%"><button type="button" class="btn btn-success btn-xs" onclick="addRowMember()"><i class="fa fa-plus"></i></button></th>
                                      <th width="25%">Name (नाम)</th>
                                      <th width="10%">Gender (लिंग)</th>
                                      <th width="10%">Age (आयु)</th>
                                      <th width="15%">Relation (रिश्ता)</th>
                                      <th width="25%">Specially Abled (विशेष रूप से सक्षम)</th>
                                      
                                  </tr>
                              </table>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">
                           <input type="checkbox" name="is_bank_account" value="1">
                        &nbsp;&nbsp;Do You have a Bank Account? (क्या आपका बैंक खाता है?)
                        </label>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Identification Document (पहचान दस्तावेज़)</label>
                        <div class="col-sm-12">
                           <input type="file" class="form-control" name="sharnarthi_identification_doc" placeholder="Enter Sharnarthi Husband/Wife Name" >
                        </div>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="form-group">
                        <label for="inputEmail" class="col-sm-12 col-form-label">Immigration Proof (आप्रवासन प्रमाण)</label>
                        <div class="col-sm-12">
                           <input type="file" class="form-control" name="sharnarthi_immigration_doc" placeholder="Enter Sharnarthi Husband/Wife Name">
                        </div>
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        <button name="submit" style="float: right" type="submit" class="btn btn-success">Add</button>
                     </div>
                  </div>
                  <?php echo form_close() ?>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

<script>
function check_sa_status(e) 
{
   if(e == 'Yes')
   {
      $('#sa_des').show();
      $('#sa_des_filed').attr('required', true);
   }
   else
   {
      $('#sa_des').hide();
      $('#sa_des_filed').attr('required', false);
   }
}
$('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 check_migrated(e) 
{
   if(e == 'India')
   {
      $('.migrate_show').show();
   }
   else
   {
      $('.migrate_show').hide();
   }
}

$(document).ready(function() {
  var isRowAdded = false; // Flag to track if row is added

  $('#myCheckbox').change(function() {
    if($(this).is(':checked')) {
      $('#is_other_member').show();
      if (!isRowAdded) {
        addRowMember();
        isRowAdded = true;
      }
    } else {
      $('#is_other_member').hide();
      deleteRow('b', 1);
      isRowAdded = false; // Reset the flag
    }
  });
});


var rowCounter = 0;

function addRowMember() {
    var table = document.getElementById("input-table-2");
    var row = table.insertRow();

    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    var cell3 = row.insertCell();
    var cell4 = row.insertCell();
    var cell5 = row.insertCell();
    var cell6 = row.insertCell();

    cell1.innerHTML = `<button type="button" class="btn btn-danger btn-xs" onclick="deleteRow('b', ${rowCounter})"><i class="fa fa-trash"></i></button>`;
    cell2.innerHTML = '<input class="form-control" type="text" name="member_name[]" required placeholder="Enter Member Name *"/>';
    cell3.innerHTML = '<select class="form-control" type="text" name="member_gender[]" required><option value="">Select</option><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select>';
    cell4.innerHTML = '<input class="form-control" type="number" min="0" name="member_age[]" required/>';
    cell5.innerHTML = '<input class="form-control" type="text" name="member_relation[]" required/>';
    cell6.innerHTML = `
        <div class="col-sm-12">
            <input type="radio" name="member_is_sa[${rowCounter}]" onchange="handleSASelection(this.value, ${rowCounter})" id="yes${rowCounter}" value="Yes">
            <label for="yes${rowCounter}">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <input type="radio" name="member_is_sa[${rowCounter}]" onchange="handleSASelection(this.value, ${rowCounter})" id="no${rowCounter}" value="No">
            <label for="no${rowCounter}">No</label>
        </div>
        <div id="additional-details-SA-${rowCounter}"></div>
    `;

    row.id = "row-b" + rowCounter;

    rowCounter++;
}

function addRow() {
    var table = document.getElementById("input-table");
    var row = table.insertRow();

    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    var cell3 = row.insertCell();
    var cell4 = row.insertCell();
    var cell5 = row.insertCell();
    var cell6 = row.insertCell();
    var cell7 = row.insertCell();

    cell1.innerHTML = `<button type="button" class="btn btn-danger btn-xs" onclick="deleteRow('a', ${rowCounter})"><i class="fa fa-trash"></i></button>`;
    cell2.innerHTML = '<input class="form-control" type="text" name="children_name[]" required placeholder="Enter Children Name *"/>';
    cell3.innerHTML = '<select class="form-control" type="text" name="children_gender[]" required><option value="">Select</option><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select>';
    cell4.innerHTML = '<input class="form-control" type="number" min="0" name="children_age[]" required/>';
    cell5.innerHTML = `
        <div class="col-sm-12">
            <input type="radio" name="children_is_studying[${rowCounter}]" onchange="handlePaymentSelection(this.value, ${rowCounter})" id="yes${rowCounter}" value="1">
            <label for="yes${rowCounter}">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <input type="radio" name="children_is_studying[${rowCounter}]" onchange="handlePaymentSelection(this.value, ${rowCounter})" id="no${rowCounter}" value="2">
            <label for="no${rowCounter}">No</label>
        </div>
        <div id="additional-details-${rowCounter}"></div>
    `;
    cell6.innerHTML = `
        <div class="col-sm-12">
            <input type="radio" name="children_is_working[${rowCounter}]" onchange="handleWorkSelection(this.value, ${rowCounter})" id="yes_work${rowCounter}" value="1">
            <label for="yes_work${rowCounter}">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <input type="radio" name="children_is_working[${rowCounter}]" onchange="handleWorkSelection(this.value, ${rowCounter})" id="no_work${rowCounter}" value="0">
            <label for="no_work${rowCounter}">No</label>
        </div>
        <div id="additional-details-work${rowCounter}"></div>
    `;
    cell7.innerHTML = `
        <div class="col-sm-12">
            <input type="radio" name="children_is_sa[${rowCounter}]" onchange="handleSASelection(this.value, ${rowCounter})" id="yes${rowCounter}" value="Yes">
            <label for="yes${rowCounter}">Yes</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <input type="radio" name="children_is_sa[${rowCounter}]" onchange="handleSASelection(this.value, ${rowCounter})" id="no${rowCounter}" value="No">
            <label for="no${rowCounter}">No</label>
        </div>
        <div id="additional-details-SA-${rowCounter}"></div>
    `;
    

    row.id = "row-a" + rowCounter;

    rowCounter++;
}

function deleteRow(id, rowId) {
    var row = document.getElementById("row-"+id+ + rowId);
    row.parentNode.removeChild(row);
}

function handleWorkSelection(status, id) {
    if (status == '1') {
        var additionalDetailsCell = document.getElementById('additional-details-work' + id);
        additionalDetailsCell.innerHTML = '<input type="number" min="1" class="form-control" name="income_amount['+id+']" placeholder="How much?" />';
    } else {
        var additionalDetailsCell = document.getElementById('additional-details-work' + id);
        additionalDetailsCell.innerHTML = '';
    }
}

function handlePaymentSelection(status, id) {
    if (status == '1') {
        var additionalDetailsCell = document.getElementById('additional-details-' + id);
        additionalDetailsCell.innerHTML = '<input type="text" class="form-control" name="school_name['+id+']" placeholder="Which School?" />';
    } else {
        var additionalDetailsCell = document.getElementById('additional-details-' + id);
        additionalDetailsCell.innerHTML = '<input type="text" class="form-control" name="highest_education['+id+']" placeholder="Highest Education?" />';
    }
}

function handleSASelection(status, id) {
    if (status == 'Yes') {
        var additionalDetailsCell = document.getElementById('additional-details-SA-' + id);
        additionalDetailsCell.innerHTML = '<input type="text" class="form-control" name="chiled_sa_description['+id+']" placeholder="Enter Sa Description" />';
    } else {
        var additionalDetailsCell = document.getElementById('additional-details-SA-' + id);
        additionalDetailsCell.innerHTML = '';
    }
}

</script>
 <style>

@media (max-width: 767px) { /* Adjust the breakpoint as needed */
   .children th:nth-child(1) {
      padding-right: 150px;
   }
   .children th:nth-child(2) {
      padding-right: 50px;
   }
   .children th:nth-child(3) {
      padding-right: 100px;
   }
   .children th {
       white-space: nowrap;
   }  

   .member th:nth-child(1) {
      padding-right: 150px;
   }
   .member th:nth-child(2) {
      padding-right: 50px;
   }
   .member th:nth-child(3) {
      padding-right: 100px;
   }
   .member th:nth-child(4) {
      padding-right: 150px;
   }
}
#is_other_member, .migrate_show, #sa_des
{
   display: none;
}
</style>
