{{ assets.outputCss("cssApp") }}
{{ assets.outputCss("css") }}
{{ assets.outputJs("jsCore") }}
{{ assets.outputJs("jsHeader") }}
<script type="text/javascript" src="{{ url() }}public/js/onebox.js"></script>
<!-- === call custom CSS === -->
<style media="screen">
  /* color */
  .skyblue {
  /* background-color: #00BCD4; */
  border-color: #00BCD4;
  color: #FFFFFF;
  }
  .input-group-addon{
  display: table-cell;
  }
  span.select2-selection--multiple {
  border-color: #e5e6e7 !important;
  }
  span.select2-selection {
  border-color: #e5e6e7 !important;
  }
  .select2-search__field::-webkit-input-placeholder,
  .select2-search__field::placeholder {
  color: #919192 !important;
  font-size: 11px;
  }
  .select2-container .select2-selection--single {
  height: 30px !important;
  }
  .select2-selection__rendered {
  line-height: 30px !important;
  }
  .select2-selection__arrow {
  height: 30px !important;
  }
  .bg-light-gray {
    background: #f8f7f7;
  }
</style>
<style>
  .d-flex {
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: max-content;
  }
  .tabs { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  background-color: white; 
  }
  .tab-content {
  margin-top: 25px;
  }
  li .tab-li .active {
  border-bottom: 4px solid #1bbbdb;
  }
  .ibox-content{
  padding: 0;
  scrollbar-width: none;
  -ms-overflow-style: none; 
  }
  .body-left {
  height: 100%;
  }
  .input-wrapper {
  display: flex;
  gap: 10px; 
  }
  .input-wrapper input,select {
  flex: 1; 
  }
  .input-wrapper-group {
  flex: 1;
  }
  .input-wrapper-group label {
  display: block;
  margin-bottom: 5px; 
  }
  .tabcontent {
  display: none;
  padding: 20px;
  }
  #hide-insured
  {
  opacity: 0;
  display: none;
  }
  #hide-beneficiary
  {
    opacity: 0;
    display: none;
  }
  #hide-questionare
  {
    opacity: 0;
    display: none;
  }
  table.dataTable, .formTable {
  clear: both;
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
  width: 100%;
  background-color: transparent;
  }
  .formTable th, .formTable td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  font-size: 10px;
  white-space: nowrap;
  }
  .beneTable th, .beneTable td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  font-size: 12px;
  }
  .beneTable td{
  font-size: 15px;
  }
  .formTable input, .formTable select {
  width: 100%;
  padding: 4px;
  }
  .formTable input[type=checkbox] {
  width: 30px;
  }
  input.form-control.percent {
  width: 150px;
  max-width: 85px;
  }
  .formTable input[type="date"] {
  width: 150px;
  max-width: 110px;
  }
  .questionTable {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  }
  .questionTable th, .questionTable td {
  padding: 10px;
  text-align: left;
  }
  .questionTable th {
  background-color: white;
  position: sticky;
  top: 0;
  z-index: 10;
  }
  .questionTable tbody tr{
  cursor: pointer;
  }
  @media (max-width: 768px) {
  .modal-dialog {
  width: 95%;
  margin: 1em auto;
  }
  .modal-content {
  height: 48em;
  }
  }
  @media (min-width: 1501px) {
  .modal-content {
  overflow-y: hidden;
  }
  }
  @media (max-width: 1500px) {
  .modal-content {
  overflow-y: auto;
  }
  }
</style>

