@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('css')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/dataTables.jqueryui.min.css">
@endsection
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3>Performance List</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                @include('pages.au_point.breadcrumb', ['active' => 'Performance List'])
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <div class="container">
                                <div class="row">
                                    <h2>History of Uploaded File</h2>
                                </div>
                            </div>                           
                            <div class="clearfix"></div>                            
                        </div>   
                        <div class="x_content">
                            <input value="{{count($program)>0?$program[0]->id:0}}" id="program" name="program" class="hidden" readonly/>
                            @foreach($program as $k => $v)
                                <button id="{{$v->id}}" class="@if($v->id == 1) btn btn-primary @else btn btn-default @endif">{{$v->name}}</button>  
                            @endforeach
                            <table id="performance_table" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="20%">Date</th>                                        
                                        <th class="text-center" width="30%">File Name</th>
                                        <th class="text-center" width="10%">Month</th>
                                        <th class="text-center" width="30%">Uploaded By</th>
                                        <th class="text-center" width="10%">Merchant Reported</th>                                        
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript">
    var error = "{{$error}}";
    if(error) alert(error);
     $(document).ready(function() {
        var dataTable = $('#performance_table').DataTable( {
        processing: true,
        serverSide: true,
        stateSave: true,
        lengthMenu: [10, 25, 50, 100],
        oLanguage: {
            sSearch: "search by file name"
        },
        search: {
            return: true
        },
        ajax: {
            url: web_url + '/point_administrator/performance_list/datatable',
            type: 'POST',
            beforeSend: function (req) {
                req.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
            },
            data: function ( d ) {
                d.program = $("#program").val();
            }
        },
        columns: [
            { data: 'created_at', name: 'created_at', orderable: true, searchable: false },
            { data: 'file_name', name: 'file_name', orderable: false, searchable: true },
            { data: 'month', name: 'month', orderable: false, searchable: false,
                render: function(data) {
                    var  months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "Desember"];
                    return months[data-1];
                }
            },
            { data: 'name', name: 'name', orderable: false, searchable: false },
            { data: 'merchant_reported', name: 'merchant_reported', orderable: false, searchable: false }
        ]});

        $("#1").click(function() {
            $("#program").val(1);
            $(this).attr("class", "btn btn-primary");
            $("#2").attr("class", "btn btn-default");
            $("#3").attr("class", "btn btn-default");
            dataTable.ajax.reload(null, true);
            
        });
        $("#2").click(function() {
            $("#program").val(2);
            $("#1").attr("class", "btn btn-default");
            $(this).attr("class", "btn btn-primary");
            $("#3").attr("class", "btn btn-default");
            dataTable.ajax.reload(null, true);
        });
        $("#3").click(function() {
            $("#program").val(3);
            $("#1").attr("class", "btn btn-default");
            $("#2").attr("class", "btn btn-default");
            $(this).attr("class", "btn btn-primary");
            dataTable.ajax.reload(null, true);
        });

    });
    
</script>
@endsection