@extends('user.layouts.app')
@section('breadcrumb-first', $breadcrumb->first)
@section('breadcrumb-second', $breadcrumb->second)
@section('content')
<div class="row">
	<div class="col-lg-12">        
        @include('user.deposit.filter')
        <div class="row">
            <div class="col-lg-3">
                <div class="card stats-widget card m-b-30">
                    <div class="card-body">
                        <div class="float-left">
                            <span class="label label-warning mb-3">Total</span>
                            <h5 class="mt-2">
                                <div id="report_total">
                                    Rp {{ number_format($total['total'],0,',','.') }} ({{ number_format($total['count'],0,',','.') }})
                                </div>
                            </h5>
                        </div>
                        <div class="float-right">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-custom">
                                    <i class="mdi mdi-credit-card-outline"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card stats-widget card m-b-30">
                    <div class="card-body">
                        <div class="float-left">
                            <span class="label label-warning mb-3">Tertunda</span>
                            <h5 class="mt-2">
                                <div id="report_pending">
                                    Rp {{ number_format($pending['total'],0,',','.') }} ({{ number_format($pending['count'],0,',','.') }})
                                </div>
                            </h5>
                        </div>
                        <div class="float-right">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-custom">
                                    <i class="mdi mdi-credit-card-outline"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card stats-widget card m-b-30">
                    <div class="card-body">
                        <div class="float-left">
                            <span class="label label-warning mb-3">Dibatalkan</span>
                            <h5 class="mt-2">
                                <div id="report_canceled">
                                    Rp {{ number_format($canceled['total'],0,',','.') }} ({{ number_format($canceled['count'],0,',','.') }})
                                </div>
                            </h5>
                        </div>
                        <div class="float-right">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-custom">
                                    <i class="mdi mdi-credit-card-outline"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="card stats-widget card m-b-30">
                    <div class="card-body">
                        <div class="float-left">
                            <span class="label label-warning mb-3">Berhasil</span>
                            <h5 class="mt-2">
                                <div id="report_success">
                                    Rp {{ number_format($success['total'],0,',','.') }} ({{ number_format($success['count'],0,',','.') }})
                                </div>
                            </h5>
                        </div>
                        <div class="float-right">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-custom">
                                    <i class="mdi mdi-credit-card-outline"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card card-custom">
            <div class="card-body">
                <div class="table-responsive">
                    {!! $dataTable->table(['class' => 'table table-striped table-borderless table-hover mb-0'], false) !!}
                </div>
			</div>
		</div>
	</div>
</div>
{!! $dataTable->scripts() !!}
<script src="{{ url('assets/js/snap.js') }}" data-client-key="{{ website_config('midtrans_payment')->client_key }}"></script>
<script>
	$(document).ready(function () {
        document.getElementById("data-table").children[0].className = "thead-light";
        $('#filter_form').on('submit', function(element) {
            element.preventDefault();
            getReport()
            $('#preloader').fadeIn('slow');
            $.when(window.LaravelDataTables["data-table"].page.len($('#filter_row').val()).draw()).done(function() {
                $('#preloader').fadeOut('slow');
            });
        });
        $('#filter_form').on('reset', function(element) {
            $('[data-toggle="select2"], select, input').val(null).trigger('change');
            $('#filter_row').val('10').trigger('change');
            getReport()
            $('#preloader').fadeIn('slow');
            $.when(window.LaravelDataTables["data-table"].page.len('10').draw()).done(function() {
                $('#preloader').fadeOut('slow');
            });
        });
        function getReport() {
            $.ajax({
                type: "GET",
                url: "{{ url('deposit/report') }}",
                data: {
                    start_date : $('#filter_start_date').val(),
                    end_date   : $('#filter_end_date').val(),
                    method     : $('#filter_method').val(),
                    status     : $('#filter_status').val(),
                    search     : $('#search').val(),
                },
                dataType: "json",
                success: function(response) {
                    $('#report_total').html(response.total);
                    $('#report_pending').html(response.pending);
                    $('#report_canceled').html(response.canceled);
                    $('#report_success').html(response.success);
                }, error: function() {
                    swal.fire("Gagal!", "Terjadi kesalahan.", "error");
                }
            });
        }
    });
</script>
@endsection