@extends('admin.layouts.master')
@section('page_title', __("Dashboard"))

@push('css')
	<link href="{{asset('assets/admin')}}/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" />
	<link href="{{ asset('assets/admin/plugins/fullcalendar/fullcalendar.min.css') }}" rel="stylesheet">
	<style>
        .main-calendar td.fc-today .fc-day-number:hover, .main-calendar td.fc-today .fc-day-number {
            background-color : #dde2ef !important;
        }
        .main-calendar td.fc-today .fc-day-number{
            color : #4D5875 !important;
        }
        .main-calendar td.fc-today {
        	background-color: #dde2ef  !important;
        }
    </style>
@endpush

@section('breadcrumb') 
    <div class="d-flex justify-content-between align-items-center w-100">
        @include('admin.partials.breadcrumb', ['breads' => [__('Dashboard'), __('Dashboard & Statistics')]])
		@if(auth()->getDefaultDriver() == 'admin')
			<a href="{{ route(auth()->getDefaultDriver() . '.group-transactions.create') }}" class="btn btn-primary">
				{{ __("Payments") }}
			</a>
		@endif
    </div>
@endsection

@section('content')
		@can('View Dashboard')
		<div class="row row-sm">
			<div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
				<div class="card overflow-hidden sales-card bg-primary-gradient">
					<div class="pl-3 pt-3 pr-3 pb-2 pt-0">
						<div class="">
							<h6 class="mb-3 tx-12 text-white">{{__("Students With Groups")}}</h6>
						</div>
						<div class="pb-0 mt-0">
							<div class="d-flex">
								<div class="">
									<h4 class="tx-20 font-weight-bold mb-1 text-white">{{$studentsWithGroup}}</h4>
									<p class="mb-0 tx-12 text-white op-7"></p>
								</div>
								<span class="float-right my-auto mr-auto">
									<i style='font-size:35px' class="fas fa-user-graduate text-white"></i>
									<span class="text-white op-7"> </span>
								</span>
							</div>
						</div>
					</div>
					<span id="compositeline" class="pt-1">5,9,5,6,4,12,18,14,10,15,12,5,8,5,12,5,12,10,16,12</span>
				</div>
			</div>
			<div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
				<div class="card overflow-hidden sales-card bg-danger-gradient">
					<div class="pl-3 pt-3 pr-3 pb-2 pt-0">
						<div class="">
							<h6 class="mb-3 tx-12 text-white">{{__('Teachers')}}</h6>
						</div>
						<div class="pb-0 mt-0">
							<div class="d-flex">
								<div class="">
									<h4 class="tx-20 font-weight-bold mb-1 text-white">{{$totalTeachers}}</h4>
									<p class="mb-0 tx-12 text-white op-7"></p>
								</div>
								<span class="float-right my-auto mr-auto">
									<i style='font-size:35px' class="fas fa-chalkboard-teacher text-white"></i>
									<span class="text-white op-7"> </span>
								</span>
							</div>
						</div>
					</div>
					<span id="compositeline2" class="pt-1">3,2,4,6,12,14,8,7,14,16,12,7,8,4,3,2,2,5,6,7</span>
				</div>
			</div>
			<div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
				<div class="card overflow-hidden sales-card bg-success-gradient">
					<div class="pl-3 pt-3 pr-3 pb-2 pt-0">
						<div class="">
							<h6 class="mb-3 tx-12 text-white">{{__('Groups')}}</h6>
						</div>
						<div class="pb-0 mt-0">
							<div class="d-flex">
								<div class="">
									<h4 class="tx-20 font-weight-bold mb-1 text-white">{{$totalGroups}}</h4>
									<p class="mb-0 tx-12 text-white op-7"></p>
								</div>
								<span class="float-right my-auto mr-auto">
									<i style='font-size:35px' class="fas fa-book-reader text-white"></i>
									<span class="text-white op-7"> </span>
								</span>
							</div>
						</div>
					</div>
					<span id="compositeline3" class="pt-1">5,10,5,20,22,12,15,18,20,15,8,12,22,5,10,12,22,15,16,10</span>
				</div>
			</div>
			<div class="col-xl-3 col-lg-6 col-md-6 col-xm-12">
				<div class="card overflow-hidden sales-card bg-warning-gradient">
					<div class="pl-3 pt-3 pr-3 pb-2 pt-0">
						<div class="">
							<h6 class="mb-3 tx-12 text-white">{{__('Classrooms')}}</h6>
						</div>
						<div class="pb-0 mt-0">
							<div class="d-flex">
								<div class="">
									<h4 class="tx-20 font-weight-bold mb-1 text-white">{{$totalClassrooms}}</h4>
									<p class="mb-0 tx-12 text-white op-7"></p>
								</div>
								<span class="float-right my-auto mr-auto">
									<i style='font-size:35px' class="fas fa-school text-white"></i>
									<span class="text-white op-7"> </span>
								</span>
							</div>
						</div>
					</div>
					<span id="compositeline4" class="pt-1">5,9,5,6,4,12,18,14,10,15,12,5,8,5,12,5,12,10,16,12</span>
				</div>
			</div>
		</div>

		<div class="row row-sm">
			<div class="col-lg-12 col-xl-12">
				<div class="main-content-body main-content-body-calendar card p-4">
                    <div class="main-calendar" id="calendar"></div>
                </div>
            </div>
        </div>

		<div class="row row-sm">
			<div class="col-md-12 col-lg-12 col-xl-8">
				<div class="card">
					<div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
						<div class="d-flex justify-content-between">
							<h4 class="card-title mb-0">{{__('Students Payments')}}</h4>
							<i class="mdi mdi-dots-horizontal text-gray"></i>
						</div>
					</div>
					<div class="card-body">
						<div class="total-revenue">
							<div>
							  <h4>{{number_format($studentsPayments->sum('paid'), 2)}}</h4>
							  <label><span class="bg-primary"></span>{{__('Paid')}}</label>
							</div>
							<div>
							  <h4>{{number_format($studentsPayments->sum('discounted'), 2)}}</h4>
							  <label><span class="bg-danger"></span>{{__('Discounted')}}</label>
							</div>
							<div>
							  <h4>{{number_format($studentsPayments->sum('exempt'), 2)}}</h4>
							  <label><span class="bg-warning"></span>{{__('Exempt')}}</label>
							</div>
						  </div>
						<div id="bar1" class="sales-bar mt-4"></div>
					</div>
				</div>
			</div>
			<div class="col-lg-12 col-xl-4">
				<div class="card">
					<div class="card-header pb-0">
						<h3 class="card-title mb-2">{{__('Total Profits')}}</h3>
					</div>
					<div class="card-body sales-info ot-0 pt-0 pb-0">
						<div id="chart" class="ht-200"></div>
						<div class="row sales-infomation pb-0 mb-0 mx-auto wd-100p">
							<div class="col-md-6 col">
								<p class="mb-0 d-flex"><span class="legend bg-primary brround"></span>{{__('Funds')}}</p>
								<h3 class="mb-1">{{number_format($funds, 2)}}</h3>
								<div class="d-flex">
									<p class="text-muted ">{{__('Last 6 months')}}</p>
								</div>
							</div>
							<div class="col-md-6 col">
								<p class="mb-0 d-flex"><span class="legend bg-info brround"></span>{{__('Expenses')}}</p>
									<h3 class="mb-1">{{number_format($expenses, 2)}}</h3>
								<div class="d-flex">
									<p class="text-muted">{{__('Last 6 months')}}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row row-sm">
			<div class="col-md-12 col-lg-12 col-xl-8">
				<div class="card">
					<div class="card-header bg-transparent pd-b-0 pd-t-20 bd-b-0">
						<div class="d-flex justify-content-between">
							<h4 class="card-title mb-0">{{__('Teachers Payments')}}</h4>
							<i class="mdi mdi-dots-horizontal text-gray"></i>
						</div>
					</div>
					<div class="card-body">
						<div class="total-revenue">
							<div>
							  <h4>{{number_format($teachersPayments->sum('paid'), 2)}}</h4>
							  <label><span class="bg-primary"></span>{{__('Paid')}}</label>
							</div>
							<div>
							  <h4>{{number_format($teachersPayments->sum('discounted'), 2)}}</h4>
							  <label><span class="bg-danger"></span>{{__('Discounted')}}</label>
							</div>
							<div>
							  <h4>{{number_format($teachersPayments->sum('bonus'), 2)}}</h4>
							  <label><span class="bg-warning"></span>{{__('Bonus')}}</label>
							</div>
						  </div>
						<div id="bar2" class="sales-bar mt-4"></div>
					</div>
				</div>
			</div>
			<div class="col-lg-12 col-xl-4">
				<div class="card ">
					<div class="card-body">
						<div class="row">
							<div class="col-md-6">
								<div class="d-flex align-items-center pb-2">
									<p class="mb-0">{{__('Total Payments')}}</p>
								</div>
								<h4 class="font-weight-bold mb-2">{{$activeStudentsPayments}}</h4>
								<div class="progress progress-style progress-sm">
									<div class="progress-bar bg-primary-gradient wd-{{$paymentRatio}}p" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="78"></div>
								</div>
							</div>
							<div class="col-md-6 mt-4 mt-md-0">
								<div class="d-flex align-items-center pb-2">
									<p class="mb-0">{{__('Active Students')}}</p>
								</div>
								<h4 class="font-weight-bold mb-2">{{$studentsWithGroup}} - {{$totalStudents}}</h4>
								<div class="progress progress-style progress-sm">
									<div class="progress-bar bg-danger-gradient wd-{{$studentRatio}}" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="78"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		@else
		<div class="row row-sm">
			<div class="col-lg-12 col-xl-12">
				<div class="main-content-body main-content-body-calendar card p-4">
                    <div class="main-calendar" id="calendar"></div>
                </div>
            </div>
        </div>
		@endcan
	</div>
