@extends('layouts.master')
@section('page_title', 'My Dashboard')
@section('content')

    @if(Qs::userIsParent())
    <div class="row">

    @if($my_children_list != null)
    @foreach($my_children_list as $child)
                <div class="col-md-4 ">
                    <div class="card">
                        <div class="card-body">
                                <div class="media">
                                                                    <img class="mr-3" width="50" src="{{ $child->photo != null ? $child->photo : $default_image }}" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 class="mt-0"><i class="icon-user"></i> {{$child->name}} </h5>
                                    <h5 class="mt-0"><i class="icon-user"></i> {{$child->username}}</h5>
                                    <h5 class="mt-0"><i class="icon-user"></i> {{$child->class_name}}</h5>
                                </div>
                        </div>
                         <!-- <span onclick="deleteChild({{$child->id}}, {{auth()->id()}})"></span> <i class="icon-trash trash-can text-danger"></i> -->
                        </div>
                        
                    </div>
                </div>
     @endforeach
     @endif
    </div>
    @endif

    @if(Qs::userIsSAT())
    <div class="row">
            <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-blue-400 has-bg-image">
                   <div class="media">
                       <div class="media-body">
                           <h3 class="mb-0">{{$lesson_todo->where('assigned_to', $teacher_id)->where('session', Qs::getCurrentSession())->count()}}</h3>
                           <span class="text-uppercase font-size-xs font-weight-bold">Lessons</span>
                       </div>

                       <div class="ml-3 align-self-center">
                           <i class="icon-file-text2 icon-3x opacity-75"></i>
                       </div>
                   </div>
               </div>
           </div>

           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-danger-400 has-bg-image">
                   <div class="media">
                       <div class="media-body">
                           <h3 class="mb-0">{{$lesson_todo->where('assigned_to', $teacher_id)->where('session', Qs::getCurrentSession())->where('status', 1)->count() ?? ''}}</h3>
                           <span class="text-uppercase font-size-xs font-weight-bold">Completed Lessons</span>
                       </div>

                       <div class="ml-3 align-self-center">
                           <i class="icon-file-check  icon-3x opacity-75"></i>
                       </div>
                   </div>
               </div>
           </div>

           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-success-400 has-bg-image">
                   <div class="media">
                       <div class="media-body">
                           <h3 class="mb-0">{{ $users->where('user_type', 'teacher')->count() ?? 0 }}</h3>
                           <span class="text-uppercase font-size-xs">Total Teachers</span>
                       </div>

                       <div class="ml-3 align-self-center">
                           <i class="icon-users2 icon-3x opacity-75"></i>
                       </div>
                   </div>
               </div>
           </div>
    </div>
    @endif


    @if(Qs::userIsSAT())
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Quick Links</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-6 col-md-4 col-lg-2 mb-3">
                            <a href="{{ route('tt.index') }}" class="btn btn-outline-primary btn-block">
                                <i class="icon-calendar mr-2"></i>Timetables
                            </a>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-2 mb-3">
                            <a href="{{ route('student-attendance') }}" class="btn btn-outline-success btn-block">
                                <i class="icon-user-check mr-2"></i>Student Attendance
                            </a>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-2 mb-3">
                            <a href="{{ route('weekly-schedule') }}" class="btn btn-outline-info btn-block">
                                <i class="icon-stats-growth mr-2"></i>Weekly Forecast
                            </a>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-2 mb-3">
                            <a href="{{ route('list-lesson-plans') }}" class="btn btn-outline-warning btn-block">
                                <i class="icon-book mr-2"></i>Lesson Plan
                            </a>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-2 mb-3">
                            <a href="{{ route('marks.bulk') }}" class="btn btn-outline-danger btn-block">
                                <i class="icon-clipboard3 mr-2"></i>Mark Sheet
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif




    @if(Qs::userIsTeamSA())
       <div class="row">
           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-blue-400 has-bg-image">
                   <div class="media">
                       <div class="media-body">
                           <h3 class="mb-0">{{ $users->where('user_type', 'student')->where('status',0)->count() ?? 0 }}</h3>
                           <span class="text-uppercase font-size-xs font-weight-bold">Total Students</span>
                       </div>

                       <div class="ml-3 align-self-center">
                           <i class="icon-users4 icon-3x opacity-75"></i>
                       </div>
                   </div>
               </div>
           </div>

           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-danger-400 has-bg-image">
                   <div class="media">
                       <div class="media-body">
                           <h3 class="mb-0">{{ $users->where('user_type', 'teacher')->count() ?? 0 }}</h3>
                           <span class="text-uppercase font-size-xs">Total Teachers</span>
                       </div>

                       <div class="ml-3 align-self-center">
                           <i class="icon-users2 icon-3x opacity-75"></i>
                       </div>
                   </div>
               </div>
           </div>

           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-success-400 has-bg-image">
                   <div class="media">
                       <div class="mr-3 align-self-center">
                           <i class="icon-pointer icon-3x opacity-75"></i>
                       </div>

                       <div class="media-body text-right">
                           <h3 class="mb-0">{{ $users->where('user_type', 'admin')->count() ?? 0 }}</h3>
                           <span class="text-uppercase font-size-xs">Total Administrators</span>
                       </div>
                   </div>
               </div>
           </div>

           <div class="col-sm-6 col-xl-3">
               <div class="card card-body bg-indigo-400 has-bg-image">
                   <div class="media">
                       <div class="mr-3 align-self-center">
                           <i class="icon-user icon-3x opacity-75"></i>
                       </div>

                       <div class="media-body text-right">
                           <h3 class="mb-0">{{ $users->where('user_type', 'parent')->count() ?? '' }}</h3>
                           <span class="text-uppercase font-size-xs">Total Parents</span>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="topprograssstart">
                                                        <p class="text-uppercase mt5 clearfix"><i class="fa fa-money ftlayer"></i>Fees Awaiting Payment <span class="pull-right"> {{$fully_paid_bills}}/{{$total_bills}}</span>
                            </p>
                            <div class="progress-group">
                                <div class="progress progress-minibar">
                                    <div class="progress-bar progress-bar-aqua" style="width: "></div>
                                </div>
                            </div>
                        </div><!--./topprograssstart-->
                    </div><!--./col-md-3-->
                    
                    
                    <div class="col-lg-3 col-md-6 col-sm-6">
                    <div class="topprograssstart">
                        <p class="text-uppercase mt5 clearfix"><i class="fa fa-calendar-check-o ftlayer"></i>Staff Present Today<span class="pull-right">0/{{$users->where('user_type', 'teacher')->count()}}</span>
                        </p>
                        <div class="progress-group">
                            <div class="progress progress-minibar">
                                <div class="progress-bar progress-bar-green" style="width: 0%"></div>
                            </div>
                        </div>
                    </div><!--./topprograssstart-->
                </div><!--./col-md-3-->
                <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="topprograssstart">
                            <p class="text-uppercase mt5 clearfix"><i class="fa fa-calendar-check-o ftlayer"></i>Student Present Today<span class="pull-right"> {{$count_student_attendance}}/{{$users->where('user_type', 'student')->count()}}</span>
                            </p>
                            <div class="progress-group">
                                <div class="progress progress-minibar">
                                    <div class="progress-bar progress-bar-yellow" style="width: 1.7857142857143%"></div>
                    </div>
                </div>
            </div><!--./topprograssstart-->
        </div><!--./col-md-3-->
        </div>
       
       @if(auth()->user()->user_type != 'admin' || auth()->user()->user_type != 'parent')
       @livewire('wire-dashboard')
       
        <div class="col-md-12">
        <!-- Financial Overview -->
            @livewire('dashboard.profit-and-loss-chart')
        </div>
       @endif

    @endif

    {{--Events Calendar Begins--}}
     <div class="row">
    
        <div class="col-md-6">
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h5 class="card-title">School Events Calendar</h5>
                {!! Qs::getPanelOptions() !!}
                </div>

                <div class="card-body">
                    <div class="fullcalendar-lesson-plan-view"></div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            
            @livewire('canteen.menu-component')
        </div>
     </div>
    {{--Events Calendar Ends--}}
    @endsection

    <script>
       window.userId = {{ auth()->id() }};

    </script>

