@extends('layouts.app')
@section('PageHeading', 'Dashboard')
@section('content')
@section('sidebar', 'true')
<div class="container_fluid">
    <div class="box_content">
        <div class="box_overlayout">
            <div class="box_innerlayout">
                <div class="task_card">
                    <div class="row align-items-center">
                        <div class="col-md-6 d-flex align-items-center">
                            @if(empty($studio))
                            <div class="task_card_header">
                                <h5>{{Helper::getHeadingCommonText()}}</h5>
                                <p>{{count($allStudios)}} Studios</p>
                            </div>
                            @else
                            <div class="training_img">
                                <img class="rounded-circle" src="{{Helper::getStudioLogo($studio->logo)}}" alt="logo">
                            </div>
                            <div class="task_card_header">
                                @if ($studio->name)
                                <h5>{{$studio->name}}</h5>
                                @endif
                                @if ($studio->address)
                                <p class="d-none d-md-block">{{$studio->address}}</p>
                                @endif
                            </div>
                            @endif
                        </div>
                        <div class="col-md-6 columns">
                            <div class="task_card_wrap d-none d-md-block">
                                @if(empty($studio))
                                <div class="btn-group">
                                    <button class="studio_btn stud-btn">
                                        <img src="{{ asset('images/pipe.svg') }}" alt="pipe">@if(empty($studio)) Filter @else Change @endif Studio</button>
                                </div>
                                @else
                                <div class="btn-group">
                                    <button class="studio_btn">
                                        <img src="{{ asset('images/arrows.svg') }}" alt="arrows">
                                        <a href="{{ route('user.superAdminDashboard') }}">
                                            Show All Studio Data</a>
                                    </button>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dashboard_content">
                    <div class="row d-none d-md-flex">
                        <div class="col-lg-3">
                            <div class="dashboard-stats">
                                @php
                                $activeUser = $InActiveUser = 0;
                                if(!empty($accounts[1])){
                                $activeUser = $accounts[1];
                                }

                                if(!empty($accounts[0])){
                                $InActiveUser = $accounts[0];
                                }

                                $activeUserPer = 100;
                                if($InActiveUser >0){
                                $activeUserPer = (($activeUser)/($activeUser+$InActiveUser))*100;
                                }
                                if($activeUser == 0){
                                $activeUserPer = 0;
                                }
                                @endphp
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM6 14H4V7H6V14ZM10 14H8V4H10V14ZM14 14H12V10H14V14Z"
                                                fill="#AEBCD7" />
                                        </svg>
                                        <h5>Total Accounts: <strong>{{$activeUser+$InActiveUser}}</strong></h5>
                                    </div>
                                </div>
                                <div class="donut-outer">
                                    <canvas id="myDot" style="height:150px!important"></canvas>
                                    <div class="donut-inner"><span
                                            class="d-block">{{$activeUser}}</span>Active<br>Accounts</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="dashboard-stats">
                                <div class="">
                                    <div class="d-flex align-items-center">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM6 14H4V7H6V14ZM10 14H8V4H10V14ZM14 14H12V10H14V14Z"
                                                fill="#AEBCD7" />
                                        </svg>
                                        <h5>This Month's Revenue: <strong>$14,524</strong></h5>
                                    </div>
                                </div>
                                <div>
                                    <canvas id="revenueChart" style="height:150px!important"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="dashboard-stats">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM6 14H4V7H6V14ZM10 14H8V4H10V14ZM14 14H12V10H14V14Z"
                                                fill="#AEBCD7" />
                                        </svg>
                                        <h5>Performance Data</h5>
                                    </div>
                                    <a href="#">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
                                                fill="#000000" />
                                        </svg>
                                    </a>
                                </div>
                                <ul
                                    class="list-unstyled d-flex justify-content-between dashboard-stats-list text-center">
                                    <li><span class="d-block">$59,257</span> 7 Day Revenue</li>
                                    <li><span class="d-block">2,533</span>Average Members</li>
                                    <li><span class="d-block">721</span>Paused Members</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="dashboard-stats">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="19" height="18" viewBox="0 0 19 18" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16.7 2V16H2.70001V2H16.7ZM17.8 0H1.60001C1.10001 0 0.700012 0.4 0.700012 0.9V17.1C0.700012 17.5 1.10001 18 1.60001 18H17.8C18.2 18 18.7 17.5 18.7 17.1V0.9C18.7 0.4 18.2 0 17.8 0ZM8.70001 4H14.7V6H8.70001V4ZM8.70001 8H14.7V10H8.70001V8ZM8.70001 12H14.7V14H8.70001V12ZM4.70001 4H6.70001V6H4.70001V4ZM4.70001 8H6.70001V10H4.70001V8ZM4.70001 12H6.70001V14H4.70001V12Z"
                                                fill="#AEBCD7" />
                                        </svg>

                                        <h5>Tasks</h5>
                                    </div>
                                    <a href="{{ route('task.index') }}">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
                                                fill="#000000" />
                                        </svg>
                                    </a>
                                </div>
                                <ul
                                    class="list-unstyled d-flex justify-content-between dashboard-stats-list text-center">
                                    <li><span class="d-block">{{$task['leftToday']}}</span> Left For Today</li>
                                    <li><span class="d-block">{{$task['completedToday']}}</span>Completed Today</li>
                                    <li><span class="d-block color-orange">{{$task['overdue']}}</span>Overdue</li>
                                    <li><span class="d-block color-orange">{{$task['issue']}}</span>Issues</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="dashboard-stats">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="23" height="21" viewBox="0 0 23 21" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M13.52 1.05997C13.52 1.05997 11.2732 4.79482 9.90002 5.99994C8.93518 6.84673 6.98002 7.59997 6.98002 7.59997C6.61002 7.96997 6.40002 8.47997 6.40002 9.00997V19C6.40002 20.1 7.30002 21 8.40002 21H17.4C18.2 21 18.92 20.52 19.24 19.79L22.5 12.18C23.34 10.2 21.89 7.99997 19.74 7.99997H14.09L16.04 2.41997C16.14 1.91997 15.99 1.40997 15.63 1.04997C15.04 0.469969 14.1 0.469969 13.52 1.05997ZM2.40002 21C3.50002 21 4.40002 20.1 4.40002 19V11C4.40002 9.89997 3.50002 8.99997 2.40002 8.99997C1.30002 8.99997 0.400024 9.89997 0.400024 11V19C0.400024 20.1 1.30002 21 2.40002 21Z"
                                                fill="#AEBCD7" />
                                        </svg>
                                        <h5>Social Tracking</h5>
                                    </div>
                                    <a href="{{ route('social-tracking.overview') }}">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
                                                fill="#000000" />
                                        </svg>
                                    </a>
                                </div>
                                <ul
                                    class="list-unstyled d-flex justify-content-between dashboard-stats-list text-center">
                                    <li><span class="d-block">{{$social['leads']}}</span> Leads</li>
                                    <li><span class="d-block">{{$social['completedToday']}}</span>Messaged Today</li>
                                   <!-- <li><span class="d-block color-orange">{{$social['leftToday']}}</span>Left To
                                        Message Today</li> -->
                                    <li><span class="d-block color-orange">{{$social['leftToday']}}</span>Overdue</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="dashboard-stats">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M9 13H11V15H9V13ZM9 5H11V11H9V5ZM9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18Z"
                                                fill="#AEBCD7" />
                                        </svg>
                                        <h5>Flagged Members</h5>
                                    </div>
                                    <a href="{{ route('flaggedMembers.overview') }}">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
                                                fill="#000000" />
                                        </svg>
                                    </a>
                                </div>
                                <ul
                                    class="list-unstyled d-flex justify-content-between dashboard-stats-list text-center">
                                    <li><span class="d-block color-red-flag">{{$flagged['red']}}</span> Red</li>
                                    <li><span class="d-block color-orange-flag">{{$flagged['orange']}}</span>Orange</li>
                                    <li><span class="d-block">{{$flagged['fringe']}}</span>Fringe</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="dashboard-stats">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center">
                                        <svg width="23" height="16" viewBox="0 0 23 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M16.37 9.13C17.74 10.06 18.7 11.32 18.7 13V16H22.7V13C22.7 10.82 19.13 9.53 16.37 9.13Z"
                                                fill="#AEBCD7" />
                                            <path
                                                d="M14.7 8C16.91 8 18.7 6.21 18.7 4C18.7 1.79 16.91 0 14.7 0C14.23 0 13.79 0.0999998 13.37 0.24C14.2 1.27 14.7 2.58 14.7 4C14.7 5.42 14.2 6.73 13.37 7.76C13.79 7.9 14.23 8 14.7 8Z"
                                                fill="#AEBCD7" />
                                            <path
                                                d="M8.70001 8C10.91 8 12.7 6.21 12.7 4C12.7 1.79 10.91 0 8.70001 0C6.49001 0 4.70001 1.79 4.70001 4C4.70001 6.21 6.49001 8 8.70001 8Z"
                                                fill="#AEBCD7" />
                                            <path
                                                d="M8.70001 9C6.03001 9 0.700012 10.34 0.700012 13V16H16.7V13C16.7 10.34 11.37 9 8.70001 9Z"
                                                fill="#AEBCD7" />
                                        </svg>

                                        <h5>Member Management</h5>
                                    </div>
                                    <a href="{{ route('member-manage.member.index') }}">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z"
                                                fill="#000000" />
                                        </svg>
                                    </a>
                                </div>
                                <ul
                                    class="list-unstyled d-flex justify-content-between dashboard-stats-list text-center">
                                    <li><span class="d-block">{{$member['total']}}</span> Active Profiles</li>
                                    <li><span class="d-block color-orange">{{$member['packToSend']}}</span>Welcome Packs
                                        To Send</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="user-management-list">
                        <div class="user-management-list-heading d-flex justify-content-between align-items-center">
                            <div class="d-flex align-items-center">
                                <svg width="18" height="20" viewBox="0 0 18 20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M16 2H11.82C11.4 0.84 10.3 0 9 0C7.7 0 6.6 0.84 6.18 2H2C0.9 2 0 2.9 0 4V18C0 19.1 0.9 20 2 20H16C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2ZM9 2C9.55 2 10 2.45 10 3C10 3.55 9.55 4 9 4C8.45 4 8 3.55 8 3C8 2.45 8.45 2 9 2ZM9 6C10.66 6 12 7.34 12 9C12 10.66 10.66 12 9 12C7.34 12 6 10.66 6 9C6 7.34 7.34 6 9 6ZM15 18H3V16.6C3 14.6 7 13.5 9 13.5C11 13.5 15 14.6 15 16.6V18Z"
                                        fill="white" />
                                </svg>
                                <h5>User Management</h5>
                            </div>
                            <a href="{{ \App\Helpers\Helper::getUserUrl() }}">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M23.5199 9.95064L20.6399 9.40596C20.4674 8.82283 20.2349 8.26035 19.9461 7.72596L21.5999 5.28012C21.7527 5.04106 21.7236 4.72887 21.5305 4.52167L19.469 2.46012C19.2608 2.2745 18.9543 2.25012 18.7199 2.40012L16.2741 4.08012C15.7237 3.77919 15.1434 3.53825 14.5415 3.36012L14.0044 0.480122C13.9397 0.206378 13.6997 0.00950607 13.4184 0.00012207H10.5029C10.2207 0.00762207 9.97977 0.205435 9.91696 0.480122L9.37228 3.39396C8.79947 3.56834 8.24634 3.79803 7.71854 4.08022L5.30438 2.42928C5.06532 2.27647 4.75312 2.30553 4.54593 2.49866L2.48438 4.56021C2.29032 4.7674 2.26219 5.07959 2.41406 5.31866L4.08 7.7477C3.79781 8.27457 3.57094 8.82863 3.40126 9.40144L0.521256 9.94612C0.23064 9.99675 0.015 10.2424 0 10.5358V13.4403C0.0075 13.7234 0.204374 13.9653 0.48 14.0309L3.36 14.5756C3.53437 15.1578 3.76687 15.7203 4.05374 16.2556L2.40936 18.6556C2.24905 18.9059 2.28842 19.235 2.50311 19.4403L4.55998 21.4971C4.76623 21.6931 5.0803 21.7221 5.31843 21.5665L7.72779 19.9202C8.24811 20.2024 8.79466 20.4321 9.35998 20.6065L9.90747 23.5203C9.97216 23.7941 10.2122 23.991 10.4925 24.0003H13.409C13.6911 23.9938 13.933 23.796 13.994 23.5203L14.534 20.6403C15.1255 20.4678 15.6974 20.2353 16.2411 19.9466L18.6721 21.6003C18.9121 21.7588 19.2299 21.7325 19.4399 21.5357L21.5015 19.4741C21.6908 19.266 21.7162 18.9557 21.5615 18.7204L19.9199 16.2959C20.2115 15.7521 20.4487 15.1803 20.6277 14.5896L23.5077 14.0449C23.7833 13.9803 23.9802 13.7375 23.9877 13.4543V10.5414C23.9915 10.2583 23.7955 10.0118 23.5199 9.95083L23.5199 9.95064ZM11.9999 17.0045C10.6724 17.0026 9.39925 16.4739 8.46181 15.5345C7.52336 14.5951 6.99742 13.321 6.99836 11.9935C6.9993 10.666 7.52804 9.39288 8.46742 8.45544C9.40681 7.51699 10.6799 6.99012 12.0084 6.99106C13.3359 6.992 14.6081 7.52074 15.5465 8.45919C16.4849 9.39857 17.0118 10.6726 17.0108 12.0001C17.0108 13.3286 16.483 14.6027 15.5427 15.5411C14.6033 16.4796 13.3283 17.0064 11.9998 17.0046L11.9999 17.0045Z"
                                        fill="white" />
                                </svg>
                            </a>
                        </div>
                        <div class="user-management-list-body">
                            <ul class="list-unstyled">
                                @forelse($userRoles as $k=>$v)
                                <li><span>{{$k}}</span>{{$v}}</li>
                                @empty
                                <li>No data</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- donut chart -->
<script type="text/javascript">
const newdata = {
    labels: null,
    datasets: [{
        label: 'Active Account',
        data: [{
            {
                $activeUser
            }
        }, {
            {
                $InActiveUser
            }
        }],
        backgroundColor: [
            'rgb(87, 122, 181)',
            'rgba(150, 161, 195, 0.2)'
        ],
        hoverOffset: 4
    }]
};

const config1 = {
    type: 'doughnut',
    data: newdata,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        cutout: 57

    },

};

const myDot = new Chart(
    document.getElementById('myDot'),
    config1
);
</script>
<!-- donut chart end -->
<script>
const labels = null;


const data = {
    labels: labels,
    datasets: null,

};

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        borderRadius: 3,
    }
};
</script>

<script>
const myChart = new Chart(
    document.getElementById('revenueChart'),
    config
);
</script>

@endsection