</div>

<div class="modal" id="groupDetailsModal" data-backdrop="true" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h4 class="modal-title" id="groupDetailsModalLabel">{{__("Group Details")}}</h4>
            </div>
            <div class="modal-body">
                <div class="col-12 table-responsive">
                    <table class="table table-bordered mg-b-0 text-md-nowrap">
                        <tr>
                            <th width="15%">{{__('Teacher')}}</th><td><span id="groupTeacher"></td>
                            <th width="15%">{{__('Subject')}}</th><td><span id="groupSubject"></span></td>
                        </tr>
                        <tr>
                            <th width="15%">{{__('Study Class')}}</th><td><span id="groupStudyClass"></span></td>
                            <th width="15%">{{__('Classroom')}}</th><td><span id="groupClassroom"></span></td>
                        </tr>
                        <tr>
                            <th width="15%">{{__('Day')}}</th><td><span id="groupDate"></span></td>
                            <th width="15%">{{__('Time')}}</th><td><span id="groupTime"></span></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn ripple btn-danger" type="button" data-dismiss="modal">{{__('Close')}}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
	<!--Internal  Chart.bundle js -->
	<script src="{{asset('assets/admin')}}/plugins/chart.js/Chart.bundle.min.js"></script>
	<!-- Moment js -->
	<script src="{{asset('assets/admin')}}/plugins/raphael/raphael.min.js"></script>
	<!--Internal  Flot js-->
	<script src="{{asset('assets/admin')}}/plugins/jquery.flot/jquery.flot.js"></script>
	<script src="{{asset('assets/admin')}}/plugins/jquery.flot/jquery.flot.pie.js"></script>
	<script src="{{asset('assets/admin')}}/plugins/jquery.flot/jquery.flot.resize.js"></script>
	<script src="{{asset('assets/admin')}}/plugins/jquery.flot/jquery.flot.categories.js"></script>
	<script src="{{asset('assets/admin')}}/js/dashboard.sampledata.js"></script>
	<script src="{{asset('assets/admin')}}/js/chart.flot.sampledata.js"></script>
	<!--Internal Apexchart js-->
	<script src="{{asset('assets/admin')}}/js/apexcharts.js"></script>
	<script src="{{asset('assets/admin')}}/js/modal-popup.js"></script>
	<!--calendar -->
	<script src="{{ asset('assets/admin/plugins/fullcalendar/fullcalendar.min.js') }}"></script>
	<script src="{{ asset('assets/admin/js/app-calendar-events.js') }}"></script>
    <script src="{{ asset('assets/admin/js/app-calendar.js') }}"></script>
    <!--Internal  index js -->
	<script src="{{asset('assets/admin')}}/js/index.js"></script>

	<script type="text/javascript">
		/* Apexcharts (#bar) */
		var studentChart = {!! $studentChart !!};
		var optionsBar = {
		  chart: {
			height: 249,
			type: 'bar',
			toolbar: {
			   show: false,
			},
			fontFamily: 'Nunito, sans-serif',
			// dropShadow: {
			//   enabled: true,
			//   top: 1,
			//   left: 1,
			//   blur: 2,
			//   opacity: 0.2,
			// }
		  },
		 colors: ["#036fe7", '#f93a5a', '#f7a556'],
		 plotOptions: {
					bar: {
					  dataLabels: {
						enabled: false
					  },
					  columnWidth: '42%',
					  endingShape: 'rounded',
					  horizontal: false,
					}
				},
		  dataLabels: {
			  enabled: false
		  },
		  stroke: {
			  show: true,
			  width: 2,
			  endingShape: 'rounded',
			  colors: ['transparent'],
		  },
		  responsive: [{
			  breakpoint: 576,
			  options: {
				   stroke: {
				  show: true,
				  width: 1,
				  endingShape: 'rounded',
				  colors: ['transparent'],
				},
			  },


		  }],
		   series: [{
			  name: '{{__("Paid")}}',
			  data: Object.values(studentChart.paid)
		  }, {
			  name: '{{__("Discounted")}}',
			  data: Object.values(studentChart.discounted)
		  }, {
			  name: '{{__("Exempt")}}',
			  data: Object.values(studentChart.exempt)
		  }],
		  xaxis: {
			  categories: ['{{__("Jan")}}', '{{__("Feb")}}', '{{__("Mar")}}', '{{__("Apr")}}', '{{__("May")}}', '{{__("Jun")}}', '{{__("Jul")}}', '{{__("Aug")}}', '{{__("Sep")}}', '{{__("Oct")}}', '{{__("Nov")}}', '{{__("Dec")}}'],
			  reversed: true,
		  },
		  yaxis: {
	        	reversed: false
	    	},
		  fill: {
			  opacity: 1
		  },
		  legend: {
			show: false,
			floating: true,
			position: 'top',
			horizontalAlign: 'left',
			// offsetY: -36

		  },
		  // title: {
		  //   text: 'Financial Information',
		  //   align: 'left',
		  // },
		  tooltip: {
			  y: {
				  formatter: function (val) {
					  return val + " {{__('EGP')}}"
				  }
			  }
		  }
		}
		new ApexCharts(document.querySelector('#bar1'), optionsBar).render();

		var teacherChart = {!! $teacherChart !!};
		var optionsBar2 = {
		  chart: {
			height: 249,
			type: 'bar',
			toolbar: {
			   show: false,
			},
			fontFamily: 'Nunito, sans-serif',
			// dropShadow: {
			//   enabled: true,
			//   top: 1,
			//   left: 1,
			//   blur: 2,
			//   opacity: 0.2,
			// }
		  },
		 colors: ["#036fe7", '#f93a5a', '#f7a556'],
		 plotOptions: {
					bar: {
					  dataLabels: {
						enabled: false
					  },
					  columnWidth: '42%',
					  endingShape: 'rounded',
					}
				},
		  dataLabels: {
			  enabled: false
		  },
		  stroke: {
			  show: true,
			  width: 2,
			  endingShape: 'rounded',
			  colors: ['transparent'],
		  },
		  responsive: [{
			  breakpoint: 576,
			  options: {
				   stroke: {
				  show: true,
				  width: 1,
				  endingShape: 'rounded',
				  colors: ['transparent'],
				},
			  },


		  }],
		   series: [{
			  name: '{{__("Paid")}}',
			  data: Object.values(teacherChart.paid)
		  }, {
			  name: '{{__("Discounted")}}',
			  data: Object.values(teacherChart.discounted)
		  }, {
			  name: '{{__("Bonus")}}',
			  data: Object.values(teacherChart.bonus)
		  }],
		  xaxis: {
			  categories: ['{{__("Jan")}}', '{{__("Feb")}}', '{{__("Mar")}}', '{{__("Apr")}}', '{{__("May")}}', '{{__("Jun")}}', '{{__("Jul")}}', '{{__("Aug")}}', '{{__("Sep")}}', '{{__("Oct")}}', '{{__("Nov")}}', '{{__("Dec")}}'],
		  },
		  fill: {
			  opacity: 1
		  },
		  legend: {
			show: false,
			floating: true,
			position: 'top',
			horizontalAlign: 'left',
			// offsetY: -36

		  },
		  // title: {
		  //   text: 'Financial Information',
		  //   align: 'left',
		  // },
		  tooltip: {
			  y: {
				  formatter: function (val) {
					  return val + " {{__('EGP')}}"
				  }
			  }
		  }
		}
		new ApexCharts(document.querySelector('#bar2'), optionsBar2).render();
	</script>

	<script type="text/javascript">
		/*--- Apex (#chart) ---*/
		var options = {
			chart: {
			height: 205,
			type: 'radialBar',
			 offsetX: 0,
	          offsetY: 0,
		},
		plotOptions: {
		  radialBar: {
			startAngle: -135,
			endAngle: 135,
			size: 120,
			 imageWidth: 50,
	              imageHeight: 50,

			 track: {
			 strokeWidth: "80%",
			 background: '#ecf0fa',
			},
			 dropShadow: {
	                enabled: false,
	                top: 0,
	                left: 0,
					 bottom: 0,
	                blur: 3,
	                opacity: 0.5
	              },
			dataLabels: {
			  name: {
				fontSize: '16px',
				color: undefined,
				offsetY: 30,
			  },
			  hollow: {
				 size: "60%"
				},
			  value: {
				offsetY: -10,
				fontSize: '22px',
				color: undefined,
				formatter: function (val) {
				  return val + "%";
				}
			  }
			}
		  }
		},
		colors: ['#0db2de'],
	  fill: {
	   type: "gradient",
	   gradient: {
	    shade: "dark",
	    type: "horizontal",
	    shadeIntensity: .5,
	    gradientToColors: ['#005bea'],
	    inverseColors: !0,
	    opacityFrom: 1,
	    opacityTo: 1,
	    stops: [0, 100]
	   }
	  },
		stroke: {
		  dashArray: 4
		},
	   series: [{{$ratio}}],
			labels: [""]
		};

		var chart = new ApexCharts(document.querySelector("#chart"), options);
		chart.render();
	</script>

	<script>
		$(document).ready(function () {
			$('#calendar').fullCalendar({
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
				editable: false,
				droppable: false,
				events: @json($calendarEvents),
				dayRender: function (date, cell) {
					if (date.isSame(new Date(), 'day')) {
						cell.css('background-color', '#E5DBDB');
					}
				},
				eventClick: function(event) {
					var eventDate = new Date(event.start);
					var formattedDate = eventDate.getFullYear() + '\\' + (eventDate.getMonth() + 1) + '\\' + eventDate.getDate();
					var formattedTime = eventDate.getHours().toString().padStart(2, '0') + ':' + eventDate.getMinutes().toString().padStart(2, '0');

					$('#groupName').text(event.title);
					$('#groupSubject').text(event.subject);
					$('#groupTeacher').text(event.teacher);
					$('#groupStudyClass').text(event.studyClass);
					$('#groupClassroom').text(event.classroom);
					$('#groupTime').text(`${formattedTime}`);
					$('#groupDate').text(`${formattedDate}`);
					$('#groupDetailsModal').modal('show');
				}
			});
		});
	</script>
@endpush