@extends('user_dashboard.layouts.app')
@section('content')
    <link href="{{ asset('user_dashboard/flip/flip.min.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('user_dashboard/flip/flip.min.js') }}"></script>
    <script>
        function handle_tickInit(tick) {
            var nextYear = "{{ $target->end_date }}";

            Tick.count.down(nextYear).onupdate = function(value) {
                tick.value = value;
            };

        }
    </script>
    <style>
        .rbt-card.card-list-2 .rbt-card-img {
            flex-basis: 20%;
        }

        .rbt-card.card-list-2 .rbt-card-body {
            flex-basis: 80%;
        }

        .rbt-card.card-list-2.event-list-card .rbt-card-img a img {
            height: auto;
        }

        .rbt-card.card-list-2 {
            align-items: normal;
        }

        .rbt-card.card-list-2 .rbt-card-body {
            justify-content: normal;
        }

        .progress {
            height: 8px !important;
        }

        .rbt-badge-2 {
            height: 30px;
        }

        .rbt-badge-card::before {
            opacity: 0.85;
        }

        .progress .progress-number {
            top: 9px;
        }
    </style>
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>

                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="section-title">
                                    <h4 class="rbt-title-style-3 text-center">Qualification Details</h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-4">
                                <div class="rbt-card card-list-2 event-list-card variation-01 rbt-hover">
                                    <div class="rbt-card-img">
                                        <a href="#">
                                            <img src="{{ asset('user_dashboard/images/trophy.png') }}" alt="Card image" style="width:100px">
                                        </a>
                                    </div>
                                    <div class="rbt-card-body">
                                        <p>
                                            {{ $target->description_one }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-4">
                                <div class="rbt-card card-list-2 event-list-card variation-01 rbt-hover">
                                    <div class="rbt-card-img">
                                        <a href="#">
                                            <img src="{{ asset('user_dashboard/images/target.png') }}" alt="Card image" style="width:100px">
                                        </a>
                                    </div>
                                    <div class="rbt-card-body">
                                        <p>
                                            {{ $target->description_two }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-4">
                                <div class="rbt-card card-list-2 event-list-card variation-01 rbt-hover">
                                    <div class="rbt-card-img">
                                        <a href="#">
                                            <img src="{{ asset('user_dashboard/images/schedule.png') }}" alt="Card image" style="width:100px">
                                        </a>
                                    </div>
                                    <div class="rbt-card-body">
                                        <p>
                                            {{ $target->description_three }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10 pb--10 pt--30">
                        <div class="row">
                            <div class="col-md-8 m-auto">
                                <div class="tick" data-did-init="handle_tickInit">
                                    <div data-repeat="true" data-layout="horizontal center fit" data-transform="preset(d, h, m, s) -> delay">
                                        <div class="tick-group">
                                            <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                                                <span data-view="flip"></span>
                                            </div>
                                            <span data-key="label" data-view="text" class="tick-label"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 offset-lg-2 mt--30">
                                <div class="single-progress">
                                    <h6 class="rbt-badge-2">Achieve</h6>
                                    <div class="progress">
                                        <div class="progress-bar wow fadeInLeft bar-color-3" data-wow-duration="0.5s" data-wow-delay=".3s" role="progressbar" style="width: {{$avg_percent}}%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                        <span class="progress-number rbt-badge-card">{{$avg_percent}}%</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-3 m-auto">
                            @if($target->no_of_referral != 0)
                                <div class="col-sm-4 mb--20">
                                    <div class="card widget-flat bg-gradient-16 radius-10" style="border:0;">
                                        <div class="card-body p-4">
                                            <img src="{{ asset('user_dashboard/images/circle.svg') }}" alt="circle-image">
                                            <h3 class="text-white mb-3"> <span class="counter-value">{{$total_affiliate_user}}</span></h3>
                                            <h5 class="text-white fw-normal mt-0 mb-2" title="Referrals">Referrals</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4 mb--20">
                                    <div class="card widget-flat bg-gradient-7 radius-10" style="border:0;">
                                        <div class="card-body p-4">
                                            <img src="{{ asset('user_dashboard/images/circle.svg') }}" alt="circle-image">
                                            <h3 class="text-white mb-3"> <span class="counter-value">{{$target->no_of_referral}}</span></h3>
                                            <h5 class="text-white fw-normal mt-0 mb-2" title="Referrals">Target Referrals</h5>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if($target->amount != 0)
                                <div class="col-sm-4 mb--20">
                                    <div class="card widget-flat bg-gradient-8 radius-10" style="border:0;">
                                        <div class="card-body p-4">
                                            <img src="{{ asset('user_dashboard/images/circle.svg') }}" alt="circle-image">
                                            <h3 class="text-white mb-3"><small>₹</small> <span class="counter-value">{{ $target->amount }}</span></h3>
                                            <h5 class="text-white fw-normal mt-0 mb-2" title="Number of Orders">Target Amount</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4 mb--20">
                                    <div class="card widget-flat gradient-45deg-red-pink radius-10" style="border:0;">
                                        <div class="card-body p-4">
                                            <img src="{{ asset('user_dashboard/images/circle.svg') }}" alt="circle-image">
                                            <h3 class="text-white mb-3">
                                                @if($remaining_commission <= 0)
                                                    <small>₹</small> <span class="counter-value">0</span></h3>
                                                @else
                                                    <small>₹</small> <span class="counter-value">{{$remaining_commission}}</span></h3>
                                                @endif
                                            <h5 class="text-white fw-normal mt-0 mb-2" title="Number of Orders">Remaining Amount</h5>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection