@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!-- 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/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Kelly.js"></script>


    <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="admin_bg">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <center>
                        <div class="supbutton custom-buttons 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>

                            <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> -->

                                <a href="{{ url('supervisor/selectservice') }}" class="btn btn-lg px-3 greenbutton"><i
                                        class="fa-solid fa-list"></i>
                                    @lang('messages.application_list')
                                </a>
                            </td>
                        </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-fluid custom-dashboard-filter">
            <div class="row">
                <div class="col-md-12 p-3 mb-3">
                    <div class="text-center">
                        <h2>@lang('messages.dashboard')</h2>
						<div class="dropdown">
						  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
							Choose your option
						  </button>
						  <ul class="dropdown-menu">
							<li><a class="dropdown-item" href="#">Sort by month</a></li>
							<li><a class="dropdown-item" href="#">Sort by year</a></li>
							<li><a class="dropdown-item" href="#">Sort by week</a></li>
							<li><a class="dropdown-item" href="#">Sort by employee</a></li>
							<li><a class="dropdown-item" href="#">Sort by service</a></li>
						  </ul>
						</div>
                    </div>
                </div>
            </div>
        </div>

        @include('supervisor.graphs.yearlyGraphs', [
            'totalApplication' => $totalApplication,
            'yearlyData',
            $yearlyData,
            'barchartData1' => $barchartData1,
            'pieData1' => $pieData1,
            'pieData2' => $pieData2,
        ])
        @include('supervisor.graphs.quarterGraphs', [
            'quarterApplication' => $quarterApplication,
            'quarterData',
            $quarterData,
            'barchartData3' => $barchartData3,
            'pieData1' => $quarterexpediteData,
            'pieData2' => $quarternormalData,
        ])
        @include('supervisor.graphs.monthlyGraphs', [
            'monthlyApplication' => $monthlyApplication,
            'monthlyData',
            $monthlyData,
            'barchartData2' => $barchartData2,
            'pieData1' => $monthexpediteData,
            'pieData2' => $monthnormalData,
        ])






        <style>
            #chartdiv1,
            #chartdiv2,
            #chartdiv3 {
                width: 100%;
                height: 400px;
            }

            #barchart1,
            #barchart2,
            #barchart3 {
                width: 100%;
                height: 500px;
            }

            #piechart1,
            #piechart2,
            #mpiechart1,
            #mpiechart2,
            #qpiechart1,
            #qpiechart2 {
                width: 100%;
                height: 400px;
            }
        </style>



        <!-- Chart code -->
        {{-- <script>
            am5.ready(function() {

                // Monthly Chart Data

                var monthData = @json($monthlyData);
                var mroot = am5.Root.new("chartdiv3");
                var totalApplication = @json($totalApplication);

                mroot.setThemes([
                    am5themes_Animated.new(mroot)
                ]);

                var mchart = mroot.container.children.push(
                    am5percent.PieChart.new(mroot, {
                        startAngle: 160,
                        endAngle: 380
                    })
                );

                var monthSeries0 = mchart.series.push(
                    am5percent.PieSeries.new(mroot, {
                        valueField: "total",
                        categoryField: "services", // Use service name instead of country
                        startAngle: 180,
                        endAngle: 360,
                        radius: am5.percent(70),
                        innerRadius: am5.percent(65)
                    })
                );

                var colorSet = am5.ColorSet.new(mroot, {
                    colors: [monthSeries0.get("colors").getIndex(0)],
                    passOptions: {
                        lightness: -0.05,
                        hue: 0
                    }
                });

                monthSeries0.set("colors", colorSet);

                monthSeries0.ticks.template.set("forceHidden", true);
                monthSeries0.labels.template.set("forceHidden", true);

                var monthSeries1 = mchart.series.push(
                    am5percent.PieSeries.new(mroot, {
                        startAngle: 160,
                        endAngle: 380,
                        valueField: "total",
                        innerRadius: am5.percent(80),
                        categoryField: "services"
                    })
                );

                monthSeries1.ticks.template.set("forceHidden", true);
                monthSeries1.labels.template.set("forceHidden", true);

                var label = mchart.seriesContainer.children.push(
                    am5.Label.new(mroot, {
                        textAlign: "center",
                        centerY: am5.p100,
                        centerX: am5.p50,
                        text: "[fontSize:18px]Total Monthly Applications[/]:\n[bold fontSize:30px]" + totalApplication +
                            "[/]"
                    })
                );

                // Set dynamic data
                monthSeries0.data.setAll(monthData);
                monthSeries1.data.setAll(monthData);

                // Quarter Chart

                var qdata = @json($quarterData);
                var qroot = am5.Root.new("chartdiv2");
                var totalApplication = @json($totalApplication);

                qroot.setThemes([
                    am5themes_Animated.new(qroot)
                ]);

                var qchart = qroot.container.children.push(
                    am5percent.PieChart.new(qroot, {
                        startAngle: 160,
                        endAngle: 380
                    })
                );

                var qSeries0 = qchart.series.push(
                    am5percent.PieSeries.new(qroot, {
                        valueField: "total",
                        categoryField: "services", // Use service name instead of country
                        startAngle: 180,
                        endAngle: 360,
                        radius: am5.percent(70),
                        innerRadius: am5.percent(65)
                    })
                );

                var colorSet = am5.ColorSet.new(qroot, {
                    colors: [qSeries0.get("colors").getIndex(0)],
                    passOptions: {
                        lightness: -0.05,
                        hue: 0
                    }
                });

                qSeries0.set("colors", colorSet);

                qSeries0.ticks.template.set("forceHidden", true);
                qSeries0.labels.template.set("forceHidden", true);

                var qSeries1 = qchart.series.push(
                    am5percent.PieSeries.new(qroot, {
                        startAngle: 160,
                        endAngle: 380,
                        valueField: "total",
                        innerRadius: am5.percent(80),
                        categoryField: "services"
                    })
                );

                qSeries1.ticks.template.set("forceHidden", true);
                qSeries1.labels.template.set("forceHidden", true);

                var label = qchart.seriesContainer.children.push(
                    am5.Label.new(qroot, {
                        textAlign: "center",
                        centerY: am5.p100,
                        centerX: am5.p50,
                        text: "[fontSize:18px]Total Quarter Applications[/]:\n[bold fontSize:30px]" + totalApplication +
                            "[/]"
                    })
                );

                // Set dynamic data
                qSeries0.data.setAll(qdata);
                qSeries1.data.setAll(qdata);

            }); // end am5.ready()
        </script> --}}


        <!-- HTML -->

    </div>

@endsection