<script>
  ///////////////////////////////////////////////////////////// Property 
  var _insuredData = [];
  var _editedInsuredId = '';
  var _editInsuredStatus = 'New';
  
  var _beneficiaryData = [
    {
      IdLocalInsured: "0"
    }
  ];
  var _editBeneficiaryStatus = 'New';
  var _editedBeneficiaryId = '';
  
  var _quizs = {{Quizs}};
  var _insuredQuizAnswer = [
    {
      IdLocalInsured: "0"
    }
  ];
  var _quizNumber = 1;

  var _productPremium = {{ProductPremiums}};
  var _totalPremium = 0;

  $(document).ready(function() {
  	$('.select2').select2();
  });
  

  ///////////////////////////////////////////////////////////// End Property 
  
  ///////////////////////////////////////////////////////////// Insureds Section
  async function FormPolicy_SaveInsuredButton()
  {
    if(_editInsuredStatus == 'Edit')
    {
      FormPolicy_RemoveInsured(_editedInsuredId);
    }

    var premium = await FormPolicy_CalculatePremium();

    _insuredData.push({
      InsuredType:    $('#FM_I_InsuredType_{{Campaign.Id}}').val(),
      InsuredType_:   (s = document.getElementById('FM_I_InsuredType_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      Title:          $('#FM_I_Title_{{Campaign.Id}}').val(),
      Title_:         (s = document.getElementById('FM_I_Title_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      FirstName:      $('#FM_I_FirstName_{{Campaign.Id}}').val(),
      LastName:       $('#FM_I_LastName_{{Campaign.Id}}').val(),
      Sex:            $('#FM_I_Sex_{{Campaign.Id}}').val(),
      Sex_:           (s = document.getElementById('FM_I_Sex_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      MaritalStatus:  $('#FM_I_MaritalStatus_{{Campaign.Id}}').val(),
      Occupation:     $('#FM_I_Occupation_{{Campaign.Id}}').val(),
      OccupationType: $('#FM_I_OccupationType_{{Campaign.Id}}').val(),
      Nationality:    $('#FM_I_Nationality_{{Campaign.Id}}').val(),
      Position:       $('#FM_I_Position_{{Campaign.Id}}').val(),
      RatingFactor1:  $('#FM_I_RatingFactor1_{{Campaign.Id}}').val(),
      RatingFactor2:  $('#FM_I_RatingFactor2_{{Campaign.Id}}').val(),
      RatingFactor1_: (s = document.getElementById('FM_I_RatingFactor1_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      RatingFactor2_: (s = document.getElementById('FM_I_RatingFactor2_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      IDType:         $('#FM_I_IDType_{{Campaign.Id}}').val(),
      IdentityNo:     $('#FM_I_IdentityNo_{{Campaign.Id}}').val(),
      BirthDate:      $('#FM_I_BirthDate_{{Campaign.Id}}').val(),
      Ethnicity:      $('#FM_I_Ethnicity_{{Campaign.Id}}').val(),
      BirthPlace:     $('#FM_I_BirthPlace_{{Campaign.Id}}').val(),
      Plan:           $('#FM_I_Plan_{{Campaign.Id}}').val(),
      Plan_:          (s = document.getElementById('FM_I_Plan_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
      IsSmoker:       $('#FM_I_IsSmoker_{{Campaign.Id}}').val(),
      Age:            $('#FM_I_Age_{{Campaign.Id}}').val(),
      Premium:        parseInt(premium),
      IdLocal:        crypto.randomUUID(),
      RelationShip:   $('#FM_I_Relationship_{{Campaign.Id}}').val(),
      RelationShip_:  (s = document.getElementById('FM_I_Relationship_{{Campaign.Id}}').selectedOptions[0].text).includes('--') ? null : s,
    });
  	
    FormPolicy_ShowToTableInsured();
    FormPolicy_CancelInsuredButton();
    FormPolicy_AddListToBenefit();
    FormPolicy_AddListToQuiz();
    FormPolicy_CalCulateTotalPremium();
  }
  function FormPolicy_CalCulateTotalPremium()
  {
    _totalPremium = _insuredData.reduce((total, ins) => {
      return total + ins.Premium;
    }, 0);

    FormPolicy_UpdatePolicyInfo();
  }

  async function FormPolicy_CalculatePremium()
  {
    var age = $('#FM_I_Age_{{Campaign.Id}}').val();
    var gender = $('#FM_I_Sex_{{Campaign.Id}}').val();
    var insuredType = $('#FM_I_InsuredType_{{Campaign.Id}}').val();
    var productId = $('#FM_P_Product_{{Campaign.Id}}').val();
    var planId = $('#FM_I_Plan_{{Campaign.Id}}').val();

    var data = {
      Age: age,
      Gender: gender,
      InsuredType: insuredType,
      ProductId: productId,
      PlanId: planId
    };

    var response = await $.ajax({
  			type: 'POST',
  			url: '{{ url("policy/CalculatePremium") }} ', 
  			data: data,
  	});
    return response['data']['PremiumAmount'];
  }

  function FormPolicy_ChangeAgeInsured()
  {
    // Mendapatkan tanggal lahir dari input
    let tanggalLahirInput = document.getElementById("FM_I_BirthDate_{{Campaign.Id}}").value;
    let tanggalLahir = new Date(tanggalLahirInput);

    // Mendapatkan tanggal hari ini
    let hariIni = new Date();

    // Menghitung selisih tahun
    let selisihTahun = hariIni.getFullYear() - tanggalLahir.getFullYear();

    // Menyesuaikan jika belum ulang tahun di tahun ini
    let bulanLahir = tanggalLahir.getMonth();
    let bulanSekarang = hariIni.getMonth();
    let tanggalLahirHariIni = tanggalLahir.getDate();
    let tanggalSekarang = hariIni.getDate();

    if (bulanSekarang < bulanLahir || (bulanSekarang === bulanLahir && tanggalSekarang < tanggalLahirHariIni)) {
      selisihTahun--;
    }

    // Menampilkan hasil
    document.querySelector('#FM_I_Age_{{Campaign.Id}}').value = selisihTahun < 0 ? 0 : selisihTahun;
  }

  function FormPolicy_ShowToTableInsured() 
  {
    // Dapatkan referensi ke tabel
    const table = document.getElementById("insuredTable");
    // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
    const tbody = table.querySelector("tbody");

    // Menghapus semua isi di dalam tbody
    tbody.innerHTML = "";

    if(_insuredData.length > 0)
    {
      _insuredData.forEach(function(data) {
        const row = tbody.insertRow();

        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        const cell4 = row.insertCell(3);
        const cell5 = row.insertCell(4);
        const cell6 = row.insertCell(5);
        const cell7 = row.insertCell(6);
        const cell8 = row.insertCell(7);
        const cell9 = row.insertCell(8);
        // const cell9 = row.insertCell(8);

        cell1.textContent = data.InsuredType_;
        cell2.textContent = data.Title_;
        cell3.textContent = data.FirstName;
        cell4.textContent = data.LastName;
        cell5.textContent = data.Sex_;
        cell6.textContent = data.BirthDate;
        cell7.textContent = data.Age;
        cell8.textContent = data.RelationShip_; 
        cell9.innerHTML  = `
                                  <span>
                                    <a title="Edit Table" onclick="FormPolicy_EditInsured('` + data.IdLocal + `')" class="btn btn-white btn-circle text-muted">
                                      <i class="fa fa-pencil"></i>
                                    </a>
                                    <a title="Delete Table" onclick="FormPolicy_RemoveInsured('` + data.IdLocal + `')" class="btn btn-white btn-circle text-muted">
                                      <i class="fa fa-trash-o"></i>
                                    </a>
                                  </span>
                              `;
        
      });
    }
    else
    {
      const row = tbody.insertRow();

      const cell1 = row.insertCell(0);
      cell1.colSpan = 9;
      cell1.textContent = '-- Data is Empty --';
      cell1.classList.add("text-center");
      cell1.classList.add("text-muted");
    }
  }

  function FormPolicy_CancelInsuredButton()
  {
    _editInsuredStatus = 'New';

    const elemen = document.getElementById("hide-insured");
  	elemen.style.opacity = 0;
  	elemen.style.display = 'none';

    FormPolicy_ClearInsuredForm();
  }

  function FormPolicy_RemoveInsured(id)
  {
    const index = _insuredData.findIndex(x => x.IdLocal === id);

    // Hapus elemen pada indeks yang ditemukan
    if (index !== -1) {
      _insuredData.splice(index, 1);
    }

    FormPolicy_ShowToTableInsured();
    FormPolicy_AddListToBenefit();
  }

  function FormPolicy_ClearInsuredForm()
  {
    document.querySelector('#FM_I_InsuredType_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Title_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_FirstName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_LastName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Sex_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_MaritalStatus_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Occupation_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_OccupationType_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Nationality_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Position_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_RatingFactor1_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_RatingFactor2_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_IDType_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_IdentityNo_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_BirthDate_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Ethnicity_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_BirthPlace_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Plan_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_IsSmoker_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_I_Relationship_{{Campaign.Id}}').value = '';
  }

  function FormPolicy_AddNewInsured()
  {
    _editInsuredStatus = 'New';
    
  	FormPolicy_ShowForm();	
  }
  
  function FormPolicy_ShowForm()
  {
  const elemen = document.getElementById("hide-insured");
  	elemen.style.opacity = 1;
  	elemen.style.display = 'block';
  }
  
  function FormPolicy_EditInsured(id)
  {
    var findInsured = _insuredData.find(x => x.IdLocal === id);
    _editInsuredStatus = 'Edit';
    _editedInsuredId = findInsured.IdLocal;
    
    document.querySelector('#FM_I_InsuredType_{{Campaign.Id}}').value = findInsured.InsuredType ? findInsured.InsuredType : "";
    document.querySelector('#FM_I_Title_{{Campaign.Id}}').value = findInsured.Title ? findInsured.Title : "";
    document.querySelector('#FM_I_FirstName_{{Campaign.Id}}').value = findInsured.FirstName;
    document.querySelector('#FM_I_LastName_{{Campaign.Id}}').value = findInsured.LastName;
    document.querySelector('#FM_I_Sex_{{Campaign.Id}}').value = findInsured.Sex ? findInsured.Sex : "";
    document.querySelector('#FM_I_MaritalStatus_{{Campaign.Id}}').value = findInsured.MaritalStatus ? findInsured.MaritalStatus : "";
    document.querySelector('#FM_I_Occupation_{{Campaign.Id}}').value = findInsured.Occupation ? findInsured.Occupation : "";
    document.querySelector('#FM_I_OccupationType_{{Campaign.Id}}').value = findInsured.OccupationType;
    document.querySelector('#FM_I_Nationality_{{Campaign.Id}}').value = findInsured.Nationality ? findInsured.Nationality : "";
    document.querySelector('#FM_I_Position_{{Campaign.Id}}').value = findInsured.Position;
    document.querySelector('#FM_I_RatingFactor1_{{Campaign.Id}}').value = findInsured.RatingFactor1 ? findInsured.RatingFactor1 : "";
    document.querySelector('#FM_I_RatingFactor2_{{Campaign.Id}}').value = findInsured.RatingFactor2 ? findInsured.RatingFactor2 : "";
    document.querySelector('#FM_I_IDType_{{Campaign.Id}}').value = findInsured.IDType ? findInsured.IDType : "";
    document.querySelector('#FM_I_IdentityNo_{{Campaign.Id}}').value = findInsured.IdentityNo;
    document.querySelector('#FM_I_BirthDate_{{Campaign.Id}}').value = findInsured.BirthDate;
    document.querySelector('#FM_I_Ethnicity_{{Campaign.Id}}').value = findInsured.Ethnicity ? findInsured.Ethnicity : "";
    document.querySelector('#FM_I_BirthPlace_{{Campaign.Id}}').value = findInsured.BirthPlace;
    document.querySelector('#FM_I_Plan_{{Campaign.Id}}').value = findInsured.Plan ? findInsured.Plan : "";
    document.querySelector('#FM_I_IsSmoker_{{Campaign.Id}}').value = findInsured.IsSmoker;
    document.querySelector('#FM_I_Age_{{Campaign.Id}}').value = findInsured.Age;
    document.querySelector('#FM_I_Relationship_{{Campaign.Id}}').value = findInsured.RelationShip ? findInsured.RelationShip : "";
    
    
    FormPolicy_ShowForm();
  }
  ///////////////////////////////////////////////////////////// End Insured Section
  ///////////////////////////////////////////////////////////// Beneficiary Section
  function FormPolicy_AddNewBeneficiary()
  {
    const elemen = document.getElementById("hide-beneficiary");
      elemen.style.opacity = 1;
      elemen.style.display = 'block'    
  }
  
  function FormPolicy_CancelBeneficiaryButton()
  {
    _editInsuredStatus = 'New';

    const elemen = document.getElementById("hide-beneficiary");
  	elemen.style.opacity = 0;
  	elemen.style.display = 'none';

    FormPolicy_ClearFormBeneficiary();
  }
  
  function FormPolicy_AddListToBenefit()
  {
    var select = document.getElementById('FM_B_InsuredId_{{Campaign.Id}}');
    while (select.options.length > 0) {
      select.remove(0);
    }
    var defaultOption = document.createElement("option");

    defaultOption.value = "";
    defaultOption.text = "-- Pilih Insured --";
    defaultOption.disabled = true;
    defaultOption.selected = true;

    select.appendChild(defaultOption);

    if(_insuredData.length > 0)
    {
      _insuredData.forEach(i => {
        var option = document.createElement("option");

        option.value = i.IdLocal;
        option.text = i.InsuredType_ + " - " + i.FirstName;

        select.appendChild(option);
      });
    }
  }

  
  function FormPolicy_SaveBeneficiaryButton()
  {
    if(_editBeneficiaryStatus == 'Edit')
    {
      FormPolicy_RemoveBeneficiary(_editedBeneficiaryId);
    }

    // Ambil nilai dari masing-masing elemen dan konversi ke integer dengan penanganan nilai kosong atau NaN
    var sumPercent = 
        (parseInt($("#FM_B1_Percentage_{{Campaign.Id}}").val()) || 0) + 
        (parseInt($("#FM_B2_Percentage_{{Campaign.Id}}").val()) || 0) + 
        (parseInt($("#FM_B3Percentage_{{Campaign.Id}}").val()) || 0);

    if(sumPercent > 100 || sumPercent < 100)
    {
      FormPolicy_ShowAlertAndToast(0, 'Total Persen Benefit Harus "100%"');
      return;
    }

    var idInsured = $("#FM_B_InsuredId_{{Campaign.Id}}").val();
    
    _beneficiaryData.push({
      IdLocalInsured: idInsured,
      Status:  _insuredData.find(x => x.IdLocal == idInsured).InsuredType_,
      FirstName:  _insuredData.find(x => x.IdLocal == idInsured).FirstName,
      LastName:  _insuredData.find(x => x.IdLocal == idInsured).LastName,
      Benf1: {
        IdentityNo:   $("#FM_B1_IdentityNo_{{Campaign.Id}}").val(),
        FirstName:    $("#FM_B1_FirstName_{{Campaign.Id}}").val(),
        LastName:     $("#FM_B1_LastName_{{Campaign.Id}}").val(),
        BirthPlace:   $("#FM_B1_BirthPlace_{{Campaign.Id}}").val(),
        BirthDate:    $("#FM_B1_BirthDate_{{Campaign.Id}}").val(),
        Sex:          $("#FM_B1_Sex_{{Campaign.Id}}").val(),
        RelationShip: $("#FM_B1_RelationShip_{{Campaign.Id}}").val(),
        Type:         $("#FM_B1_Type_{{Campaign.Id}}").val(),
        Percentage:   $("#FM_B1_Percentage_{{Campaign.Id}}").val(),
      },
      Benf2: {
        IdentityNo:    $("#FM_B2_IdentityNo_{{Campaign.Id}}").val(),
        FirstName:    $("#FM_B2_FirstName_{{Campaign.Id}}").val(),
        LastName:     $("#FM_B2_LastName_{{Campaign.Id}}").val(),
        BirthPlace:   $("#FM_B2_BirthPlace_{{Campaign.Id}}").val(),
        BirthDate:    $("#FM_B2_BirthDate_{{Campaign.Id}}").val(),
        Sex:          $("#FM_B2_Sex_{{Campaign.Id}}").val(),
        RelationShip: $("#FM_B2_RelationShip_{{Campaign.Id}}").val(),
        Type:         $("#FM_B2_Type_{{Campaign.Id}}").val(),
        Percentage:   $("#FM_B2_Percentage_{{Campaign.Id}}").val(),
      },
      Benf3: {
        IdentityNo:    $("#FM_B3_IdentityNo_{{Campaign.Id}}").val(),
        FirstName:    $("#FM_B3_FirstName_{{Campaign.Id}}").val(),
        LastName:     $("#FM_B3_LastName_{{Campaign.Id}}").val(),
        BirthPlace:   $("#FM_B3_BirthPlace_{{Campaign.Id}}").val(),
        BirthDate:    $("#FM_B3_BirthDate_{{Campaign.Id}}").val(),
        Sex:          $("#FM_B3_Sex_{{Campaign.Id}}").val(),
        RelationShip: $("#FM_B3_RelationShip_{{Campaign.Id}}").val(),
        Type:         $("#FM_B3_Type_{{Campaign.Id}}").val(),
        Percentage:   $("#FM_B3_Percentage_{{Campaign.Id}}").val(),
      },   
    });
    FormPolicy_ShowToTableBeneficiary();
    FormPolicy_CancelBeneficiaryButton();
  }

  function FormPolicy_ShowToTableBeneficiary() 
  {
    // Dapatkan referensi ke tabel
    const table = document.getElementById("beneficiaryTable");
    // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
    const tbody = table.querySelector("tbody");

    // Menghapus semua isi di dalam tbody
    tbody.innerHTML = "";

    if(_beneficiaryData.length > 0)
    {
      _beneficiaryData.forEach(function(data) {
        if(data.IdLocalInsured == "0")
        {
          return;
        }
        const row = tbody.insertRow();

        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        const cell4 = row.insertCell(3);
        // const cell9 = row.insertCell(8);

        cell1.textContent = data.Status;
        cell2.textContent = data.FirstName;
        cell3.textContent = data.LastName;
        cell4.innerHTML  = `
                                  <span>
                                    <a title="Edit Table" onclick="FormPolicy_EditBeneficiary('` + data.IdLocalInsured + `')" class="btn btn-white btn-circle text-muted">
                                      <i class="fa fa-pencil"></i>
                                    </a>
                                    <a title="Delete Table" onclick="FormPolicy_RemoveBeneficiary('` + data.IdLocalInsured + `')" class="btn btn-white btn-circle text-muted">
                                      <i class="fa fa-trash-o"></i>
                                    </a>
                                  </span>
                              `;
        
      });
    }
    else
    {
      const row = tbody.insertRow();

      const cell1 = row.insertCell(0);
      cell1.colSpan = 4;
      cell1.textContent = '-- Data is Empty --';
      cell1.classList.add("text-center");
      cell1.classList.add("text-muted");
    }
  }
  
  function FormPolicy_RemoveBeneficiary(id)
  {
    const index = _beneficiaryData.findIndex(x => x.IdLocalInsured === id);
    // Hapus elemen pada indeks yang ditemukan
    if (index !== -1) {
      _beneficiaryData.splice(index, 1);
    }

    FormPolicy_ShowToTableBeneficiary();
  }

  function FormPolicy_EditBeneficiary(id)
  {
    var findBeneficiary = _beneficiaryData.find(x => x.IdLocalInsured === id);
    _editBeneficiaryStatus = 'Edit';
    _editedBeneficiaryId = findBeneficiary.IdLocalInsured;

    document.querySelector('#FM_B_InsuredId_{{Campaign.Id}}').value = findBeneficiary.IdLocalInsured;

    document.querySelector('#FM_B1_IdentityNo_{{Campaign.Id}}').value =   findBeneficiary.Benf1.IdentityNo;
    document.querySelector('#FM_B1_FirstName_{{Campaign.Id}}').value =  findBeneficiary.Benf1.FirstName;
    document.querySelector('#FM_B1_LastName_{{Campaign.Id}}').value =   findBeneficiary.Benf1.LastName;
    document.querySelector('#FM_B1_BirthPlace_{{Campaign.Id}}').value =   findBeneficiary.Benf1.BirthPlace;
    document.querySelector('#FM_B1_BirthDate_{{Campaign.Id}}').value =  findBeneficiary.Benf1.BirthDate;
    document.querySelector('#FM_B1_Sex_{{Campaign.Id}}').value =  findBeneficiary.Benf1.Sex ? findBeneficiary.Benf1.Sex : "";
    document.querySelector('#FM_B1_RelationShip_{{Campaign.Id}}').value =   findBeneficiary.Benf1.RelationShip ? findBeneficiary.Benf1.RelationShip : "";
    document.querySelector('#FM_B1_Type_{{Campaign.Id}}').value =   findBeneficiary.Benf1.Type ? findBeneficiary.Benf1.Type : "";
    document.querySelector('#FM_B1_Percentage_{{Campaign.Id}}').value =   findBeneficiary.Benf1.Percentage;
    
    document.querySelector('#FM_B2_IdentityNo_{{Campaign.Id}}').value =   findBeneficiary.Benf2.IdentityNo;
    document.querySelector('#FM_B2_FirstName_{{Campaign.Id}}').value =  findBeneficiary.Benf2.FirstName;
    document.querySelector('#FM_B2_LastName_{{Campaign.Id}}').value =   findBeneficiary.Benf2.LastName;
    document.querySelector('#FM_B2_BirthPlace_{{Campaign.Id}}').value =   findBeneficiary.Benf2.BirthPlace;
    document.querySelector('#FM_B2_BirthDate_{{Campaign.Id}}').value =  findBeneficiary.Benf2.BirthDate;
    document.querySelector('#FM_B2_Sex_{{Campaign.Id}}').value =  findBeneficiary.Benf2.Sex ? findBeneficiary.Benf1.Sex : "";
    document.querySelector('#FM_B2_RelationShip_{{Campaign.Id}}').value =   findBeneficiary.Benf2.RelationShip ? findBeneficiary.Benf1.RelationShip : "";
    document.querySelector('#FM_B2_Type_{{Campaign.Id}}').value =   findBeneficiary.Benf2.Type ? findBeneficiary.Benf1.Type : "";
    document.querySelector('#FM_B2_Percentage_{{Campaign.Id}}').value =   findBeneficiary.Benf2.Percentage;

    document.querySelector('#FM_B3_IdentityNo_{{Campaign.Id}}').value =   findBeneficiary.Benf3.IdentityNo;
    document.querySelector('#FM_B3_FirstName_{{Campaign.Id}}').value =  findBeneficiary.Benf3.FirstName;
    document.querySelector('#FM_B3_LastName_{{Campaign.Id}}').value =   findBeneficiary.Benf3.LastName;
    document.querySelector('#FM_B3_BirthPlace_{{Campaign.Id}}').value =   findBeneficiary.Benf3.BirthPlace;
    document.querySelector('#FM_B3_BirthDate_{{Campaign.Id}}').value =  findBeneficiary.Benf3.BirthDate;
    document.querySelector('#FM_B3_Sex_{{Campaign.Id}}').value =  findBeneficiary.Benf3.Sex ? findBeneficiary.Benf1.Sex : "";
    document.querySelector('#FM_B3_RelationShip_{{Campaign.Id}}').value =   findBeneficiary.Benf3.RelationShip ? findBeneficiary.Benf1.RelationShip : "";
    document.querySelector('#FM_B3_Type_{{Campaign.Id}}').value =   findBeneficiary.Benf3.Type ? findBeneficiary.Benf1.Type : "";
    document.querySelector('#FM_B3_Percentage_{{Campaign.Id}}').value =   findBeneficiary.Benf3.Percentage;
  
    FormPolicy_AddNewBeneficiary();
  }


  function FormPolicy_ClearFormBeneficiary()
  {
    document.querySelector('#FM_B_InsuredId_{{Campaign.Id}}').value = '';

    document.querySelector('#FM_B1_IdentityNo_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_FirstName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_LastName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_BirthPlace_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_BirthDate_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_Sex_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_RelationShip_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_Type_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B1_Percentage_{{Campaign.Id}}').value = '';
    
    document.querySelector('#FM_B2_IdentityNo_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_FirstName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_LastName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_BirthPlace_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_BirthDate_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_Sex_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_RelationShip_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_Type_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B2_Percentage_{{Campaign.Id}}').value = '';

    document.querySelector('#FM_B3_IdentityNo_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_FirstName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_LastName_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_BirthPlace_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_BirthDate_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_Sex_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_RelationShip_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_Type_{{Campaign.Id}}').value = '';
    document.querySelector('#FM_B3_Percentage_{{Campaign.Id}}').value = '';
  }
  ///////////////////////////////////////////////////////////// End Beneficiary Section
  ///////////////////////////////////////////////////////////// Questionare Section
  function FormPolicy_FillQuestion()
  {
    _quizNumber = 1;

    var idInsured = $("#FM_Q_InsuredId_{{Campaign.Id}}").val();
    if(idInsured == "" || idInsured == null)
    {
      return;
    }

    var insured = _insuredQuizAnswer.find(x => x.IdLocalInsured == idInsured);

    if(!insured)
    {
      var question = [];
      _quizs.forEach(data => {
        question.push({
          Answer: "",
          ...data
        })
      });

      _insuredQuizAnswer.push({
        IdLocalInsured: idInsured,
        Question: question
      })

      var Question
    }

    const elemen = document.getElementById("hide-questionare");
      elemen.style.opacity = 1;
      elemen.style.display = 'block';

    FormPolicy_LoadQuestion();
  }

  function FormPolicy_LoadQuestion()
  {
    var idInsured = $("#FM_Q_InsuredId_{{Campaign.Id}}").val();

    var question = _insuredQuizAnswer.find(x => x.IdLocalInsured == idInsured);

    if(_quizNumber <= question.Question.length)
    {
      var quiz = question.Question[_quizNumber-1];

      let spanElement = document.getElementById("FM_Q_QuizNumber_{{Campaign.Id}}");
      spanElement.textContent = _quizNumber + "/" + _quizs.length;

      document.querySelector('#FM_Q_Question_{{Campaign.Id}}').value = quiz.IntroText;
      document.querySelector('#FM_Q_Answer_{{Campaign.Id}}').value = quiz.Answer ? quiz.Answer : "";
      document.querySelector('#FM_Q_Remark_{{Campaign.Id}}').value = quiz.Remarks;
    }
  }

  function FormPolicy_ChangeQuestion(data)
  {
    var idInsured = $("#FM_Q_InsuredId_{{Campaign.Id}}").val();

    var question = _insuredQuizAnswer.find(x => x.IdLocalInsured == idInsured);

    question.Question[_quizNumber-1].Answer = $("#FM_Q_Answer_{{Campaign.Id}}").val();
    question.Question[_quizNumber-1].Remarks = $("#FM_Q_Remark_{{Campaign.Id}}").val();

    if(data == 'next' && _quizNumber < _quizs.length)
    {
      _quizNumber++;
    }
    else if(data == 'prev' && _quizNumber > 1)
    {
      _quizNumber--;
    }

    FormPolicy_LoadQuestion();
  }
  
  function FormPolicy_FinishQuestion()
  {
    FormPolicy_ChangeQuestion('next');

    _editInsuredStatus = 'New';

    const elemen = document.getElementById("hide-questionare");
  	elemen.style.opacity = 0;
  	elemen.style.display = 'none';

    FormPolicy_ShowToTableQuestion();
  }

  function FormPolicy_AddListToQuiz()
  {
    var select = document.getElementById('FM_Q_InsuredId_{{Campaign.Id}}');
    while (select.options.length > 0) {
      select.remove(0);
    }
    var defaultOption = document.createElement("option");

    defaultOption.value = "";
    defaultOption.text = "-- Pilih Insured --";
    defaultOption.disabled = true;
    defaultOption.selected = true;

    select.appendChild(defaultOption);

    if(_insuredData.length > 0)
    {
      _insuredData.forEach(i => {
        var option = document.createElement("option");

        option.value = i.IdLocal;
        option.text = i.InsuredType_ + " - " + i.FirstName;

        select.appendChild(option);
      });
    }
  }
  
  function FormPolicy_ClearTableQuestion()
  {
      // Dapatkan referensi ke tabel
      const table = document.getElementById("questionTable");
      // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
      const tbody = table.querySelector("tbody");

      // Menghapus semua isi di dalam tbody
      tbody.innerHTML = "";

      const row = tbody.insertRow();

      const cell1 = row.insertCell(0);
      cell1.colSpan = 4;
      cell1.textContent = '-- Select Insured FIrst --';
      cell1.classList.add("text-center");
      cell1.classList.add("text-muted");
      cell1.style.textAlign = "center";
  }

  function FormPolicy_ShowToTableQuestion()
  {
    var idInsured = $("#FM_Q_InsuredId_{{Campaign.Id}}").val();
    if(idInsured == "" || idInsured == null)
    {
      FormPolicy_ClearTableQuestion();
      return;
    }

    var insured = _insuredQuizAnswer.find(x => x.IdLocalInsured == idInsured);
      // Dapatkan referensi ke tabel
      const table = document.getElementById("questionTable");
      // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
      const tbody = table.querySelector("tbody");

      // Menghapus semua isi di dalam tbody
      tbody.innerHTML = "";
      
    if(insured && insured.Question.length > 0)
    {
      var i = 1;
      insured.Question.forEach(function(data) {
          const row = tbody.insertRow();

          const cell1 = row.insertCell(0);
          const cell2 = row.insertCell(1);
          const cell3 = row.insertCell(2);
          const cell4 = row.insertCell(3);
          // const cell9 = row.insertCell(8);

          cell1.textContent = i;
          cell2.textContent = data.IntroText;
          cell3.textContent = data.Answer;
          cell4.textContent = data.Remarks;
          i++;
        });
      
    }
    else
      {
        var i = 1;
        _quizs.forEach(function(data) {
          const row = tbody.insertRow();

          const cell1 = row.insertCell(0);
          const cell2 = row.insertCell(1);
          const cell3 = row.insertCell(2);
          const cell4 = row.insertCell(3);
          // const cell9 = row.insertCell(8);

          cell1.textContent = i;
          cell2.textContent = data.IntroText;
          cell3.textContent = "";
          cell4.textContent = "";

          i++;
        });
      }
    return;
  }

  $(document).ready(function() {
    
  });
  ///////////////////////////////////////////////////////////// End Beneficiary Section
  ///////////////////////////////////////////////////////////// Policy Info Section
  function FormPolicy_UpdatePolicyInfo()
  {
    // Dapatkan referensi ke tabel
    const table = document.getElementById("policyInfoTable{{Campaign.Id}}");
    // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
    const tbody = table.querySelector("tbody");

    // Menghapus semua isi di dalam tbody
    tbody.innerHTML = "";

    if(_insuredData.length > 0)
    {
      _insuredData.forEach(function(data) {
        const row = tbody.insertRow();

        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        const cell4 = row.insertCell(3);
        const cell5 = row.insertCell(4);
        const cell6 = row.insertCell(5);
        // const cell9 = row.insertCell(8);

        cell1.textContent = data.FirstName;
        cell2.textContent = document.getElementById('FM_P_Product_{{Campaign.Id}}').selectedOptions[0].text;
        cell3.textContent = data.Plan_;
        cell4.textContent = data.RatingFactor1_;
        cell5.textContent = data.RatingFactor2_;
        cell6.textContent = data.Premium;
        
      });
    }
      const rowTotal = tbody.insertRow();
      const rowDiscount = tbody.insertRow();

      const cellTotal1 = rowTotal.insertCell(0);
      const CellTotal2 = rowTotal.insertCell(1);
      const cellDiscount1 = rowDiscount.insertCell(0);
      cellTotal1.colSpan = 5;
      cellTotal1.innerHTML = '<b> Total Premium </b>';
      CellTotal2.innerHTML = '<b>'+_totalPremium+'</b>';
      cellDiscount1.colSpan = 6;
      cellDiscount1.innerHTML = '<b> Discount 0% </b>';

  }
  ///////////////////////////////////////////////////////////// End Policy Info Section
  ///////////////////////////////////////////////////////////// Benefit Section
  function FormPolicy_BenefitProductOnChange()
  {
    var productId = $("#FM_PI_B_Product_{{Campaign.Id}}").val()

    $.ajax({
  				type: 'POST',
  				url: '{{ url("policy/getNewPlanByProductId") }} ', 
  				data: {
            ProductId: productId
          },
  				success: function(response) {
            const $select = $('#FM_PI_B_Plan_{{Campaign.Id}}');
            $select.empty();
            $select.append('<option value="" selected disabled>-- Pilih Benefit Level --</option>');
            response.data.Plan.forEach(function (item) {
              $select.append(`<option value="${item.Id}">${item.Description}</option>`);
            });

            FormPolicy_ShowDataBenefitInfo(null);
  				},
  				error: function(error) {
            FormPolicy_ShowAlertAndToast(0, 'Gagal Mendapatkan informasi Benefit Level');
  				}
  		});

  }

  function FormPolicy_BenefitPlanOnChange()
  {
    var productId = $("#FM_PI_B_Product_{{Campaign.Id}}").val();
    var planId = $('#FM_PI_B_Plan_{{Campaign.Id}}').val();

    $.ajax({
  				type: 'POST',
  				url: '{{ url("policy/GetProdukBenefit") }} ', 
  				data: {
            ProductId: productId,
            PlanId: planId
          },
  				success: function(response) {
            FormPolicy_ShowDataBenefitInfo(response.data.Benefit);
  				},
  				error: function(error) {
            FormPolicy_ShowAlertAndToast(0, 'Gagal Mendapatkan informasi Benefit');
  				}
  		});
  }

  function FormPolicy_ShowDataBenefitInfo(data)
  {
    // Dapatkan referensi ke tabel
    const table = document.getElementById("benefitInfoTable");
    // Mendapatkan referensi ke tbody (asumsikan hanya ada satu tbody)
    const tbody = table.querySelector("tbody");

    // Menghapus semua isi di dalam tbody
    tbody.innerHTML = "";

    if(data)
    {
      data.forEach(function(data) {

        const row = tbody.insertRow();

        const cell1 = row.insertCell(0);
        const cell2 = row.insertCell(1);
        const cell3 = row.insertCell(2);
        // const cell9 = row.insertCell(8);

        cell1.textContent = data.Description;
        cell2.textContent = Intl.NumberFormat('id-ID').format(data.StdAmount);
        cell3.textContent = '';
      });
    }
    else
    {
      const row = tbody.insertRow();

      const cell1 = row.insertCell(0);
      cell1.colSpan = 3;
      cell1.textContent = '-- Data is Empty --';
      cell1.classList.add("text-center");
      cell1.classList.add("text-muted");
    }
  }
  ///////////////////////////////////////////////////////////// End Benefit Section
  ///////////////////////////////////////////////////////////// Premium Section
  function FormPolicy_PremiumProductOnChange()
  {
    var productId = $("#FM_PI_P_Product_{{Campaign.Id}}").val();

    $.ajax({
  				type: 'POST',
  				url: '{{ url("policy/getNewPlanByProductId") }} ', 
  				data: {
            ProductId: productId
          },
  				success: function(response) {
            const $select = $('#FM_PI_P_Plan_{{Campaign.Id}}');
            $select.empty();
            $select.append('<option value="" selected disabled>-- Pilih Benefit Level --</option>');
            response.data.Plan.forEach(function (item) {
              $select.append(`<option value="${item.Id}">${item.Description}</option>`);
            });

            FormPolicy_ShowListDataPremium([]);
  				},
  				error: function(error) {
            FormPolicy_ShowAlertAndToast(0, 'Gagal Mendapatkan informasi Benefit Level');
  				}
  		});

      $.ajax({
  				type: 'POST',
  				url: '{{ url("policy/GetListDataPaymentMode") }} ', 
  				data: {
            ProductId: productId
          },
  				success: function(response) {
            const $select = $('#FM_PI_P_PayMode_{{Campaign.Id}}');
            $select.empty();
            $select.append('<option value="" selected disabled>-- Pilih Payment Mode --</option>');
            response.data.PaymentMode.forEach(function (item) {
              $select.append(`<option value="${item.PaymentModeCode}">${item.Description}</option>`);
            });

            // FormPolicy_ShowDataBenefitInfo(null);
  				},
  				error: function(error) {
            FormPolicy_ShowAlertAndToast(0, 'Gagal Mendapatkan informasi Payment Mode');
  				}
  		});
  }

  function FormPolicy_PlanAndPayModeOnChange()
  {
    var productId = $("#FM_PI_P_Product_{{Campaign.Id}}").val()
    var planId = $("#FM_PI_P_Plan_{{Campaign.Id}}").val()
    var paymentMode = $("#FM_PI_P_PayMode_{{Campaign.Id}}").val()

    if(planId && paymentMode)
    {
      $.ajax({
  				type: 'POST',
  				url: '{{ url("policy/GetListDataPremium") }} ', 
  				data: {
            ProductId: productId,
            PlanId: planId,
            PayMode: paymentMode
          },
  				success: function(response) {
            FormPolicy_ShowListDataPremium(response.data.Premium);
  				},
  				error: function(error) {
            FormPolicy_ShowAlertAndToast(0, 'Gagal Mendapatkan informasi Payment Mode');
  				}
  		});
    }

  }
  function FormPolicy_ShowListDataPremium(premium) {
    const premiums = premium;

    // Filter berdasarkan InsuredTypeId
    const grouped = {
        "INS01": [], // Main Insured
        "INS02": [], // Spouse
        "INS03": []  // Dependant
    };

    premiums.forEach(item => {
        if (grouped[item.InsuredTypeId]) {
            grouped[item.InsuredTypeId].push(item);
        }
    });

    // Buat struktur data berdasarkan AgeBand dan SexId
    const structuredData = {};
    for (const type in grouped) {
        structuredData[type] = grouped[type].reduce((acc, item) => {
            const ageBand = item.AgeBand;
            if (!acc[ageBand]) acc[ageBand] = { "SEX01": null, "SEX02": null };
            acc[ageBand][item.SexId] = Intl.NumberFormat('id-ID').format(item.PremiumAmount * item.Multiplier); // Simpan PremiumAmount
            return acc;
        }, {});
    }

    // Masukkan data ke tabel
    const table = document.getElementById("premiumInfoTable");
    const tbody = table.querySelector('tbody');

    // Hapus isi tabel sebelumnya
    tbody.innerHTML = '';

    const ageBands = [...new Set(premiums.map(item => item.AgeBand))];

    if (ageBands.length === 0) {
        // Jika tidak ada data, tambahkan baris "Kosong"
        const row = document.createElement("tr");
        const tdEmpty = document.createElement("td");
        tdEmpty.textContent = "-- Data is Empty --";
        tdEmpty.classList.add("text-center");
        tdEmpty.classList.add("text-muted");
        tdEmpty.colSpan = 10; // Sesuaikan jumlah kolom yang diperlukan
        row.appendChild(tdEmpty);
        tbody.appendChild(row);
    } else {
        // Jika ada data, tambahkan ke tabel
        ageBands.forEach(ageBand => {
            const row = document.createElement("tr");

            ["INS01", "INS02", "INS03"].forEach(type => {
                const male = structuredData[type]?.[ageBand]?.SEX02 || "-";
                const female = structuredData[type]?.[ageBand]?.SEX01 || "-";

                const tdAgeBand = document.createElement("td");
                tdAgeBand.textContent = ageBand;
                row.appendChild(tdAgeBand);

                const tdMale = document.createElement("td");
                tdMale.textContent = male;
                row.appendChild(tdMale);

                const tdFemale = document.createElement("td");
                tdFemale.textContent = female;
                row.appendChild(tdFemale);

                // Jika type adalah "INS02" (Spouse), tambahkan class .bg-light-gray pada row
                if (type !== "INS02") {
                  tdAgeBand.classList.add("bg-light-gray");
                  tdMale.classList.add("bg-light-gray");
                  tdFemale.classList.add("bg-light-gray");
                }
            });
            
            tbody.appendChild(row);
        });
    }
  }

  ///////////////////////////////////////////////////////////// End Premium Section
  ///////////////////////////////////////////////////////////// Product Section
  // async function FormPolicy_ProductChanges()
  // {
  //   var productId = $('#FM_P_Product_{{Campaign.Id}}').val();

  //   var plan = await FormPolicy_getNewPlan(productId);

  //   if(plan.length < 1)
  //   {
  //     FormPolicy_ShowAlertAndToast(0, 'Product yang di pilih tidak memilik plan');
  //   } 
    
  // }

  // async function FormPolicy_getNewPlan(productId)
  // {
  //   var data = {
  //     ProductId: productId,
  //   };
    
  //   var response = await $.ajax({
  // 			type: 'POST',
  // 			url: '{{ url("policy/getNewPlanByProductId") }} ', 
  // 			data: data,
  // 	});

  //   return response['data']['Plan'];
  // }
  ///////////////////////////////////////////////////////////// End Product Section
  ///////////////////////////////////////////////////////////// Utility Section
  function FormPolicy_ShowAlertAndToast(status, description = "")
  {
    const alertBox = document.getElementById('FM_AlertBox_{{Campaign.Id}}');
    toastr.clear();
    if(status)
    {
      alertBox.innerHTML = '';
      alertBox.innerHTML = `
              <div class="alert alert-success alert-dismissible" role="alert" style="margin-top: 5rem;">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                `+ description +`
              </div>
              `;
      toastr.success(description, "Success").fadeIn().delay(5000).fadeOut();
    }
    else
    {
      alertBox.innerHTML = '';
      alertBox.innerHTML = `
              <div class="alert alert-danger alert-dismissible" role="alert" style="margin-top: 5rem;">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                `+ description +`
              </div>
              `;
      toastr.error(description, "Failed").fadeIn().delay(5000).fadeOut();
    }
    // Membersihkan semua toastr yang ada
  }
  ///////////////////////////////////////////////////////////// End Utility Section
  
  
  
  $(document).ready(function(){
  		$('#submitButton{{Campaign.Id}}').on('click', function(e) {
  		e.preventDefault(); 
      var button = $(this);
      button.prop('disabled', true).text('Processing...');

  		var dataPolicy = {
  				RefNo:        $('#FM_P_RefNo_{{Campaign.Id}}').val(),
  				InputDate:    $('#FM_P_InputDate_{{Campaign.Id}}').val(),
  				EffectiveDate: $('#FM_P_EffectiveDate_{{Campaign.Id}}').val(),
          CampaignId:   "{{Campaign.Id}}",
          AgentId:      "{{Agent.Id}}",
          ProductId:    $('#FM_P_Product_{{Campaign.Id}}').val(),
          CountryId:    $('#FM_P_Country_{{Campaign.Id}}').val(),
          CorresponId:  $('#FM_P_Correspon_{{Campaign.Id}}').val(),
          ProspectId:   {{Prospect.Id}}
  		}
  
  		var dataPolicyInfo = {
          Title:          $('#FM_P_Title_{{Campaign.Id}}').val(),
          FirstName:      $('#FM_P_FirstName_{{Campaign.Id}}').val(),
          LastName:       $('#FM_P_LastName_{{Campaign.Id}}').val(),
          BirthDate:      $('#FM_P_BirthDate_{{Campaign.Id}}').val(),
          BirthPlace:     $('#FM_P_BirthPlace_{{Campaign.Id}}').val(),
          OccupationId:   $('#FM_P_OccupationId_{{Campaign.Id}}').val(),
          Position:       $('#FM_P_Position_{{Campaign.Id}}').val(),
          ReligionId:     $('#FM_P_ReligionId_{{Campaign.Id}}').val(),
          SexId:          $('#FM_P_SexId_{{Campaign.Id}}').val(),
          IdentityTypeId: $('#FM_P_IdentityTypeId_{{Campaign.Id}}').val(),
          IdentityNo:     $('#FM_P_IdentityNo_{{Campaign.Id}}').val(),
          AnnualIncome:   $('#FM_P_AnnualIncome_{{Campaign.Id}}').val(),
          CurrencyType:   $('#FM_P_CurrencyType_{{Campaign.Id}}').val(),
          MailingAddress: 
          {
            AddressType:  $('#FM_PA_AddressType_{{Campaign.Id}}').val(),
            Company:      $('#FM_PA_Company_{{Campaign.Id}}').val(),
            HomePhone1:   $('#FM_PA_HomePhone1_{{Campaign.Id}}').val(),
            HomePhone2:   $('#FM_PA_HomePhone2_{{Campaign.Id}}').val(),
            MobilePhone1: $('#FM_PA_MobilePhone1_{{Campaign.Id}}').val(),
            MobilePhone2: $('#FM_PA_MobilePhone2_{{Campaign.Id}}').val(),
            OfficePhone1: $('#FM_PA_OfficePhone1_{{Campaign.Id}}').val(),
            OfficePhone2: $('#FM_PA_OfficePhone2_{{Campaign.Id}}').val(),
            Provience:    $('#FM_PA_Provience_{{Campaign.Id}}').val(),
            CityId:       $('#FM_PA_CityId_{{Campaign.Id}}').val(),
            Address:      $('#FM_PA_Address_{{Campaign.Id}}').val(),
            Fax:          $('#FM_PA_Fax_{{Campaign.Id}}').val(),
            PostCode:     $('#FM_PA_PostCode_{{Campaign.Id}}').val(),
  				  Email:        $('#FM_PA_Email_{{Campaign.Id}}').val(),
          },
          TotalPremium: _totalPremium
  		}

      var dataPayment = {
        PaymentMethod:$('#FM_PY_PaymentMethod_{{Campaign.Id}}').val(),
        PaymentMode:  $('#FM_PY_PaymentMode_{{Campaign.Id}}').val(),
        CardType:     $('#FM_PY_CardType_{{Campaign.Id}}').val(),
        CCNum:        $('#FM_PY_CCNum_{{Campaign.Id}}').val(),
        CCExp:        $('#FM_PY_CCExp_{{Campaign.Id}}').val(),
        BankName:     $('#FM_PY_BankName_{{Campaign.Id}}').val(),
        Branch:       $('#FM_PY_Branch_{{Campaign.Id}}').val(),
        AccNum:       $('#FM_PY_AccNum_{{Campaign.Id}}').val(),
      }
      
      var dataCombined = {
        Policy: {
          ...dataPolicy, 
          ...dataPolicyInfo,
          ...dataPayment
        },
        Insured: _insuredData,
        Beneficiary: _beneficiaryData,
        Questionare: _insuredQuizAnswer
      }
  
  		// Gabungkan seluruh formData
  		// var dataCombined = { ...form1Data, ...form2Data, ..._insuredData };
      console.log(dataCombined);
  		$.ajax({
  				type: 'POST',
  				url: '{{ url("policy/savePolicyForm") }} ', 
  				data: dataCombined,
  				success: function(response) {
            button.text('Success!');
  					FormPolicy_ShowAlertAndToast(1, 'Policy created <strong>Successfully</strong>.');
  				},
  				error: function(error) {
            button.prop('disabled', false).text('Create Policy');
            var resultError = '';
            error.responseJSON.errors.forEach(er => {
              resultError += `<li><strong>`+er.field+`</strong> : `+er.message+`</li>`;
            });  
            var message = error.responseJSON.message + '<ul>'+resultError+'</ul>';
            FormPolicy_ShowAlertAndToast(0, message);
  				}
  		});
  });
  
  		$('.dataTables-example').DataTable({
  				pageLength: 25,
  				responsive: true,
  				dom: '<"html5buttons"B>lTfgitp',
  				buttons: [
  						{extend: 'print',
  						 customize: function (win){
  										$(win.document.body).addClass('white-bg');
  										$(win.document.body).css('font-size', '10px');
  
  										$(win.document.body).find('table')
  														.addClass('compact')
  														.css('font-size', 'inherit');
  						}
  						}
  				]
  
  		});
  
  });
  
  // Collapse ibox function
  $('.collapse-link').on('click', function () {
  		var ibox = $(this).closest('div.ibox');
  		var button = $(this).find('i');
  		var content = ibox.find('div.ibox-content');
  		content.slideToggle(200);
  		button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
  		ibox.toggleClass('').toggleClass('border-bottom');
  		setTimeout(function () {
  				ibox.resize();
  				ibox.find('[id^=map-]').resize();
  		}, 50);
  });
  
  function toggleBankInfo() {
  var paymentType = document.getElementById("FM_PY_PaymentMethod_{{Campaign.Id}}").value;
  var ddbSection = document.getElementById("ddb-section");
  var dbcSection = document.getElementById("dbc-section");
  
  if (paymentType !== "PMT2") {
  		ddbSection.style.display = "block";
  		dbcSection.style.display = "none";
  } else if (paymentType === "PMT2") {
  		dbcSection.style.display = "block";
  		ddbSection.style.display = "none";
  } else {
  		
  		ddbSection.style.display = "none";
  		dbcSection.style.display = "none";
  }
  }
  
  document.getElementById('expire-date').addEventListener('change', function() {
  const value = this.value; 
  const [year, month] = value.split('-');
  const formattedValue = `${month}/${year.slice(2)}`;
  
  this.type = 'text';
  this.value = formattedValue;
  
  });
  
  document.getElementById('expire-date').addEventListener('focus', function() {
  
  this.type = 'month';
  });
  
  function openTab(evt, tabName) {
    evt.preventDefault();
    var i, tabcontent, tablinks;
  
    // Sembunyi semua tab content
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
  
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  
    document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
  }
    
    function openTab2(evt, tabName) {
    evt.preventDefault();
    var i, tabcontent, tablinks;
  
    // Sembunyi semua tab content
    tabcontent2 = document.getElementsByClassName("tabcontent2");
    for (i = 0; i < tabcontent2.length; i++) {
      tabcontent2[i].style.display = "none";
    }
  
    tablinks2 = document.getElementsByClassName("tablinks2");
    for (i = 0; i < tablinks2.length; i++) {
      tablinks2[i].className = tablinks2[i].className.replace(" active", "");
    }
  
    document.getElementById(tabName).style.display = "block";
      evt.currentTarget.className += " active";
    }
  
    document.getElementById("defaultOpen").click();
  
</script>
<div class="animated fadeIn">
  <div class="ibox-content scroll_content" style="height:fit-content;min-height:100%;overflow: auto;">
    <div class="row m-b">
      <div class="col-lg-12">
        <div class="tabs-container">
          <div class="tabs">
            <ul class="nav nav-tabs">
              <li class="tab-li active"><a data-toggle="tab" href="#tab-0">Policy</a></li>
              <li class=""><a data-toggle="tab" href="#tab-1">Policy Holder</a></li>
              <li class=""><a data-toggle="tab" href="#tab-2">Insured</a></li>
              <li class=""><a data-toggle="tab" href="#tab-3">Beneficiary</a></li>
              <li class=""><a data-toggle="tab" href="#tab-4">Payment Info</a></li>
              <li class=""><a data-toggle="tab" href="#tab-5">Policy Info</a></li>
              <li class=""><a data-toggle="tab" href="#tab-6">Questionnaire</a></li>
            </ul>
          </div>
          <div class="tab-content">
            <div id="FM_AlertBox_{{Campaign.Id}}"> 

            </div>
            <div id="tab-0" class="tab-pane active">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <form id="policyDetailForm" method="POST">
                    <div class="ibox float-e-margins">
                      <div class="ibox-title">
                        <h5>Policy Details</h5>
                      </div>
                      <div class="ibox-content">
                        <div class="col-sm-6 br">
                          <div class="form-group">
                            <label>Call List</label>
                            <div class="input-wrapper">
                              <input type="text" class="form-control" disabled value="{{Campaign.Id}}"> 
                              <input type="text" class="form-control" disabled value="{{Campaign.Name}}"> 
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Ref. No</label>
                            <input type="text" id="FM_P_RefNo_{{Campaign.Id}}" name="ref_no" class="form-control" value="<?php echo random_int(10000000000, 99999999999); ?>" disabled> 
                          </div>
                          <div class="form-group">
                            <div class="input-wrapper">
                              <div class="input-wrapper-group">
                                <label>Operator</label>
                                <input type="text" class="form-control" disabled value="{{Agent.Name}}"> 
                              </div>
                              <div class="input-wrapper-group">
                                <label>Seller</label>
                                <input type="text" class="form-control" disabled value="{{Agent.Name}}"> 
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Effective</label>
                            <input type="date" id="FM_P_EffectiveDate_{{Campaign.Id}}" name="effective_date" class="form-control" value="<?php echo date('Y-m-d'); ?>" disabled> 
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label class="required">Product</label>
                            <div class="input-wrapper">
                              <select id="FM_P_Product_{{Campaign.Id}}" class="form-control select2">
                              <!-- <select id="FM_P_Product_{{Campaign.Id}}" class="form-control select2" onchange="FormPolicy_ProductChanges()"> -->
                                <option value="" selected>-- Pilih Produk --</option>
                                {% for pd in Products %}
                                {% if(pd.Id == Campaign.ProductId) %}
                                <option value="{{pd.Id}}" selected>{{pd.Name}}</option>
                                {% else	 %}
                                <option value="{{pd.Id}}">{{pd.Name}}</option>
                                {% endif %}
                                {% endfor %}
                              </select>
                            </div>
                          </div>
                          <div class="form-group">
                            <label>Country</label>
                            <select id="FM_P_Country_{{Campaign.Id}}" class="form-control select2" placeholder="Select Country">
                              <option value="" selected>-- Pilih Country --</option>
                              {% for rg in Regions %}
                              <option value="{{rg.Id}}">{{rg.Description}}</option>
                              {% endfor %}
                            </select>
                          </div>
                          <div class="form-group">
                            <label class="required">Correspondence Option</label>
                            <select id="FM_P_Correspon_{{Campaign.Id}}" class="form-control select2">
                              <option value="" selected>-- Pilih Koresponden --</option>
                              {% for md in Medias %}
                              <option value="{{md.Id}}">{{md.Description}}</option>
                              {% endfor %}
                            </select>
                          </div>
                          <div class="form-group">
                            <label>Input Date</label>
                            <input type="date" id="FM_P_InputDate_{{Campaign.Id}}" name="input_date" class="form-control" value="<?php echo date('Y-m-d'); ?>" disabled> 
                          </div>
                        </div>
                  </form>
                  </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab-1" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <form id="policyHolderForm" method="POST">
                    <div class="ibox float-e-margins">
                      <div class="ibox-content">
                        <div class="tabbutton" style="margin-top: 20px; margin-left: 35px;">
                          <button type="button" class="tablinks btn btn-sm btn-default active" onclick="openTab(event, 'PolicyInfo')" id="defaultOpen"><i class="fas fa-file-contract"></i> Policy Information</button>
                          <button type="button" class="tablinks btn btn-sm btn-default" onclick="openTab(event, 'Mailing')"><i class="fas fa-envelope"></i> Mailing Address</button>
                        </div>
                        <div id="PolicyInfo" class="tabcontent animated fadeIn" style="display: block;">
                          <div class="col-sm-6 br">
                            <div class="form-group">
                              <label>Title</label>
                              <select id="FM_P_Title_{{Campaign.Id}}" class="form-control">
                                {% if(Prospect.SexId == "SEX01") %}
                                <option disabled>-- Pilih Tittle --</option>
                                <option value="Ms" selected>Ibu</option>
                                <option value="Mr">Bpk</option>
                                {% elseif(Prospect.SexId == "SEX02") %}
                                <option disabled>-- Pilih Tittle --</option>
                                <option value="Ms">Ibu</option>
                                <option value="Mr" selected>Bpk</option>
                                {% else %}
                                Occ
                                <option value="Ms">Ibu</option>
                                <option value="Mr">Bpk</option>
                                {% endif %}
                              </select>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label class="required">First Name</label>
                                  <input placeholder="FirstName" id="FM_P_FirstName_{{Campaign.Id}}" type="text" id="first_name" name="first_name" class="form-control" value="{{Prospect.FirstName}}"> 
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Last Name</label>
                                  <input placeholder="LastName" id="FM_P_LastName_{{Campaign.Id}}" type="text" id="last_name" name="last_name"  class="form-control" value="{{Prospect.FirstName}}"> 
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label class="required">Birth Date</label>
                                  <input placeholder="LastName" id="FM_P_BirthDate_{{Campaign.Id}}" type="date" class="form-control" id="birth_date" value="{{ date('Y-m-d', strtotime(Prospect.BirthDate)) }}"> 
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Birth Place</label>
                                  <input placeholder="BirthPlace" type="text" id="FM_P_BirthPlace_{{Campaign.Id}}" class="form-control" value="{{Prospect.BirthPlace}}" >
                                  <!-- <input type="text" class="form-control" id="birth_place" "> -->
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label>Occupation</label>
                                  <select id="FM_P_OccupationId_{{Campaign.Id}}" class="form-control" id="occupation">
                                    <option disabled>-- Pilih Occupation --</option>
                                    {% for Occ in Occupations %}
                                    {% if(Prospect.Occupation == Occ.Id) %}
                                    <option value="{{Occ.Id}}" selected>{{Occ.Description}}</option>
                                    {% else %}
                                    <option value="{{Occ.Id}}">{{Occ.Description}}</option>
                                    {% endif %}
                                    {% endfor%}
                                  </select>
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Position</label>
                                  <input placeholder="Position" id="FM_P_Position_{{Campaign.Id}}" type="text" class="form-control"> 
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="form-group">
                              <label>Religion</label>
                              <select id="FM_P_ReligionId_{{Campaign.Id}}" class="form-control">
                                <option disabled>-- Pilih Religion --</option>
                                {% for rlg in Religions %}
                                {% if(Prospect.ReligionId == rlg.Id) %}
                                <option value="{{rlg.Id}}" selected>{{rlg.Description}}</option>
                                {% else %}
                                <option value="{{rlg.Id}}">{{rlg.Description}}</option>
                                {% endif %}
                                {% endfor%}
                              </select>
                            </div>
                            <div class="form-group">
                              <label class="required">Sex</label>
                              <select id="FM_P_SexId_{{Campaign.Id}}" class="form-control">
                                <option disabled>-- Pilih Sex --</option>
                                {% for sx in Sexs %}
                                {% if(Prospect.SexId == sx.Id) %}
                                <option value="{{sx.Id}}" selected>{{sx.Description}}</option>
                                {% else %}
                                <option value="{{sx.Id}}">{{sx.Description}}</option>
                                {% endif %}
                                {% endfor%}
                              </select>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label>Identity Type</label>
                                  <select id="FM_P_IdentityTypeId_{{Campaign.Id}}" class="form-control">
                                    <option disabled>-- Pilih ID Type --</option>
                                    {% for idn in Identitys %}
                                      {% if(Prospect.IdentityTypeId == idn.Id) %}
                                      <option value="{{idn.Id}}" selected>{{idn.Description}}</option>
                                      {% else %}
                                      <option value="{{idn.Id}}">{{idn.Description}}</option>
                                      {% endif %}
                                    {% endfor%}
                                  </select>
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Identity No</label>
                                  <input placeholder="IdentityNo" id="FM_P_IdentityNo_{{Campaign.Id}}" type="text" class="form-control" value="{{Prospect.IdentityNbr}}"> 
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <label>Annual Income</label>
                              <div class="input-wrapper">
                                <input placeholder="Annual Income" id="FM_P_AnnualIncome_{{Campaign.Id}}" type="number" class="form-control"> 
                                <select id="FM_P_CurrencyType_{{Campaign.Id}}" class="form-control">
                                  <option value="" selected disabled>-- Pilih Mata Uang --</option>
                                  {% for cnc in Currencys %}
                                  <option value="{{cnc.Id}}">{{cnc.Description}}</option>
                                  {% endfor%}
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="Mailing" class="tabcontent animated fadeIn" style="display: none;">
                          <div class="col-sm-6 br">
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label  class="required">Address Type</label>
                                  <select id="FM_PA_AddressType_{{Campaign.Id}}" class="form-control">
                                    <option disabled selected>-- Pilih Address Type --</option>
                                    <option value="Home">Home Address</option>
                                    <option value="Office">Office Address</option>
                                    <option value="Other">Other</option>
                                  </select>
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Company</label>
                                  <input placeholder="Company" id="FM_PA_Company_{{Campaign.Id}}" type="text" class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label  class="required">Home Phone</label>
                                  <input placeholder="Home Phone" id="FM_PA_HomePhone1_{{Campaign.Id}}" type="number" class="form-control"> 
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Home Phone 2</label>
                                  <input placeholder="Home Phone 2" id="FM_PA_HomePhone2_{{Campaign.Id}}" type="number" class="form-control"> 
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label  class="required">Mobile Phone</label>
                                  <input placeholder="Mobile Phone" id="FM_PA_MobilePhone1_{{Campaign.Id}}" type="number" class="form-control">
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Mobile Phone 2</label>
                                  <input placeholder="Mobile Phone 2" id="FM_PA_MobilePhone2_{{Campaign.Id}}" type="number" class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label>Office Phone</label>
                                  <input placeholder="Office Phone" id="FM_PA_OfficePhone1_{{Campaign.Id}}" type="number" class="form-control">
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Office Phone 2</label>
                                  <input placeholder="Office Phone 2" id="FM_PA_OfficePhone2_{{Campaign.Id}}" type="number" class="form-control">
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label>Province</label>
                                  <select id="FM_PA_Provience_{{Campaign.Id}}" class="form-control select2">
                                    <option value="" selected disabled>-- Pilih Province	 --</option>
                                    {% for prv in Provinces %}
                                    {% if(Prospect.BirthPlace == prv.Name) %}
                                    <option value="{{prv.Id}}" selected>{{prv.Name}}</option>
                                    {% else %}
                                    <option value="{{prv.Id}}">{{prv.Name}}</option>
                                    {% endif %}
                                    {% endfor%}
                                  </select>
                                </div>
                                <div class="input-wrapper-group">
                                  <label class="required">City</label>
                                  <select id="FM_PA_CityId_{{Campaign.Id}}" class="form-control select2">
                                    <option value="" selected disabled>-- Pilih City	 --</option>
                                    {% for ct in Citys %}
                                    {% if(Prospect.BirthPlace == ct.Name) %}
                                    <option value="{{ct.Id}}" selected>{{ct.Name}}</option>
                                    {% else %}
                                    <option value="{{ct.Id}}">{{ct.Name}}</option>
                                    {% endif %}
                                    {% endfor%}
                                  </select>
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                  <div class="input-wrapper-group">
                                      <label class="required">Address</label>
                                      <textarea placeholder="" id="FM_PA_Address_{{Campaign.Id}}" rows="5" cols="50" class="form-control"></textarea>
                                  </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  <label>Fax</label>
                                  <input placeholder="Fax" type="number" id="FM_PA_Fax_{{Campaign.Id}}" class="form-control">
                                </div>
                                <div class="input-wrapper-group">
                                  <label>Post Code</label>
                                  <input placeholder="Post Code" id="FM_PA_PostCode_{{Campaign.Id}}" type="number" class="form-control">
                                </div>
                                <div class="input-wrapper-group">
                                  <label  class="required">Email</label>
                                  <input placeholder="Email" type="email" id="FM_PA_Email_{{Campaign.Id}}" name="email" class="form-control">
                                </div>
                              </div>
                            </div>
                            <div class="form-group">
                              <div class="input-wrapper">
                                <div class="input-wrapper-group">
                                  
                                </div>
                                
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div id="tab-2" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>List of Insured</h5>
                      </div>
                    </div>
                    <div class="ibox-content">
                      <div class="form-group tombol-group d-flex justify-content-end">
                          <button type="button" id="FP_NewInsured_{{Campaign.Id}}" class="btn btn-primary btn-sm" onclick="FormPolicy_AddNewInsured()">+ New Insured</button>
                      </div>
                      <div class="table-responsive">
                        <table class="table table-hover dataInsured" id="insuredTable">
                          <thead>
                            <tr style="font-size: 13px; color: #337ab7">
                              <th>Insured Type</th>
                              <th>Title</th>
                              <th>First Name</th>
                              <th>Last Name</th>
                              <th>Sex</th>
                              <th>DOB</th>
                              <th>Age</th>
                              <th>Relationship</th>
                              <th>Action</th>
                            </tr>
                          </thead>
                          <tbody>
                          <tr>
                            <td colspan="8" class="text-center text-muted">-- Data is Empty --</td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- <div style="margin-left: 83%">
                        <button class="btn btn-primary">Accept</button>
                        <button class="btn btn-danger">Reject</button>
                      </div> -->
                    </div>
                  </div>
                  <div class="ibox collapsed">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>Insured Form</h5>
                        <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                        </a>
                      </div>
                    </div>
                    <div class="ibox-content" id="hide-insured">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label class="required">Insured Type</label>
                              <select id="FM_I_InsuredType_{{Campaign.Id}}" class="form-control" required>
                                <option value="" disabled selected>-- Pilih Insured Type --</option>
                                {% for InTy in InsuredTypes %}
                                <option value="{{InTy.Id}}">{{InTy.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>RelationShip</label>
                              <select id="FM_I_Relationship_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih RelationShip --</option>
                                {% for rs in RelationShips %}
                                <option value="{{rs.Id}}">{{rs.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Title</label>
                              <select id="FM_I_Title_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Title --</option>
                                <option value="Ms">Ibu</option>
                                <option value="Mr">Bpk</option>
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label class="required">First Name</label>
                              <input placeholder="FirstName" id="FM_I_FirstName_{{Campaign.Id}}" type="text" class="form-control"> 
                            </div>
                            <div class="input-wrapper-group">
                              <label>Last Name</label>
                              <input placeholder="LastName" id="FM_I_LastName_{{Campaign.Id}}" type="text" class="form-control"> 
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label class="required">Sex</label>
                              <select value="" id="FM_I_Sex_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Sex --</option>
                                {% for sx in Sexs %}
                                <option value="{{sx.Id}}">{{sx.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Marital Status</label>
                              <select id="FM_I_MaritalStatus_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Marital Status --</option>
                                {% for ms in MaritalStatus %}
                                <option value="{{ms.Id}}">{{ms.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Occupation</label>
                              <select id="FM_I_Occupation_{{Campaign.Id}}" class="form-control select2">
                                <option value="" disabled selected>-- Pilih Occupation --</option>
                                {% for Occ in Occupations %}
                                <option value="{{Occ.Id}}">{{Occ.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Occupation Type</label>
                              <input placeholder="Occupation Type" id="FM_I_OccupationType_{{Campaign.Id}}" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Nationality</label>
                              <select id="FM_I_Nationality_{{Campaign.Id}}" class="form-control select2">
                                <option value="" disabled selected>-- Pilih Nationality --</option>
                                {% for rg in Regions %}
                                <option value="{{rg.Id}}">{{rg.Description}}</option>
                                {% endfor %}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Position</label>
                              <input placeholder="Position" id="FM_I_Position_{{Campaign.Id}}" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Rating Factor #1</label>
                              <select id="FM_I_RatingFactor1_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Rating Factor 1--</option>
                                {% for rf in RatingFactors %}
                                <option value="{{rf.Id}}">{{rf.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Rating Factor #2</label>
                              <select id="FM_I_RatingFactor2_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Rating Factor 2 --</option>
                                {% for rf in RatingFactors %}
                                <option value="{{rf.Id}}">{{rf.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>ID Type</label>
                              <select id="FM_I_IDType_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih ID Type --</option>
                                {% for idn in Identitys %}
                                <option value="{{idn.Id}}">{{idn.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div d class="input-wrapper-group">
                              <label>Identity No</label>
                              <input placeholder="IdentityNo" id="FM_I_IdentityNo_{{Campaign.Id}}" type="number" class="form-control">
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label class="required">DOB</label>
                              <input id="FM_I_BirthDate_{{Campaign.Id}}" type="date" class="form-control" placeholder="dd/mm/yyyy" onchange="FormPolicy_ChangeAgeInsured()">
                            </div>
                            <div class="input-wrapper-group">
                              <label>Age</label>
                              <input id="FM_I_Age_{{Campaign.Id}}" type="text" class="form-control" disabled>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Ethnicity</label>
                              <select id="FM_I_Ethnicity_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Ethinicity --</option>
                                {% for eth in Ethnicitys %}
                                <option value="{{eth.Id}}">{{eth.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Birth Place</label>
                              <input placeholder="BirthPlace" id="FM_I_BirthPlace_{{Campaign.Id}}" type="text" class="form-control">
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label class="required">Plan</label>
                              <select id="FM_I_Plan_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Plan --</option>
                                {% for pl in Plans %}
                                <option value="{{pl.Id}}">{{pl.Description}}</option>
                                {% endfor%}
                              </select>
                            </div>
                            <div class="input-wrapper-group">
                              <label>Smoker</label>
                              <input id="FM_I_IsSmoker_{{Campaign.Id}}" type="checkbox" id="inlineCheckbox1">
                            </div>
                          </div>
                        </div>
                        <div class="form-group d-flex justify-content-end">
                          <button id="FP_CancelInsured_{{Campaign.Id}}" class="btn btn-danger btn-sm" onclick="FormPolicy_CancelInsuredButton()"><i class="fa fa-close"></i> Cancel</button>
                          <button id="FP_SaveInsured_{{Campaign.Id}}" class="btn btn-primary btn-sm" style="margin-left: 10px;" onclick="FormPolicy_SaveInsuredButton()"><i class="fa fa-floppy-o"></i> Save</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab-3" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <h5>List Of Beneficiary</h5>
                    </div>
                    <div class="ibox-content">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <!-- <button class="btn btn-primary btn-sm">+ New</button> -->
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <!-- <label>Insured</label> -->
                          <div class="input-wrapper">
                            <select class="form-control" id="FM_B_InsuredId_{{Campaign.Id}}">
                              <option value="" disabled selected>-- Select Insured --</option>
                            </select>
                            <button class="btn btn-primary btn-sm" onclick="FormPolicy_AddNewBeneficiary()">+ New Beneficiary</button>
                          </div>
                        </div>
                      </div>
                      <table id="beneficiaryTable" class="table table-hover table-mail table-sticky-header dataTable beneTable">
                        <thead>
                          <tr>
                            <th class="sorting"><span class="text-link">Insured Type</span></th>
                            <th class="sorting"><span class="text-link">First Name</span></th>
                            <th class="sorting"><span class="text-link">Last Name</span></th>
                            <th class="sorting"><span class="text-link">Action</span></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td colspan="4" class="text-center text-muted">-- Data is Empty --</td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="row">
                        <div style="margin-left: 80%">
                          
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ibox collapsed">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>Beneficiary Form</h5>
                        <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                        </a>
                      </div>
                    </div>
                    <div class="ibox-content" id="hide-beneficiary">
                      <table class="table table-hover table-mail dataTable formTable">
                        <thead>
                          <tr>
                            <th class="sorting"><label class="text-link"><b>Identity No</b></label></th>
                            <th class="sorting"><label class="text-link required"><b>First Name</b></label></th>
                            <th class="sorting"><label class="text-link"><b>Last Name</b></label></th>
                            <th class="sorting"><label class="text-link"><b>Birth Place</b></label></th>
                            <th class="sorting"><label class="text-link required"><b>DOB</b></label></th>
                            <th class="sorting"><label class="text-link required"><b>Sex</b></label></th>
                            <th class="sorting"><label class="text-link"><b>Relationship</b></label></th>
                            <th class="sorting"><label class="text-link required"><b>Type</b></label></th>
                            <th class="sorting"><label class="text-link required"><b>Percentage</b></label></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td><input id="FM_B1_IdentityNo_{{Campaign.Id}}" type="text" class="form-control" placeholder="Enter ID"></td>
                            <td><input id="FM_B1_FirstName_{{Campaign.Id}}"  type="text" class="form-control" placeholder="First Name"></td>
                            <td><input id="FM_B1_LastName_{{Campaign.Id}}" type="text" class="form-control" placeholder="Last Name"></td>
                            <td><input id="FM_B1_BirthPlace_{{Campaign.Id}}" type="text" class="form-control" placeholder="Birth Place"></td>
                            <td><input id="FM_B1_BirthDate_{{Campaign.Id}}" type="date" class="form-control"  placeholder="Birth Date" id="birth_date"></td>
                            <td>
                              <select id="FM_B1_Sex_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Pilih Sex --</option>
                                {% for sx in Sexs %}
                                <option value="{{sx.Id}}">{{sx.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B1_RelationShip_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Select Relationship --</option>
                                {% for rl in RelationShips %}
                                <option value="{{rl.Id}}">{{rl.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B1_Type_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Select Type --</option>
                                {% for benty in BeneficiaryTypes %}
                                <option value="{{benty.Id}}">{{benty.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td><input id="FM_B1_Percentage_{{Campaign.Id}}" type="number" class="form-control percent" min="0" max="100" step="1" placeholder="%"></td>
                          </tr>
                          <tr>
                            <td><input id="FM_B2_IdentityNo_{{Campaign.Id}}" type="text" class="form-control" placeholder="Enter ID"></td>
                            <td><input id="FM_B2_FirstName_{{Campaign.Id}}"  type="text" class="form-control" placeholder="First Name"></td>
                            <td><input id="FM_B2_LastName_{{Campaign.Id}}" type="text" class="form-control" placeholder="Last Name"></td>
                            <td><input id="FM_B2_BirthPlace_{{Campaign.Id}}" type="text" class="form-control" placeholder="Birth Place"></td>
                            <td><input id="FM_B2_BirthDate_{{Campaign.Id}}" type="date" class="form-control"  placeholder="Birth Date" id="birth_date"></td>
                            <td>
                              <select id="FM_B2_Sex_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Pilih Sex --</option>
                                {% for sx in Sexs %}
                                <option value="{{sx.Id}}">{{sx.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B2_RelationShip_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Select Relattionship --</option>
                                {% for rl in RelationShips %}
                                <option value="{{rl.Id}}">{{rl.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B2_Type_{{Campaign.Id}}" class="form-control">
                                <option value="" disabled selected>-- Select Type --</option>
                                {% for benty in BeneficiaryTypes %}
                                <option value="{{benty.Id}}">{{benty.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td><input id="FM_B2_Percentage_{{Campaign.Id}}" type="number" class="form-control percent" min="0" max="100" step="1" placeholder="%"></td>
                          </tr>
                          <tr>
                            <td><input id="FM_B3_IdentityNo_{{Campaign.Id}}" type="text" class="form-control" placeholder="Enter ID"></td>
                            <td><input id="FM_B3_FirstName_{{Campaign.Id}}"  type="text" class="form-control" placeholder="First Name"></td>
                            <td><input id="FM_B3_LastName_{{Campaign.Id}}" type="text" class="form-control" placeholder="Last Name"></td>
                            <td><input id="FM_B3_BirthPlace_{{Campaign.Id}}" type="text" class="form-control" placeholder="Birth Place"></td>
                            <td><input id="FM_B3_BirthDate_{{Campaign.Id}}" type="date" class="form-control"  placeholder="Birth Date" id="birth_date"></td>
                            <td>
                              <select id="FM_B3_Sex_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Pilih Sex --</option>
                                {% for sx in Sexs %}
                                <option value="{{sx.Id}}">{{sx.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B3_RelationShip_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Select Relattionship --</option>
                                {% for rl in RelationShips %}
                                <option value="{{rl.Id}}">{{rl.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td>
                              <select id="FM_B3_Type_{{Campaign.Id}}" class="form-control">
                                <option value="" selected disabled>-- Select Type --</option>
                                {% for benty in BeneficiaryTypes %}
                                <option value="{{benty.Id}}">{{benty.Description}}</option>
                                {% endfor%}
                              </select>
                            </td>
                            <td><input id="FM_B3_Percentage_{{Campaign.Id}}" type="number" class="form-control percent" min="0" max="100" step="1" placeholder="%"></td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="d-flex justify-content-end">
                        <button class="btn btn-danger btn-sm" onclick="FormPolicy_CancelBeneficiaryButton()"><i class="fa fa-close"></i> Cancel</button>
                          <button class="btn btn-primary btn-sm" onclick="FormPolicy_SaveBeneficiaryButton()"  style="margin-left: 10px;"><i class="fa fa-floppy-o"></i> Save</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab-4" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>Payment Info</h5>
                        <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                        </a>
                      </div>
                    </div>
                    <div class="ibox-content">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label  class="required">Payment Type</label>
                          <select id="FM_PY_PaymentMethod_{{Campaign.Id}}" class="form-control" onchange="toggleBankInfo()">
                            <option disabled selected value="">-- Pilih Payment Type --</option>
                            {% for pm in PaymentMethod %}
                              <option value="{{pm.Id}}">{{pm.Description}}</option>
                            {% endfor%}
                          </select>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label  class="required">Frequency</label>
                          <select id="FM_PY_PaymentMode_{{Campaign.Id}}" class="form-control">
                            <option disabled selected>-- Pilih Frequency --</option>
                            {% for pm in PaymentModes %}
                              <option value="{{pm.Id}}">{{pm.Description}}</option>
                            {% endfor%}
                          </select>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>Bank Info</h5>
                      </div>
                    </div>
                    <div class="ibox-content">
                      <div class="animated fadeIn" id="ddb-section" style="display: none;">
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label  class="required">Bank Name</label>
                            <select id="FM_PY_BankName_{{Campaign.Id}}" class="form-control">
                              <option disabled selected>-- Pilih Bank --</option>
                              {% for bnk in Banks %}
                                <option value="{{bnk.Id}}">{{bnk.Description}}</option>
                              {% endfor%}
                            </select>
                          </div>
                          <div class="form-group">
                            <label  class="required">Account Number</label>
                            <input id="FM_PY_AccNum_{{Campaign.Id}}" type="number" class="form-control"> 
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label>Branch</label>
                            <select id="FM_PY_Branch_{{Campaign.Id}}" class="form-control select2">
                              <option disabled selected>-- Pilih Branch --</option>
                              {% for ct in Citys %}
                                <option value="{{ct.Id}}">{{ct.Description}}</option>
                              {% endfor%}
                            </select>
                          </div>
                        </div>
                      </div>
                      <div class="animated fadeIn" id="dbc-section" style="display: none;">
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label  class="required">Card Type</label>
                            <select id="FM_PY_CardType_{{Campaign.Id}}" class="form-control">
                              <option disabled selected>-- Select Card Type --</option>
                              {% for ct in CardTypes %}
                                <option value="{{ct.Id}}">{{ct.Description}}</option>
                              {% endfor%}
                            </select>
                          </div>
                          <div class="form-group">
                            <label  class="required">Expired Date (MM/YY)</label>
                            <input type="month" id="FM_PY_CCExp_{{Campaign.Id}}" class="form-control">
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label  class="required">Credit Card Number</label>
                            <input id="FM_PY_CCNum_{{Campaign.Id}}" type="text" class="form-control">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab-5" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <div class="ibox float-e-margins">
                    <div class="ibox-content">
                      <div class="tabbutton" style="margin-top: 20px; margin-left: 35px;">
                        <button type="button" class="tablinks2 btn btn-sm btn-default active" onclick="openTab2(event, 'Info')" id="defaultOpen"><i class="fas fa-file-contract"></i> Policy Info</button>
                        <button type="button" class="tablinks2 btn btn-sm btn-default" onclick="openTab2(event, 'Benefit')"><i class="fas fa-check-circle"></i> Benefit</button>
                        <button type="button" class="tablinks2 btn btn-sm btn-default" onclick="openTab2(event, 'Premium')"><i class="fas fa-chart-line"></i> Premium</button>
                      </div>
                      <div id="Info" class="tabcontent2 animated fadeIn" style="display: block;">
                        <table class="table" id="policyInfoTable{{Campaign.Id}}">
                          <thead>
                            <tr>
                              <th class="sorting"><span class="text-link">Insured</th>
                              <th class="sorting"><span class="text-link">Product ID</th>
                              <th class="sorting"><span class="text-link">Plan</th>
                              <th class="sorting"><span class="text-link">Rating Factor #1</th>
                              <th class="sorting"><span class="text-link">Rating Factor #2</th>
                              <th class="sorting"><span class="text-link">Premium</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td colspan="6" class="text-center text-muted">-- Tidak ada data insured --</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div id="Benefit" class="tabcontent2 animated fadeIn" style="display: none;">
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label>Product</label>
                            <select class="form-control select2" id="FM_PI_B_Product_{{Campaign.Id}}" onchange="FormPolicy_BenefitProductOnChange()">
                              <option value="" selected>-- Pilih Produk --</option>
                                {% for pd in Products %}
                                {% if(pd.Id == Campaign.ProductId) %}
                                <option value="{{pd.Id}}" selected>{{pd.Name}}</option>
                                {% else	 %}
                                <option value="{{pd.Id}}">{{pd.Name}}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                          </div>
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                            <label>Benefit Level</label>
                            <select class="form-control" id="FM_PI_B_Plan_{{Campaign.Id}}" onchange="FormPolicy_BenefitPlanOnChange()">
                              <option value="" selected>-- Pilih Benefit Levell --</option>
                              {% for pl in Plans %}
                                  <option value="{{pl.Id}}">{{pl.Description}}</option>
                                  {% endfor%}
                            </select>
                          </div>
                        </div>
                        <table class="table" id="benefitInfoTable">
                          <thead>
                            <tr style="color: #337ab7">
                              <th>Description</th>
                              <th>Amount</th>
                              <th>Notes</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td colspan="3" class="text-center text-muted" style="text-align: center;">-- Data Is Empty --</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div id="Premium" class="tabcontent2 animated fadeIn" style="display: none;">
                        <div class="col-sm-6">
                          <div class="form-group">
                            <div class="input-wrapper">
                              <div class="input-wrapper-group">
                                <label>Product</label>
                                <select class="form-control select2" id="FM_PI_P_Product_{{Campaign.Id}}" onchange="FormPolicy_PremiumProductOnChange()">
                                  <option value="" selected value="">-- Pilih Produk --</option>
                                {% for pd in Products %}
                                {% if(pd.Id == Campaign.ProductId) %}
                                <option value="{{pd.Id}}" selected>{{pd.Name}}</option>
                                {% else	 %}
                                <option value="{{pd.Id}}">{{pd.Name}}</option>
                                {% endif %}
                                {% endfor %}
                                </select>
                              </div>
                              <div class="input-wrapper-group">
                                <label>Benefit Level</label>
                                <select class="form-control" id="FM_PI_P_Plan_{{Campaign.Id}}" onchange="FormPolicy_PlanAndPayModeOnChange()">
                                  <option disabled selected value="">-- Pilih Benefit Level --</option>
                                  {% for pl in Plans %}
                                  <option value="{{pl.Id}}">{{pl.Description}}</option>
                                  {% endfor%}
                                </select>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group">
                            <div class="input-wrapper">
                              <div class="input-wrapper-group">
                                <label>Rating Factor #</label>
                                <select class="form-control">
                                  <option disabled selected value="">-- Pilih Rating Factor 1 --</option>
                                  {% for rf in RatingFactors %}
                                  <option value="{{rf.Id}}">{{rf.Description}}</option>
                                  {% endfor%}
                                </select>
                              </div>
                              <div class="input-wrapper-group">
                                <label>Rating Factor #</label>
                                <select class="form-control">
                                  <option disabled selected value="">-- Pilih Rating Factor 2 --</option>
                                  {% for rf in RatingFactors %}
                                  <option value="{{rf.Id}}">{{rf.Description}}</option>
                                  {% endfor%}
                                </select>
                              </div>
                              <div class="input-wrapper-group">
                                <label>Payment Mode</label>
                                <select class="form-control" id="FM_PI_P_PayMode_{{Campaign.Id}}" onchange="FormPolicy_PlanAndPayModeOnChange()">
                                  <option disabled selected value="">-- Pilih PaymentMode --</option>
                                    {% for pm in PaymentModes %}
                                    <option value="{{pm.Id}}">{{pm.Description}}</option>
                                    {% endfor%}
                                </select>
                              </div>
                            </div>
                          </div>
                        </div>
                        <table class="table" id="premiumInfoTable">
                          <thead>
                            <tr>
                              <th colspan="3" class="text-center sorting bg-light-gray"><span class="text-link"> Main Insured</th>
                              <th colspan="3" class="text-center sorting"><span class="text-link"> Spouse</th>
                              <th colspan="3" class="text-center sorting bg-light-gray"><span class="text-link"> Dependant</th>
                            </tr>
                            <tr>
                              <th class="bg-light-gray">Age Band</th>
                              <th class="bg-light-gray">Male</th>
                              <th class="bg-light-gray">Female</th>
                              
                              <th>Age Band</th>
                              <th>Male</th>
                              <th>Female</th>
                              
                              <th class="bg-light-gray">Age Band</th>
                              <th class="bg-light-gray">Male</th>
                              <th class="bg-light-gray">Female</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td colspan="9" class="text-center text-muted">-- Data is Empty -- </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="tab-6" class="tab-pane">
              <div class="panel-body animated fadeIn">
                <div class="row">
                  <div class="ibox float-e-margins">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>List Of Questionare</h5>
                      </div>
                    </div>
                    <div class="ibox-content" style="margin-top: 10px;">
                      <div class="col-sm-6"></div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <div class="input-wrapper">
                              <select id="FM_Q_InsuredId_{{Campaign.Id}}" class="form-control" onchange="FormPolicy_ShowToTableQuestion()">
                                <option value="" selected disabled>-- Pilih Insured --</option>
                              </select>
                              <button class="btn btn-primary btn-sm" onclick="FormPolicy_FillQuestion()" >Fill Questionnaire</button>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-12">
                        <div class="questionTable">
                          <table  id="questionTable" class="table table-hover">
                            <thead>
                              <tr>
                                <th class="sorting"><span class="text-link">#</</th>
                                <th class="sorting"><span class="text-link">Question</th>
                                <th class="sorting"><span class="text-link">Answer</th>
                                <th class="sorting"><span class="text-link">Remark</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td colspan="4" class="text-center text-muted" style="text-align: center;">-- Select Insured First --</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ibox collapsed float-e-margins">
                    <div class="ibox-title">
                      <div class="ibox-tools">
                        <h5>Question Form</h5>
                        <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                        </a>
                      </div>
                    </div>
                    <div class="ibox-content" id="hide-questionare">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Question <span id="FM_Q_QuizNumber_{{Campaign.Id}}" style="font-weight: 700;">1/5</span></label>
                              <textarea disabled id="FM_Q_Question_{{Campaign.Id}}" rows="7" cols="50" readonly>For Female Only</textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <label class="required">Answer</label>
                          <select id="FM_Q_Answer_{{Campaign.Id}}" class="form-control">
                            <option value="" disabled selected>-- Pilih Answer --</option>
                            <option value="No">No</option>
                            <option value="Yes">Yes</option>
                          </select>
                        </div>
                        <div class="form-group">
                          <div class="input-wrapper">
                            <div class="input-wrapper-group">
                              <label>Remark</label>
                              <textarea id="FM_Q_Remark_{{Campaign.Id}}" rows="3" cols="54"></textarea>
                            </div>  
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <div class="form-group">
                              <button id="FM_Q_Cancel_{{Campaign.Id}}" onclick="FormPolicy_ChangeQuestion('prev')" class="btn btn-warning" >Previous</button>
                              <button id="FM_Q_Next_{{Campaign.Id}}" onclick="FormPolicy_ChangeQuestion('next')" class="btn btn-primary" >Next</button>
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <div class="form-group d-flex justify-content-end">
                              <button class="btn btn-success" onclick="FormPolicy_FinishQuestion()">Finish</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" id="submitButton{{Campaign.Id}}" style="margin-top: 10px; margin-bottom: 10px;">Create Policy</button>
      </div>
    </div>
  </div>
</div>
{{ assets.outputJs("jsFooter") }}