<div class="col-12">
  <div class="card card-primary card-outline card-outline-tabs" id="content-box-1">
    <div class="card-header p-0 border-bottom-0">
      <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="referensi_praktisi-tab" data-toggle="pill" href="#referensi_praktisi" role="tab" aria-controls="referensi_praktisi" aria-selected="true" onclick="load_tabel('referensi_praktisi')">Referensi Praktisi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="referensi_pasien-tab" data-toggle="pill" href="#referensi_pasien" role="tab" aria-controls="referensi_pasien" aria-selected="true" onclick="load_tabel('referensi_pasien')">Referensi Pasien</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="mapping_organisasi-tab" data-toggle="pill" href="#mapping_organisasi" role="tab" aria-controls="mapping_organisasi" aria-selected="true" onclick="load_tabel('mapping_organisasi')">Mapping Organisasi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="mapping_lokasi-tab" data-toggle="pill" href="#mapping_lokasi" role="tab" aria-controls="mapping_lokasi" aria-selected="true" onclick="load_tabel('mapping_lokasi')">Mapping Lokasi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="mapping_praktisi-tab" data-toggle="pill" href="#mapping_praktisi" role="tab" aria-controls="mapping_praktisi" aria-selected="true" onclick="load_tabel('mapping_praktisi')">Mapping Praktisi</a>
        </li>
      </ul>
    </div>
    <div class="card-body">      
      <input type="hidden" name="service_aktif">
      <div class="tab-content" id="custom-tabs-tabContent">
        <div class="tab-pane fade show active" id="referensi_praktisi" role="tabpanel" aria-labelledby="referensi_praktisi-tab">         
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4">  
              <div class="form-group">
                <table width="100%">
                  <tr>
                    <td>                   
                      <div class="input-group input-group-sm"> 
                        <div class="input-group-prepend">
                          <span class="input-group-text">NIK</span>
                        </div>
                        <input type="text" class="form-control form-control-sm" name="nik" placeholder="Enter nik" required>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td align="right">
                      <a onclick="get({table_name: 'referensi_praktisi', service_name: 'practitioner', nik: $('#referensi_praktisi input[name=nik]').val()})" class="btn btn-success btn-xs float-sm-right">Get From SATU SEHAT</a>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8">  
              <div id="tabel_referensi_praktisi"></div> 
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="referensi_pasien" role="tabpanel" aria-labelledby="referensi_pasien-tab">          
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4">  
              <div class="form-group">
                <table width="100%">
                  <tr>
                    <td>                   
                      <div class="input-group input-group-sm"> 
                        <div class="input-group-prepend">
                          <span class="input-group-text">NIK</span>
                        </div>
                        <input type="text" class="form-control form-control-sm" name="nik" placeholder="Enter nik" required>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td align="right">
                      <a onclick="get({table_name: 'referensi_pasien', service_name: 'patient', nik: $('#referensi_pasien input[name=nik]').val()})" class="btn btn-success btn-xs float-sm-right">Get From SATU SEHAT</a>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8">  
              <div id="tabel_referensi_pasien"></div>
            </div> 
          </div>
        </div>
        <div class="tab-pane fade" id="mapping_organisasi" role="tabpanel" aria-labelledby="mapping_organisasi-tab"> 
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4">  
              <form role="form" method="POST" id="form_mapping_organisasi" action="<?php echo $url_form ?>">                          
                <div class="form-group">
                  <label>ID</label>
                  <input type="text" class="form-control form-control-sm" name="id" value="<?php echo $pengaturan->satusehat_id ?>" readonly>
                </div>   
                <div class="form-group">
                  <label>No. Telp</label>
                  <input type="text" class="form-control form-control-sm" name="no_telp" value="<?php echo $pengaturan->no_telp ?>" placeholder="Enter no telp.">
                </div>  
                <div class="form-group">
                  <label>Email</label>
                  <input type="text" class="form-control form-control-sm" name="email" value="<?php echo $pengaturan->email ?>" placeholder="Enter email">
                </div> 
                <div class="form-group">
                  <label>Name</label>
                  <input type="text" class="form-control form-control-sm" name="name" placeholder="Enter name">
                </div>  
                <div class="form-group">
                  <label>Code</label>
                  <input type="text" class="form-control form-control-sm" name="coding_code" placeholder="Enter code">
                </div>            
                <div class="form-group">
                  <label>Display</label>
                  <input type="text" class="form-control form-control-sm" name="coding_display" placeholder="Enter display">
                </div>           
                <div class="form-group">
                  <label>System</label>
                  <input type="text" class="form-control form-control-sm" name="coding_system" placeholder="Enter system">
                </div>                
                <div class="form-group">
                  <label>Active</label>
                  <select class="form-control form-control-sm" name="status" required> 
                    <option value="true">True</option>
                    <option value="false">False</option>
                  </select>
                </div>   
                <div class="form-group">
                  <input type="hidden" name="table_name" value="mapping_organisasi">
                  <input type="hidden" name="service_name" value="organization">
                  <button type="submit" onclick="submit_form('form_mapping_organisasi')" class="btn btn-primary btn-xs float-sm-right submit_button">Simpan</button>
                </div>
              </form>
            </div>              
            <div class="col-12 col-sm-12 col-md-12 col-lg-8">
              <p>
                <a onclick="get_update({table_name: 'mapping_organisasi', service_name: 'organization'})" class="btn btn-success btn-xs">Get From SATU SEHAT</a>
              </p>
              <div id="tabel_mapping_organisasi"></div> 
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="mapping_lokasi" role="tabpanel" aria-labelledby="mapping_lokasi-tab">  
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4">            
              <form role="form" method="POST" id="form_mapping_lokasi" action="<?php echo $url_form ?>">             
                <div class="form-group">
                  <label>ID</label>
                  <input type="text" class="form-control form-control-sm" name="satusehat_id" value="<?php echo $pengaturan->satusehat_id ?>" placeholder="Enter satusehat id" readonly>
                </div>                 
                <div class="form-group">
                  <label>Unit</label>
                  <select class="form-control form-control-sm" name="kode" required> 
                    <option value="Rawat Jalan (RJ)">Rawat Jalan (RJ)</option>
                    <option value="Rawat Jalan + Rawat Inap (RJRI)">Rawat Jalan + Rawat Inap (RJRI)</option>
                    <option value="Laboratorium (LAB)">Laboratorium (LAB)</option>
                    <option value="Apotik (APT)">Apotik (APT)</option>
                  </select>
                </div>   
                <div class="form-group">
                  <label>No. Telp</label>
                  <input type="text" class="form-control form-control-sm" name="no_telp" value="<?php echo $pengaturan->no_telp ?>" placeholder="Enter no telp.">
                </div>  
                <div class="form-group">
                  <label>Email</label>
                  <input type="text" class="form-control form-control-sm" name="email" value="<?php echo $pengaturan->email ?>" placeholder="Enter email">
                </div> 
                <div class="form-group">
                  <label>Longitude</label>
                  <input type="text" class="form-control form-control-sm" name="longitude"  placeholder="Enter longitude">
                </div>                
                <div class="form-group">
                  <label>Latitude</label>
                  <input type="text" class="form-control form-control-sm" name="latitude" placeholder="Enter latitude">
                </div>             
                <div class="form-group">
                  <label>Altitude</label>
                  <input type="text" class="form-control form-control-sm" name="altitude" placeholder="Enter altitude">
                </div>                
                <div class="form-group">
                  <label>Status</label>
                  <select class="form-control form-control-sm" name="status" required> 
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                  </select>
                </div>   
                <input type="hidden" name="id">
                <input type="hidden" name="table_name" value="mapping_lokasi">
                <input type="hidden" name="service_name" value="location">
                <button type="submit" onclick="submit_form('form_mapping_lokasi')" class="btn btn-primary btn-xs float-sm-right submit_button">Simpan</button>
              </form>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8">
              <p>
                <a onclick="get_update({table_name: 'mapping_lokasi', service_name: 'location'})" class="btn btn-success btn-xs">Get From SATU SEHAT</a>
              </p>
              <div id="tabel_mapping_lokasi"></div> 
            </div>
          </div>
        </div>
        <div class="tab-pane fade" id="mapping_praktisi" role="tabpanel" aria-labelledby="mapping_lokasi-tab"> 
          <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-4"> 
              <div class="form-group">                          
                <div class="input-group input-group-sm"> 
                  <div class="input-group-prepend">
                    <span class="input-group-text">Dokter</span>
                  </div>
                  <select class="form-control form-control-sm select2" name="nik" required> 
                    <option value="" selected hidden disabled></option>
                    <?php foreach ($select_dokter as $key){ ?>                
                      <option value="<?php echo $key->nik ?>"><?php echo $key->value ?></option>
                    <?php } ?>                     
                  </select>
                </div>
              </div>
              <div class="form-group">   
                <a onclick="get_update({table_name: 'mapping_praktisi', service_name: 'practitioner', nik: $('#mapping_praktisi select[name=nik] option:selected').val()})" class="btn btn-success btn-xs float-sm-right">Get From SATU SEHAT</a>
              </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-8"> 
              <div id="tabel_mapping_praktisi"></div>
            </div>
          </div> 
        </div>        
      </div>
    </div>
  </div>

  <div class="card card-default" id="content-box-2">
    <div id="content-tabel-2">
    </div>                
  </div>
</div>

<script type="text/javascript">
  var base_url        = url.protocol+'<?php echo str_replace("http:", "", base_url()); ?>';
  var controller_url  = base_url+'<?php echo $this->uri->segment(1); ?>';
</script>

<script type="text/javascript">

  <?php $this->load->view(basename(__DIR__).'/_script.js') ?>

  function submit_form(value){
    var service_name = $('input[name=service_aktif]').val();
    let submitForm = document.getElementById(value);

    submitForm.addEventListener('submit', (e) => {
      e.preventDefault();      
      $('.submit_button').attr('disabled', true);
      $.ajax({
        type: $('#form_'+service_name).attr('method'),
        url: base_url+''+$('#form_'+service_name).attr('action'),
        data:new FormData(e.target),
        processData:false,
        contentType:false,
        cache:false,
        async:false,
        dataType:'json',
        success: function(response)
        { 
          console.log(response);
          notif(response.eror, response.pesan);
          if(response.eror == 'success')
          {
            load_tabel($('input[name=service_aktif]').val());
          }           
          setTimeout(function(){ $('.submit_button').attr('disabled', false); }, 1000);
        },
        error: function (xhr, ajaxOptions, thrownError) {
          console.log(xhr.responseText);
        }  
      });
    })
  }

</script>