@extends('layouts.master')

@section('title', 'Express54')

@section('content')



    <div class="banner">
        @if ($selectedCountry)
            <img src="{{ asset("/storage/banner/$selectedCountry->banner_image") }}" class="test"
                alt="{{ $selectedCountry->title }}" style="width: 100%; height:350px;">
        @else
            <img src="{{ asset('/assets/image/bluebanner.png') }}" class="test" alt="bluebanner.png"
                style="width: 100%; height:350px;">
        @endif
    </div>


    {{-- <div class="row banner">
            <div class="custom_section {{ Auth::user()->role }}">
                <div class="col-12">
                    <div class="homesec">
                        @if (Auth::user()->country == 17)
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/homelogo.png') }}" class="homelogo" alt="Icon">
                            </div>
                        @elseif (Auth::user()->country == 19)
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/burkina_faso.png') }}" class="homelogo" alt="Icon">
                            </div>
                        @elseif (Auth::user()->country == 16)
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/cameroon.png') }}" class="homelogo" alt="Icon">
                            </div>
                        @elseif (Auth::user()->country == 20)
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/mali_new.png') }}" class="homelogo" alt="Icon">
                            </div>
                        @elseif (Auth::user()->country == 27)
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/guinea.png') }}" class="homelogo" alt="Icon">
                            </div>
                        @else
                            <div class="userhomesec text-center">
                                <img src="{{ asset('/assets/image/faviconlogo.png') }}" class="homelogo" alt="Icon">
                                <h3>@lang('messages.bannertext')</h3>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div> --}}


    {{-- <div class="supervisor {{ Auth::check() && Auth::user()->country == 17 ? 'africa' : 'supdash' }}"> --}}
    <div class="admin_bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <center>
                        <div class="supbutton p-5">
                            <td><a href="{{ url('supervisor/addemployee') }}" class="btn btn-lg px-3 greenbutton"><i
                                        class="fa-solid fa-plus"></i>
                                    @lang('messages.addnewemployee')</a>
                            </td>
                            <td><a href="{{ url('supervisor/employeelist') }}" class="btn btn-lg px-3 greenbutton"><i
                                        class="fa-solid fa-list"></i>
                                    @lang('messages.user_list')</a>

                            <td><a href="{{ url('supervisor/application_list') }}" class="btn btn-lg px-3 greenbutton"><i
                                        class="fa-solid fa-list"></i>
                                    @lang('messages.application_list')</a>

                        </div>
                    </center>
                    <div id="alert-container">
                        @if (Session('error'))
                            <div class="alert alert-warning" role="alert">
                                {{ Session('error') }}
                            </div>
                        @endif

                        @if (Session('success'))
                            <div class="alert alert-success" role="alert">
                                {{ Session('success') }}
                            </div>
                        @endif
                    </div>
                    <!-- alert time out  -->
                    <script>
                        document.addEventListener("DOMContentLoaded", function() {
                            var alertContainer = document.getElementById("alert-container");
                            if (alertContainer) {
                                setTimeout(function() {
                                    alertContainer.remove();
                                }, 5000);
                            }
                        });
                    </script>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-12 p-3 mb-3">
                    <div class="text-center">
                        <h2>@lang('messages.dashboard')</h2>
                    </div>
                </div>
            </div>
        </div>

        {{-- <!-- service cards -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


        <style>
            #chartdiv {
                width: 100%;
                height: 500px;
            }
        </style>

        <!-- Resources -->
        <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
        <script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
        <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

        <div id="chartdiv" style="width: 100%; height: 500px;"></div>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                // Get the total application count from the Blade template
                var totalApplication = @json($totalApplication);
        
                console.log('Total Applications:', totalApplication); // Debugging: Log the total application count
        
                // Chart code
                am5.ready(function() {
        
                    // Create root element
                    var root = am5.Root.new("chartdiv");
        
                    // Set themes
                    root.setThemes([
                        am5themes_Animated.new(root)
                    ]);
        
                    // Create chart
                    var chart = root.container.children.push(
                        am5percent.PieChart.new(root, {
                            startAngle: 160,
                            endAngle: 380
                        })
                    );
        
                    // Create series
                    var series0 = chart.series.push(
                        am5percent.PieSeries.new(root, {
                            valueField: "litres",
                            categoryField: "country",
                            startAngle: 160,
                            endAngle: 380,
                            radius: am5.percent(70),
                            innerRadius: am5.percent(65)
                        })
                    );
        
                    var colorSet = am5.ColorSet.new(root, {
                        colors: [series0.get("colors").getIndex(0)],
                        passOptions: {
                            lightness: -0.05,
                            hue: 0
                        }
                    });
        
                    series0.set("colors", colorSet);
        
                    series0.ticks.template.set("forceHidden", true);
                    series0.labels.template.set("forceHidden", true);
        
                    var series1 = chart.series.push(
                        am5percent.PieSeries.new(root, {
                            startAngle: 160,
                            endAngle: 380,
                            valueField: "bottles",
                            innerRadius: am5.percent(80),
                            categoryField: "country"
                        })
                    );
        
                    series1.ticks.template.set("forceHidden", true);
                    series1.labels.template.set("forceHidden", true);
        
                    var label = chart.seriesContainer.children.push(
                        am5.Label.new(root, {
                            textAlign: "center",
                            centerY: am5.p100,
                            centerX: am5.p50,
                            text: "[fontSize:18px]Total Applications[/]:\n[bold fontSize:30px]" + totalApplication + "[/]"
                        })
                    );
        
                    var data = [
                        { country: "Lithuania", litres: 50, bottles: 100 },
                        { country: "Czech Republic", litres: 301.9, bottles: 990 },
                        { country: "Ireland", litres: 201.1, bottles: 785 },
                        { country: "Germany", litres: 165.8, bottles: 255 },
                        { country: "Australia", litres: 139.9, bottles: 452 },
                        { country: "Austria", litres: 128.3, bottles: 332 },
                        { country: "UK", litres: 1, bottles: 50 },
                        { country: "Belgium", litres: 60, bottles: 178 },
                        { country: "The Netherlands", litres: 50, bottles: 50 }
                    ];
        
                    // Set data
                    series0.data.setAll(data);
                    series1.data.setAll(data);
        
                }); // end am5.ready()
            });
        </script> --}}









        <div class="container">
            <h3>@lang('messages.visa_service')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedeVisa }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i></div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedeVisa_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">

                                                        <h3>{{ $demandedeVisa_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedeVisa_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="chart-container">
                                        <div class="chart" id="pie-chart-container">
                                            <canvas id="pie-chart_demandedeVisa" style="height: 300px !important;"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $demandedeVisa_accepted }};
            var deniedCount = {{ $demandedeVisa_rejected }};

            var ctx = document.getElementById('pie-chart_demandedeVisa').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        <div class="container">
            <h3>@lang('messages.civil_documents')</h3>
            <hr>
            <div class="row">

                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $actedEtatCivil }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $actedEtatCivil_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3> {{ $actedEtatCivil_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $actedEtatCivil_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_actedEtatCivil"></canvas>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var approvedCount = {{ $actedEtatCivil_accepted }};
            var deniedCount = {{ $actedEtatCivil_rejected }};

            var ctx = document.getElementById('pie-chart_actedEtatCivil').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        <div class="container">
            <h3>@lang('messages.consulate_services')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $diversactesconsulaires }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $diversactesconsulaires_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $diversactesconsulaires_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $diversactesconsulaires_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_diversactesconsulaires"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $diversactesconsulaires_accepted }};
            var deniedCount = {{ $diversactesconsulaires_rejected }};

            var ctx = document.getElementById('pie-chart_diversactesconsulaires').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        
        <div class="container">
            <h3>@lang('messages.consulate_card')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $consulateCard }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $consulateCard_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $consulateCard_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $consulateCard_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_consulateCard"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $consulateCard_accepted }};
            var deniedCount = {{ $consulateCard_rejected }};

            var ctx = document.getElementById('pie-chart_consulateCard').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        <div class="container">
            <h3>@lang('messages.demande_de_passeport')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedepasseport }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedepasseport_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3> {{ $demandedepasseport_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>

                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $demandedepasseport_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_demandedepasseport"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $demandedepasseport_accepted }};
            var deniedCount = {{ $demandedepasseport_rejected }};

            var ctx = document.getElementById('pie-chart_demandedepasseport').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        <div class="container">
            <h3>@lang('messages.delivery_express')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $deliveryexpress }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $deliveryexpress_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $deliveryexpress_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $deliveryexpress_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_deliveryexpress"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $deliveryexpress_accepted }};
            var deniedCount = {{ $deliveryexpress_rejected }};

            var ctx = document.getElementById('pie-chart_deliveryexpress').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script>

        {{-- <div class="container">
            <h3>@lang('messages.laisser_passer')</h3>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                        <div class="card-body">
                            <h5 class="card-title custom-heading">@lang('messages.applicationstatus')</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="applicationcard">
                                        <div class="row">
                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-secondary text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $laisserpasser }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-file fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.totalapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-info text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $laisserpasser_month }}</h3>
                                                        <div class="icons"><i class="fa-regular fa-calendar fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.monthofapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-success text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $laisserpasser_accepted }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-check fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.approvedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-xl-6 col-md-6">
                                                <div class="card bg-danger text-white mb-4">
                                                    <div class="card-body">
                                                        <h3>{{ $laisserpasser_rejected }}</h3>
                                                        <div class="icons"><i class="fa-solid fa-xmark fa-lg"></i>
                                                        </div>
                                                        <h5>@lang('messages.deniedapplications')</h5>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- pie chart -->
                                <div class="col-md-6">
                                    <div class="card-body p-10">
                                        <div class="chart-container">
                                            <div class="chart" id="pie-chart-container">
                                                <canvas id="pie-chart_laisserpasser"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            var approvedCount = {{ $laisserpasser_accepted }};
            var deniedCount = {{ $laisserpasser_rejected }};

            var ctx = document.getElementById('pie-chart_laisserpasser').getContext('2d');

            var data = {
                labels: ['Approved', 'Denied'],
                datasets: [{
                    data: [approvedCount, deniedCount],
                    backgroundColor: ['#45c490', '#008d93']
                }]
            };

            var options = {
                responsive: true,
                title: {
                    display: true,
                    position: "top",
                    text: "Application Status",
                    fontSize: 18,
                    fontColor: "#111"
                },
                legend: {
                    display: true,
                    position: "bottom",
                    labels: {
                        fontColor: "#333",
                        fontSize: 16
                    }
                }
            };

            var pieChart = new Chart(ctx, {
                type: 'pie',
                data: data,
                options: options
            });
        </script> --}}
    </div>
@endsection