@extends('layouts.master')

@section('content')


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <div class="page-container">


        <div class="page-title-head d-flex align-items-center gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-16 text-uppercase fw-bold mb-0">Tableau de bord</h4>
            </div>

            <div class="text-end">
                <ol class="breadcrumb m-0 py-0 fs-13">
                    <li class="breadcrumb-item"><a href="{{ route('dash.index') }}">Vumah</a></li>

                    <li class="breadcrumb-item active">Tableau de bord</li>
                </ol>
            </div>
        </div>




        <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Auditeurs</h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:user-speak-bold-duotone"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $total_auditeur }}</h3>
                            <iconify-icon icon="solar:user-speak-bold-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                        <p class="mb-0 text-muted">
                            <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 26.87%</span>
                            <a href="{{ route('auditeur.list') }}" class="text-nowrap text-decoration-none">
                                voir détails <i class="fa fa-arrow-right ms-1"></i>
                            </a>


                        </p>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Radios</h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:radio-line-duotone"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $total_radio }}</h3>
                            <iconify-icon icon="solar:radio-line-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>
                        <p class="mb-0 text-muted">
                            <span class="text-danger me-2"><i class="ti ti-caret-down-filled"></i>
                                1.05%</span>
                            <a href="javascript:void(0)" class="text-nowrap text-decoration-none">
                                voir détails <i class="fa fa-arrow-right ms-1"></i>
                            </a>

                        </p>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Annonceurs
                        </h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:buildings-2-line-duotone"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $total_annonceur }}</h3>
                            <iconify-icon icon="solar:buildings-2-line-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>
                        <p class="mb-0 text-muted">
                            <span class="text-danger me-2"><i class="ti ti-caret-down-filled"></i>
                                1.05%</span>
                            <a href="{{ route('annonceur.list') }}" class="text-nowrap text-decoration-none">
                                voir détails <i class="fa fa-arrow-right ms-1"></i>
                            </a>

                        </p>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Campagnes actives
                        </h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:microphone-2-line-duotone"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $campagne_actif }}</h3>
                            <iconify-icon icon="solar:microphone-2-line-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                        <p class="mb-0 text-muted">
                            <span class="text-success me-2"><i class="ti ti-caret-up-filled"></i> 26.87%</span>
                            <a href="javascript:void(0)" class="text-nowrap text-decoration-none">
                                voir détails <i class="fa fa-arrow-right ms-1"></i>
                            </a>

                        </p>

                    </div>
                </div>
            </div><!-- end col -->
        </div><!-- end row -->

        <div class="row">
            <div class="col-xl-8">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h4 class="header-title mb-1">Revenus journaliers</h4>
                                <p class="text-muted">March 26 - April 01</p>
                            </div>
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle drop-arrow-none card-drop"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item">Sales Report</a>
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item">Export Report</a>
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item">Profit</a>
                                    <!-- item-->
                                    <a href="javascript:void(0);" class="dropdown-item">Action</a>
                                </div>
                            </div>
                        </div>

                        <div class="my-2 d-flex align-items-center justify-content-between">
                            <h2 class="fw-normal">$8,459.56</h2>
                            <div class="">
                                <img src="assets/images/cards/american-express.svg" alt="user-card" height="36" />
                                <img src="assets/images/cards/discover-card.svg" alt="user-card" height="36" />
                                <img src="assets/images/cards/mastercard.svg" alt="user-card" height="36" />
                            </div>
                        </div>

                        <div dir="ltr">
                            <div id="daily-sales" class="apex-charts" data-colors="#6ac75a,#188ae2"></div>
                        </div>

                    </div>
                </div> <!-- end card-->
            </div> <!-- end col-->



            <div class="col-xl-4">
                <div class="card">
                    <div class="card-body">

                        <div style="width: auto; height:430px">
                            <canvas id="myChart"></canvas>

                        </div>
                    </div>
                    <!-- end card body-->
                </div>
            </div> <!-- end col-->
        </div> <!-- end row-->


        <div class="row">
            <div class="col-xl-6">
                <div class="card">
                    <div class="card-body">

                        <div style="width: auto; height:430px">
                            <canvas id="auditeursVilleChart"></canvas>
                            <div id="auditeursPercentages" style="margin-top: 10px; font-weight: bold;"></div>


                        </div>
                    </div>
                    <!-- end card body-->
                </div>
            </div> <!-- end col-->



            <div class="col-xxl-6">
                <div class="card card-h-100">
                    <div class="card-header d-flex flex-wrap align-items-center gap-2">
                        <h4 class="header-title me-auto">Activités récentes</h4>

                 
                    </div>

                    <div class="card-body p-0">
                       

                        <div class="table-responsive">
                            <table class="table table-custom table-centered table-sm table-nowrap table-hover mb-0">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-md flex-shrink-0 me-2">
                                                    <span class="avatar-title bg-primary-subtle rounded-circle">
                                                        <img src="assets/images/users/avatar-1.jpg" alt=""
                                                            height="22" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="text-muted fs-12">Name</span> <br />
                                                    <h5 class="fs-14 mt-1">John Doe</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Email</span>
                                            <h5 class="fs-14 mt-1 fw-normal">john.doe@example.com</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Role</span> <br />
                                            <h5 class="fs-14 mt-1 fw-normal">Administrator</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Status</span>
                                            <h5 class="fs-14 mt-1 fw-normal"><i
                                                    class="ti ti-circle-filled fs-12 text-success"></i> Active
                                            </h5>
                                        </td>
                                        <td style="width: 30px;">
                                            <div class="dropdown">
                                                <a href="#"
                                                    class="dropdown-toggle text-muted drop-arrow-none card-drop p-0"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a href="javascript:void(0);" class="dropdown-item">View
                                                        Profile</a>
                                                    <a href="javascript:void(0);" class="dropdown-item">Deactivate</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-md flex-shrink-0 me-2">
                                                    <span class="avatar-title bg-info-subtle rounded-circle">
                                                        <img src="assets/images/users/avatar-2.jpg" alt=""
                                                            height="22" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="text-muted fs-12">Name</span> <br />
                                                    <h5 class="fs-14 mt-1">Jane Smith</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Email</span>
                                            <h5 class="fs-14 mt-1 fw-normal">jane.smith@example.com</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Role</span> <br />
                                            <h5 class="fs-14 mt-1 fw-normal">Editor</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Status</span>
                                            <h5 class="fs-14 mt-1 fw-normal"><i
                                                    class="ti ti-circle-filled fs-12 text-warning"></i> Pending
                                            </h5>
                                        </td>
                                        <td style="width: 30px;">
                                            <div class="dropdown">
                                                <a href="#"
                                                    class="dropdown-toggle text-muted drop-arrow-none card-drop p-0"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a href="javascript:void(0);" class="dropdown-item">View
                                                        Profile</a>
                                                    <a href="javascript:void(0);" class="dropdown-item">Activate</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-md flex-shrink-0 me-2">
                                                    <span class="avatar-title bg-secondary-subtle rounded-circle">
                                                        <img src="assets/images/users/avatar-3.jpg" alt=""
                                                            height="22" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="text-muted fs-12">Name</span> <br />
                                                    <h5 class="fs-14 mt-1">Michael Brown</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Email</span>
                                            <h5 class="fs-14 mt-1 fw-normal">michael.brown@example.com</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Role</span> <br />
                                            <h5 class="fs-14 mt-1 fw-normal">Viewer</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Status</span>
                                            <h5 class="fs-14 mt-1 fw-normal"><i
                                                    class="ti ti-circle-filled fs-12 text-danger"></i> Inactive
                                            </h5>
                                        </td>
                                        <td style="width: 30px;">
                                            <div class="dropdown">
                                                <a href="#"
                                                    class="dropdown-toggle text-muted drop-arrow-none card-drop p-0"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a href="javascript:void(0);" class="dropdown-item">Activate</a>
                                                    <a href="javascript:void(0);" class="dropdown-item">Delete</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-md flex-shrink-0 me-2">
                                                    <span class="avatar-title bg-warning-subtle rounded-circle">
                                                        <img src="assets/images/users/avatar-4.jpg" alt=""
                                                            height="22" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="text-muted fs-12">Name</span> <br />
                                                    <h5 class="fs-14 mt-1">Emily Davis</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Email</span>
                                            <h5 class="fs-14 mt-1 fw-normal">emily.davis@example.com</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Role</span> <br />
                                            <h5 class="fs-14 mt-1 fw-normal">Manager</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Status</span>
                                            <h5 class="fs-14 mt-1 fw-normal"><i
                                                    class="ti ti-circle-filled fs-12 text-success"></i> Active
                                            </h5>
                                        </td>
                                        <td style="width: 30px;">
                                            <div class="dropdown">
                                                <a href="#"
                                                    class="dropdown-toggle text-muted drop-arrow-none card-drop p-0"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a href="javascript:void(0);" class="dropdown-item">View
                                                        Profile</a>
                                                    <a href="javascript:void(0);" class="dropdown-item">Deactivate</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-md flex-shrink-0 me-2">
                                                    <span class="avatar-title bg-danger-subtle rounded-circle">
                                                        <img src="assets/images/users/avatar-5.jpg" alt=""
                                                            height="22" class="rounded-circle">
                                                    </span>
                                                </div>
                                                <div>
                                                    <span class="text-muted fs-12">Name</span> <br />
                                                    <h5 class="fs-14 mt-1">Robert Taylor</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Email</span>
                                            <h5 class="fs-14 mt-1 fw-normal">robert.taylor@example.com</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Role</span> <br />
                                            <h5 class="fs-14 mt-1 fw-normal">Support</h5>
                                        </td>
                                        <td>
                                            <span class="text-muted fs-12">Status</span>
                                            <h5 class="fs-14 mt-1 fw-normal"><i
                                                    class="ti ti-circle-filled fs-12 text-warning"></i> Pending
                                            </h5>
                                        </td>
                                        <td style="width: 30px;">
                                            <div class="dropdown">
                                                <a href="#"
                                                    class="dropdown-toggle text-muted drop-arrow-none card-drop p-0"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                    <a href="javascript:void(0);" class="dropdown-item">View
                                                        Profile</a>
                                                    <a href="javascript:void(0);" class="dropdown-item">Activate</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div>
            </div>
        </div>
    </div>

    </div> <!-- end row-->


    <script>
        document.addEventListener('DOMContentLoaded', function() {

            function randomColor() {
                return '#' + Math.floor(Math.random() * 16777215).toString(16);
            }

            const labels = {!! json_encode($labels) !!};
            const data = {!! json_encode($data) !!};

            if (!labels.length || !data.length) {
                console.warn('Aucune donnée pour le graphe');
                return;
            }

            const chartColors = data.map(() => randomColor());

            const canvas = document.getElementById('myChart');
            if (!canvas) {
                console.error('Canvas myChart introuvable');
                return;
            }

            const ctx = canvas.getContext('2d');

            new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Campagnes',
                        data: data,
                        backgroundColor: chartColors,
                        hoverOffset: 6
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                generateLabels(chart) {
                                    const dataset = chart.data.datasets[0];
                                    return chart.data.labels.map((label, i) => ({
                                        text: `${label} : ${dataset.data[i]}`,
                                        fillStyle: dataset.backgroundColor[i],
                                        strokeStyle: dataset.backgroundColor[i],
                                        lineWidth: 1,
                                        hidden: isNaN(dataset.data[i]) || chart
                                            .getDataVisibility(i) === false,
                                        index: i
                                    }));
                                }
                            }
                        },
                        title: {
                            display: true,
                            text: 'Répartition des campagnes par statut'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.label + ' : ' + context.parsed + ' campagne(s)';
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const labels = {!! json_encode($labelss) !!};
            const data = {!! json_encode($datas) !!};
            const percentages = {!! json_encode($percentages) !!};

            if (!labels.length || !data.length) {
                console.warn('Aucune donnée pour le graphe');
                return;
            }

            const ctx = document.getElementById('auditeursVilleChart').getContext('2d');
            const colors = labels.map(() =>
                '#' + Math.floor(Math.random() * 16777215).toString(16)
            );

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Nombre d’auditeurs',
                        data: data,
                        backgroundColor: colors,
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        },
                        title: {
                            display: true,
                            text: 'Répartition géographique des auditeurs'
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.parsed.y + ' auditeur(s)';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0
                            }
                        }
                    }
                }
            });

            // 🔹 Ajouter les % sous le graphe
            const container = document.getElementById('auditeursPercentages');
            let html = '';
            labels.forEach((label, i) => {
                html +=
                    `<span style="margin-right: 15px; color:${colors[i]}">${label} : ${percentages[i]}%</span>`;
            });
            container.innerHTML = html;

        });
    </script>




    </div> <!-- container -->
@endsection