@extends('layouts.master')
@section('content')
<div class="app-title">
    <div>
        <h1><i class="fa fa-th-list"></i> KPI SPV</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 SPV</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('kpispv.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_spv" 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" id="tb-kpi-spv">
                        <thead class="table-warning">
                            <tr>
                                <th>NO.</th>
                                <th>BULAN</th>
                            	<th>TAHUN</th>
                                <th>ID SPV</th>
                                <th>NAMA</th>
                                <th>JABATAN</th>
                                <th>REGION</th>
                                <th>TERRITORY</th>
                                <th>DISTRIBUTOR</th>
                                <th>SO</th>
                                <th>AO</th>
                                <th>EXECUTION SALES PROGRAM</th>
                                <th>OULET SATISFACTION</th>
                                <th>MI</th>
                                <th>TECHNICAL PRESENTATION SPV</th>
                                <th>% COVERAGE SALESMAN</th>
                                <th>KPI DISTRIBUTOR</th>
                                <th>VALIDITAS</th>
                                <th>KPI</th>
                                <th>VISIT</th>
                                <th>OUTLET COVERAGE</th>
                                <th>POWER ORDER</th>
                                <th>SCAN POWER</th>
                                <th>PEMENUHAN JUMLAH SALESMAN</th>
                                <th>JOIN VISIT</th>
                                <th>SCAN LOYALTI</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 type="text/javascript">
    $(document).ready(function(){
        function fill_datatable(filter_tahun='', filter_bulan='')
        {
            var datatTable = $('#tb-kpi-spv').DataTable({
                processing : true,
                serverSide : true,
                ajax:{
                    url:{{"route('kpispv.getDataKPISpv')"}},
                    data : {tahun:tahun, bulan:bulan},

                },
                columns:[
                    { data: 'rownum', name: 'rownum'},
                    { data: 'bulan', name: 'bulan' },
                    { data: 'tahun', name: 'tahun' },
                    { data: 'id_spv', name: 'id_spv' },
                    { data: 'nama', name: 'nama' },
                    { data: 'jabatan', name: 'jabatan' },
                    { data: 'region', name: 'region' },
                    { data: 'territory', name: 'territory' },
                    { data: 'distributor', name: 'distributor' },
                    { data: 'so', name: 'so' },
                    { data: 'ao', name: 'ao' },
                    { data: 'execution_sales_program', name: 'execution_sales_program' },
                    { data: 'outlet_satisfaction', name: 'outlet_satisfactionreport_mi' },
                    { data: 'report_mi', name: 'report_mi' },
                    { data: 'technical_presentation_spv', name: 'technical_presentation_spv' },
                    { data: 'persen_coverage_salesman', name: 'persen_coverage_salesman' },
                    { data: 'kpi_distributor', name: 'kpi_distributor' },
                    { data: 'validitas', name: 'validitas' },
                    { data: 'kpi', name: 'kpi' },
                    { data: 'visit', name: 'visit' },
                    { data: 'outlet_coverage', name: 'outlet_coverage' },
                    { data: 'power_order', name: 'power_order' },
                    { data: 'scan_power', name: 'scan_power' },
                    { data: 'pemenuhan_jumlah_salesman', name: 'pemenuhan_jumlah_salesman' },
                    { data: 'join_visit', name: 'join_visit' },
                    { data: 'scan_loyalti', name: 'scan_loyalti' },
                    { data: 'insentif_kpi', name: 'insentif_kpi' },
                    { data: 'keterangan', name: 'keterangan' },
                ]
            });

        }
    });
</script>   -->     
<script>
let tahun = $("#filter-tahun").val(), bulan = $("#filter-bulan").val();

$(function() {
    const table = $('#tb-kpi-spv').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 5, 
        ajax: {
            url: "{{ route('kpispv.getDataKPISpv') }}",
            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_spv', name: 'id_spv' },
            { data: 'nama', name: 'nama' },
            { data: 'jabatan', name: 'jabatan' },
            { data: 'region', name: 'region' },
            { data: 'territory', name: 'territory' },
            { data: 'distributor', name: 'distributor' },
            { data: 'so', name: 'so' },
            { data: 'ao', name: 'ao' },
            { data: 'execution_sales_program', name: 'execution_sales_program' },
            { data: 'outlet_satisfaction', name: 'outlet_satisfactionreport_mi' },
            { data: 'report_mi', name: 'report_mi' },
            { data: 'technical_presentation_spv', name: 'technical_presentation_spv' },
            { data: 'persen_coverage_salesman', name: 'persen_coverage_salesman' },
            { data: 'kpi_distributor', name: 'kpi_distributor' },
            { data: 'validitas', name: 'validitas' },
            { data: 'kpi', name: 'kpi' },
            { data: 'visit', name: 'visit' },
            { data: 'outlet_coverage', name: 'outlet_coverage' },
            { data: 'power_order', name: 'power_order' },
            { data: 'scan_power', name: 'scan_power' },
            { data: 'pemenuhan_jumlah_salesman', name: 'pemenuhan_jumlah_salesman' },
            { data: 'join_visit', name: 'join_visit' },
            { data: 'scan_loyalti', name: 'scan_loyalti' },
            { 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