IMMREX7

@extends('schools.school_layout')
@section('content')
<style>
    section.content:before{
        height: 86px !important;
    }
    a.linker:hover {
        font-size: 16px !important;
    }
</style>
<div class="row clearfix" style="margin-top: 20px;">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="background: linear-gradient(325deg, #00a8d5, #00a8d5) !important;">
                    <div class="body text-center" style="padding-bottom: 0px;">
                        <h3 class="m-b-0" style="color:white;">{{$ts->total}}</h3>
                        <p class="displayblock" style="color:white;font-weight: bold;">Total Students</p>
                    </div>
                    <div class="m-t-10 text-center">
                        <hr style="background: white;">
                        <a href="{{url('/school/studentlist')}}" class="displayblock linker" style="color:white;font-weight: bold;padding: 10px;font-size: 13px;">View Students &#8594;</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="background: linear-gradient(325deg, #00a8d5, #00a8d5) !important;">
                    <div class="body text-center" style="padding-bottom: 0px;">
                        <h3 class="m-b-0" style="color:white;">{{$te->total}}</h3>
                        <p class="displayblock" style="color:white;font-weight: bold;">Total Employee</p>
                    </div>
                    <div class="m-t-10 text-center">
                        <hr style="background: white;">
                        <a href="{{url('/school/employees')}}" class="displayblock linker" style="color:white;font-weight: bold;padding: 10px;font-size: 13px;">View Employee &#8594;</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="card" style="background: linear-gradient(325deg, #00a8d5, #00a8d5) !important;">
                    <div class="body text-center" style="padding-bottom: 0px;">
                        <h3 class="m-b-0" style="color:white;">{{$tc->total}}</h3>
                        <p class="displayblock" style="color:white;font-weight: bold;">Total Class</p>
                    </div>
                    <div class="m-t-10 text-center">
                        <hr style="background: white;">
                        <a href="{{url('/school/classes')}}" class="displayblock linker" style="color:white;font-weight: bold;padding: 10px;font-size: 13px;">View Class &#8594;</a>
                    </div>
                </div>
            </div>
</div>
<div class="row clearfix">
    <div class="col-lg-7 col-md-12">
        <div class="card">
            <div class="header">
                <h2><strong>Daily</strong> Attendance Overview</h2>
                <div id="legend" class="m-t-10"></div>
            </div>
            <div class="body">                        
                <div id="area_chart" class="graph"></div>
            </div>
        </div>
    </div> 
    <div class="col-lg-5 col-md-12">
        <div class="card">
            <div class="header">
                <h2><strong>Classwise</strong> Students</h2>
            </div>
            <div class="body">                        
                <div id="m_donut_chart" class="graph"></div>
            </div>
        </div>
    </div>          
</div>

