@extends('layouts.contentLayoutMaster')

@section('title', 'الرئيسية')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    {{-- Page css files --}}
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/dashboard-ecommerce.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')

    <!-- Dashboard Ecommerce Starts -->
    <section class="dashboard-ecommerce" id="dashboard-ecommerce">


    @include('panels.configurationAlert')
        <div class="row">
        <select id="select_year_name" class="form-select" style="width: 15%;display: inline-block;float: left;margin: 10px;" aria-label="Default select example">
            @foreach($allYears as $yearRecord)
                <option value="{{$yearRecord->id}}" {{ $yearRecord->id == $year->id ? 'selected' : ''}}>{{$yearRecord->year_name}}</option>
            @endforeach
        </select>
            </div>
    <!-- Stats Horizontal Card -->
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/all_contracts.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;">جميع التعاقدات<p/>
                            <p class="home-page-section-text" style="color: #7367F0;">{{$totalContracts}}<p/>
                        </div>


                    </div>
                </div>
            </div>


            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/all_applications.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;">طلبات الالتحاق تحت المعالجة<p/>
                            <p class="home-page-section-text" style="color: #7367F0;">{{$applicationCount}}<p/>
                        </div>

                    </div>
                </div>
            </div>




            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/under_proccess.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;">طلبات التجديد تحت المعالجة<p/>
                            <p class="home-page-section-text" style="color: #00DDB1;">{{$renewApplicationCount}}<p/>
                        </div>

                    </div>
                </div>
            </div>


            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/contract_done.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;"> الطلبات المرفوضة<p/>
                            <p class="home-page-section-text" style="color: #408C35;">{{   $totalCanceledApps}}<p/>
                        </div>

                    </div>
                </div>
            </div>




            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/all_withdrawal.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;">طلبات الانسحاب<p/>
                            <p class="home-page-section-text" style="color: #FC1B1B;">{{$withdrawalAppCount }}<p/>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 col-6">
                <div class="card card-top">
                    <div class="card-header">
                        <div class="m-0">

                            <div class="avatar-content">
                                <img src="{{asset('assets/cancel_contract.svg')}}"/>
                            </div>
                        </div>
                        <div>
                            <p class="home-page-section-title" style="color: #2B2B2B;"> الغاء التعاقد<p/>
                            <p class="home-page-section-text" style="color: #FC1B1B;">{{$arrayStatus[3] ?? 0 }}<p/>
                        </div>

                    </div>
                </div>
            </div>

            {{--        <div class="col-lg-2 col-sm-4 col-12">--}}
            {{--            <div class="card">--}}
            {{--                <div class="card-header">--}}
            {{--                    <div class="m-0">--}}

            {{--                        <div class="avatar-content">--}}
            {{--                            <img src="{{asset('assets/finished_contract.svg')}}"/>--}}
            {{--                        </div>--}}
            {{--                    </div>--}}
            {{--                    <div>--}}
            {{--                        <p class="home-page-section-title" style="color: #2B2B2B;"> تعاقد منتهي<p/>--}}
            {{--                        <p class="home-page-section-text" style="color: #FC1B1B;">{{$arrayStatus[2] ?? 0 }}<p/>--}}
            {{--                    </div>--}}

            {{--                </div>--}}
            {{--            </div>--}}
            {{--        </div>--}}


        </div>
        <!--/ Stats Horizontal Card -->
        <div class="row match-height">
            <!-- student numbers at departments Report Card -->
            <div class="col-lg-12 col-12">
                <div class="card card-revenue-budget">
                    <div class="row mx-0">
                        <div class="col-md-12 col-12 revenue-report-wrapper">
                            <div class="mb-3">
                                <div class="chart_title">اعداد الطلاب ف الاقسام</div>
                                <div class="chart_sub_title">{{$yearName}}</div>
                                <div id="student_number_bar_chart">
                                    <canvas class="student_number_bar_chart chartjs" data-height="270" ></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ student numbers at departments -->
        </div>



        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="card" >
                    <div class="card-header d-flex justify-content-center align-items-center">
                        <h4 class="chart_title">اجمالي نسبه التحصيل شامل التعاقدات والمديونيات</h4>
                    </div>
                    <div class="card-body p-0">
                        <div id="total_paid_amount_chart" class="my-2 d-flex justify-content-center align-items-center"></div>

                        <div class="card-header border-bottom-2 d-flex justify-content-center align-items-center">
                            <h4 class="chart_sub_title">اجمالي التحصيل {{ $totalFees?'%'.round(($totalPaid / $totalFees) * 100,2):'' }}</h4>
                        </div>

                        <div class="row border-top text-center mx-0">
                            <div class="card card-browser-states">
                                <div class="card-header justify-content-between align-items-center">
                                    <div>
                                        <dev class="bold_chart_title">نسب التحصيل في الاقسام شامل التعاقدات والمديونيات {{$yearName}}</dev>
                                    </div>
                                    {{--                            <div class="dropdown chart-dropdown">--}}
                                    {{--                                <i data-feather="more-vertical" class="font-medium-3 cursor-pointer" data-bs-toggle="dropdown"></i>--}}
                                    {{--                                <div class="dropdown-menu dropdown-menu-end">--}}
                                    {{--                                    <a class="dropdown-item" href="#">Last 28 Days</a>--}}
                                    {{--                                    <a class="dropdown-item" href="#">Last Month</a>--}}
                                    {{--                                    <a class="dropdown-item" href="#">Last Year</a>--}}
                                    {{--                                </div>--}}
                                    {{--                            </div>--}}
                                </div>
                                <div class="card-body">
                                    <div class="row">


                                                                                                                            @foreach(json_decode($arrGenderName) as $key=>$gender)
                                            <div class="col-xl-6 col-md-6  col-sm-12 col-12 mb-3 mb-xl-0">
                                                <div class="d-flex flex-row align-content-between d-flex-custom">
                                                    <div class="my-auto">
                                                        <p class="chart_title mb-0">{{$gender}}</p>
                                                        <p class="chart_sub_title">{{$arrTotalPercentageArray[$key] }} % </p>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <div id="{{$arrClasses[$i >21 ? ($i % 7) : $i]}}" data-key="{{$key}}" data-value="{{$arrTotalPercentageArray[$key]}}" class="state-chart"></div>
                                                                                                            </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Browser States Card -->
            <div class="col-lg-8 col-md-8 col-12">

                <div class="row match-height" style="height: 48%;">
                    <div class="card card-tiny-line-stats" style="height: 100%;">
                        <div class="card-body pb-50">
                            <div class="align-content-between justify-content-between">
                                <p class="bold_chart_title" style="display: inline-block;">حركه الصندوق للعام الحالي</p>
                                <select id="gender_name" class="form-select" style="width: 30%;display: inline-block;float: left;" aria-label="Default select example">
                                    <option value="total">كل الاقسام</option>
                                    @foreach(json_decode($arrGenderNameValues) as $name)
                                        <option value="{{$name}}">{{$name}}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div id="payment-data-for-current-year" style="height: 400px;"></div>
                        </div>
                    </div>

                </div>


                <div class="row match-height" style="height: 3%;"></div>

                <div class="row match-height" style="height: 48%;">
                    <div class="card">
                        <div class="card-header">


                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="chart_title">حالات التعاقدات</div>
                                <div class="chart_sub_title">{{$yearName}}</div>
                                <ul>
{{--                                    <li>--}}
{{--                                        <div class="chart_title"><span style="color: #00DDB1;margin: 2px 5px;">{{'  %  '.(isset($arrayStatus[0])? round(($arrayStatus[0] / $totalContracts) * 100,2) : 0) }}</span> انتظار مبلغ السداد </div>--}}
{{--                                    </li>--}}
                                    <li>
                                        <div class="chart_title"><span style="color: #7367F0;margin: 2px 5px;">{{'  %  '.(isset($arrayStatus[1])? round(($arrayStatus[1] / $totalContracts) * 100,2) : 0) }}</span> تم التعاقد </div>
                                    </li>
                                    <li>
                                        <div class="chart_title"><span style="color: #FD6060;margin: 2px 5px;">{{'  %  '.(isset($arrayStatus[2])? round(($arrayStatus[2] / $totalContracts) * 100,2) : 0) }}</span> انتهاء التعاقد  </div>
                                    </li>
                                    <li>
                                        <div class="chart_title"><span style="color: #C8B05B;margin: 2px 5px;">{{'  %  '.(isset($arrayStatus[3])? round(($arrayStatus[3] / $totalContracts) * 100,2) : 0) }}</span> الغاء التعاقد </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12">
                                <div class="align-content-end align-items-end justify-content-end">
                                    <div id="payment_status_chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--/ Browser States Card -->
        </div>

        <!-- <div style="margin: 10px;padding: 10px;"></div> -->

        <div class="row">
            <div class="col-lg-4 col-md-4 col-12 mb-2">
                <div class="card" style="height: 100%;">
                    <div class="mb-3 card-header">
                        <div class="chart_title">خطط السداد</div>
                        <div class="chart_sub_title">{{$yearName}}</div>
                    </div>
                    <div class="card-body p-0">
                        <div id="pay_plans_radial_bar" class="my-2 d-flex justify-content-center align-items-center"></div>

                    </div>
                </div>
            </div>


            <div class="col-lg-8 col-md-8 col-12 mb-2">
                <div class="card card-revenue-budget" style="height: 100%;">
                    <div class="row mx-0">
                        <div class="col-md-12 col-12 revenue-report-wrapper">
                            <div class="mb-3">
                                <div class="chart_title">خطط السداد</div>
                                <div class="chart_sub_title">{{$yearName}}</div>
                                <div id="plan_data_bar_chart">
                                    <div class="row">