<style>
       
        .trash-can:hover{
            cursor: pointer;
        }
    </style>

    <script>

       function deleteChild(child_id, parent_id) {
                    fetch('/api/child/disassociate', {method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                                //'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify({
                                child_id: value,
                                parent_id: studentId,
                                exam_id: examId,
                                flag: flag
                            })
                        }).then(response => response.json())
                        .then(data => {
                            
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('Error saving comment');
                        });

                }
    </script>

<!-- <script>
    // Example Chart.js scripts for financial data
    document.addEventListener('DOMContentLoaded', function () {
        var incomeExpenseCtx = document.getElementById('incomeExpenseChart').getContext('2d');
        var incomeExpenseChart = new Chart(incomeExpenseCtx, {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'Income',
                        data: [12000, 15000, 14000, 20000, 17000, 21000, 19000],
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    },
                    {
                        label: 'Expenses',
                        data: [8000, 9000, 10000, 15000, 12000, 16000, 13000],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        var profitLossCtx = document.getElementById('profitLossChart').getContext('2d');
        var profitLossChart = new Chart(profitLossCtx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'Profit/Loss',
                        data: [4000, 6000, 4000, 5000, 5000, 5000, 6000],
                        backgroundColor: 'rgba(153, 102, 255, 0.2)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script> -->