@extends('layouts.app')
@section('styles')
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.2/dist/flowbite.min.css" />

<style>
    nav img {
        max-width: 55px;
    }

    .home-custom {
        padding-left: 30px;
        padding-right: 30px;
    }

    .card {
        min-height: 500px;
    }

    .main-container {
        margin-top: 75px;
    }

    table th {
        text-align: center;
    }

    #studentsTable_filter label {
        word-spacing: 20px;
    }

    #studentsTable_filter input {
        border-radius: 6px;
        max-height: 35px;
    }

    .custom-filter .dropdown {
        max-width: 150px;
    }

    .custom-filter .dropdown-toggle {
        color: #000000;
        border: none;
    }

    .custom-filter .dropdown-toggle:hover {
        background-color: rgba(0, 0, 0, 0.1)
    }

    .custom-filter .dropdown-toggle:focus,
    .custom-filter .dropdown-toggle:active {
        background-color: rgb(166 27 48 / 83%);
        color: #ffffff;
    }

    .custom-filter .dropdown-toggle:focus {
        border: #ffffff;
    }

    .bank-logo{
        display: flex;
        justify-content: center;
    }
    .bank-logo img{
        max-height: 52px;
    }
</style>

@endsection

@section('content')
<div class="container main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">

            <div class="card" id="content">
                <!-- this is where data loaded-->
                @yield('card-content')
                <div class="card-header">{{ __('home.dashboard') }}</div>


                <div class="card-body min-h-screen">
                    @if (session('status'))
                    <div class="alert alert-success" role="alert">
                        {{ session('status') }}
                    </div>
                    @endif

                    <div class="min-w-screen  bg-white flex items-center justify-center px-5 py-5">
                        <div class="row">
                        @if ( auth()->user()->hasRole('registrar') || auth()->user()->hasRole('admin'))
                            <div class="col-12">
                                <div class="-mx-2 md:flex">
                                    {{-- Students --}}
                                    <div class="w-full md:w-1/4 px-2">
                                        <div class="rounded-lg shadow-sm mb-4">
                                            <div
                                                class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                                <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                    <h4 class="text-bg-primary uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                        {{ __('home.students-number') }}
                                                    </h4>
                                                    <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-primary">
                                                        {{ $studentsNumber }}
                                                    </h3>
        
                                                    <h4 class="text-bg-primary uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                        <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                            {{ __('home.show-details') }}
                                                            <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                        </a>
                                                    </h4>
                                                    {{-- <p class="text-xs text-green-500 leading-tight">▲ 57.1%</p> --}}
                                                </div>
                                                <div class="absolute bottom-0 inset-x-0">
                                                    <canvas id="chart1" height="70"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    {{-- Registed Students --}}
                                    <div class="w-full md:w-1/4 px-2">
                                        <div class="rounded-lg shadow-sm mb-4">
                                            <div
                                                class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                                <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                    <h4 class="text-bg-success uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                        {{ __('home.registered-students') }}
                                                    </h4>
                                                    <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-success">
                                                        {{ $registerdStudents }}
                                                    </h3>
                                                    <h4 class="text-bg-success uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                        <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                            {{ __('home.show-details') }}
                                                            <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                        </a>
                                                    </h4>
                                                    {{-- <p class="text-xs text-red-500 leading-tight">▼ 42.8%</p> --}}
                                                </div>
                                                <div class="absolute bottom-0 inset-x-0">
                                                    <canvas id="chart2" height="70"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    {{-- Partially Registered Students --}}
                                    <div class="w-full md:w-1/4 px-2">
                                        <div class="rounded-lg shadow-sm mb-4">
                                            <div
                                                class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                                <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                    <h4 class="text-bg-warning uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                        {{ __('home.partially-registered-students') }}
                                                    </h4>
                                                    <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-warning">
                                                        {{ $partiallyRegisteredStudents }}
                                                    </h3>
                                                    <h4 class="text-bg-warning uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                        <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                            {{ __('home.show-details') }}
                                                            <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                        </a>
                                                    </h4>
                                                    {{-- <p class="text-xs text-green-500 leading-tight">▲ 8.2%</p> --}}
                                                </div>
                                                <div class="absolute bottom-0 inset-x-0">
                                                    <canvas id="chart3" height="70"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    {{-- Unregisted Students --}}
                                    <div class="w-full md:w-1/4 px-2">
                                        <div class="rounded-lg shadow-sm mb-4">
                                            <div
                                                class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                                <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                    <h4 class="text-bg-danger uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                        {{ __('home.unregistered-students') }}
                                                    </h4>
                                                    <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-danger">
                                                        {{ $unregisterdStudents }}
                                                    </h3>
                                                    <h4 class="text-bg-danger uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                        <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                            {{ __('home.show-details') }}
                                                            <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                        </a>
                                                    </h4>
                                                    {{-- <p class="text-xs text-green-500 leading-tight">▲ 8.2%</p> --}}
                                                </div>
                                                <div class="absolute bottom-0 inset-x-0">
                                                    <canvas id="chart3" height="70"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if (auth()->user()->hasRole(['financial', 'admin']) && auth()->user()->payment_identifier == null)
                        <div class="col-12">
                            <div class="-mx-2 md:flex">
                                {{-- Total Income --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <h4 class="text-bg-primary uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                    {{ __('home.total-income') }}
                                                </h4>
                                                <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-primary">
                                                    {{ number_format( $totalIncome ) }}
                                                </h3>

                                                <h4 class="text-bg-primary uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                    <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                        {{ __('home.show-details') }}
                                                        <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                                {{-- <p class="text-xs text-green-500 leading-tight">▲ 57.1%</p> --}}
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart1" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Total Payments --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <h4 class="text-bg-success uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                    {{ __('home.total-paid') }}
                                                </h4>
                                                <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-success">
                                                    {{ number_format( $totalPaid ) }}
                                                </h3>
                                                <h4 class="text-bg-success uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                    <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                        {{ __('home.show-details') }}
                                                        <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                                {{-- <p class="text-xs text-red-500 leading-tight">▼ 42.8%</p> --}}
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Total Fees --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <h4 class="text-bg-warning uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                    {{ __('home.total-amount') }}
                                                </h4>
                                                <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-warning">
                                                    {{ number_format( $totalAmount ) }}
                                                </h3>
                                                <h4 class="text-bg-warning uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                    <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                        {{ __('home.show-details') }}
                                                        <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                                {{-- <p class="text-xs text-green-500 leading-tight">▲ 8.2%</p> --}}
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart3" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Total Unpaid payments --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <h4 class="text-bg-danger uppercase text-gray-500 leading-tight text-xl p-1 rounded-2">
                                                    {{ __('home.total-unpaid') }}
                                                </h4>
                                                <h3 class="text-3xl text-gray-700 font-semibold leading-tight my-3 text-danger">
                                                    {{ number_format( $totalUnpaid ) }}
                                                </h3>
                                                <h4 class="text-bg-danger uppercase text-gray-500 leading-tight text-xl p-1 rounded-2 flex justify-between px-4">
                                                    <a href="#" onclick="alert('سيتم تفعيله قريباً');">
                                                        {{ __('home.show-details') }}
                                                        <i class="bg-white fa fa-arrow-left p-1 rounded-circle text-black" aria-hidden="true"></i>
                                                    </a>
                                                </h4>
                                                {{-- <p class="text-xs text-green-500 leading-tight">▲ 8.2%</p> --}}
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart3" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="-mx-2 md:flex">
                                {{-- بنك الادخار --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <div class="bank-logo mb-2">
                                                    <img src="{{asset('img/banks/ssd-bank-logo.png')}}" alt="">
                                                </div>
                                                <h3 class="text-3xl text-black font-semibold leading-tight my-3 text-success" style="background-color: rgba(0,0,0,0.1);">
                                                    {{ $ssdBankRevenue ?? 0.0 }}
                                                </h3>
                                                <h4 class="text-black leading-tight text-xl p-1 rounded-2" style="background-color: rgba(14,197,235, 0.5);">
                                                    إيرادات بنك الإدخار
                                                </h4>
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- بنك المزارع --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <div class="bank-logo mb-2">
                                                    <img src="{{asset('img/banks/fcbsudan-logo.png')}}" alt="">
                                                </div>
                                                <h3 class="text-3xl text-black font-semibold leading-tight my-3 text-success" style="background-color: rgba(0,0,0,0.1);">
                                                    {{ isset($fcbSudanBankRevenue) ? $fcbSudanBankRevenue : 0.0 }}
                                                </h3>
                                                <h4 class="text-black leading-tight text-xl p-1 rounded-2" style="background-color: rgba(14,197,235, 0.5);">
                                                    إيرادات بنك المزارع
                                                </h4>
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- بنك النيل --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <div class="bank-logo mb-2">
                                                    <img src="{{asset('img/banks/nb-logo.jpeg')}}" alt="">
                                                </div>
                                                <h3 class="text-3xl text-black font-semibold leading-tight my-3 text-success" style="background-color: rgba(0,0,0,0.1);">
                                                    {{ isset($nbBankRevenue) ? $nbBankRevenue : 0.0 }}
                                                </h3>
                                                <h4 class="text-black leading-tight text-xl p-1 rounded-2" style="background-color: rgba(14,197,235, 0.5);">
                                                    إيرادات بنك النيل
                                                </h4>
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- بنك النيلين --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <div class="bank-logo mb-2">
                                                    <img src="{{asset('img/banks/2nb-logo.jpg')}}" alt="">
                                                </div>
                                                <h3 class="text-3xl text-black font-semibold leading-tight my-3 text-success" style="background-color: rgba(0,0,0,0.1);">
                                                    {{ isset($_2nbBankRevenue) ? $_2nbBankRevenue : 0.0 }}
                                                </h3>
                                                <h4 class="text-black leading-tight text-xl p-1 rounded-2" style="background-color: rgba(14,197,235, 0.5);">
                                                    إيرادات بنك النيلين
                                                </h4>
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- بنك النيلين --}}
                                <div class="w-full md:w-1/4 px-2">
                                    <div class="rounded-lg shadow-sm mb-4">
                                        <div
                                            class="rounded-lg bg-white shadow-lg md:shadow-xl relative overflow-hidden">
                                            <div class="px-3 pt-8 pb-10 text-center relative z-10">
                                                <div class="bank-logo mb-2">
                                                    <img src="{{asset('img/') . env('SYSTEM_LOGO')}}" alt="">
                                                </div>
                                                <h3 class="text-3xl text-black font-semibold leading-tight my-3 text-success" style="background-color: rgba(0,0,0,0.1);">
                                                    {{ isset($uofsfinancial) ? $uofsfinancial : 0.0 }}
                                                </h3>
                                                <h4 class="text-black leading-tight text-xl p-1 rounded-2" style="background-color: rgba(14,197,235, 0.5);">
                                                    إيرادات المحاسبين
                                                </h4>
                                            </div>
                                            <div class="absolute bottom-0 inset-x-0">
                                                <canvas id="chart2" height="70"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>


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

@section('scripts')
<script src="https://unpkg.com/flowbite@1.5.2/dist/flowbite.js"></script>

@endsection