<style>
  .komisi-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    padding:1rem;
    margin-bottom:1rem;
  }
  .komisi-filter{
    display:grid;
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:.65rem;
  }
  .komisi-filter > *{min-width:0;}
  @media(min-width:1200px){
    .komisi-filter{grid-template-columns:minmax(180px,.6fr) minmax(300px,1.15fr) minmax(320px,1.2fr);}
  }
  @media(min-width:768px) and (max-width:1199.98px){
    .komisi-filter{grid-template-columns:minmax(180px,.6fr) minmax(300px,1.2fr);}
    .komisi-filter > div:nth-child(3){grid-column:1/-1;}
  }
  .komisi-filter > div{align-items:stretch;display:flex;min-width:0;}
  .komisi-label{
    align-items:center;
    background:var(--app-theme-color,#3f51b5);
    border:1px solid var(--app-theme-color,#3f51b5);
    border-radius:.25rem 0 0 .25rem;
    box-shadow:0 .125rem .25rem rgba(58,59,69,.14);
    color:var(--app-theme-text-color,#fff);
    display:inline-flex;
    flex:0 0 auto;
    font-size:.75rem;
    font-weight:600;
    height:38px;
    justify-content:center;
    letter-spacing:.01em;
    line-height:1;
    margin:0;
    padding:0 .8rem;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .komisi-control{
    background:#fff;
    border:1px solid #d1d5db;
    border-left:0;
    border-radius:0 .25rem .25rem 0;
    box-shadow:none;
    color:#3a3b45;
    flex:1 1 auto;
    font-size:.82rem;
    height:38px;
    min-height:38px;
    min-width:0;
    padding:0 .75rem;
    width:100%;
  }
  .komisi-control:focus{
    border-color:var(--app-theme-color,#3f51b5);
    box-shadow:0 0 0 .15rem rgba(63,81,181,.12);
    outline:0;
    position:relative;
    z-index:2;
  }
  @media(max-width:575.98px){
    .komisi-filter > div{display:grid;grid-template-columns:1fr;}
    .komisi-label{border-radius:.35rem .35rem 0 0;justify-content:flex-start;width:100%;}
    .komisi-control{border-left:1px solid #d1d5db;border-radius:0 0 .35rem .35rem;}
  }
</style>

<div class="container-fluid">
  <div class="card shadow mb-4">
    <div class="card-body">
      <div class="komisi-card">
        <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
          <h4 class="mb-0">Komisi Penjualan</h4>
        </div>
        <div class="komisi-filter">
          <div>
            <label class="komisi-label" for="kp_limit">Limit</label>
            <select id="kp_limit" class="komisi-control" onchange="searchKomisiPenjualan()"><option value="10">10</option><option value="20">20</option><option value="50">50</option><option value="100">100</option></select>
          </div>
          <div>
            <label class="komisi-label" for="kp_tgl">Tanggal</label>
            <input type="text" id="kp_tgl" class="komisi-control date-kp" value="<?=$tgl;?>" onchange="searchKomisiPenjualan()">
          </div>
          <div>
            <label class="komisi-label" for="kp_sales">Karyawan</label>
            <select id="kp_sales" class="komisi-control" onchange="searchKomisiPenjualan()">
              <option value="0">Semua Karyawan</option>
              <?php foreach($sales_options as $s): ?>
                <option value="<?=(int)$s['id_user'];?>"><?=htmlspecialchars($s['nama_lengkap'],ENT_QUOTES,'UTF-8');?></option>
              <?php endforeach;?>
            </select>
          </div>
        </div>
      </div>
      <div id="dataKomisiPenjualan"></div>
    </div>
  </div>
</div>

<?php $this->RenderScript[] = function(){ ?>
<script>
$(function(){
  $('.date-kp').daterangepicker({
    opens:'right',
    ranges:{
      'Hari ini':[moment(),moment()],
      'Kemarin':[moment().subtract('days',1),moment().subtract('days',1)],
      'Minggu Ini':[moment().startOf('isoWeek'),moment().endOf('isoWeek')],
      '30 Hari Terakhir':[moment().subtract('days',29),moment()],
      'Bulan ini':[moment().startOf('month'),moment().endOf('month')]
    },
    showDropdowns:true,
    linkedCalendars:false,
    locale:{customRangeLabel:'Pilih Tanggal',format:'DD/MM/YYYY',applyLabel:'Pilih',separator:' - ',monthNames:['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember']}
  });
  searchKomisiPenjualan();
});
function searchKomisiPenjualan(page){
  page=page||0;
  $.ajax({
    type:'POST',
    url:base_url+'komisi-penjualan/ajaxPaginationData/'+page,
    data:{page:page,limits:$('#kp_limit').val(),tgl:$('#kp_tgl').val(),sales_id:$('#kp_sales').val()},
    beforeSend:function(){$('#dataKomisiPenjualan').loading();},
    success:function(html){$('#dataKomisiPenjualan').html(html);$('#dataKomisiPenjualan').loading('stop');},
    error:function(){$('#dataKomisiPenjualan').loading('stop');}
  });
}
</script>
<?php }; ?>
