<?php $script = '<script>
  // ================================ Client Payment Status chart End ================================ 
    var options = {
        series: [{
            name: \'Net Profit\',
            data: [44, 100, 40, 56, 30, 58, 50, 44, 100, 40, 56, 30]
        }, {
            name: \'Revenue\',
            data: [90, 140, 80, 125, 70, 140, 110, 90, 140, 80, 125, 70]
        }, {
            name: \'Free Cash\',
            data: [60, 120, 60, 90, 50, 95, 90, 60, 120, 60, 90, 50]
        }],
        colors: [\'#E4F1FF\', \'#E4F1FF\', \'#E4F1FF\'],
        labels: [\'Active\', \'New\', \'Total\'] ,
        
        legend: {
            show: false 
        },
        chart: {
            type: \'bar\',
            height: 300,
            toolbar: {
                show: false
            },
        },
        grid: {
            show: true,
            borderColor: \'#00000000\',
            strokeDashArray: 4,
            position: \'back\',
        },
        plotOptions: {
            bar: {
                borderRadius: 2,
                columnWidth: \'70%\',
                borderRadiusApplication: \'end\'
            },
        },
        dataLabels: {
            enabled: false
        },
        states: {
            hover: {
                filter: {
                    type: \'none\'
                }
            }
        },
        stroke: {
          show: true,
          width: 4,
          colors: [\'transparent\']
        },
        xaxis: {
            categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\'],
        },
        yaxis: {
            categories: [\'0\', \'10,000\', \'20,000\', \'30,000\', \'50,000\', \'1,00,000\', \'1,00,000\'],
            labels: {
                formatter: function (value) {
                    return "$" + value + "k";
                },
                style: {
                    fontSize: "14px"
                }
            },
        },
        fill: {
            opacity: 1,
            width: 18,
        },
    };

    var chart = new ApexCharts(document.querySelector(\'#paymentStatusChart\'), options);
    chart.render();
  // ================================ Client Payment Status chart End ================================ 

    // ===================== Revenue Chart Start =============================== 
    function createChartTwo(chartId, color1, color2) {
        var options = {
            series: [{
                name: \'series1\',
                data: [6, 20, 15, 48, 28, 55, 28, 52, 25, 32, 15, 25]
            }],
            legend: {
                show: false 
            },
            chart: {
                type: \'area\',
                width: \'100%\',
                height: 200,
                toolbar: {
                    show: false
                },
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: \'smooth\',
                width: 0,
                colors: [color1, color2],
                lineCap: \'round\'
            },
            grid: {
                show: true,
                borderColor: \'#D1D5DB\',
                strokeDashArray: 1,
                position: \'back\',
                xaxis: {
                    lines: {
                        show: false
                    }
                },
                yaxis: {
                    lines: {
                        show: true
                    }
                },
                row: {
                    colors: undefined,
                    opacity: 0.5
                },
                column: {
                    colors: undefined,
                    opacity: 0.5
                },
                padding: {
                    top: -20,
                    right: 0,
                    bottom: -10,
                    left: 0
                },
            },
            colors: [color1, color2],
            fill: {
                type: \'gradient\',
                colors: [color1, color2],
                gradient: {
                    shade: \'light\',
                    type: \'vertical\',
                    shadeIntensity: 0.5,
                    gradientToColors: [undefined, `${color2}00`],
                    inverseColors: false,
                    opacityFrom: [1, 0.6],
                    opacityTo: [0.5, 0.4],
                    stops: [0, 100],
                },
            },
            markers: {
                colors: [color1, color2],
                strokeWidth: 2,
                size: 0,
                hover: {
                    size: 8
                }
            },
            
            xaxis: {
                labels: {
                    show: false
                },
                categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\'],
                tooltip: {
                    enabled: false
                },
                labels: {
                    formatter: function (value) {
                        return value;
                    },
                    style: {
                        fontSize: "14px"
                    }
                }
            },
            yaxis: {
                labels: {
                    formatter: function (value) {
                        return "$" + value + "k";
                    },
                    style: {
                        fontSize: "14px"
                    }
                },
            },
            tooltip: {
                x: {
                    format: \'dd/MM/yy HH:mm\'
                }
            }
        };

        var chart = new ApexCharts(document.querySelector(\'#\' + chartId), options);
        chart.render();
    }

    createChartTwo(\'revenueChart\', \'#98B6FF\', \'#6593FF\');
    // ===================== Revenue Chart End =============================== 

    // ================================ J Vector Map Start ================================ 
    $(\'#world-map\').vectorMap({
        map: \'world_mill_en\',
        backgroundColor: \'transparent\',
        borderColor: \'#fff\',
        borderOpacity: 0.25,
        borderWidth: 0,
        color: \'#000000\',
        regionStyle : {
            initial : {
            fill : \'#D1D5DB\'
            }
        },
        markerStyle: {
            initial: {
                    r: 5,
                    \'fill\': \'#fff\',
                    \'fill-opacity\':1,
                    \'stroke\': \'#000\',
                    \'stroke-width\' : 1,
                    \'stroke-opacity\': 0.4
                },
            },
        markers : [{
            latLng : [35.8617, 104.1954],
            name : \'China : 250\'
            },

            {
            latLng : [25.2744, 133.7751],
            name : \'AustrCalia : 250\'
            },

            {
            latLng : [36.77, -119.41],
            name : \'USA : 82%\'
            },

            {
            latLng : [55.37, -3.41],
            name : \'UK   : 250\'
            },

            {
            latLng : [25.20, 55.27],
            name : \'UAE : 250\'
        }],

        series: {
            regions: [{
                values: {
                    "US": \'#487FFF \',
                    "SA": \'#487FFF\',
                    "AU": \'#487FFF\',
                    "CN": \'#487FFF\',
                    "GB": \'#487FFF\',
                },
                attribute: \'fill\'
            }]
        },
        hoverOpacity: null,
        normalizeFunction: \'linear\',
        zoomOnScroll: false,
        scaleColors: [\'#000000\', \'#000000\'],
        selectedColor: \'#000000\',
        selectedRegions: [],
        enableZoom: false,
        hoverColor: \'#fff\',
    }); 
    // ================================ J Vector Map End ================================ 

    
    // ================================ Follow Btn Start ================================ 
    let followBtns = document.querySelectorAll(\'.follow-btn\');

    followBtns.forEach(followBtn => {
        followBtn.addEventListener("click", function () {
            if (this.innerHTML === "Follow") {
                this.innerHTML = "Following";
                this.classList.add(\'bg-success-600\', \'text-white\');
                this.classList.remove(\'bg-success-100\', \'text-success-600\');
            } else {
                this.innerHTML = "Follow";
                this.classList.remove(\'bg-success-600\', \'text-white\');
                this.classList.add(\'bg-success-100\', \'text-success-600\');
            }
        });
    });
    // ================================ Follow Btn End ================================ 
    
    // ================================ Users Overview Donut chart Start ================================ 
    var options = { 
        series: [40, 87, 87, 30, 50],
        colors: [\'#FF9F29\', \'#487FFF\', \'#EF4A00\', \'#9935FE\', \'#45B369\'],
        labels: [\'Health\', \'Business\', \'Lifestyle\', \'Entertainment\', \'UI/UX Design\'] ,
        legend: {
            show: false 
        },
        chart: {
            type: \'donut\',    
            height: 270,
            sparkline: {
                enabled: true
            },
            margin: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            },
            padding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        stroke: {
            width: 0,
        },
        dataLabels: {
            enabled: false
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 200
                },
                legend: {
                    position: \'bottom\'
                }
            }
        }],
    };

    var chart = new ApexCharts(document.querySelector(\'#userOverviewDonutChart\'), options);
    chart.render();
  // ================================ Users Overview Donut chart End ================================ 
</script>';?>

<?php include './partials/layouts/layoutTop.php' ?>

<div class="dashboard-main-body">

    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Podcast</h6>
        <ul class="d-flex align-items-center gap-2">
            <li class="fw-medium">
                <a href="index.php" class="d-flex align-items-center gap-1 hover-text-primary">
                    <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                    Dashboard
                </a>
            </li>
            <li>-</li>
            <li class="fw-medium">Podcast</li>
        </ul>
    </div>
    
    <div class="row gy-4">
        <div class="col-xxl-4 col-lg-5">
            <div class="row gy-4">
                <div class="col-lg-12 col-md-6">
                    <div class="bg-base radius-12 py-20 px-24 shadow-9">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="">
                                <span class="text-secondary-light mb-8">Total Users</span>
                                <div class="d-flex align-items-center gap-12">
                                    <h6 class="mb-0">17,500</h6>
                                    <div class="d-flex align-items-center gap-1 fw-semibold text-success-600">
                                        <span class="">+2.5%</span>
                                        <i class="ri-arrow-up-line"></i>
                                    </div>
                                </div>
                            </div>
                            <span class="w-60-px h-60-px bg-primary-600 text-white rounded-circle d-flex justify-content-center align-items-center text-2xl primary-shadow">
                                <i class="ri-group-fill"></i>
                            </span>
                        </div>

                        <div class="mt-32 d-flex align-items-center justify-content-between gap-12 flex-wrap">
                            <div class="py-8 px-12 radius-6 gradient-bg-light-one border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">Active User:</span>
                                <h6 class="mb-0 text-xl">3,500</h6>
                            </div>
                            <div class="py-8 px-12 radius-6 gradient-bg-light-two border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">New Sign ups:</span>
                                <h6 class="mb-0 text-xl">5,700</h6>
                            </div>
                            <div class="py-8 px-12 radius-6 gradient-bg-light-three border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">Subscribed:</span>
                                <h6 class="mb-0 text-xl">8,000</h6>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-6">
                    <div class="bg-base radius-12 py-20 px-24 shadow-9">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="">
                                <span class="text-secondary-light mb-8">Total Podcasts</span>
                                <div class="d-flex align-items-center gap-12">
                                    <h6 class="mb-0">450</h6>
                                    <div class="d-flex align-items-center gap-1 fw-semibold text-success-600">
                                        <span class="">+2.5%</span>
                                        <i class="ri-arrow-up-line"></i>
                                    </div>
                                </div>
                            </div>
                            <span class="w-60-px h-60-px bg-warning-600 text-white rounded-circle d-flex justify-content-center align-items-center text-2xl warning-shadow">
                                <i class="ri-mic-fill"></i>
                            </span>
                        </div>

                        <div class="mt-32 d-flex align-items-center justify-content-between gap-12 flex-wrap">
                            <div class="py-8 px-12 radius-6 gradient-bg-light-four border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">Trending:</span>
                                <h6 class="mb-0 text-xl">60</h6>
                            </div>
                            <div class="py-8 px-12 radius-6 gradient-bg-light-five border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">Free Podcasts:</span>
                                <h6 class="mb-0 text-xl">240</h6>
                            </div>
                            <div class="py-8 px-12 radius-6 gradient-bg-light-six border br-white flex-grow-1">
                                <span class="text-secondary-light mb-8 text-sm">Premium:</span>
                                <h6 class="mb-0 text-xl">150</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-8 col-lg-7">
            <div class="bg-base radius-12 py-20 px-24 shadow-9 h-100">
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
                    <h6 class="mb-0 fw-bold text-lg">Audience Stats</h6>
                    <select class="form-select form-select-sm w-auto bg-base border text-secondary-light radius-8">
                        <option>Yearly</option>
                        <option>Monthly</option>
                        <option>Weekly</option>
                        <option>Today</option>
                    </select>
                </div>
                <ul class="d-flex flex-wrap align-items-center justify-content-center mt-18 gap-3">
                    <li class="d-flex align-items-center gap-2">
                        <span class="w-10-px h-6-px rounded-pill bg-primary-600"></span>
                        <span class="text-secondary-light text-sm fw-medium d-inline-flex align-items-center gap-1">
                            Total Audience:
                            <span class="text-primary-light text-xl fw-bold">26,201</span>
                        </span>
                    </li>
                </ul>
                <div class="mt-24">
                    <div id="paymentStatusChart" class=""></div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="bg-base radius-12 py-20 px-24 shadow-9 h-100 mb-20">
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
                    <h6 class="mb-0 fw-bold text-lg">Earnings Overview</h6>
                    <select class="form-select form-select-sm w-auto bg-base border text-secondary-light radius-8">
                        <option>Yearly</option>
                        <option>Monthly</option>
                        <option>Weekly</option>
                        <option>Today</option>
                    </select>
                </div>
                <ul class="d-flex flex-wrap align-items-center justify-content-center mt-24 gap-3">
                    <li class="d-flex align-items-center gap-2">
                        <span class="w-8-px h-8-px rounded-circle bg-primary-600"></span>
                        <span class="text-secondary-light text-sm fw-medium d-inline-flex align-items-center gap-1">
                            Income: 
                            <span class="text-primary-light text-xl fw-bold">$26,201</span>
                        </span>
                        <div class="d-flex align-items-center gap-1 fw-semibold text-success-600">
                            <span class="">10%</span>
                            <i class="ri-arrow-up-s-fill"></i>
                        </div>
                    </li>
                </ul>
                <div class="mt-24">
                    <div id="revenueChart" class="apexcharts-tooltip-style-1"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="bg-base radius-12 py-20 px-24 shadow-9 h-100 mb-24">
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between border-bottom mb-24 pb-16">
                    <h6 class="mb-0 fw-bold text-lg">Recently Played</h6>
                    <a href="javascript:void(0)" class="text-primary-600 hover-text-primary d-flex align-items-center gap-1">
                        View All
                        <iconify-icon icon="solar:alt-arrow-right-linear" class="icon"></iconify-icon>
                    </a>
                </div>
                <div class="mt-20">
                    <div class="row gy-4">
                        <div class="col-lg-3 col-sm-6">
                            <div class="">
                                <div class="radius-8 overflow-hidden position-relative">
                                    <img src="assets/images/home-fourteen/podcast-img1.png" alt="Thumb" class="w-100 h-100 object-fit-cover">
                                    <a href="javascript:void(0)" class="w-28-px h-24-px text-white bg-white bg-opacity-50 d-flex justify-content-center align-items-center position-absolute start-0 bottom-0 ms-10 mb-10 radius-6 hover-bg-white hover-text-primary text-sm">
                                        <i class="ri-play-large-fill"></i>
                                    </a>
                                </div>
                                <div class="mt-12"> 
                                    <h6 class="text-md mb-0">Talk show </h6>
                                    <span class="text-sm text-secondary-light">Esther Howard</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="">
                                <div class="radius-8 overflow-hidden position-relative">
                                    <img src="assets/images/home-fourteen/podcast-img2.png" alt="Thumb" class="w-100 h-100 object-fit-cover">
                                    <a href="javascript:void(0)" class="w-28-px h-24-px text-white bg-white bg-opacity-50 d-flex justify-content-center align-items-center position-absolute start-0 bottom-0 ms-10 mb-10 radius-6 hover-bg-white hover-text-primary text-sm">
                                        <i class="ri-play-large-fill"></i>
                                    </a>
                                </div>
                                <div class="mt-12"> 
                                    <h6 class="text-md mb-0">Change Life Style </h6>
                                    <span class="text-sm text-secondary-light">Cameron Williamson</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="">
                                <div class="radius-8 overflow-hidden position-relative">
                                    <img src="assets/images/home-fourteen/podcast-img3.png" alt="Thumb" class="w-100 h-100 object-fit-cover">
                                    <a href="javascript:void(0)" class="w-28-px h-24-px text-white bg-white bg-opacity-50 d-flex justify-content-center align-items-center position-absolute start-0 bottom-0 ms-10 mb-10 radius-6 hover-bg-white hover-text-primary text-sm">
                                        <i class="ri-play-large-fill"></i>
                                    </a>
                                </div>
                                <div class="mt-12"> 
                                    <h6 class="text-md mb-0">Neon Lights</h6>
                                    <span class="text-sm text-secondary-light">Leslie Alexander</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6">
                            <div class="">
                                <div class="radius-8 overflow-hidden position-relative">
                                    <img src="assets/images/home-fourteen/podcast-img4.png" alt="Thumb" class="w-100 h-100 object-fit-cover">
                                    <a href="javascript:void(0)" class="w-28-px h-24-px text-white bg-white bg-opacity-50 d-flex justify-content-center align-items-center position-absolute start-0 bottom-0 ms-10 mb-10 radius-6 hover-bg-white hover-text-primary text-sm">
                                        <i class="ri-play-large-fill"></i>
                                    </a>
                                </div>
                                <div class="mt-12"> 
                                    <h6 class="text-md mb-0">Product Design</h6>
                                    <span class="text-sm text-secondary-light">Bessie Cooper</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-8">
            <div class="shadow-7 radius-12 bg-base h-100 overflow-hidden">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                    <h6 class="text-lg fw-semibold mb-0">Recent Purchase Plan</h6>
                    <a href="javascript:void(0)" class="text-primary-600 hover-text-primary d-flex align-items-center gap-1">
                    View All
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="icon"></iconify-icon>
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive scroll-sm">
                        <table class="table bordered-table table-py-8 mb-0 rounded-0 border-0">
                            <thead>
                                <tr>
                                    <th scope="col" class="rounded-0">User</th>
                                    <th scope="col" class="rounded-0">Amount</th>
                                    <th scope="col" class="rounded-0">StartDate</th>
                                    <th scope="col" class="rounded-0">End Date</th>
                                    <th scope="col" class="rounded-0">Duration</th>
                                    <th scope="col" class="rounded-0 text-center">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img5.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">Dianne Russell</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$29.00</td>
                                    <td class="text-secondary-light">Jan 10, 2025</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">1 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-success-focus text-success-main px-16 py-2 radius-4 fw-medium text-sm">Basic</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img4.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">Cody Fisher</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$$99.00</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">April 10, 2025</td>
                                    <td class="text-secondary-light">3 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-warning-focus text-warning-main px-16 py-2 radius-4 fw-medium text-sm">Standard</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img3.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">Ronald Richards</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$499.00</td>
                                    <td class="text-secondary-light">Jan 10, 2025</td>
                                    <td class="text-secondary-light">Jan 10, 2026</td>
                                    <td class="text-secondary-light">1 Year</td>
                                    <td class="text-center"> 
                                        <span class="bg-info-focus text-info-main px-16 py-2 radius-4 fw-medium text-sm">Premium </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img2.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">Albert Flores</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$29.00</td>
                                    <td class="text-secondary-light">Jan 10, 2025</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">1 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-success-focus text-success-main px-16 py-2 radius-4 fw-medium text-sm">Basic</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img1.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">Cameron Williamson</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$99.00</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">April 10, 2025</td>
                                    <td class="text-secondary-light">3 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-warning-focus text-warning-main px-16 py-2 radius-4 fw-medium text-sm">Standard</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img7.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">John Doe</span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$99.00</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">April 10, 2025</td>
                                    <td class="text-secondary-light">3 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-success-focus text-success-main px-16 py-2 radius-4 fw-medium text-sm">Basic</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-secondary-light">
                                        <div class="d-flex align-items-center gap-12">
                                            <span class="w-40-px h-40-px radius-4 overflow-hidden rounded-circle">
                                                <img src="assets/images/user-grid/user-grid-img8.png" alt="Avatar" class="w-100 h-100 object-fit-cover">
                                            </span>
                                            <span class="text-secondary-light">John Robiul </span>
                                        </div>
                                    </td>
                                    <td class="text-secondary-light">$99.00</td>
                                    <td class="text-secondary-light">Feb 10, 2025</td>
                                    <td class="text-secondary-light">April 10, 2025</td>
                                    <td class="text-secondary-light">3 Month</td>
                                    <td class="text-center"> 
                                        <span class="bg-success-focus text-success-main px-16 py-2 radius-4 fw-medium text-sm">Basic</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-4 col-md-6">
            <div class="card radius-8 border-0">
    
              <div class="card-body">
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-between">
                  <h6 class="mb-2 fw-bold text-lg">Countries Status</h6>
                  <div class="">
                    <select class="form-select form-select-sm w-auto bg-base border text-secondary-light radius-8">
                      <option>Yearly</option>
                      <option>Monthly</option>
                      <option>Weekly</option>
                      <option>Today</option>
                    </select>
                  </div>
                </div>
              </div>
    
              <div id="world-map"></div>
    
              <div class="card-body p-24 max-h-266-px scroll-sm overflow-y-auto">
                <div class="">
    
                  <div class="d-flex align-items-center justify-content-between gap-3 mb-3 pb-2">
                    <div class="d-flex align-items-center w-100">
                      <img src="assets/images/flags/flag1.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                      <div class="flex-grow-1">
                        <h6 class="text-sm mb-0">USA</h6>
                        <span class="text-xs text-secondary-light fw-medium">1,240 Users</span>
                      </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 w-100">
                      <div class="w-100 max-w-66 ms-auto">
                        <div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-primary-600 rounded-pill" style="width: 80%;"></div>
                        </div>
                      </div>
                      <span class="text-secondary-light font-xs fw-semibold">80%</span>
                    </div>
                  </div>
    
                  <div class="d-flex align-items-center justify-content-between gap-3 mb-3 pb-2">
                    <div class="d-flex align-items-center w-100">
                      <img src="assets/images/flags/flag2.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                      <div class="flex-grow-1">
                        <h6 class="text-sm mb-0">Japan</h6>
                        <span class="text-xs text-secondary-light fw-medium">1,240 Users</span>
                      </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 w-100">
                      <div class="w-100 max-w-66 ms-auto">
                        <div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-orange rounded-pill" style="width: 60%;"></div>
                        </div>
                      </div>
                      <span class="text-secondary-light font-xs fw-semibold">60%</span>
                    </div>
                  </div>
    
                  <div class="d-flex align-items-center justify-content-between gap-3 mb-3 pb-2">
                    <div class="d-flex align-items-center w-100">
                      <img src="assets/images/flags/flag3.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                      <div class="flex-grow-1">
                        <h6 class="text-sm mb-0">France</h6>
                        <span class="text-xs text-secondary-light fw-medium">1,240 Users</span>
                      </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 w-100">
                      <div class="w-100 max-w-66 ms-auto">
                        <div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-yellow rounded-pill" style="width: 49%;"></div>
                        </div>
                      </div>
                      <span class="text-secondary-light font-xs fw-semibold">49%</span>
                    </div>
                  </div>
    
                  <div class="d-flex align-items-center justify-content-between gap-3">
                    <div class="d-flex align-items-center w-100">
                      <img src="assets/images/flags/flag4.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                      <div class="flex-grow-1">
                        <h6 class="text-sm mb-0">Germany</h6>
                        <span class="text-xs text-secondary-light fw-medium">1,240 Users</span>
                      </div>
                    </div>
                    <div class="d-flex align-items-center gap-2 w-100">
                      <div class="w-100 max-w-66 ms-auto">
                        <div class="progress progress-sm rounded-pill" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                          <div class="progress-bar bg-success-main rounded-pill" style="width: 100%;"></div>
                        </div>
                      </div>
                      <span class="text-secondary-light font-xs fw-semibold">100%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>

        <div class="col-xxl-4 col-md-6">
            <div class="shadow-7 radius-12 bg-base h-100 overflow-hidden">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                    <h6 class="text-lg fw-semibold mb-0">Trending Episodes</h6>
                    <select class="form-select form-select-sm w-auto bg-base border text-secondary-light radius-8">
                        <option>Yearly</option>
                        <option>Monthly</option>
                        <option>Weekly</option>
                        <option>Today</option>
                    </select>
                </div>
                <div class="card-body p-20 d-flex flex-column gap-12">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/home-fourteen/trending-img1.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Product Design</h6>
                                <span class="text-sm text-secondary-light fw-medium">Esther Howand</span>
                            </div>
                        </div>
                        <div class="text-end d-flex gap-1 justify-content-end flex-column">
                            <span class="">Durations: <span class="fw-semibold text-primary-light">30:05 mins</span> </span>
                            <span class="">Views:  <span class="fw-semibold text-primary-light">512k</span> </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/home-fourteen/trending-img2.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">How to Change Your Life</h6>
                                <span class="text-sm text-secondary-light fw-medium">Esther Howand</span>
                            </div>
                        </div>
                        <div class="text-end d-flex gap-1 justify-content-end flex-column">
                            <span class="">Durations: <span class="fw-semibold text-primary-light">30:05 mins</span> </span>
                            <span class="">Views:  <span class="fw-semibold text-primary-light">512k</span> </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/home-fourteen/trending-img3.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Logo Design</h6>
                                <span class="text-sm text-secondary-light fw-medium">Esther Howand</span>
                            </div>
                        </div>
                        <div class="text-end d-flex gap-1 justify-content-end flex-column">
                            <span class="">Durations: <span class="fw-semibold text-primary-light">30:05 mins</span> </span>
                            <span class="">Views:  <span class="fw-semibold text-primary-light">512k</span> </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/home-fourteen/trending-img3.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Good Health</h6>
                                <span class="text-sm text-secondary-light fw-medium">Esther Howand</span>
                            </div>
                        </div>
                        <div class="text-end d-flex gap-1 justify-content-end flex-column">
                            <span class="">Durations: <span class="fw-semibold text-primary-light">30:05 mins</span> </span>
                            <span class="">Views:  <span class="fw-semibold text-primary-light">512k</span> </span>
                        </div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/home-fourteen/trending-img4.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Episodes Name</h6>
                                <span class="text-sm text-secondary-light fw-medium">Esther Howand</span>
                            </div>
                        </div>
                        <div class="text-end d-flex gap-1 justify-content-end flex-column">
                            <span class="">Durations: <span class="fw-semibold text-primary-light">30:05 mins</span> </span>
                            <span class="">Views:  <span class="fw-semibold text-primary-light">512k</span> </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xxl-4 col-md-6">
            <div class="shadow-7 radius-12 bg-base h-100 overflow-hidden">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                    <h6 class="text-lg fw-semibold mb-0">Top 5 Categories </h6>
                    <a href="javascript:void(0)" class="text-primary-600 hover-text-primary d-flex align-items-center gap-1">
                    View All
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="icon"></iconify-icon>
                    </a>
                </div>
                <div class="card-body p-32 mt-20 d-flex align-items-center justify-content-between gap-24">
                    <div class="">
                        <div id="userOverviewDonutChart" class="margin-16-minus y-value-left apexcharts-tooltip-z-none"></div>
                    </div>
                    <ul class="d-flex flex-column gap-12">
                        <li>
                            <span class="text-lg">UI/UX Design: <span class="text-success-600 fw-semibold">50%</span> </span>
                        </li>
                        <li>
                            <span class="text-lg">Entertainment: <span class="text-purple fw-semibold">30%</span> </span>
                        </li>
                        <li>
                            <span class="text-lg">Lifestyle: <span class="text-danger-600 fw-semibold">87%</span> </span>
                        </li>
                        <li>
                            <span class="text-lg">Business: <span class="text-primary-600 fw-semibold">87%</span> </span>
                        </li>
                        <li>
                            <span class="text-lg">Health: <span class="text-warning-600 fw-semibold">40%</span> </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-xxl-4 col-md-6">
            <div class="shadow-7 radius-12 bg-base h-100 overflow-hidden">
                <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
                    <h6 class="text-lg fw-semibold mb-0">Top Podcaster</h6>
                    <a href="javascript:void(0)" class="text-primary-600 hover-text-primary d-flex align-items-center gap-1">
                    View All
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="icon"></iconify-icon>
                    </a>
                </div>
                <div class="card-body p-20 d-flex flex-column gap-20">
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/homeThirteen/podcaster-img1.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Digital Assets</h6>
                                <span class="text-sm text-secondary-light fw-medium">UI Design</span>
                            </div>
                        </div>
                        <button type="button" class="follow-btn bg-success-100 rounded px-16 py-6 text-success-600">Follow</button>
                    </div>
        
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/homeThirteen/podcaster-img2.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Side Project</h6>
                                <span class="text-sm text-secondary-light fw-medium">Business</span>
                            </div>
                        </div>
                        <button type="button" class="follow-btn bg-success-100 rounded px-16 py-6 text-success-600">Follow</button>
                    </div>
        
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/homeThirteen/podcaster-img3.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Investment</h6>
                                <span class="text-sm text-secondary-light fw-medium">Lifestyle</span>
                            </div>
                        </div>
                        <button type="button" class="follow-btn bg-success-100 rounded px-16 py-6 text-success-600">Follow</button>
                    </div>
        
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/homeThirteen/podcaster-img4.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Investment</h6>
                                <span class="text-sm text-secondary-light fw-medium">Lifestyle</span>
                            </div>
                        </div>
                        <button type="button" class="follow-btn bg-success-100 rounded px-16 py-6 text-success-600">Follow</button>
                    </div>
        
                    <div class="d-flex align-items-center justify-content-between gap-3">
                        <div class="d-flex align-items-center">
                            <img src="assets/images/homeThirteen/podcaster-img5.png" alt="Image" class="w-40-px h-40-px rounded-circle flex-shrink-0 me-12 overflow-hidden">
                            <div class="flex-grow-1">
                                <h6 class="text-md mb-0 fw-medium">Investment</h6>
                                <span class="text-sm text-secondary-light fw-medium">Lifestyle</span>
                            </div>
                        </div>
                        <button type="button" class="follow-btn bg-success-100 rounded px-16 py-6 text-success-600">Follow</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<?php include './partials/layouts/layoutBottom.php' ?>
