@extends('layouts.master')
@section('content')
<div class="app-title">
    <div>
        <h1><i class="fa fa-th-list"></i> KPI SPV MD</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 MD</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-md">
                        <thead class="table-warning">
                            <tr>
                                <th>NO.</th>
                                <th>BULAN</th>
                            	<th>TAHUN</th>
                                <th>SALES REGION</th>
                                <th>KODE APM</th>
                                <th>NAMA APM</th>
                                <th>SASARAN ALOKASI</th>
                                <th>VISIT DMS/MFORCE</th>
                                <th>AO GENERAL</th>
                                <th>AO OWN CHANNEL</th>
                                <th>VISIT WEB SURVEY</th>
                                <th>AO</th>
                                <th>POWER ORDERING</th>
                                <th>ACTIVE POWER</th>
                                <th>AV PRODUK POSM</th>
                                <th>KELOLOSAN KPI TEAM</th>
                                <th>AKTIVASI PROGRAM</th>
                                <th>NAO</th>
                                <th>LAPORAN</th>
                                <th>MAIN KPI</th>
                                <th>PRESENTASI</th>
                                <th>KPI</th>
                                <th>LOLOS PROGRAM</th>
                                <th>AO TYPE 11, 12, 14</th>
                                <th>SURVEY STOK SPBU</th>
                                <th>OWN CHANNEL KPI</th>
                                <th>BOUNDARY VISIT</th>
                                <th>KOMITMEN KPI CLOSING</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-spv-md').DataTable({
//         processing: true,
//         serverSide: true,
//         pageLength: 5, 
//         ajax: {
//             url: "{{ route('kpismd.getDataKPISpvMd') }}",
//             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_apm', name: 'kode_apm' },
//             { data: 'nama_apm', name: 'nama_apm' },
//             { data: 'sasaran_alokasi', name: 'sasaran_alokasi' },
//             { data: 'visit_dms_mforce', name: 'visit_dms_mforce' },
//             { data: 'ao_general', name: 'ao_general' },
//             { data: 'ao_own_channel', name: 'ao_own_channel' },
//             { data: 'visit_web_survey', name: 'visit_web_survey' },
//             { data: 'ao', name: 'ao' },
//             { data: 'power_ordering', name: 'power_ordering' },
//             { data: 'active_power', name: 'active_power' },
//             { data: 'av_produk_posm', name: 'av_produk_posm' },
//             { data: 'kelolosan_kpi_team', name: 'kelolosan_kpi_team' },
//             { data: 'aktivasi_program', name: 'aktivasi_program' },
//             { data: 'nao', name: 'nao' },
//             { data: 'laporan', name: 'laporan' },
//             { data: 'main_kpi', name: 'main_kpi' },
//             { data: 'presentasi', name: 'presentasi' },
//             { data: 'kpi', name: 'kpi' },
//             { data: 'lolos_program', name: 'lolos_program' },
//             { data: 'ao_type_11', name: 'ao_type_11' },
//             { data: 'survey_stok_spbu', name: 'survey_stok_spbu' },
//             { data: 'own_channel_kpi', name: 'own_channel_kpi' },
//             { data: 'boundary_visit', name: 'boundary_visit' },
//             { data: 'komitmen_kpi_closing', name: 'komitmen_kpi_closing' },
//             { 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-spv-md').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 5, 
        ajax: {
            url: "{{ route('kpismd.getDataKPISpvMd') }}",
            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_apm', name: 'kode_apm' },
            { data: 'nama_apm', name: 'nama_apm' },
            { data: 'sasaran_alokasi', name: 'sasaran_alokasi' },
            { data: 'visit_dms_mforce', name: 'visit_dms_mforce' },
            { data: 'ao_general', name: 'ao_general' },
            { data: 'ao_own_channel', name: 'ao_own_channel' },
            { data: 'visit_web_survey', name: 'visit_web_survey' },
            { data: 'ao', name: 'ao' },
            { data: 'power_ordering', name: 'power_ordering' },
            { data: 'active_power', name: 'active_power' },
            { data: 'av_produk_posm', name: 'av_produk_posm' },
            { data: 'kelolosan_kpi_team', name: 'kelolosan_kpi_team' },
            { data: 'aktivasi_program', name: 'aktivasi_program' },
            { data: 'nao', name: 'nao' },
            { data: 'laporan', name: 'laporan' },
            { data: 'main_kpi', name: 'main_kpi' },
            { data: 'presentasi', name: 'presentasi' },
            { data: 'kpi', name: 'kpi' },
            { data: 'lolos_program', name: 'lolos_program' },
            { data: 'ao_type_11', name: 'ao_type_11' },
            { data: 'survey_stok_spbu', name: 'survey_stok_spbu' },
            { data: 'own_channel_kpi', name: 'own_channel_kpi' },
            { data: 'boundary_visit', name: 'boundary_visit' },
            { data: 'komitmen_kpi_closing', name: 'komitmen_kpi_closing' },
            { 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