@extends('layouts.app')

@section('content')
 <!-- <script src="{{ asset('assets/js/charts.js') }}" defer></script> -->
<section class="right-sidebar" id="sidebarRight">
        <div class="container-fluid">

            <section class="streaming">
                <div class="row">

                    <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-9">
                        <div class="chart-content">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6>Streaming Performance</h6>
                                <div class="selectBox">
                                    <select id="streaming-performance">
                                        <option value="All">All</option>
                                    </select>
                                    <select id="select-days">
                                        <option value="All">All</option>
                                    </select>
                                    
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="streams">
                                <h6>20,161 Streas <span class="value1">+4,882 (34%)</span><span class="content"> vs. previous 7 days</span></h6>
                            </div>
                            <div class="chart-container">
                                <canvas id="streamsChart"></canvas>
                            </div>  
                        </div>
                    </div>
    
                    <div class="col-sm-12 col-md-12 col-lg-12 col-xxl-3">
                        <div class="chart-content">
                            <div class="main d-flex justify-content-between align-items-center">
                                <h6>Top Releas</h6>
                                <div class="selectBox">
                                    <select id="top-rlease">
                                        <option value="All">All</option>
                                   </select>
                                   <select id="artist-time">
                                        <option value="All">All</option>
                                   </select>
                                   <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div> 
                            <div class="main-content mt-4">
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>1</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>2</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>3</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>4</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>5</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                                <div class="content d-flex align-items-start gap-5 mt-2">
                                    <p>6</p>
                                    <div class="artist-data">
                                        <h6>CAT0084 - Demo Releas 84</h6>
                                        <p>R Artist 5</p>
                                    </div>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="charts-section">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-xxl-3">
                        <div class="charts chart-content  mt-4">
                            <div class="inner-content d-flex justify-content-between align-items-center">
                                <h6>Top Artist</h6>
                                <div class="selectBox">
                                    <select id="Top-Artist">
                                        <option value="All">All</option>
                                    </select>
                                    <select id="Artist-time">
                                        <option value="All">All</option>
                                    </select>
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="chartMainBox">
                                <canvas  id="myChart"></canvas>
                            </div>  
                            <div class="top-artist d-flex justify-content-between align-items-center">
                                <div class="main-content">
                                    <ul>
                                        <li>Artist</li>
                                    </ul>
                                    <h6>David doe</h6>
                                </div>
                                <div class="main-content">
                                    <ul>
                                        <li>Streaming</li>
                                    </ul>
                                    <h6>300,168.69</h6>
                                </div>
                                <div class="main-content">
                                    <ul>
                                        <li>Percentage</li>
                                    </ul>
                                    <h6>(60%)</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-xxl-3">
                        <div class="chart-content charts mt-4">
                            <div class="inner-content d-flex justify-content-between align-items-center">
                                <h6>Top Languages</h6>
                                <div class="selectBox">
                                    <select id="Top-Territories">
                                        <option value="All">All</option>
                                    </select>
                                    <select id="Territories-days">
                                        <option value="All">All</option>
                                    </select>
                                    
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="peiChart" style="width: 50%; max-width: 400px; margin: 15px auto;">
                                <canvas id="myPieChart"></canvas>
                            </div>
                            <div class="country-data">
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>United State</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(60%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>United Kingdom</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(50%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Germany</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(40%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Netherlands</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(30%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Other</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(80%)</h6>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-xxl-3">
                        <div class="chart-content charts mt-4">
                            <div class="inner-content d-flex justify-content-between align-items-center">
                                <h6>Top Streaming Platform</h6>
                                <div class="selectBox">
                                    <select id="Streaming-brands">
                                        <option value="All">All</option>
                                    </select>
                                    <select id="Streaming-time">
                                        <option value="All">All</option>
                                    </select>
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="verticalBar">
                                <canvas id="customBarChart"></canvas>
                            </div>  
                            <div class="country-data">
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>$547,78.69</li>
                                        </ul>
                                        <p>$547,78.69(60%)</p>
                                    </div>
                                    <h6>(60%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Label Store</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(40%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>iTunes</li>
                                        </ul>
                                        <p>$49,310.26</p>
                                    </div>
                                    <h6>(20%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>iTunes Streaming (Apple Music)</li>
                                        </ul>
                                        <p>$35,310.26</p>
                                    </div>
                                    <h6>(30%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Other</li>
                                        </ul>
                                        <p>$80,310.26</p>
                                    </div>
                                    <h6>(50%)</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-xxl-3">
                        <div class="chart-content charts mt-4">
                            <div class="inner-content d-flex justify-content-between align-items-center">
                                <h6>Top Genre</h6>
                                <div class="selectBox">
                                    <select id="topGenre">
                                        <option value="All">All</option>
                                    </select>
                                    <select id="genreTime">
                                        <option value="All">All</option>
                                    </select>
                                    
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="doughnut">
                                <canvas id="doughnutChart"></canvas>
                            </div>  
                            <div class="country-data">
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Rock</li>
                                        </ul>
                                        <p>$547,78.69(60%)</p>
                                    </div>
                                    <h6>(60%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Pop Music</li>
                                        </ul>
                                        <p>$547,78.69</p>
                                    </div>
                                    <h6>(40%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Rhythm and blues</li>
                                        </ul>
                                        <p>$49,310.26</p>
                                    </div>
                                    <h6>(20%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Heavy Metal</li>
                                        </ul>
                                        <p>$35,310.26</p>
                                    </div>
                                    <h6>(30%)</h6>
                                </div>
                                <div class="teritory-deta d-flex justify-content-between align-items-start">
                                    <div class="country">
                                        <ul>
                                            <li>Other</li>
                                        </ul>
                                        <p>$80,310.26</p>
                                    </div>
                                    <h6>(50%)</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="latest-releases-section">
                <div class="row">
                    <div class="col-md-12 col-lg-12 col-xxl-9">
                        <div class="chart-content imageBox-section mt-4">
                            <div class="latest-releas d-flex justify-content-between align-items-center gap-3">
                                <h6>Latest Releases</h6>
                                <div class="selectBox">
                                    <select id="labels">
                                        <option value="">All Labels</option>
                                    </select>
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            
                            <div class="row">
                                
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/02.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/05.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/07.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/08.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/09.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class=" col-sm-6 col-md-3 col-lg-3 col-xl-2">
                                        <div class="imageBox d-flex justify-content-start flex-column  gap-2">
                                            <div class="imgbox">
                                                <img src="{{ asset('assets/img/27.png') }}" alt="">
                                            </div>
                                            <div class="img-content">
                                                <h6>The Infiniti</h6>
                                                <p>Simth Jonas</p>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>  
                    <div class="col-md-12 col-lg-12 col-xxl-3">
                        <div class="chart-content subLabel-section">
                            <div class="sub-label d-flex justify-content-between align-items-center align-content-center gap-3">
                                <h6>Sub Labels</h6>
                                <div class="selectBox">
                                    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="sub-label-artist">
                                <div class="label-artist d-flex justify-content-between align-items-center ">
                                    <div class="artist d-flex justify-content-center align-items-center gap-3">
                                        <div class="artist-img">
                                            <img src="{{ asset('assets/img/sidemenu/artist1.jpg') }}" alt="not found">
                                        </div>
                                        <div class="artist-content">
                                            <h6>Smith Jonas</h6>
                                            <p>smith@rdc.com</p>
                                        </div>
                                    </div>
                                    <h5>Artist</h5>
                                </div>
                                <div class="label-artist d-flex justify-content-between align-items-center ">
                                    <div class="artist d-flex justify-content-center align-items-center gap-3">
                                        <div class="artist-img">
                                            <img src="{{ asset('assets/img/sidemenu/artist1.jpg') }}" alt="not found">
                                        </div>
                                        <div class="artist-content">
                                            <h6>Allex William</h6>
                                            <p>smith@rdc.com</p>
                                        </div>
                                    </div>
                                    <h5>Artist</h5>
                                </div>
                                <div class="label-artist d-flex justify-content-between align-items-center ">
                                    <div class="artist d-flex justify-content-center align-items-center gap-3">
                                        <div class="artist-img">
                                            <img src="{{ asset('assets/img/sidemenu/artist1.jpg') }}" alt="not found">
                                        </div>
                                        <div class="artist-content">
                                            <h6>Neha Arena</h6>
                                            <p>smith@rdc.com</p>
                                        </div>
                                    </div>
                                    <h5>Artist</h5>
                                </div>
                                <div class="label-artist d-flex justify-content-between align-items-center ">
                                    <div class="artist d-flex justify-content-center align-items-center gap-3">
                                        <div class="artist-img">
                                            <img src="{{ asset('assets/img/sidemenu/artist1.jpg') }}" alt="not found">
                                        </div>
                                        <div class="artist-content">
                                            <h6>Haul Josh</h6>
                                            <p>smith@rdc.com</p>
                                        </div>
                                    </div>
                                    <h5>Artist</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
               
       </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    @endsection