@extends('layouts.backapp')

@section('content')
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-line-chart"></i>
            </span>
            <h3 class="kt-portlet__head-title">
                Laporan Performa SA
            </h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <div class="kt-portlet__head-actions mt-4">
                    <form action="{{ route('report.transaction_sa') }}" method="get">
                        <div class="form-group row">
                            <div class="col-lg-2">
                                <label class="">Sa:</label>
                                <select name="sa" id="sa" class="form-control">
                                    <option value="all">Semua Sa</option>
                                    @foreach ($sa_datas as $sa_data)
                                    <option @if($sa_data->id == $sa) selected @endif value="{{ $sa_data->id }}">{{ $sa_data->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-4">
                                <label class="">Dealer:</label>
                                <select name="dealer" id="dealer" class="form-control">
                                    @foreach ($dealer_datas as $dealer_data)
                                    <option @if($dealer_data->id == $dealer) selected @endif value="{{ $dealer_data->id }}">{{ $dealer_data->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <label class="">Bulan:</label>
                                <select name="month" id="month" class="form-control">
                                    <option value="01" @if($month == '01') selected @endif>Januari</option>
                                    <option value="02" @if($month == '02') selected @endif>Februari</option>
                                    <option value="03" @if($month == '03') selected @endif>Maret</option>
                                    <option value="04" @if($month == '04') selected @endif>April</option>
                                    <option value="05" @if($month == '05') selected @endif>Mei</option>
                                    <option value="06" @if($month == '06') selected @endif>Juni</option>
                                    <option value="07" @if($month == '07') selected @endif>Juli</option>
                                    <option value="08" @if($month == '08') selected @endif>Agustus</option>
                                    <option value="09" @if($month == '09') selected @endif>September</option>
                                    <option value="10" @if($month == '10') selected @endif>Oktober</option>
                                    <option value="11" @if($month == '11') selected @endif>November</option>
                                    <option value="12" @if($month == '12') selected @endif>Desember</option>
                                </select>
                            </div>
                            <div class="col-lg-2 col-12">
                                <label for="year">Tahun</label>
                                <input type="number" class="form-control" name="year" id="year" value="{{ $year }}">
                            </div>
                            <div class="col-lg-1">
                                <br>
                                <button class="btn mt-2 btn-primary">Cari</button>
                            </div>
                            <div class="col-lg-1">
                                <br>
                                <button type="button" id="export" class="btn btn-success mt-2">Export</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="kt-portlet__body">
        <style>
            .nav-link-tab {
                font-weight: bold !important;
            }

            .nav-link-tab.active {
                font-weight: normal !important;
            }
        </style>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
            </li>
            <li class="nav-item">
                <a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
            </li>
        </ul>       

        <div class="tab-content" id="data">
            <div class="kt-portlet__body" style=" display: flex; justify-content: center; align-items: center;" id="spinner-data">
                <div class="card card-body" style="width:200px;">
                    <span class="kt-spinner kt-spinner--md kt-spinner--info kt-spinner--center mt-3"></span><br>
                    <h5 class="mt-2 text-center">Loading Data... </h5>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
@endsection

@section('javascripts')
<script src="{{ url('js/pages/doublescroll.js') }}" type="text/javascript"></script>
<script>
    $.ajax({
        url: '{{ $ajax_url }}',
        type: 'GET',
        beforeSend: function(e){
            $('#spinner-data').show();
        },
        success: function(res) {
            $("#data").html(res)
        },
        complete: function(){
            $('#spinner-data').hide();
        },
    })

    $("#export").click(function() {
        let data = {
            month       : $('select[name="month"]').val(),
            dealer      : $('select[name="dealer"]').val(),
            sa          : $('select[name="sa"]').val()
        }

        var url = '{{ route("report.transaction_sa.export") }}?' + $.param(data)
        window.location = url;
    })
</script>
@endsection