@extends('layouts.master')
@section('content')
<div class="app-title">
    <div>
        <h1><i class="fa fa-th-list"></i> KPI SD</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 SD</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('kpisd.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_sd" 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-sd">
                        <thead class="table-warning">
                            <tr>
                                <th>No</th>
                                <th>BULAN</th>
                                <th>TAHUN</th>
                                <th>ID SALES</th>
                                <th>NAMA SALESMAN</th>
                                <th>REGION</th>
                                <th>TERRITORY</th>
                                <th>DISTRIBUTOR</th>
                                <th>SO</th>
                                <th>AO</th>
                                <th>EXECUTION PROGRAM</th>
                                <th>VISIT</th>
                                <th>VALIDITAS DO</th>
                                <th>ALOKASI MIN. OUTLET</th>
                                <th>KPI</th>
                                <th>EC</th>
                                <th>SCAN POWER</th>
                                <th>NAO</th>
                                <th>UTILISASI DMS</th>
                                <th>INSENTIF KPI</th>
                                <th>KETERANGAN</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('kpisd.getDataKPISd') }}",
//             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: 'id_sales', name: 'id_sales' },
//             { data: 'nama_sales', name: 'nama_sales' },
//             { data: 'region', name: 'region' },
//             { data: 'territory', name: 'territory' },
//             { data: 'distributor', name: 'distributor' },
//             { data: 'so', name: 'so' },
//             { data: 'ao', name: 'ao' },
//             { data: 'execution_program', name: 'execution_program' },
//             { data: 'visit', name: 'visit' },
//             { data: 'validitas_do', name: 'validitas_do' },
//             { data: 'alokasi_min_outlet', name: 'alokasi_min_outlet' },
//             { data: 'kpi', name: 'kpi' },
//             { data: 'ec', name: 'ec' },
//             { data: 'scan_power', name: 'scan_power' },
//             { data: 'nao', name: 'nao' },
//             { data: 'utilisasi', name: 'utilisasi' },
//             { data: 'insentif_kpi', name: 'insentif_kpi' },
//             { data: 'keterangan', name: 'keterangan' },
//         ]
//     });

//     // $('#bulan').change(function(){
//     //     table.draw();
//     // });
// });
let tahun = $("#filter-tahun").val(), bulan = $("#filter-bulan").val();
$(function() {
    const table = $('#tb-kpi-sd').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 5, 
        ajax: {
            url: "{{ route('kpisd.getDataKPISd') }}",
            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: 'id_sales', name: 'id_sales' },
            { data: 'nama_sales', name: 'nama_sales' },
            { data: 'region', name: 'region' },
            { data: 'territory', name: 'territory' },
            { data: 'distributor', name: 'distributor' },
            { data: 'so', name: 'so' },
            { data: 'ao', name: 'ao' },
            { data: 'execution_program', name: 'execution_program' },
            { data: 'visit', name: 'visit' },
            { data: 'validitas_do', name: 'validitas_do' },
            { data: 'alokasi_min_outlet', name: 'alokasi_min_outlet' },
            { data: 'kpi', name: 'kpi' },
            { data: 'ec', name: 'ec' },
            { data: 'scan_power', name: 'scan_power' },
            { data: 'nao', name: 'nao' },
            { data: 'utilisasi', name: 'utilisasi' },
            { data: 'insentif_kpi', name: 'insentif_kpi' },
            { data: 'keterangan', name: 'keterangan' },
        ]
    });

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

});
</script>
@endsection