@extends('redesign.layouts.metronic.dashboard')

@section('title', 'Konto-Umsätze')

@section('documentTitle', 'Konto-Umsätze')

@if( $bankTransactions->count() )
    @section('overlay-style', 'display:block')
@endif

@section('styles-page')
    <link href="{{ asset('metronic/vendors/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('document')
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__head kt-portlet__head--lg">
            <div class="kt-portlet__head-label">
                <span class="kt-portlet__head-icon">
                    <i class="fas fa-university"></i>
                </span>
                <h3 class="kt-portlet__head-title">
                    Konto-Umsätze
                </h3>
            </div>
        </div>

        <div class="kt-portlet__body">
            @if( $bankTransactions->count() )

                <div class="mb-4">
                    <div class="form-group col-12 inputHolder">
                        <label for="couponSearchInput">Transaktion suche</label>
                        <div class="input-group">
                            <input type="search" class="form-control" id="bankTransactionsSearchInput" placeholder="Beginne zu suchen">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="button" id="bankTransactionsSearchReset">
                                    <i class="fas fa-ban"></i> Zurücksetzen
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="bankTransactionsTableHolder" class="d-none">
                    @include('redesign.back.metronic.operator.bank.pieces.table')
                </div>

            @else

                <div class="pt-5 pb-5 text-center">
                    <h2 class="mb-4">Noch keine Bankkonto Transaktionen.</h2>
                    <a class="btn btn-primary" href="{{ route('home') }}">
                        <i class="fas fa-tachometer-alt"></i> Zum Dashboard
                    </a>
                </div>

            @endif
        </div>
    </div>
@endsection

@section('scripts-page')
    @if( $bankTransactions->count() )
        <script src="{{ asset('metronic/vendors/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>

        <script>
            $(document).ready(function() {
                var dt = $('#bankTransactionsTable').DataTable({
                    order: [],
                    autoWidth: false,
                    dom: '<"col-12"t><"col-12"<"row"<"col-12 col-sm-6 col-xl-4 text-center text-sm-left"l><"col-12 col-sm-6 col-xl-4 text-center text-sm-right text-xl-center"i><"col-12 col-xl-4 text-right"p>>>',
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Alle']],
                    responsive: {
                        details: false,
                    },
                    language: {
                        url: '{{ asset('js/plugins/dataTables/i18n/German.json') }}',
                    }
                });

                $('#bankTransactionsSearchInput').on('change keyup', function () {
                    var s = $(this).val().trim();
                    s = s.replace(/\s/g, '');
                    dt.search(s).draw();
                });

                $('#bankTransactionsSearchReset').on('click', function () {
                    $('#bankTransactionsSearchInput').val('').change();
                });

                $('#bankTransactionsTableHolder').removeClass('d-none');

                var url = new URL(window.location.href);
                var s = url.searchParams.get('s');

                if (null !== s) {
                    $('#bankTransactionsSearchInput').val(s).change();
                }

                $('#overlay').hide();
            });
        </script>
    @endif
@endsection