@extends('layouts.admin')
@section('content')

<div class="container-fluid">

    <!-- Page Header -->
    <div class="page-header">
        <div>
            
            <h2 class="main-content-title tx-24 mg-b-5">{{ trans('home.welcome') . ' ' . auth()->user()->name() }}</h2>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/')}}">{{trans('home.admin')}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{trans('home.index')}}</li>
            </ol>
        </div>
    </div>
    <!-- End Page Header -->

    <!-- Row-->
     {{--<div class="row">
        <div class="col-sm-12 col-xl-12 col-lg-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div>
                        <h2 class="card-title mb-1"> {{trans('home.general_statistcs_of')}}</h2>
                        <!--<h6 class="card-title mb-1">{{$configration->app_name}} {{trans('home.statistcs')}}</h6>-->
                        <!--<p class="text-muted card-sub-title">{{trans('home.general_statistcs_of')}} {{$configration->app_name}}</p>-->
                    </div>
                </div>
            </div>
        </div>
    </div>--}}
    @can('role')
        <div class="row">
        
            <div class="col-md-6">
			     
				<div class="card custom-card">
				    <div class="card-header"> <div class="card-title">   مستخدمين النظام   </div> </div>
					<div class="card-body text-center">
						 <div id="project-analysis"></div>
					</div>
				</div>
				 
			</div>
            <div class="col-md-6">
			     
				<div class="card custom-card">
					<div class="card-body text-center">
	                   <div class="card-header"> <div class="card-title">      العملاء بالتصنيف     </div> </div>
                       <div id="leads-channels"></div>
					</div>
				</div>
				 
			</div>
            <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{route('users.index')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
							    <i class="fas fa-users"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total Users')}}</p>
							<h3 class="headCardNum">{{$users->count()}}</h3>
						</div>
					</div>
				</a>
			</div>
			@foreach($crm_targets as $crm_target)
                <div class="col-sm-6 col-md-4 col-xl-3">
    			    <a href="{{url('admin/users/type/'.$crm_target->id)}}">
    					<div class="card custom-card">
    						<div class="card-body text-center">
    							<div class="icon-service  rounded-circle ">
    							    <i class="fas fa-users"></i>
    							</div>
    							<p class="headCardHome">{{$crm_target->name}}</p>
    							<h3 class="headCardNum">{{$crm_target->users()->count()}}</h3>
    						</div>
    					</div>
    				</a>
    			</div>
			@endforeach
			
		    <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/teachers')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
							   <i class="fas fa-chalkboard-teacher"></i>
							</div>
							<p class="headCardHome">{{trans('home.instructors')}}</p>
							<h3 class="headCardNum">{{$teachers}}</h3>
						</div>
					</div>
				</a>
			</div>
			
		    <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/teachers')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
							    <i class="fas fa-user-graduate"></i>
							</div>
							<p class="headCardHome">{{trans('home.students')}}</p>
							<h3 class="headCardNum">{{$students}}</h3>
						</div>
					</div>
				</a>
			</div>
			
			
		    <div class="col-sm-6 col-md-4 col-xl-3">
				<a href="{{LaravelLocalization::localizeUrl('admin/categories')}}" class="filter_type" data-filter="instructors">
				    <div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
							    <i class="fas fa-university"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total Categories')}}</p>
							<h3 class="headCardNum">{{$categories}}</h3>
						</div>
					</div> 
				</a>
			</div>
			
		    <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/blog-items')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
							    <i class="fas fa-newspaper"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total blogs')}}</p>
							<h3 class="headCardNum">{{$blogs}}</h3>
						</div>
					</div>
				</a>
			</div>
			
				
		   <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/news-items')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="far fa-newspaper"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total News')}}</p>
							<h3 class="headCardNum">{{$news}}</h3>
						</div>
					</div>
				</a>
			</div>

		
		   <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/webinars')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="fas fa-calendar-week"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total Webinars')}}</p>
							<h3 class="headCardNum">{{$webinars}}</h3>
						</div>
					</div>
				</a>
			</div>
		
			
		   <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/companies-requests')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="fas fa-building"></i>
							</div>
							<p class="headCardHome">{{trans('home.companies_requests')}}</p>
							<h3 class="headCardNum">{{$company_requests}}</h3>
						</div>
					</div>
				</a>
			</div>
		   <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="{{LaravelLocalization::localizeUrl('admin/course-subscribers-requests')}}">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="fas fa-medal"></i>
							</div>
							<p class="headCardHome">{{trans('home.courses_subscribers_requests')}}</p>
							<h3 class="headCardNum">{{$course_subscribers_requests}}</h3>
						</div>
					</div>
				</a>
			</div>
		
		<!--instructors-->

		    {{--
		    <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="javascript:void;">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="fas fa-dollar-sign"></i>
							</div>
							<p class="headCardHome">{{trans('home.Total Orders Price')}}</p>
							<h3 class="headCardNum">{{$orders->sum('total_price')}}</h3>
						</div>
					</div>
				</a>
			</div>
			--}}
		    <div class="col-sm-6 col-md-4 col-xl-3">
			    <a href="javascript:void;">
					<div class="card custom-card">
						<div class="card-body text-center">
							<div class="icon-service  rounded-circle ">
								<i class="fas fa-dollar-sign"></i>
							</div>
							<p class="headCardHome">مجموع المبيعات</p>
							<p class="">من ضمنهم مجموع فواتير شركات مهارات سواء تم تحصيلها ام لا</p>
							<h3 class="headCardNum">{{$numbers['sum_invoices']}}</h3>
						</div>
					</div>
				</a>
			</div>
		    
    </div>
    @endcan
    @can('crm_financial')
    <div class="row">
        <a class="btn btn-primary col-4 m-auto" href="{{url('admin/crm/financial')}}">الماليات</a>
    </div>
    @endcan

