@extends('layouts.master')
@section('content')
<div class="app-title">
    <div>
        <h1><i class="fa fa-th-list"></i> KPI Admin</h1>
    </div>
    <ul class="app-breadcrumb breadcrumb side">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item active"><a href="#">KPI Admin</a></li>
    </ul>
</div>
@if(session('message'))
<div class="row">
    <div class="col-md-12">
        <div class="alert alert-success">{{ session('message') }}</div>
    </div>
</div>
@endif 
<div class="row">
    <div class="col-md-12">
         <a href="{{route('kpi.index')}}" class="btn btn-warning" type="submit"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>Back</a>
        <div class="tile">
            <button class="btn btn-info" type="button" onclick="showUploadKPI()"><i class="fa fa-plus" aria-hidden="true"></i>Upload File</button>
               <div class="border border-primary" id="hide-elemen" style="display:none" >
                    <form method="post" id="form" enctype="multipart/form-data" action="{{route('kpiadmin.import')}}">
                        @csrf
                        <div class="row" style="margin:10px 5px;">
                            <div class="col-md-6">
                                <label class="col-form-label" for="inputDefault">Upload File</label>
                                <br>
                                <input type="file" name="file_kpi_admin" required>
                            </div>
                        </div>
                        <button class="btn btn-success" type="submit" style="margin:20px;"><i class="fa fa-upload" aria-hidden="true"></i>Upload</button>
                    </form>
               </div>
               <br>
               <hr>
               <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Year</label>
                            <select class="form-control filter" id="filter-tahun" name="tahun">
                                <option value="" selected>All</option>
                                @foreach($year as $y)
                                <option value="{{$y->tahun}}">{{$y->tahun}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-group">
                            <label>Month</label>
                            <select class="form-control filter" id="filter-bulan" name="bulan">
                                <option value="" selected>All</option>
                                @foreach($month as $p)
                                <option value="{{$p->bulan}}">{{$p->bulan}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
               </div>
               <hr>
            <div class="tile-body" style="margin-top:30px">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-sm" id="tb-kpi-admin">
                        <thead class="table-warning">
                            <tr>
                                <th>No</th>
                                <th>BULAN</th>
                                <th>TAHUN</th>
                                <th>SALES REGION</th>
                                <th>KODE SH</th>
                                <th>KODE TERRITORY</th>
                                <th>TERRITORY</th>
                                <th>DISTRIBUTOR</th>
                                <th>NAMA ADMIN</th>
                                <th>UPLOAD DO BY APK</th>
                                <th>RATIO DO TO SO</th>
                                <th>INVALID DO</th>
                                <th>PAYMENT TRANSAKSI</th>
                                <th>ORDER BY POWER</th>
                                <th>ORDER BY ADMIN</th>
                                <th>PENYELESAIAN ADMIN PROGRAM</th>
                                <th>KPI</th>
                                <th>KETERANGAN</th>
                                <th>REWARD</th>
                                
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="//code.jquery.com/jquery.js"></script>       
<script>
// $(function() {
//     $('#tb-kpi-sd').DataTable({
//         processing: true,
//         serverSide: true,
//         pageLength: 5, 
//         ajax: {
//             url: "{{ route('kpiadmin.getDataKPIAdmin') }}",
//             data: function (d) {
//                 d.tahun = $('#tahun').val(),
//                 d.bulan = $('#bulan').val(),
//                 d.search = $('input[type="search"]').val()
//             }
//         },
//         columns: [
//             { data: 'rownum', name: 'rownum'},
//             { data: 'periode', name: 'periode' },
//             { data: 'tahun', name: 'tahun' },
//             { data: 'sales_region', name: 'sales_region' },
//             { data: 'kode_sh', name: 'kode_sh' },
//             { data: 'code_territory', name: 'code_territory' },
//             { data: 'nama_territory', name: 'nama_territory' },
//             { data: 'nama_distributor', name: 'nama_distributor' },
//             { data: 'nama_admin', name: 'nama_admin' },
//             { data: 'upload_do_by_apk', name: 'upload_do_by_apk' },
//             { data: 'ratio_do_to_so', name: 'ratio_do_to_so' },
//             { data: 'invalid_do', name: 'invalid_do' },
//             { data: 'payment_transaksi', name: 'payment_transaksi' },
//             { data: 'order_by_power', name: 'order_by_power' },
//             { data: 'order_by_admin', name: 'order_by_admin' },
//             { data: 'penyelesaian_admin_program', name: 'penyelesaian_admin_program' },
//             { data: 'kpi', name: 'kpi' },
//             { data: 'reward', name: 'reward' },
//             { data: 'keterangan', name: 'keterangan' },
//         ]
//     });

//     // $('#bulan').change(function(){
//     //     table.draw();
//     // });
// });

let tahun = $("#filter-tahun").val(), bulan = $("#filter-bulan").val();
$(function() {
    const table = $('#tb-kpi-admin').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 5, 
        ajax: {
            url: "{{ route('kpiadmin.getDataKPIAdmin') }}",
            type: "get",
            data: function (d) {
               d.tahun = tahun;
               d.bulan = bulan;
               console.log(d);
            }
        },
        columns: [
            { data: 'rownum', name: 'rownum'},
            { data: 'bulan', name: 'bulan' },
            { data: 'tahun', name: 'tahun' },
            { data: 'sales_region', name: 'sales_region' },
            { data: 'kode_sh', name: 'kode_sh' },
            { data: 'code_territory', name: 'code_territory' },
            { data: 'nama_territory', name: 'nama_territory' },
            { data: 'nama_distributor', name: 'nama_distributor' },
            { data: 'nama_admin', name: 'nama_admin' },
            { data: 'upload_do_by_apk', name: 'upload_do_by_apk' },
            { data: 'ratio_do_to_so', name: 'ratio_do_to_so' },
            { data: 'invalid_do', name: 'invalid_do' },
            { data: 'payment_transaksi', name: 'payment_transaksi' },
            { data: 'order_by_power', name: 'order_by_power' },
            { data: 'order_by_admin', name: 'order_by_admin' },
            { data: 'penyelesaian_admin_program', name: 'penyelesaian_admin_program' },
            { data: 'kpi', name: 'kpi' },
            { data: 'reward', name: 'reward' },
            { data: 'keterangan', name: 'keterangan' },
        ]
    });

   
    $(".filter").on('change', function(){
        tahun = $("#filter-tahun").val()
        bulan = $("#filter-bulan").val()
        table.ajax.reload(null, false);
    });

});

</script>

@endsection