@section("page_style")
    <link rel="stylesheet" type="text/css" href="{{ url('dist/assets/plugins/custom/datatables/datatables.bundle.css') }}">
    <link href="{{ url('css/select2.min.css') }}" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="{{ url('css/mdb/mdb.css') }}">

    <style type="text/css">
        .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
            background-color: #00FFFF;
        }

        .select2-container .select2-selection--single {
            height: calc(1.5em + 1.3rem + 2px);
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 20px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px;
        }
    </style>
@endsection

<div class="row">
    <div class="col-lg-12 col-xxl-12">
        <div class="card card-custom card-stretch card-stretch-half gutter-b">
            <div class="loaderParent" style="display: none;">
                <div class="loaderDashboard"></div>
            </div>
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Transactions</span>
                </h3>
                <div class="row justify-content-end wd-50">
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-country-year-filter" id="txn-country-year-filter" placeholder="Year" multiple>
                            @foreach(range(date('Y'), 2020) as $y)
                                <option value="{{$y}}" @if($y == date('Y')) {{'selected'}} @endif>{{$y}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-filter" id="txn-filter">
                            <option value="1">This Week</option>
                            <option value="2">This Month</option>
                            <option value="3">Last Week</option>
                            <option value="4">Last Month</option>
                            <option value="7" selected>Weekly</option>
                            <option value="5">Monthly</option>
                            <option value="6">Yearly</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-country-filter" id="txn-country-filter">
                            <option value="">All</option>
                            @foreach($currencyData as $key => $item)
                                <option value="{{$item->country_code.'_'.$item->currency_code}}">{{$item->country_name.' - '.$item->currency_code}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start dash-filter">
                    <span class="card-label text-dark">Direct Deposits : <span class="totalDdTxns font-weight-bolder">0</span> </span>
                    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                    <span class="card-label text-dark">Cash Pickups : <span class="totalCpTxns font-weight-bolder">0</span> </span>
                    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
                    <span class="card-label text-dark">Sent : <span class="totalSentTxns font-weight-bolder">0</span> </span>
                </h3>
            </div>
            <div class="row">
                <div class="col-4">
                    <canvas id="lineChart"></canvas>
                </div>
                <div class="col-4">
                    <canvas id="lineChart2"></canvas>
                </div>
                <div class="col-4">
                    <canvas id="lineChart3"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-xxl-12">
        <div class="card card-custom card-stretch card-stretch-half gutter-b">
            <div class="loaderParent2" style="display: none;">
                <div class="loaderDashboard2"></div>
            </div>
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Amount</span>
                </h3>
                <div class="row justify-content-end wd-50">
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-amount-year-filter" id="txn-amount-year-filter" placeholder="Year" multiple>
                            @foreach(range(date('Y'), 2020) as $y)
                                <option value="{{$y}}" @if($y == date('Y')) {{'selected'}} @endif>{{$y}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-amount-filter" id="txn-amount-filter">
                            <option value="1">This Week</option>
                            <option value="2">This Month</option>
                            <option value="3">Last Week</option>
                            <option value="4">Last Month</option>
                            <option value="7" selected>Weekly</option>
                            <option value="5">Monthly</option>
                            <option value="6">Yearly</option>
                        </select>
                    </div>
                    <div class="form-group col-md-4">
                        <select class="form-control" name="txn-country-amount-filter" id="txn-country-amount-filter">
                            @foreach($currencyData as $key => $item)
                                <option value="{{$item->country_code.'_'.$item->currency_code}}" @if($item->currency_code == "GNF") {{'selected'}} @endif>{{$item->country_name.' - '.$item->currency_code}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-header border-0 pt-5">
                <h3 class="card-title align-items-start dash-filter">
                      <span class="card-label text-dark">Direct Deposits : <span class="totalDdAmount font-weight-bolder">0</span> </span>
                    <span class="card-label text-dark">Cash Pickups : <span class="totalCpAmount font-weight-bolder">0</span> </span>
                    <span class="card-label text-dark">Sent : <span class="totalSentAmount font-weight-bolder">0</span> </span>
                </h3>
            </div>
            <div class="row">
                <div class="col-4">
                    <canvas id="lineChart4"></canvas>
                </div>
                <div class="col-4">
                    <canvas id="lineChart5"></canvas>
                </div>
                <div class="col-4">
                    <canvas id="lineChart6"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-xxl-12 order-1 order-xxl-12">
        <div class="card card-custom card-stretch gutter-b">
            <div class="loaderParent1" style="display: none;">
                <div class="loaderDashboard1"></div>
            </div>
            <div class="card-header border-0">
                <h3 class="card-title font-weight-bolder text-dark">Users : <span class="totalUsers">0</span> </h3>
            </div>
            <div class="card-body">
                <div class="row justify-content-end">
                    <div class="form-group col-md-3">
                        <select class="form-control" name="users-year-filter" id="users-year-filter" placeholder="Year" multiple>
                            @foreach(range(date('Y'), 2020) as $y)
                                <option value="{{$y}}" @if($y == date('Y') || $y == (date('Y') - 1)) {{'selected'}} @endif>{{$y}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <select class="form-control" name="users-filter" id="users-filter">
                            <option value="1">This Week</option>
                            <option value="2">This Month</option>
                            <option value="3">Last Week</option>
                            <option value="4">Last Month</option>
                            <option value="7" selected>Weekly</option>
                            <option value="5">Monthly</option>
                            <option value="6">Yearly</option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <select class="form-control" name="txn-country-users-filter" id="txn-country-users-filter">
                            <option value="">All</option>
                            @foreach($usersCountries as $key => $item)
                                <option value="{{$key}}">{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <select class="form-control" name="txn-users-status-filter" id="txn-users-status-filter">
                            <option value="">All</option>
                            @foreach(config('constants.user_status') as $item)
                                <option value="{{$item}}" @if($item == 'Active') {{'selected'}} @endif>{{$item}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div id="kt_charts_widget_2_chart" class="card-rounded-bottom" data-color="primary" style="height: 150px"></div>
            </div>
        </div>
    </div>
</div>

@section("page_vendors")
    <script type="text/javascript" src="{{ url('js/popper.min.js') }}"></script>
    <script src="{{ url('js/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ url('js/mdb.js') }}"></script>
    <script type="text/javascript" src="{{ url('js/dashboard_analytics.js') }}"></script>
    <script src="{{ url('dist/assets/js/pages/widgets.js') }}"></script>
@endsection