@extends('layouts.app')

@section('title', 'Pendaftaran')
@section('pendaftaran', 'm-menu__item--active')

@section('css')
    @role('super_admin')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
    @endrole
@endsection

@section('content')
    @role('super_admin')
        <div class="row">
            <div class="col-lg-12">
                <div class="m-stack m-stack--ver m-stack--desktop m-stack--demo">
                    @php
                        $total = App\User::whereHas('roles', function($q) { $q->where('name', 'rakyat')->orWhere('name', 'organisasi'); })->get();

                        $sah = App\User::where('email_verified_at', '!=', NULL)
                            ->whereHas('roles', function($q) { $q->where('name', 'rakyat')->orWhere('name', 'organisasi'); })->get();

                        $tidak_sah = App\User::where('email_verified_at', '=', NULL)
                            ->whereHas('roles', function($q) { $q->where('name', 'rakyat')->orWhere('name', 'organisasi'); })->get();
                    @endphp
                    <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #716aca; color: white">
                        <div class="mb-2">
                            <i class="flaticon-interface-2" style="font-size: 40px"></i>
                        </div>
                        <h4>Jumlah Pendaftaran</h4>
                        <h3>{{ number_format(count($total)) }}</h3>
                    </div>
                    <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #34bfa3; color: white">
                        <div class="mb-2">
                            <i class="la la-check-circle" style="font-size: 40px"></i>
                        </div>
                        <h4>Pendaftaran Sah</h4>
                        <h3>{{ number_format(count($sah)) }}</h3>
                    </div>
                    <div class="m-stack__item m-stack__item--center m-stack__item--middle" style="background-color: #f4516c; color: white">
                        <div class="mb-2">
                            <i class="flaticon-cancel" style="font-size: 40px"></i>
                        </div>
                        <h4>Pendaftaran Tidak Sah</h4>
                        <h3>{{ number_format(count($tidak_sah)) }}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">

                <div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    Senarai Pendaftaran
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="datatable">
                            <table class="table datatable table-striped" id="permohonan-table">
                                <thead>
                                    <tr>
                                        <th>Id</th>
                                        <th>No. K/P</th>
                                        <th>Pemohon</th>
                                        <th>Email</th>
                                        <th>Tarikh Pendaftaran</th>
                                        <th>Status</th>
                                        <th width="10%"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    @endrole
@endsection

@section('js')
    @role('super_admin')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

        <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>

        <script>
            var e,
                DataTable = function() {
                    var t = function() {
                        e = $('#permohonan-table').DataTable({
                            processing: true,
                            serverSide: true,
                            pageLength: 15,
                            lengthMenu: [[15, 30, 50, 100], [15, 30, 50, 100]],
                            ajax: '{{ url('getPendaftaran') }}',
                            columns: [
                                { data: 'id', name: 'id' },
                                { data: 'username', name: 'users.username' },
                                { data: 'name', name: 'users.name' },
                                { data: 'email', name: 'users.email' },
                                { data: 'created_at', name: 'users.created_at' },
                                { data: 'email_verified_at', name: 'email_verified_at' },
                                { data: 'action', name: 'action', orderable: false, searchable: false, printable: false }
                            ],
                            dom: 'lBfrtip',
                            buttons: [{
                                    extend: 'print',
                                    footer: true,
                                    exportOptions: {
                                        columns: [0,1,2,3,4,5]
                                    }
                                },{
                                    extend: 'copyHtml5',
                                    footer: true,
                                    exportOptions: {
                                        columns: [0,1,2,3,4,5]
                                    }
                                },{
                                    extend: 'excelHtml5',
                                    footer: true,
                                    exportOptions: {
                                        columns: [0,1,2,3,4,5]
                                    }
                                },{
                                    extend: 'csvHtml5',
                                    footer: true,
                                    exportOptions: {
                                        columns: [0,1,2,3,4,5]
                                    }
                                },{
                                    extend: 'pdfHtml5',
                                    footer: true,
                                    exportOptions: {
                                        columns: [0,1,2,3,4,5]
                                    }
                                }
                            ]
                        });
                    };
                    return {
                        init: function() {
                            t();
                        }
                    }
                }();

            $(document).ready(function() { 
                DataTable.init();
                $('.oleh_admin, maklumat_pasangan, .maklumat_jmb').hide();
            }); 

            $(function() {
                $(window).resize(function() {
                    e.destroy();
                    DataTable.init();
                });
            });
        </script>
    @endrole
@endsection