<div class="row clearfix">
    <div class="col-lg-4 col-md-12">
        <div class="card">
            <div class="body">
                <ul class="country-state list-unstyled">
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Homework</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["homework"]}}</b> ( {{$comm["homeworkGraph"]}}
                            @if(str_contains($comm["homeworkGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Circular</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["noticeboard"]}}</b> ( {{$comm["noticeboardGraph"]}}
                            @if(str_contains($comm["noticeboardGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Gallery</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["gallery"]}}</b> ( {{$comm["galleryGraph"]}}
                            @if(str_contains($comm["galleryGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Practice Sheet</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["practice"]}}</b> ( {{$comm["practiceGraph"]}}
                            @if(str_contains($comm["practiceGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Positive News</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["positive"]}}</b> ( {{$comm["positiveGraph"]}}
                            @if(str_contains($comm["positiveGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Short Story</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["short"]}}</b> ( {{$comm["shortGraph"]}}
                            @if(str_contains($comm["shortGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                        <hr>
                    </li>
                    <li class="m-b-20">
                        <h6 style="text-transform: none;">Thoughts</h6>
                        <small>Total Uploaded</small>
                        <div class="float-right"> <b>{{$comm["thought"]}}</b> ( {{$comm["thoughtGraph"]}}
                            @if(str_contains($comm["thoughtGraph"], '+')) <i class="fa fa-level-up text-success"></i> @else <i class="fa fa-level-down text-danger"></i> @endif)
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-12">
        <div class="card" style="overflow: scroll;height: 546px;">
            <div class="header">
                <h2><strong>Birthday</strong> Students</h2>
                <img src="{{url('dist/images/bg.gif')}}" alt="Birthday" class="img-fluid m-t-10" style="height: 182px;">
            </div>
            <div class="body table-responsive">
                <table class="table table-hover m-b-0">
                    <tbody>
                        @foreach($stds_birday as $var)
                        <tr>
                            <td>
                                @if(isset($var->photo))
                                <img src="{{url('storage/schools/'.Auth::guard('school')->user()->idSchool.'/students').'/'.$var->photo}}" class="rounded-circle avatar" alt="" style="width:50px;">
                                @else
                                <img src="{{url('dist/images/birthday.png')}}" class="rounded-circle avatar" alt="" style="width:50px;">
                                @endif
                                <p class="c_name">{{$var->firstName}} {{$var->middleName}} {{$var->lastName}} <br> <span class="badge badge-success hidden-sm-down">{{$var->className}}{{$var->sectionName}}</span>  <span class="badge badge-default m-l-10 hidden-sm-down" onclick="toggleDiv({{$var->idStudent}})">Send Wish</span> </p>
                                <div class="row clearfix" id="{{$var->idStudent}}" style="display:none;">
                                    <div class="col-sm-12">
                                        <div class="form-group">                                   
                                            <input type="text" class="form-control" placeholder="Type your message" id="msg_{{$var->idStudent}}"/>                                    
                                        </div>
                                    </div>
                                    <div class="col-sm-3 offset-sm-8">
                                        <button class="btn btn-info" onclick="sendWish({{$var->idStudent}})" id="bt_{{$var->idStudent}}">Send</button>
                                    </div>
                                </div>
                            </td>
                        </tr>  
                        @endforeach   
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-12">
        <div class="card weather2">
            <div class="city-selected body l-khaki">
                <div class="row">
                    <div class="col-12">
                        <div class="city"><span>City:</span> {{$school->city}}</div>
                        <div class="night" id="time"></div>
                    </div>
                    <div class="info col-7">
                        <div class="temp"><h3 id="temperature" style="font-size: 45px;">0°</h3></div>									
                    </div>
                    <div class="icon col-5">
                        <img alt="" id="type_today">
                    </div>
                </div>
            </div>
            <table class="table table-striped m-b-0">
                <tbody>
                    <tr>
                        <td>Wind</td>
                        <td class="font-medium" id="wind">ESE 0 mph</td>
                    </tr>
                    <tr>
                        <td>Humidity</td>
                        <td class="font-medium" id="humidity">0%</td>
                    </tr>
                    <tr>
                        <td>Pressure</td>
                        <td class="font-medium" id="pressure">0 in</td>
                    </tr>
                    <tr>
                        <td>Cloud Cover</td>
                        <td class="font-medium" id="cloud_cover">0%</td>
                    </tr>
                    <tr>
                        <td>Ceiling</td>
                        <td class="font-medium" id="ceiling">0 ft</td>
                    </tr>
                </tbody>
            </table>
            <div class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item text-center active">
                        <div class="col-12">
                            <ul class="row days-list list-unstyled">
                                <li class="day col-4">
                                    <p>Monday</p>
                                    <img alt="" id="mon">
                                </li>
                                <li class="day col-4">
                                    <p>Tuesday</p>
                                    <img alt="" id="tue">
                                </li>
                                <li class="day col-4">
                                    <p style="font-size: 13px;">Wednesday</p>
                                    <img alt="" id="wed">
                                </li>
                            </ul>
                        </div>                                
                    </div>
                    <div class="carousel-item text-center">
                        <div class="col-12">
                            <ul class="row days-list list-unstyled">
                                <li class="day col-4">
                                    <p>Thursday</p>
                                    <img alt="" id="thu">
                                </li>
                                <li class="day col-4">
                                    <p>Friday</p>
                                    <img alt="" id="fri">
                                </li>
                                <li class="day col-4">
                                    <p>Saturday</p>
                                    <img alt="" id="sat">
                                </li>
                            </ul>
                        </div>
                    </div>							
                </div>
            </div>                    
        </div>
    </div>
</div>
<div class="row clearfix">            
    <div class="col-md-6">
        <div class="card">
            <div class="header">
                <h2><strong>Student Event</strong> Calendar</h2>
            </div>
            <div class="body">
                <div id="calendar"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
        <div class="header">
                <h2><strong>Staff Event</strong> Calendar</h2>
            </div>
            <div class="body">
                <div id="calendar_emp"></div>
            </div>
        </div>
    </div>
</div>
<div class="row clearfix">            
    <div class="col-md-8">
        <div class="card">
            <div class="header">
                <h2><strong>To Do</strong> List</h2>
            </div>
            <div class="body">
                <div class="row clearfix">
                    <div class="col-md-12 col-lg-12 col-xl-12">
                        <ul class="mail_list list-group list-unstyled" id="to_do_items">
                            <!---->
                            
                        </ul>
                        <div class="card m-t-5" style="display:none;" id="page">
                            <div class="body">
                                <ul class="pagination pagination-primary m-b-0">
                                    <li class="page-item"><a class="page-link" href="javascript:void(0);" id="prev">Previous</a></li>
                                    <li class="page-item active"><a class="page-link" href="javascript:void(0);" id="current">1</a></li>
                                    <li class="page-item"><a class="page-link" href="javascript:void(0);" id="nxt">Next</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="header">
                <h2><strong>To Do</strong></h2>
            </div>
            <div class="body">
                <form>
                    <div class="form-group">                                
                        <input type="text" id="subject" class="form-control" placeholder="Subject">
                    </div>
                    <div class="form-group">                                
                    <textarea rows="4" class="form-control no-resize" placeholder="What's the reminder?" id="description"></textarea>
                    </div>
                    <div class="form-group">                                
                        <input type="date" id="date" class="form-control" placeholder="Date">
                    </div>
                    <button type="button" class="btn btn-raised btn-primary btn-round waves-effect" id="add" onClick="addToDo()">Add</button>
                </form>
            </div>
        </div>
    </div>
</div>
@stop
@section('script')
<script>
$(function () {
    MorrisArea();  
    MorrisDonutChart();
    fetchDashboard();
});

function sendWish(id){
    $("#bt_"+id).text('Sending..');
    $("#bt_"+id).prop('disabled', true);
    $.ajax({
            type: "POST",
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                request.setRequestHeader('Content-Type', 'application/json');
            },
            url: "{{url('/school/send-birthday-message') }}",
            data: JSON.stringify({
                idStudent : id,
                msg : $("#msg_"+id).val()
            }),
            processData: false,
            success: function(msg) {
                $("#bt_"+id).text('Send');
                $("#bt_"+id).prop('disabled', false);

                if(msg.message == "Sent"){
                    alert("Message sent successfully");
                    $("#msg_"+id).val('');
                    $("#"+id).hide();
                }else alert(msg.message);
                
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Failed to send message");
                $("#bt_"+id).text('Send');
                $("#bt_"+id).prop('disabled', false);
            }
    });
}

function addToDo(){
    $("#add").text('Adding please wait..');
    $("#add").prop('disabled', true);
    $.ajax({
            type: "POST",
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                request.setRequestHeader('Content-Type', 'application/json');
            },
            url: "{{url('/school/add-todo') }}",
            data: JSON.stringify({
                event_time : $("#date").val(),
                subject : $("#subject").val(),
                description : $("#description").val()
            }),
            processData: false,
            success: function(msg) {

                $("#add").text('Add');
                $("#add").prop('disabled', false);

                if(msg.message == "Added"){
                    alert("Added successfully");
                    $("#date").val('');
                    $("#subject").val('');
                    $("#description").val('');
                    fetchTodo();
                }else alert(msg.message);
                
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Failed to add to do");
                $("#add").text('Add');
                $("#add").prop('disabled', false);
            }
    });
}

function fetchTodo(){
    $.ajax({
            type: "GET",
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                request.setRequestHeader('Content-Type', 'application/json');
            },
            url: "{{url('/school/to-todo') }}",
            processData: false,
            success: function(msg) {
                
                $('#to_do_items').empty();
                Object.keys(msg.data.data).forEach(function (item) {
                    console.log(item);
                    $('#to_do_items').append('<li class="list-group-item" id="list_'+msg.data.data[item].idTodo+'">'+
                                '<div class="media" style="margin-bottom:0px !important;">'+
                                    '<div class="media-body">'+
                                        '<div class="media-heading">'+
                                            '<a href="#" class="m-r-10" style="color:black;">'+msg.data.data[item].subject+'</a>'+
                                            '<small class="comment-date float-sm-right" style="font-size: 13px;">'+msg.data.data[item].publishDate+'</small>'+
                                        '</div>'+
                                        '<p class="msg" style="margin-bottom: 0px;">'+msg.data.data[item].description+'</p>'+
                                        '<button class="btn btn-success" style="background-color: #3ba8d5;" onclick="removeDiv('+msg.data.data[item].idTodo+');"><i class="zmdi zmdi-check"></i>Mark as Done</button>'+
                                    '</div>'+
                                '</div>'+
                            '</li>');
                });
            }
    });
}
function toggleDiv(id){
    $('#'+id).toggle();
}
function removeDiv(id){
    $('#list_'+id).remove();
    $.ajax({
            type: "POST",
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                request.setRequestHeader('Content-Type', 'application/json');
            },
            url: "{{url('/school/to-todo/') }}"+'/'+id,
            processData: false,
            success: function(msg) {
                
            }
    });
}

function fetchDashboard(){
    $.ajax({
            type: "POST",
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRF-TOKEN", "{{csrf_token()}}");
                request.setRequestHeader('Content-Type', 'application/json');
            },
            url: "{{url('/school/dashboard-data') }}",
            processData: false,
            success: function(msg) {
               $("#time").html('<p>'+msg.data.time+'</p>');
               $("#temperature").text(msg.data.temp+'°');
               $("#wind").html('ESE '+msg.data.wind+' mph');
               $("#humidity").html(msg.data.humidity+'%');
               $("#pressure").html(msg.data.pressure+' in');
               $("#cloud_cover").html(msg.data.cloud+'%');
               $("#ceiling").html(msg.data.grnd_level+' ft');
               setWeather("#type_today",msg.data.weather);
               var k = 0;
                for (var key in msg.data.forecast) {
                    if(k == 0) setWeather("#mon",msg.data.forecast[key]);
                    if(k == 1) setWeather("#tue",msg.data.forecast[key]); 
                    if(k == 2) setWeather("#wed",msg.data.forecast[key]); 
                    if(k == 3) setWeather("#thu",msg.data.forecast[key]); 
                    if(k == 4) setWeather("#fri",msg.data.forecast[key]); 
                    if(k == 5) setWeather("#sat",msg.data.forecast[key]);
                    k++;
                }
                var empObj = [];
                Object.keys(msg.data.employee_calendar).forEach(function (item) {
                    var itemObj = [];
                    itemObj["title"] = msg.data.employee_calendar[item]["holidayName"];
                    itemObj["start"] = msg.data.employee_calendar[item]["fromDate"];
                    itemObj["end"] = msg.data.employee_calendar[item]["toDate"];
                    if(itemObj["start"] == itemObj["end"]){
                        itemObj["className"] = "b-l b-2x b-amethyst";
                    }else
                    itemObj["className"] = "bg-cyan";

                    empObj.push(itemObj);
                });
                console.log(empObj);
                $('#calendar_emp').fullCalendar({
                        header: {
                            left: 'prev',
                            center: 'title',
                            right: 'next'
                        },
                        defaultDate: msg.data.defaultDate,
                        editable: false,
                        droppable: false,
                        eventLimit: true, // allow "more" link when too many events
                        events: empObj
                });
                var stuObj = [];
                Object.keys(msg.data.student_calendar).forEach(function (item) {
                    var itemObj = [];
                    itemObj["title"] = msg.data.student_calendar[item]["holidayName"];
                    itemObj["start"] = msg.data.student_calendar[item]["fromDate"];
                    itemObj["end"] = msg.data.student_calendar[item]["toDate"];
                    if(itemObj["start"] == itemObj["end"]){
                        itemObj["className"] = "b-l b-2x b-amethyst";
                    }else
                    itemObj["className"] = "bg-cyan";

                    stuObj.push(itemObj);
                });
                console.log(stuObj);
                $('#calendar').fullCalendar({
                        header: {
                            left: 'prev',
                            center: 'title',
                            right: 'next'
                        },
                        defaultDate: msg.data.defaultDate,
                        editable: false,
                        droppable: false,
                        eventLimit: true, // allow "more" link when too many events
                        events: stuObj
                });
                fetchTodo();
            }
    });
}

function setWeather(id,type){
    console.log(type);
    if(type == "Rain")
        $(id).attr('src','{{url("storage/weather/rain.svg")}}');
    else if(type == "Clouds")
        $(id).attr('src','{{url("storage/weather/cloudy.svg")}}');
    else if(type == "Clear")
        $(id).attr('src','{{url("storage/weather/summer.svg")}}');
    else $(id).attr('src','{{url("storage/weather/wind.svg")}}');
}

function MorrisArea() {
    var chart = Morris.Area({
            element: 'area_chart',
            data: [
            @foreach($stu_at as $at)
            {
                period: "{{$at->date}}",
                Student: {{fetchStudentAttendance($at->date)}},
                Employee: @if(isset($emp_at[$at->date])) {{$emp_at[$at->date]}} @else 0 @endif
            },
            @endforeach
        ],
        lineColors: ['#ffce57', '#fe6383'],
        xkey: 'period',
        ykeys: ['Student', 'Employee'],
        labels: ['Student', 'Employee'],
        pointSize: 0,
        lineWidth: 0,
        resize: true,
        fillOpacity: 0.8,
        behaveLikeLine: true,
        gridLineColor: '#e0e0e0',
        hideHover: 'auto'
    });
    chart.options.labels.forEach(function(label, i){
        var legendlabel=$('<span style="display: inline-block;padding-left: 10px;">'+label+'</span>')
        var legendItem = $('<div class="mbox"></div>').css('background-color', chart.options.lineColors[i]).append(legendlabel)
        $('#legend').append(legendItem)   
    })
}
<?php $k=0; ?>
function MorrisDonutChart() {
    Morris.Donut({
        element: 'm_donut_chart',
        data: [
            @foreach($classwise as $var)
            {
                label: "{{ $var->className }}",
                value: {{$var->total}},
            },
            @endforeach
        ],
        resize: true,
        colors: [
            '#ffd97f', '#fab2c0', '#80dad8', '#a1abb8',
            @foreach($classwise as $var)
            <?php $k++;?>
            '{{rand_color($k)}}',
            @endforeach
        ]
    });
    $("#m_donut_chart tspan").css("font-size","13px");
    $( "#m_donut_chart" ).mouseover(function() {
        $("#m_donut_chart tspan").css("font-size","13px");
    });
}

</script>
@stop