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

<style type="text/css">
.recent_activities{
    height: 460px;
}

</style>
<!-- page content -->
<div class="right_col" role="main">
  <!-- top tiles -->
  <div class="row tile_count">
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Submitted Vendors</span>
      <div class="count"><a href="{{url('/submitvendors_list_student')}}">{{$submited_vendercount}}</a></div>
      <span class="count_bottom"><i class="green">4% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Sheduled Interviews </span>
      <div class="count green"><a href="{{ url('/scheduled_list_student')}}">{{$sheduled_interviews}}</a></div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Attended Interviews</span>
      <div class="count"><a href="{{ url('/scheduled_list_student')}}">{{$attended_interviews}}</a></div>
      <span class="count_bottom"><i class="red"><i class="fa fa-sort-desc"></i>12% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-clock-o"></i> Exams Taken</span>
      <div class="count"><a href="{{url('/student_tests')}}">{{$student_tests_count}}</a></div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Tickets</span>
      <div class="count"><a href="{{ url('/ticketsList')}}">{{$tickets}}</a></div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
      <span class="count_top"><i class="fa fa-user"></i> Attachements</span>
      <div class="count"><a href="{{ url('/attachments')}}">{{$attachemnts}}</a></div>
      <span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>34% </i> From last Week</span>
    </div>
  </div>
  <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>Recent Activities <small>Sessions</small></h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="dashboard-widget-content recent_activities">
                        <ul class="list-unstyled timeline widget">
                            @if(count($latest_activities)>0)
                            @foreach($latest_activities as $latest_activity)
                            <li>
                                <div class="block">
                                    <div class="block_content">
                                        <h2 class="title">
                                          <img src="{{ Userdefined::getAvatar(Auth::user()->id)  }}" class="avatar" alt="Avatar">         
                                            <div class="byline" style="margin-left: 80px">
                                                <span>{{ date('d M',strtotime($latest_activity['created_at'])) }}</span> {{ date('Y',strtotime($latest_activity['created_at'])) }}
                                            </div>
                                        </h2>
                                        <p class="excerpt" style="margin-left: 80px">{{ $latest_activity['text'] }}</a>
                                        </p>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                            @else
                            <li>
                                <div class="block">
                                    <div class="block_content">
                                        <h2 class="title">
                                            <div class="byline">
                                                No Recent Activity!
                                            </div>
                                        </h2>
                                    </div>
                                </div>
                            </li>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- start of weather widget -->
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel" style="height: 270px">
                        <div class="x_title">
                            <h2>Temperature <small>Thursday, 16-Apr-2026</small></h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content whether_report_container"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel" style="height: 270px">
                        <div class="x_title">
                            <h2>Time <small>12:11 AM</small></h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content time_container"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end of weather widget -->
    </div>
</div>
<!-- /page content -->
<script type="text/javascript">
  $(document).ready(function(){
      const main = () => {
        $('.whether_report_container').yahooWeather();
      }
      $(document).ready(main);  

        if($.fn.mCustomScrollbar){
        $('.recent_activities').mCustomScrollbar({
            autoHideScrollbar: true,
            theme: 'dark-3',
            mouseWheelPixels: 50,
            scrollInertia: 60,
            mouseWheel:{ preventDefault: true }
        });
    }
      var dates = new Date();
    var weekday = new Array(7);
    weekday[0] =  "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var today = weekday[dates.getDay()];

    'use strict';
    $.fn.yahooWeather = function(p1){
        const fahrenheitToCelsius = (f) => Math.ceil((f-32)/1.8);
        const kharkivLocation = {
            coords : {
                latitude : 40.0182536,
                longitude : -85.9987006
            }
        }
        const config = {
            method : 'GET',
            mode : 'cors'
        }
        const def = {}
        const location = new Promise(function(res,rej){
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(res, rej);
            } else rej('Browser doesn\'t support Geolocation');
        });
        location
            .catch(()=> Promise.resolve(kharkivLocation))
            .then((location)=>{
                const query = `
                    select * from weather.forecast where woeid in (
                        SELECT woeid FROM geo.places 
                        WHERE text="(${location.coords.latitude},${location.coords.longitude})"
                    )
                `;  
                const uri = `https://query.yahooapis.com/v1/public/yql?q=${query}&format=json`;
                return fetch(uri, config)
            })
            .then(res => res.json())
            .then(res => {
                const item = res.query.results.channel.item;
                def.city = res.query.results.channel.location.city;
                def.country = res.query.results.channel.location.country;
                def.date = new Date(res.query.created);
                def.tHigh = fahrenheitToCelsius(item.forecast[0].high);
                def.tLow = fahrenheitToCelsius(item.forecast[0].low);
                def.condition = item.condition.code;
                def.temp = fahrenheitToCelsius(item.condition.temp);
                def.template = template;
                this.append(def.template());
            })
            .catch((err)=>{console.log(err)});
        return this;

        function template() {
            return `
                <div class="row">
                    <div class="col-sm-2">
                        <div class="weather-icon">
                            <i style="font-size: 60px" class="fa fa-mixcloud"></i>
                        </div>
                    </div>
                    <div class="col-sm-10">
                        <div class="weather-text">
                            <h2>${this.city} <i>${this.country}</i></h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12" style="margin-top: -11px">
                    <div class="weather-text pull-right">
                        <h3><span style="font-size: 13px">Current Temperature</span> ${this.temp}&deg;C/${this.temp*9/5+32}&deg;F</h3>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="row weather-days">
                    <div class="col-sm-6">
                        <div class="daily-weather text-center">
                            <h2 class="day">Min <i class="fa fa-arrow-down" width="32" height="32"></i></h2>
                            <h3>${this.tLow}&deg;C/${this.tLow*9/5+32}&deg;F</h3>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="daily-weather text-center">
                            <h2 class="day">Max <i class="fa fa-arrow-up" width="32" height="32"></i></h2>
                            <h3>${this.tHigh}&deg;C/${this.tHigh*9/5+32}&deg;F</h3>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            `;
        };
    }

    var content = `
            <div class="row weather-days">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                    <div class="daily-weather text-center">
                        <h2 class="day" style="font-size: 9px">EST pm</h2>
                        <h4>01:41</h4>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="daily-weather text-center">
                        <h2 class="day" style="font-size: 9px">CST pm</h2>
                        <h4>12:41</h4>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="daily-weather text-center">
                        <h2 class="day" style="font-size: 9px">MST am</h2>
                        <h4>11:41</h4>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="daily-weather text-center">
                        <h2 class="day" style="font-size: 9px">PST am</h2>
                        <h4>11:41</h4>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="daily-weather text-center">
                        <h2 class="day" style="font-size: 9px">IST am</h2>
                        <h4>12:11</h4>
                    </div>
                </div>
                <div class="col-sm-1"></div>
                <div class="clearfix"></div>
            </div>`;
            $(".time_container").html(content);
  });
</script>

@stop