@extends('backend.layout.master')
@include('backend.kg-dashboard.css')
@section('content')
    <div class="page-body">
        <div class="container">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6 main-header">
                        <h2><span>Dashboard </span></h2>

                    </div>

                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container ">
            <div class="row  ">
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <a href="{{route('kids.index')}}">
                        <div class="card gradient-primary o-hidden">
                            <div class="b-r-4 card-body">
                                <div class="media static-top-widget">
                                    <div class="align-self-center text-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
                                    <div class="media-body"><span class="m-0 text-white">Students</span>
                                        <h4 class="mb-0 counter">{{$data['total_students']}}</h4><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user icon-bg"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <a href="{{route('report.index')}}">
                        <div class="card gradient-primary o-hidden">
                            <div class="b-r-4 card-body">
                                <div class="media static-top-widget">
                                    <div class="align-self-center text-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg></div>
                                    <div class="media-body"><span class="m-0 text-white">Reports</span>
                                        <h4 class="mb-0 counter">{{$data['reports']}}</h4><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database icon-bg"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <a href="{{route('message.index')}}">
                        <div class="card gradient-primary o-hidden">
                            <div class="b-r-4 card-body">
                                <div class="media static-top-widget">
                                    <div class="align-self-center text-center"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle text-white i"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg></div>
                                    <div class="media-body"><span class="m-0 text-white">Messages</span>
                                        <h4 class="mb-0 counter">{{$data['messages']}}</h4><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle icon-bg"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-12 xl-100 box-col-12 pull-right">
                    <div class="card m-t-50">
                        <div class="mobile-clock-widget">
                            <div class="bg-svg">
                                <svg class="climacon climacon_cloudHailAltMoon" id="cloudHailAltMoon2" version="1.1" viewBox="15 15 70 70">
                                    <clippath id="cloudFillClipfill90">
                                        <path d="M15,15v70h70V15H15z M59.943,61.639c-3.02,0-12.381,0-15.999,0c-6.626,0-11.998-5.371-11.998-11.998c0-6.627,5.372-11.999,11.998-11.999c5.691,0,10.434,3.974,11.665,9.29c1.252-0.81,2.733-1.291,4.334-1.291c4.418,0,8,3.582,8,8C67.943,58.057,64.361,61.639,59.943,61.639z"></path>
                                    </clippath>
                                    <clippath id="moonCloudFillClipfill50">
                                        <path d="M0,0v100h100V0H0z M60.943,46.641c-4.418,0-7.999-3.582-7.999-7.999c0-3.803,2.655-6.979,6.211-7.792c0.903,4.854,4.726,8.676,9.579,9.58C67.922,43.986,64.745,46.641,60.943,46.641z"></path>
                                    </clippath>
                                    <g class="climacon_iconWrap climacon_iconWrap-cloudHailAltMoon">
                                        <g clip-path="url(#cloudFillClip)">
                                            <g class="climacon_wrapperComponent climacon_wrapperComponent-moon climacon_componentWrap-moon_cloud">
                                                <path class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody" d="M61.023,50.641c-6.627,0-11.999-5.372-11.999-11.998c0-6.627,5.372-11.999,11.999-11.999c0.755,0,1.491,0.078,2.207,0.212c-0.132,0.576-0.208,1.173-0.208,1.788c0,4.418,3.582,7.999,8,7.999c0.614,0,1.212-0.076,1.788-0.208c0.133,0.717,0.211,1.452,0.211,2.208C73.021,45.269,67.649,50.641,61.023,50.641z"></path>
                                                <path class="climacon_component climacon_component-fill climacon_component-fill_moon" fill="#FFFFFF" d="M59.235,30.851c-3.556,0.813-6.211,3.989-6.211,7.792c0,4.417,3.581,7.999,7.999,7.999c3.802,0,6.979-2.655,7.791-6.211C63.961,39.527,60.139,35.705,59.235,30.851z"></path>
                                            </g>
                                        </g>
                                        <g class="climacon_wrapperComponent climacon_wrapperComponent-hailAlt">
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-left">
                                                <circle cx="42" cy="65.498" r="2"></circle>
                                            </g>
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-middle">
                                                <circle cx="49.999" cy="65.498" r="2"></circle>
                                            </g>
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-right">
                                                <circle cx="57.998" cy="65.498" r="2"></circle>
                                            </g>
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-left">
                                                <circle cx="42" cy="65.498" r="2"></circle>
                                            </g>
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-middle">
                                                <circle cx="49.999" cy="65.498" r="2"></circle>
                                            </g>
                                            <g class="climacon_component climacon_component-stroke climacon_component-stroke_hailAlt climacon_component-stroke_hailAlt-right">
                                                <circle cx="57.998" cy="65.498" r="2"></circle>
                                            </g>
                                        </g>
                                        <g class="climacon_wrapperComponent climacon_wrapperComponent-cloud" clip-path="url(#cloudFillClip)">
                                            <path class="climacon_component climacon_component-stroke climacon_component-stroke_cloud" d="M63.999,64.941v-4.381c2.39-1.384,3.999-3.961,3.999-6.92c0-4.417-3.581-8-7.998-8c-1.602,0-3.084,0.48-4.334,1.291c-1.23-5.317-5.974-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.998c0,3.549,1.55,6.728,3.999,8.924v4.916c-4.776-2.768-7.998-7.922-7.998-13.84c0-8.835,7.162-15.997,15.997-15.997c6.004,0,11.229,3.311,13.966,8.203c0.663-0.113,1.336-0.205,2.033-0.205c6.626,0,11.998,5.372,11.998,12C71.998,58.863,68.656,63.293,63.999,64.941z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <!-- <div>
                              <div class="clock-card gradient-primary">
                                <ul class="clock" id="clock">
                                  <li class="hour" id="hour"></li>
                                  <li class="min" id="min"></li>
                                  <li class="sec" id="sec"></li>
                                </ul>
                              </div>
                            </div> -->
                            <div style="position: absolute;right: 10px;">
                                <div class="clock-card gradient-primary" style="background:transparent">
                                    <ul class="clock" id="clock">
                                        <li class="hour" id="hour" style="transform: rotate(427deg);"></li>
                                        <li class="min" id="min" style="transform: rotate(84deg);"></li>
                                        <li class="sec" id="sec" style="transform: rotate(186deg);"></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="clock-details" >

                                <div class="date f-44 mb-2" id="date"><span>{{date("M d")}}</span> <span>{{date("Y")}}</span></div>

                                <div>
                                    <p class="m-0 f-18 text-light" id="current_timezone">kolkata, India                                            </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Container-fluid Ends-->

    </div>

@endsection
@include('backend.kg-dashboard.js')