@extends('layouts.master')
@section('content')
<div class="app-title">
    <div>
        <h1><i class="fa fa-th-list"></i> KPI SMD</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 SMD</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('kpismd.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_smd" 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-smd">
                        <thead class="table-warning">
                            <tr>
                                <th>NO.</th>
                                <th>BULAN</th>
                            	<th>TAHUN</th>
                                <th>ID SMD</th>
                                <th>NAMA SMD</th>
                                <th>REGION</th>
                                <th>TERRITORY</th>
                                <th>NIK</th>
                                <th>% VISIT</th>
                                <th>AO</th>
                                <th>AO GENERAL</th>
                                <th>POWER ORDERING</th>
                                <th>AO OWN CHANNEL</th>
                                <th>ACTIVE SCAN</th>
                                <th>AV CHECK STOK</th>
                                <th>NOO</th>
                                <th>NAO</th>
                                <th>AKTIVASI PROGRAM</th>
                                <th>BOUNDARY ABSENSI</th>
                                <th>KPI</th>
                                <th>AVERAGE CALL</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-smd').DataTable({
//         processing: true,
//         serverSide: true,
//         pageLength: 5, 
//         ajax: {
//             url: "{{ route('kpismd.getDataKPISmd') }}",
//             data: function (d) {
//                 d.tahun = $('#tahun').val(),
//                 d.bulan = $('#bulan').val(),
//                 d.search = $('input[type="search"]').val()
//             }
//         },
//         columns: [
//             { data: 'rownum', name: 'rownum'},
//             { data: 'bulan', name: 'bulan' },
//             { data: 'tahun', name: 'tahun' },
//             { data: 'id_smd', name: 'id_smd' },
//             { data: 'nama_smd', name: 'nama_smd' },
//             { data: 'region', name: 'region' },
//             { data: 'territory', name: 'territory' },
//             { data: 'nik', name: 'nik' },
//             { data: 'persen_visit', name: 'persen_visit' },
//             { data: 'ao', name: 'ao' },
//             { data: 'ao_general', name: 'ao_general' },
//             { data: 'power_ordering', name: 'power_ordering' },
//             { data: 'ao_own_channel', name: 'ao_own_channel' },
//             { data: 'active_scan', name: 'active_scan' },
//             { data: 'av_check_stok', name: 'av_check_stok' },
//             { data: 'noo', name: 'noo' },
//             { data: 'nao', name: 'nao' },
//             { data: 'aktivasi_program', name: 'aktivasi_program' },
//             { data: 'boundary_absensi', name: 'boundary_absensi' },
//             { data: 'kpi', name: 'kpi' },
//             { data: 'average_call', name: 'average_call' },
//             { 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-smd').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 5, 
        ajax: {
            url: "{{ route('kpismd.getDataKPISmd') }}",
            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_smd', name: 'id_smd' },
            { data: 'nama_smd', name: 'nama_smd' },
            { data: 'region', name: 'region' },
            { data: 'territory', name: 'territory' },
            { data: 'nik', name: 'nik' },
            { data: 'persen_visit', name: 'persen_visit' },
            { data: 'ao', name: 'ao' },
            { data: 'ao_general', name: 'ao_general' },
            { data: 'power_ordering', name: 'power_ordering' },
            { data: 'ao_own_channel', name: 'ao_own_channel' },
            { data: 'active_scan', name: 'active_scan' },
            { data: 'av_check_stok', name: 'av_check_stok' },
            { data: 'noo', name: 'noo' },
            { data: 'nao', name: 'nao' },
            { data: 'aktivasi_program', name: 'aktivasi_program' },
            { data: 'boundary_absensi', name: 'boundary_absensi' },
            { data: 'kpi', name: 'kpi' },
            { data: 'average_call', name: 'average_call' },
            { 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