@extends('layouts.backapp')
@section('styles')
<style>
    .kt-spinner--info {
        width: 100%;
        /* height: 100%; */
    }
    /* .kt-spinner--info::before {
        width: 300px;
        height: 300px;
        top: 30%;left: 30%;
    } */
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-12">
        <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 Dealers
                    </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('dashboard') }}" method="get">
                                <div class="form-group row">
                                    <div class="col-lg-5 col-12">
                                        <label for="dealer">Dealer</label>
                                        <select name="dealer" id="dealer" class="form-control">
                                            <option value="all" @if($dealer == 'all') selected @endif>Semua Dealer</option>
                                            @foreach ($dealer_datas as $dealer_data)
                                            <option value="{{ $dealer_data->id }}" @if($dealer == $dealer_data->id) selected @endif>{{ $dealer_data->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-12">
                                        <label for="month">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 col-12">
                                        <br>
                                        <button class="btn btn-primary mt-2">Cari</button>
                                    </div>
                                    <div class="col-lg-1 col-12">
                                        <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" id="data" style="min-height: 400px;">
                <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>
</div>
@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()
        }

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