@extends('layouts.app')

@section('title', 'Geting Started')

@push('style')
    <!-- CSS Libraries -->

    <!-- CSS Page -->
    {{-- Data Table --}}
    <link rel="stylesheet" href="{{ asset('extensions/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">
    <link rel="stylesheet" href="{{ asset('compiled/css/table-datatable-jquery.css') }}">
@endpush

@section('main')
    <div class="page-heading">
        <h3>Dashboard </h3>
    </div>
    <div class="page-content">
        <section class="row">
            <div class="col-12 ">
                <div class="row">
                    <div class="row mb-2">
                        <div class="col-5 d-flex">
                            <h5>Post Dana</h5>
                        </div>
                    </div>
                    @foreach ($postDanas as $postDana)
                        <div class="col-6 col-lg-3 col-md-6">
                            <div class="card">
                                <div class="card-body px-4 py-4-5">
                                    <div class="row text-center">
                                        <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                            <div class="stats-icon green mb-2">
                                                <i class="iconly-boldWallet"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                            <h6 class="text-muted font-semibold">{{ $postDana->name }}</h6>
                                            <h6 class="font-extrabold mb-0">
                                                {{ 'Rp' . number_format($postDana->nominal, 0, ',', '.') }}
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row">
                    <div class="row mb-2">
                        <div class="col-5 d-flex">
                            <h5>Data Daerah</h5>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row text-center">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                        <div class="stats-icon purple mb-2">
                                            <i class="iconly-boldUser"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Jumlah Bendahara</h6>
                                        <h6 class="font-extrabold mb-0">{{ $bendahara }}
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="card">
                            <div class="card-body px-4 py-4-5">
                                <div class="row text-center">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                        <div class="stats-icon blue mb-2">
                                            <i class="iconly-boldUser"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-muted font-semibold">Jumlah Anggota</h6>
                                        <h6 class="font-extrabold mb-0">{{ $anggota }}
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <h5>Setoran Bulan Ini </h5>
                        </div>
                        <div class="row">
                            <div class="col-6 col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon purple mb-2">
                                                    <i class="iconly-boldWallet"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Daerah</h6>
                                                <h6 class="font-extrabold mb-0">
                                                    {{ 'Rp' . number_format($nowDaerah, 0, ',', '.') }}
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon blue mb-2">
                                                    <i class="iconly-boldWallet"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Wilayah</h6>
                                                <h6 class="font-extrabold mb-0">
                                                    {{ 'Rp' . number_format($nowWilayah, 0, ',', '.') }}
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon green mb-2">
                                                    <i class="iconly-boldWallet"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Pusat</h6>
                                                <h6 class="font-extrabold mb-0">
                                                    {{ 'Rp' . number_format($nowPusat, 0, ',', '.') }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon red mb-2">
                                                    <i class="iconly-boldWallet"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Total</h6>
                                                <h6 class="font-extrabold mb-0">
                                                    {{ 'Rp' . number_format($nowTotal, 0, ',', '.') }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon green mb-2">
                                                    <i class="iconly-boldUser"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Iuran Sudah Setor</h6>
                                                <h6 class="font-extrabold mb-0">{{ $setoranBulanIni }}
                                                    <sup class="text-success">
                                                        {{ 'Rp' . number_format($totalSetoranBulanIni, 0, ',', '.') }}
                                                    </sup>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body px-4 py-4-5">
                                        <div class="row text-center">
                                            <div
                                                class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-center ">
                                                <div class="stats-icon red mb-2">
                                                    <i class="iconly-boldUser"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                                <h6 class="text-muted font-semibold">Iuran Belum Setor</h6>
                                                <h6 class="font-extrabold mb-0">{{ $belumSetoranBulanIni }}
                                                    <sup class="text-danger">
                                                        {{ 'Rp' . number_format($totalBelumSetoranBulanIni, 0, ',', '.') }}
                                                    </sup>
                                                </h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>Bendahara Belum Setoran</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="table-responsive">
                                        <table class="table table-borderless table-setoran" id="dataTable"
                                            width="100%">
                                            <thead>
                                                <tr style="text-align: center">
                                                    <th>No</th>
                                                    <th>Bendahara</th>
                                                    <th>Iuran</th>
                                                    <th>Nominal</th>
                                                </tr>
                                            </thead>
                                            <tbody class="text-nowrap">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>Data Iuran Anggota</h4>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="table-responsive">
                                        {{ $dataTable->table() }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('script')
    {{-- Library Jquery --}}
    <script src="{{ asset('extensions/jquery/jquery.min.js') }}"></script>
    {{-- Sweetalert2 --}}
    <script src="{{ asset('extensions/sweetalert2/sweetalert2.min.js') }}"></script>

    {{-- Library Data Table --}}
    <script src="{{ asset('extensions/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('extensions/datatables.net-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/datatables.js') }}"></script>

    {{-- Validation --}}
    <script src="{{ asset('extensions/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('static/js/pages/parsley.js') }}"></script>

    <!-- Yajra DataTables -->
    {{ $dataTable->scripts() }}

    <script>
        let tableObat = $('.table-setoran').DataTable({
            autowidth: false,
            processing: true,
            serverSide: true,
            parameters: [{
                searchDelay: 1000
            }],
            ajax: '{{ route('datatable.setoran.bendahara') }}',
            columns: [{
                data: 'DT_RowIndex',
                class: 'text-center',
                searchable: false
            }, {
                data: 'name',
                searchable: true,
                class: '',
                orderable: true
            }, {
                data: 'anggota_count',
                class: 'text-center',
                searchable: false,
                orderable: false
            }, {
                data: 'total_nominal',
                class: 'text-center',
                searchable: false,
                orderable: false
            }]
        });
    </script>

    {{-- Costom Alert --}}
    <script>
        const Swal2 = Swal.mixin({
            customClass: {
                input: 'form-control'
            }
        })

        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    </script>
@endpush