@extends('admin.layout.master')
@section('content')
<style>
    .gallery-item {
        width: 80px !important;
        height: 80px !important;
    }

    .progress1 {
        width: 150px;
        height: 150px;
        line-height: 150px;
        background: none;
        margin: 0 auto;
        box-shadow: none;
        position: relative;
    }

    .progress1:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 12px solid #fff;
        position: absolute;
        top: 0;
        left: 0;
    }

    .progress1>span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .progress1 .progress1-left {
        left: 0;
    }

    .progress1 .progress1-bar {
        width: 100%;
        height: 100%;
        background: none;
        border-width: 12px;
        border-style: solid;
        position: absolute;
        top: 0;
    }

    .progress1 .progress1-left .progress1-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left;
    }

    .progress1 .progress1-right {
        right: 0;
    }

    .progress1 .progress1-right .progress1-bar {
        left: -100%;
        border-top-left-radius: 80px;
        border-bottom-left-radius: 80px;
        border-right: 0;
        -webkit-transform-origin: center right;
        transform-origin: center right;
        animation: loading-1 1.8s linear forwards;
    }

    .progress1 .progress1-value {
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: #44484b;
        font-size: 24px;
        color: #fff;
        line-height: 135px;
        text-align: center;
        position: absolute;
        top: 5%;
        left: 5%;
    }

    .progress1.blue .progress1-bar {
        border-color: #049dff;
    }

    .progress1.blue .progress1-left .progress1-bar {
        animation: loading-2 1.5s linear forwards 1.8s;
    }

    .progress1.yellow .progress1-bar {
        border-color: #fdba04;
    }

    .progress1.yellow .progress1-left .progress1-bar {
        animation: loading-3 1s linear forwards 1.8s;
    }

    .progress1.pink .progress1-bar {
        border-color: #ed687c;
    }

    .progress1.pink .progress1-left .progress1-bar {
        animation: loading-4 0.4s linear forwards 1.8s;
    }

    .progress1.green .progress1-bar {
        border-color: #1abc9c;
    }

    .progress1.green .progress1-left .progress1-bar {
        animation: loading-5 1.2s linear forwards 1.8s;
    }

    <blade keyframes|%20loading-1%7B%0D>0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    }

    <blade keyframes|%20loading-2%7B%0D>0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
    }
    }

    <blade keyframes|%20loading-3%7B%0D>0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    }

    <blade keyframes|%20loading-4%7B%0D>0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
    }
    }

    <blade keyframes|%20loading-5%7B%0D>0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(126deg);
        transform: rotate(126deg);
    }
    }

    <blade media|%20only%20screen%20and%20(max-width%3A%20990px)%7B%0D>.progress1 {
        margin-bottom: 20px;
    }
    }

    #dashboard {
        height: 100px;
        background: #6777ef !important;
        color: #fff;
    }

