@extends('layouts.admin.app')

@section('content')
    <script src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <main role="main" class="main-content">
        <div class="container-fluid">
            @if (session('sweet_alert_success'))
                <script>
                    swal({
                        title: "{{session('sweet_alert_success')}}",
                        icon: "success",
                        dangerMode: true
                    });
                </script>
            @elseif (session('sweet_alert_error'))
                <script>
                    swal({
                        title: "{{session('sweet_alert_error')}}",
                        icon: "error",
                        dangerMode: true
                    });
                </script>
            @endif
                        <div class="row justify-content-center mb-3">
                <div class="col-md-12">
                    <div class="mb-2 align-items-center">
                        <div class="card shadow">
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Total Choice Submission</p>
                                                        <span class="h3 mb-0">{{ $totalChoices }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Choice Submitted Today</p>
                                                        <span class="h3 mb-0">{{ $currentDate }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Total Payment Count</p>
                                                        <span class="h3 mb-0">{{ $totalPaymentCount }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Applicant Count: Unit A</p>
                                                        <span class="h3 mb-0">{{ $sceince_applicant_count }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Applicant Count: Unit B</p>
                                                        <span class="h3 mb-0">{{ $arts_applicant_count }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 mb-4">
                                        <div class="card shadow">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-3 text-center">
                                                    <span class="circle circle-sm bg-primary-light">
                                                        <i class="fe fe-16 fe-check-circle text-light mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col pr-0">
                                                        <p class="small mb-0">Applicant Count: Unit C</p>
                                                        <span class="h3 mb-0">{{ $commerce_applicant_count }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="col-md-12">
                    <div class="mb-2 align-items-center">
                        <div class="card shadow">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4 col-lg-3 mb-4">
                                        <div class="card shadow bg-primary bg-unit-a text-white">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-12 text-center">
                                                    <span class="circle circle-sm bg-light">
                                                        <i class="fe fe-16 fe-check-circle text-primary mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col-12 mt-1 text-center">
                                                        <p class="small text-light mb-0">Faculty of Engineering</p>
                                                        <span class="h3 mb-0 text-white">{{ $unit_a }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-3 mb-4">
                                        <div class="card shadow bg-primary bg-unit-b text-white">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-12 text-center">
                                                    <span class="circle circle-sm bg-light">
                                                        <i class="fe fe-16 fe-check-circle text-primary mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col-12 mt-1 text-center">
                                                        <p class="small text-light mb-0">Faculty of Life Science</p>
                                                        <span class="h3 mb-0 text-white">{{ $unit_b }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-3 mb-4">
                                        <div class="card shadow bg-primary bg-unit-c text-white">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-12 text-center">
                                                    <span class="circle circle-sm bg-light">
                                                        <i class="fe fe-16 fe-check-circle text-primary mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col-12 mt-1 text-center">
                                                        <p class="small text-light mb-0">Faculty of Science</p>
                                                        <span class="h3 mb-0 text-white">{{ $unit_c }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-3 mb-4">
                                        <div class="card shadow bg-primary bg-unit-d text-white">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-12 text-center">
                                                    <span class="circle circle-sm bg-light">
                                                        <i class="fe fe-16 fe-check-circle text-primary mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col-12 mt-1 text-center">
                                                        <p class="small text-light mb-0">Faculty of Social Science</p>
                                                        <span class="h3 mb-0 text-white">{{ $unit_d }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-lg-3 mb-4">
                                        <div class="card shadow bg-primary bg-unit-e text-white">
                                            <div class="card-body">
                                                <div class="row align-items-center">
                                                    <div class="col-12 text-center">
                                                    <span class="circle circle-sm bg-light">
                                                        <i class="fe fe-16 fe-check-circle text-primary mb-0"></i>
                                                    </span>
                                                    </div>
                                                    <div class="col-12 mt-1 text-center">
                                                        <p class="small text-light mb-0">Faculty of Business Studies</p>
                                                        <span class="h3 mb-0 text-white">{{ $unit_e }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mb-3">
                <div class="col-md-12">
                    <div class="mb-2">
                        <div class="card shadow">
                            <div class="card-body">
                                <div class="chartbox mr-4">
                                    {!! $data->latestChoiceChart->container() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('tablecss')
    <style>
        .bg-unit-a {
            background: #008FFB !important;
        }

        .bg-unit-b {
            background: #5e72e4 !important;
        }

        .bg-unit-c {
            background: #139877 !important;
        }

        .bg-unit-d {
            background: #ff6384 !important;
        }

        .bg-unit-e {
            background: #775dd0 !important;
        }
    </style>
@stop

@section('scripts')
    <script src="{{ \ArielMejiaDev\LarapexCharts\LarapexChart::cdn() }}"></script>
    {{ $data->latestChoiceChart->script() }}
@stop