<script type="text/javascript">
    $(document).ready(function () {
        list_data();
        $(document).on('click', '#btn_search', function () {
            var loading = Ladda.create(this);
            loading.start();
            var id_karyawan     = (!$("#karyawan").val())?"all":$("#karyawan").val();
            var tanggal_mulai   = $('#tanggal_mulai').val();
            var tanggal_selesai = $('#tanggal_selesai').val();
            $('#view_data').load("<?= route('reimburse.rekap.data') ?>"+"/"+id_karyawan+"/"+tanggal_mulai+"/"+tanggal_selesai, function(){
                loading.stop();
            });

        });

        $('#karyawan').select2({
            placeholder: 'Pilih Karyawan',
            allowClear: true,
            ajax: {
                url: '<?= route("reimburse.rekap.dropdown.karyawan")  ?>',
                dataType: 'json',
                delay: 250,
                processResults: function (data) {
                return {
                        results: data
                    };
                },
                cache: false
            },
            minLength: 3
        });

        function list_data() {
            var id_karyawan     = (!$("#karyawan").val())?"all":$("#karyawan").val();
            var tanggal_mulai   = $('#tanggal_mulai').val();
            var tanggal_selesai = $('#tanggal_selesai').val();
            $('#view_data').load("<?= route('reimburse.rekap.data') ?>"+"/"+id_karyawan+"/"+tanggal_mulai+"/"+tanggal_selesai);
        }

             //download data xls karyawan
        $(document).on('click','#btn_download_pdf',function(e){
            var id_cabang       = "<?= $this->id_cabang ?>";
            var id_departemen   = "all"
            var id_karyawan     = (!$("#karyawan").val())?"all":$("#karyawan").val();
            var tgl_mulai       = $('#tanggal_mulai').val();
            var tgl_selesai     = $('#tanggal_selesai').val();

            var url = "<?= route('reimburse.rekap.download.pdf') ?>"+"/"+id_cabang+"/"+id_departemen+"/"+id_karyawan+"/"+tgl_mulai +"/"+tgl_selesai;
            window.open(url);
        });

    });

</script>
<div class="content-header">
    <div class="row align-items-center">
        <div class="content-header-left col-md-6 col-12 mb-md-0 mb-1">
            <h3 class="content-header-title"><?= $judul ?></h3>
            <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        </li>
                        <li class="breadcrumb-item"><a href="#">Rekap Reimburse</a>
                        </li>
                        <li class="breadcrumb-item active"><?= $judul ?>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">

        </div>
    </div>
</div>

<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row filter">
                <div class="col-md-2">
                    <label>Tanggal Mulai</label>
                    <?php
                        $tgl_mulai   = date('d-m-Y', strtotime('-7 day'));
                        $tgl_selesai = date('d-m-Y', strtotime('+1 month'));
                    ?>
                    <input type="text" name="tanggal_mulai" id="tanggal_mulai" class="form-control datepicker" autocomplete="off" placeholder="dd-mm-yyyy" value="<?= $tgl_mulai ?>">
                </div>
                <div class="col-md-2">
                    <label>Tanggal Selesai</label>
                    <input type="text" name="tanggal_selesai" id="tanggal_selesai" class="form-control datepicker" autocomplete="off" placeholder="dd-mm-yyyy" value="<?= $tgl_selesai ?>">
                </div>
                <div class="col-md-3">
                    <label>Karyawan</label>
                    <select class="form-control" id="karyawan" required>
                        <option></option>
                    </select>
                </div>
                <div class="col-md-3 align-self-end">
                    <button type="button" id="btn_search" class="btn btn-primary ladda-button" data-style="expand-left">TAMPILKAN</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card card-rounded">
    <div class="card-content">
        <div class="card-body">
            <div class="row filter">
                <div id="view_data" class="col-md-12"></div>
            </div>
        </div>
    </div>
</div>

<!-- START TAMPIL MODAL -->
<div id="modal_form" class="modal fade in">
    <div class="modal-dialog modal-md">
        <div id="tampil_form" class="modal-content"></div>
    </div>
</div>
<!-- END TAMPIL MODAL -->