</div>

@endsection
@section('script')


 <!-- charts -->
    <script src="{{URL::To('resources/assets/back/js/apex.js')}}"></script>

<!-- apex chart -->
    <script>
          /*  Project Analysis chart */
        var series = {!! json_encode($series) !!};
        var categories = {!! json_encode($years) !!};
        function getDynamicColors(series) {
            return series.map((count) => {
                // Example: Generate colors based on count (lighter for smaller, darker for larger)
                let maxCount = Math.max(...series);
                let minCount = Math.min(...series);
                let intensity = Math.floor(((count - minCount) / (maxCount - minCount)) * 255);
                return `rgba(255, ${255 - intensity}, ${100 + intensity / 2}, 0.8)`; // Gradient effect
            });
        }
        var dynamicColors = getDynamicColors(series);
        
        var options = {
            series: series,
            chart: {
                type: "bar",
                height: 293,
                toolbar: {
                    show: false,
                },
                dropShadow: {
                    enabled: false,
                },
                stacked: true,
            },
            plotOptions: {
                bar: {
                    columnWidth: "30%",
                    borderRadiusApplication: "around",
                    borderRadiusWhenStacked: "all",
                    borderRadius: 3,
                },
            },
            responsive: [
                {
                    breakpoint: 500,
                    options: {
                        plotOptions: {
                            bar: {
                                columnWidth: "60%",
                            },
                        },
                    },
                },
            ],
            stroke: {
                show: true,
                curve: "smooth",
                lineCap: "butt",
                width: [5, 5, 5],
                dashArray: 0,
            },
            grid: {
                borderColor: "#f5f4f4",
                strokeDashArray: 5,
                yaxis: {
                    lines: {
                        show: true, 
                    },
                },
            },
            colors: ["#d3e926de", "#f48c2060", "#bf7c2b80"],
            dataLabels: {
                enabled: false,
            },
            legend: {
                position: "top",
                markers: {
                    size: 4,
                    strokeWidth: 0,
                    strokeColor: '#fff',
                    fillColors: undefined,
                    radius: 5,
                    customHTML: undefined,
                    onClick: undefined,
                    offsetX: 0,
                    offsetY: 0
                  },
            },
            yaxis: {
                title: {
                    style: {
                        color: "#adb5be",
                        fontSize: "14px",
                        fontFamily: "Montserrat, sans-serif",
                        fontWeight: 600,
                        cssClass: "apexcharts-yaxis-label",
                    },
                },
                axisBorder: {
                    show: true,
                    color: "rgba(119, 119, 142, 0.05)",
                    offsetX: 0,
                    offsetY: 0,
                },
                axisTicks: {
                    show: true,
                    borderType: "solid",
                    color: "rgba(119, 119, 142, 0.05)",
                    width: 6,
                    offsetX: 0,
                    offsetY: 0,
                },
                labels: {
                    formatter: function (y) {
                        return y.toFixed(0) + "";
                    },
                },
            },
            xaxis: {
                type: "month",
                categories:categories,
                axisBorder: {
                    show: false,
                    color: "rgba(119, 119, 142, 0.05)",
                    offsetX: 0,
                    offsetY: 0,
                },
                axisTicks: {
                    show: false,
                    borderType: "solid",
                    color: "rgba(119, 119, 142, 0.05)",
                    width: 6,
                    offsetX: 0,
                    offsetY: 0,
                },
                labels: {
                    rotate: -90,
                },
            },
        };
        var chart = new ApexCharts(document.querySelector("#project-analysis"), options);
        chart.render();
        /*  Leads By Channel */
        var labels3 = ["{{trans('home.companies_requests')}}", "{{trans('home.courses_subscribers_requests')}}"];
        var options3 = {
            series: [{{$company_requests}}, {{$course_subscribers_requests}}],
            chart: {
                height: 350,
                type: "donut",
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            stroke: {
                show: true,
                curve: "smooth",
                lineCap: "round",
                colors: "#fff",
                width: 2,
            },
            fill: {
                type: "solid",
            },
            plotOptions: {
                pie: {
                    expandOnClick: false,
                    donut: {
                        size: "80%",
                        background: "transparent",
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: "20px",
                                color: "#495057",
                                fontFamily: "Montserrat, sans-serif",
                                offsetY: -5,
                            },
                            value: {
                                show: true,
                                fontSize: "22px",
                                offsetY: 5,
                                fontWeight: 600,
                                fontFamily: "Montserrat, sans-serif",
                                formatter: function (val) {
                                    return val + "%";
                                },
                            },
                            total: {
                                show: true,
                                showAlways: true,
                                label: "كل العملاء",
                                fontSize: "18px",
                                fontWeight: 400,
                                color: "#495057",
                            },
                        },
                    },
                },
            },
            colors: ["#f48c2060", "#bf7c2b80"], // Use dynamically generated colors
            labels: labels3, // Ensure this is an array of labels like ['Label 1', 'Label 2']
            responsive: [
                {
                    breakpoint: 480,
                    options: {
                        legend: {
                            show: true,
                        },
                    },
                },
            ],
        };

        
        var chart = new ApexCharts(document.querySelector("#leads-channels"), options3);
        chart.render();
        /* Leads By Channel */
    </script>
@endsection