@extends('backend.layout.master')
@include('backend.kg-dashboard.css')
@section('content')
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6 main-header">
                        <h2>Welcome<span>{{auth()->guard('web')->user()->name}} </span></h2>
                        <h6 class="mb-0">Dashboard</h6>
                    </div>
{{--                    <div class="col-lg-6 breadcrumb-right">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><i class="pe-7s-home"></i></a></li>
                            <li class="breadcrumb-item">Dashboard</li>
                            <li class="breadcrumb-item active">Default  </li>
                        </ol>
                    </div>--}}
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            @if(!auth()->guard('web')->user()->is_subscription_active)
                <div class="row mb-5">
                    <h4>Subscription Status: Inactive  <button class="btn btn-pill btn-secondary checkout_btn">Activate Now</button></h4>
                </div>
            @endif
            @php
                $now = time(); // or your date as well
                $expiry_date = strtotime(auth()->guard('web')->user()->subscription_expiry);
                $datediff = $expiry_date - $now;
                $diffInDays = round($datediff / (60 * 60 * 24));
                if($diffInDays >= 0 && $diffInDays <= 7)
                    {
                        $renew = true;
                        echo '<div class="alert alert-danger alert-dismissible" role="alert">Your Subscription will expire in '.abs($diffInDays).' days. <button class="btn btn-primary btn-pill checkout_btn">Renew Now</button> <button class="close" type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
                    }
            @endphp
            @if(session()->has('success'))
                <div class="alert alert-success">
                    {{ session()->get('success') }}
                </div>
            @endif
            @if(session()->has('error'))
                <div class="alert alert-danger">
                    {{ session()->get('error') }}
                </div>
            @endif

            <div class="row">
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <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"><i data-feather="user"></i></div>
                                <div class="media-body"><span class="m-0 text-white">Total Kids</span>
                                    <h4 class="mb-0">{{$data['total_students']}}</h4><i class="icon-bg" data-feather="user"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <div class="card gradient-warning o-hidden">
                        <div class="b-r-4 card-body">
                            <div class="media static-top-widget">
                                <div class="align-self-center text-center">
                                    <div class="text-white i" data-feather="log-in"></div>
                                </div>
                                <div class="media-body"><span class="m-0 text-white">Total Checkins</span>
                                    <h4 class="mb-0 text-white">{{$data['present_today']}}</h4><i class="icon-bg" data-feather="log-in"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-4 col-lg-6 box-col-6">
                    <div class="card gradient-info o-hidden">
                        <div class="b-r-4 card-body">
                            <div class="media static-top-widget">
                                <div class="align-self-center text-center">
                                    <div class="text-white i" data-feather="log-out"></div>
                                </div>
                                <div class="media-body"><span class="m-0 text-white">Total Checkouts</span>
                                    <h4 class="mb-0 text-white">{{$data['absent_today']}}</h4><i class="icon-bg" data-feather="log-out"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 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(378.5deg);"></li>
                                        <li class="min" id="min" style="transform: rotate(222deg);"></li>
                                        <li class="sec" id="sec" style="transform: rotate(126deg);"></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="clock-details">
                                <div class="date f-44 mb-2" id="date"><span id="monthDay"></span><span id="year">,&nbsp;</span></div>
                                <div>
                                    <p class="m-0 f-18 text-light" id="current_timezone"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->

    </div>

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