</style>
<div class="row">
    <div class="col-md-9">

        <div class="row ">
            <div class="col-xl-6 col-lg-6">
                <div class="card l-bg-style1">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-award"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">Grants Applied</h4>
                            <h6 id="total_grant">{{$grant_total}}</h6>
                            <div class="progress mt-1 mb-1" data-height="8" style="height: 8px;">
                                <div id="grant_process" class="progress-bar l-bg-purple" role="progressbar" data-width="{{$month_grant_per}}%"
                                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: {{$month_grant_per}}%;"></div>
                            </div>
                            <p class="mb-0 text-sm">
                                <span class="mr-2" id="current_grant"><i class="fa fa-arrow-up"></i> {{$month_grant_per}}%</span>
                                <span class="text-nowrap">Current month</span>
                            </p>
                            <p class="mb-0 text-sm mt-3">
                                <a href="javascript:void(0)" id="add-grant"><span class="mr-2 btn btn-primary"><i class="fa fa-plus"></i></span></a>
                                <a href="javascript:void(0)" id="subtract-grant"><span class="text-nowrap mr-2 btn btn-primary"><i class="fa fa-minus"></i></span></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6">
                <div class="card l-bg-style2">
                    <div class="card-statistic-3">
                        <div class="card-icon card-icon-large"><i class="fa fa-briefcase"></i></div>
                        <div class="card-content">
                            <h4 class="card-title">Loans Applied</h4>
                            <h6 id="total_loan">{{$loan_total}}</h6>
                            <div class="progress mt-1 mb-1" data-height="8" style="height: 8px;">
                                <div id="loan_process" class="progress-bar l-bg-orange" role="progressbar" data-width="{{$month_loan_per}}%"
                                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: {{$month_loan_per}}%;"></div>
                            </div>
                            <p class="mb-0 text-sm">
                                <span class="mr-2" id="current_loan"><i class="fa fa-arrow-up"></i> {{$month_loan_per}}%</span>
                                <span class="text-nowrap">Current month</span>
                            </p>
                            <p class="mb-0 text-sm mt-3">
                               <a href="javascript:void(0)" id="add-loan"> <span class="mr-2 btn btn-primary"><i class="fa fa-plus"></i></span></a>
                               <a href="javascript:void(0)" id="subtract-loan"> <span class="text-nowrap mr-2 btn btn-primary"><i class="fa fa-minus"></i></span></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="d-inline">Your To Do List</h4>
                    </div>
                    <div class="card-body overflow-auto" style="height: 450px;">
                        <ul class="list-unstyled list-unstyled-border">
                           {{-- {{dd($dolist_ex)}} --}}
                            @foreach($dolist_ex as $key => $dolistvalue)
                                <li class="media">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="dolist{{$dolistvalue->id}}" data-id="{{$dolistvalue->id}}" value="{{$dolistvalue->id}}" class="custom-control-input @if($dolistvalue->name=="Business Plan") {{'bussiness_plan'}} @elseif($dolistvalue->name=="Application Completed") {{'application_completed'}} @endif" id="dolist{{$dolistvalue->id}}" @if($dolistvalue->status=="completed") checked @endif  @if($dolistvalue->name=="Business Plan Reviewed") disabled @elseif($dolistvalue->name=="Application Reviewed") disabled @endif>
                                        <label class="custom-control-label" for="dolist{{$dolistvalue->id}}"></label>
                                    </div>
                                    {{-- <img alt="image" class="mr-3 rounded-circle" width="50"
                                        src="{{ asset('assets/img/users/user-4.png') }}"> --}}
                                    <div class="media-body">
                                        <div class="badge badge-pill mb-1 float-right @if($dolistvalue->status=="progress"){{'badge-warning'}}@else{{'badge-primary'}}@endif">{{ucfirst($dolistvalue->status)}}</div>
                                        <h6 class="media-title"><a href="#">{{$dolistvalue->name}}</a></h6>
                                        {{-- <div class="text-small text-muted">Hasan Basri <div class="bullet"></div> 4 Min
                                        </div> --}}
                                    </div>
                                </li>
                             @endforeach

                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="text-center">
                        <h4>Advisors Comments</h4><br>
                        <p class="text-center">@if(!empty($notes)){{$notes->note}}@endif</p>
                    </div>
                    <div class="card-body overflow-auto" style="height: 410px;">
                        <div class="gallery">
                            <div class="gallery-item" data-image="assets/img/blog/img01.png" data-title="Image 1"
                                href="assets/img/blog/img01.png" title="Image 1"
                                style="background-image: url(&quot;assets/img/blog/img01.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img02.png" data-title="Image 2"
                                href="assets/img/blog/img02.png" title="Image 2"
                                style="background-image: url(&quot;assets/img/blog/img02.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img03.png" data-title="Image 3"
                                href="assets/img/blog/img03.png" title="Image 3"
                                style="background-image: url(&quot;assets/img/blog/img03.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img04.png" data-title="Image 4"
                                href="assets/img/blog/img04.png" title="Image 4"
                                style="background-image: url(&quot;assets/img/blog/img04.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img05.png" data-title="Image 5"
                                href="assets/img/blog/img05.png" title="Image 5"
                                style="background-image: url(&quot;assets/img/blog/img05.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img06.png" data-title="Image 6"
                                href="assets/img/blog/img06.png" title="Image 6"
                                style="background-image: url(&quot;assets/img/blog/img06.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img07.png" data-title="Image 7"
                                href="assets/img/blog/img07.png" title="Image 7"
                                style="background-image: url(&quot;assets/img/blog/img07.png&quot;);"></div>
                            <div class="gallery-item" data-image="assets/img/blog/img08.png" data-title="Image 8"
                                href="assets/img/blog/img08.png" title="Image 8"
                                style="background-image: url(&quot;assets/img/blog/img08.png&quot;);"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        @php
                            $mytime = Carbon\Carbon::now();
                            //$time=$mytime->toDateTimeString();
                            //dd($time);
                            $currentdate=$mytime->format('Y-m-d');
                            $day = $mytime->format('l');
                            $month = $mytime->format('F');
                            $date = $mytime->format('d');
                            $year = $mytime->format('Y');
                            //dd($date);
                        @endphp
                        <h6 id="day">{{ $day }} </h6>
                        <h6 id="demo">19:41:51</h6>
                    </div>
                </div>
                <div class="row mt-5 border-bottom">
                    <div class="col-md-12 text-center">
                        <h6 id="mdy">{{ $month }} {{ $date }} {{ $year }}</h6>
                        <h5></h5>
                        <h5>  </h5>
                    </div>
                </div>


            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        setInterval(myFunction, 1000);

         function myFunction() {
            var d = new Date();
            //var date = d.getDate();
            //var month=  d.getMonth();
           // var year = d.getFullYear();
            var n = d.toLocaleString([], { hour: '2-digit', minute: '2-digit', second: '2-digit',timeZone: 'America/Toronto' });
            var  mdy= d.toLocaleString([], { month: 'short', day: 'numeric',year: 'numeric', timeZone: 'America/Toronto' });
            var  dayname= d.toLocaleString([], {  weekday: 'long', timeZone: 'America/Toronto' });
            document.getElementById("demo").innerHTML = n;
            document.getElementById("mdy").innerHTML = mdy;
            document.getElementById("day").innerHTML = dayname;
        }
        $(document).on("click","#add-grant",function(){
            if(confirm('Would you like to add a grant?'))
            {
                //alert(id);
                $.ajax({
                    url:"{{url('user/add_grant')}}",
                    type:'GET',
                    //data:{
                    //    id:1,
                    //},
                    success:function(response)
                    {
                        //console.log(response.grant_total)
                        $("#total_grant").text(response.grant_total)
                        $("#grant_process").replaceWith('<div id="grant_process" class="progress-bar l-bg-purple" role="progressbar" data-width="'+response.month_grant_per+'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:'+response.month_grant_per+'%;"></div>')
                        $("#current_grant").replaceWith('<span class="mr-2" id="current_grant"><i class="fa fa-arrow-up"></i> '+response.month_grant_per+'%</span>')
                        //$('#ownerid'+id).remove();
                    }

                });

            }
        });

         $(document).on("click","#subtract-grant",function(){
            if(confirm('Would you like to deduct a grant?'))
            {
                //alert(id);
                $.ajax({
                    url:"{{url('user/minus_grant')}}",
                    type:'GET',
                    //data:{
                    //    id:1,
                    //},
                    success:function(response)
                    {
                        //console.log(response)
                        $("#total_grant").text(response.grant_total)
                        $("#grant_process").replaceWith('<div id="grant_process" class="progress-bar l-bg-purple" role="progressbar" data-width="'+response.month_grant_per+'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:'+response.month_grant_per+'%;"></div>')
                        $("#current_grant").replaceWith('<span class="mr-2" id="current_grant"><i class="fa fa-arrow-up"></i> '+response.month_grant_per+'%</span>')
                    }

                });

            }
        });

         $(document).on("click","#add-loan",function(){
            if(confirm('Would you like to add a loan?'))
            {
                //alert(id);
                $.ajax({
                    url:"{{url('user/add_loan')}}",
                    type:'GET',
                    //data:{
                    //    id:1,
                    //},
                    success:function(response)
                    {
                        //console.log(response.grant_total)
                        $("#total_loan").text(response.loan_total)
                        $("#loan_process").replaceWith('<div id="loan_process" class="progress-bar l-bg-orange" role="progressbar" data-width="'+response.month_loan_per+'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:'+response.month_loan_per+'%;"></div>')
                        $("#current_loan").replaceWith('<span class="mr-2" id="current_loan"><i class="fa fa-arrow-up"></i> '+response.month_loan_per+'%</span>')
                        //$('#ownerid'+id).remove();
                    }

                });

            }
        });

         $(document).on("click","#subtract-loan",function(){
            if(confirm('Would you like to deduct a loan?'))
            {
                //alert(id);
                $.ajax({
                    url:"{{url('user/minus_loan')}}",
                    type:'GET',
                    //data:{
                    //    id:1,
                    //},
                    success:function(response)
                    {
                        //console.log(response.grant_total)
                        $("#total_loan").text(response.loan_total)
                        $("#loan_process").replaceWith('<div id="loan_process" class="progress-bar l-bg-orange" role="progressbar" data-width="'+response.month_loan_per+'" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:'+response.month_loan_per+'%;"></div>')
                        $("#current_loan").replaceWith('<span class="mr-2" id="current_loan"><i class="fa fa-arrow-up"></i> '+response.month_loan_per+'%</span>')
                        //$('#ownerid'+id).remove();
                    }

                });

            }
        });

        $(document).on("click",".bussiness_plan",function(){
            if(confirm('Would you like your advisor to review your business plan?'))
            {
                var id=$(this).val();

                 $.ajax({
                    url:"{{url('user/dolist')}}/"+id,
                    type:'GET',
                    data:{
                        id:id,
                    },
                    success:function(response)
                    {
                        location.reload();
                    }
                });

            }
        });

        $(document).on("click",".application_completed",function(){
            if(confirm('Would you like your advisor to review your application?'))
            {
                var id=$(this).val();

                 $.ajax({
                    url:"{{url('user/dolist')}}/"+id,
                    type:'GET',
                    data:{
                        id:id,
                    },
                    success:function(response)
                    {
                        location.reload();
                    }
                });

            }
        });

    </script>
@endsection