@extends('header.topnav')

@section('title', 'Welcome')

@section('content')
<div class="p-4 h-[40rem] overflow-y-auto">
    {{-- Mails Actions --}}
    <div class="flex items-center gap-2">
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Disapprove all pending releases</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Disapprove0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Disapprove" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Delete all unfinished releases</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Deleteall0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Deleteall" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Adds a note to all RFS releases</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Adds_a_note0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Adds_a_note" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Adds a flag to the account</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Adds_a_flag0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Adds_a_flag" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
    </div>
    <br>
    <div class="flex items-center gap-2">
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">RFS all active releases</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="RFSall0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="RFSall" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Takedown for all stores</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Takedown0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Takedown" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Unlinks all YT channels</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Unlinks0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Unlinks" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
        <div class="w-1/4 h-34 shadow-lg rounded-lg p-6">
            <h5 class="block mb-2 font-sans text-[17px] antialiased font-semibold tracking-normal text-blue-gray-900">Manual Account Activation</h5>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Manual0" data-id="99">0</p>
                    <span class="border-r-4 h-8 rotate-[10deg] border-r-gray-900"></span>
                    <p class="count block font-sans text-4xl antialiased font-base text-inherit" id="Manual" data-id="99">0</p>
                    <p class="text-green-500 font-semibold">Mails</p>
                </div>
                <div class="border-8  h-14 w-14 rounded-full border-t-indigo-500 border-r-indigo-500 border-l-[#6fb1a0] border-b-[#6fb1a0]"></div>
            </div>
        </div>
    </div>
    <br>
    {{-- ['Tickets Receieved', 'Tickets Completed', 'Upc Based Tickets', 'User Based Tickets', 'Confirmation Tickets'] --}}
    {{-- ["#1C64F2", "#16BDCA", "#9061F9"] --}}
    <div class="flex items-center gap-2">
        <div class="w-1/2 h-96 shadow-lg rounded-lg">
            <div class="h-16 w-full flex justify-end px-8 items-center relative">
                <div class="flex justify-end items-center">
                    <a
                        class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700  hover:bg-gray-100 px-3 py-2">
                        Action Based Report
                    </a>
                </div>
            </div>
            <div id="bar-chart" class="-mt-6"></div>
        </div>
        <div class="w-1/2 h-96 shadow-lg rounded-lg block items-center gap-2">
            <div class="h-16 w-full flex justify-between px-8 items-center relative">
                <button id="dropdownDefaultButton" data-dropdown-toggle="lastDaysdropdown"
                    data-dropdown-placement="bottom"
                    class="text-sm font-medium text-gray-500 hover:text-gray-900 text-center inline-flex items-center"
                    type="button">
                    Last 7 days
                    <svg class="w-2.5 m-2.5 ms-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                        fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m1 1 4 4 4-4" />
                    </svg>
                </button>
                <div id="lastDaysdropdown"
                    class="z-10 hidden absolute top-[78%] bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
                    <ul class="py-2 text-sm text-gray-700"
                        aria-labelledby="dropdownDefaultButton">
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-gray-100">Yesterday</a>
                        </li>
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-gray-100 ">Today</a>
                        </li>
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-gray-100 ">Last 7 days</a>
                        </li>
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-gray-100 ">Last 30 days</a>
                        </li>
                        <li>
                            <a href="#"
                                class="block px-4 py-2 hover:bg-gray-100 ">Last 90 days</a>
                        </li>
                    </ul>
                </div>
                <div class="flex justify-end items-center">
                    <a
                        class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700  hover:bg-gray-100 px-3 py-2">
                        User Based Report
                    </a>
                </div>
            </div>
            <div class="flex items-center gap-2 justify-center">
                <div id="Funnel-chart" class="w-[21rem]"></div>
                <div class="w-max">
                    <ul class="space-y-10"> 
                        <li class="flex items-center gap-2"><div class="h-2 w-2 rounded-full bg-[#1C64F2]"></div><span class="text-[0.75rem]">Tickets Receieved</span></li>
                        <li class="flex items-center gap-2"><div class="h-2 w-2 rounded-full bg-[#16BDCA]"></div><span class="text-[0.75rem]">Tickets Completed</span></li>
                        <li class="flex items-center gap-2"><div class="h-2 w-2 rounded-full bg-[#9061F9]"></div><span class="text-[0.75rem]">Upc Based Tickets</span></li>
                        <li class="flex items-center gap-2"><div class="h-2 w-2 rounded-full bg-[#E74694]"></div><span class="text-[0.75rem]">User Based Tickets</span></li>
                        <li class="flex items-center gap-2"><div class="h-2 w-2 rounded-full bg-[#FDBA8C]"></div><span class="text-[0.75rem]">Confirmation Tickets</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="flex items-center gap-2">
        <div class="w-1/2 h-[28rem] shadow-lg rounded-lg">
            <div class="h-16 w-full flex justify-end px-8 items-center relative">
                <div class="flex justify-end items-center">
                    <a
                        class="uppercase text-sm font-semibold inline-flex items-center rounded-lg text-blue-600 hover:text-blue-700  hover:bg-gray-100 px-3 py-2">
                        Monthly Report
                    </a>
                </div>
            </div>
            <div id="line-chart" class="-mt-6"></div>
        </div>
        <div class="w-1/2 h-[28rem] shadow-lg rounded-lg px-6 py-8">
            <table class="w-full h-full text-sm text-left rtl:text-right text-gray-500">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 sticky top-0">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Ticket
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Details
                        </th>
                    </tr>
                </thead>
                <tbody class="overflow-y-auto">
                    <tr class="odd:bg-white even:bg-gray-50 border-b">
                        <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            Ticket Attended
                        </th>
                        <td class="px-6 py-3">
                            0
                        </td>
                    </tr>
                    <tr class="odd:bg-white even:bg-gray-50 border-b">
                        <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            Ticket Completed
                        </th>
                        <td class="px-6 py-3">
                            0
                        </td>
                    </tr>
                    <tr class="odd:bg-white even:bg-gray-50 border-b">
                        <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            Awaiting Ticket Count
                        </th>
                        <td class="px-6 py-3">
                            0
                        </td>
                    </tr>
                    <tr class="odd:bg-white even:bg-gray-50 border-b">
                        <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            Average Response Time
                        </th>
                        <td class="px-6 py-3">
                            0
                        </td>
                    </tr>
                    <tr class="odd:bg-white even:bg-gray-50 border-b">
                        <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap">
                            Average Star Rating
                        </th>
                        <td class="px-6 py-3">
                            0
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <br>
</div>

<head>
    <style>
        #Funnel-chart .apexcharts-canvas {
            /* rotate: 90deg; */
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        


        // Bar Chart --------------------

        const chartConfig1 = {
                series: [{
                    name: "Sales",
                    data: [50, 40, 300, 320, 500, 350, 200, 230],
                    
                }, ],
                chart: {
                    type: "bar",
                    height: 330,
                    toolbar: {
                        show: false,
                    },
                },
                title: {
                    show: "",
                },
                dataLabels: {
                    enabled: false,
                },
                colors: ["#fff"],
                
                plotOptions: {
                    bar: {
                        columnWidth: "40%",
                        borderRadius: 2,
                    },
                },

                xaxis: {
                    axisTicks: {
                        show: false,
                    },
                    axisBorder: {
                        show: false,
                    },
                    labels: {
                        style: {
                            colors: "#616161",
                            fontSize: "12px",
                            fontFamily: "inherit",
                            fontWeight: 400,
                        },
                    },
                    categories: [
                        "Dis",
                        "Del",
                        "Ad_note",
                        "Ad_flag",
                        "RFS",
                        "Tak",
                        "Unli",
                        "Man",
                    ],
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: "#616161",
                            fontSize: "12px",
                            fontFamily: "inherit",
                            fontWeight: 400,
                        },
                    },
                },
                grid: {
                    show: true,
                    borderColor: "#dddddd",
                    strokeDashArray: 5,
                    xaxis: {
                        lines: {
                            show: true,
                        },
                    },
                    padding: {
                        top: 5,
                        right: 20,
                    },
                },
                fill: {
                    opacity: 0.8,
                    type: 'gradient',
                    gradient: {
                        shade: 'dark',
                        gradientToColors: ['#9061F9'],
                        shadeIntensity: 2,
                        type: 'vertical',
                        opacityFrom: 1,
                        opacityTo: 2,
                        stops: [0, 200, 200, 200]
                    },

                },
                tooltip: {
                    theme: "dark",
                },
            };

            const chart1 = new ApexCharts(document.querySelector("#bar-chart"), chartConfig1);
            chart1.render();

            // --------- line-chart -------------


            const chartConfig = {
                    series: [{
                                name: "Mail Completed",
                                data: [50, 40, 300, 320, 500, 350, 200, 230, 500,200, 230, 500],
                            },
                            {
                                name: "Mail Received",
                                data: [60, 70, 28, 80, 500, 30, 200, 20, 500,200, 230, 500],
                            },],
                    chart: {
                        type: "line",
                        height: 390,
                        toolbar: {
                            show: false,
                        },
                    },
                    title: {
                        show: "",
                    },
                    dataLabels: {
                        enabled: false,
                        
                    },
                    colors: ["#5e39ff", "#87dafe"],
                    stroke: {
                        width: 3,
                        lineCap: "round",
                        curve: "smooth",
                        dashArray: [0, 8, 5]
                    },
                    markers: {
                        size: 0,
                    },
                    xaxis: {
                        axisTicks: {
                            show: false,
                        },
                        axisBorder: {
                            show: false,
                        },
                        labels: {
                            style: {
                                colors: "#616161",
                                fontSize: "12px",
                                fontFamily: "inherit",
                                fontWeight: 100,
                            },
                        },
                        categories: [
                            "Jan",
                            "Feb",
                            "Mar",
                            "Apr",
                            "May",
                            "Jun",
                            "Jul",
                            "Aug",
                            "Sep",
                            "Oct",
                            "Nov",
                            "Dec",
                        ],
                    },
                    yaxis: {
                        labels: {
                            style: {
                                colors: "#616161",
                                fontSize: "12px",
                                fontFamily: "inherit",
                                fontWeight: 400,
                            },
                        },
                    },
                    grid: {
                        show: true,
                        borderColor: "#dddddd",
                        strokeDashArray: 2,
                        xaxis: {
                            lines: {
                                show: true,
                            },
                        },
                        padding: {
                            top: 5,
                            right: 20,
                        },
                    },
                    fill: {
                        opacity: 0.8,
                    },
                    tooltip: {
                        theme: "dark",
                    },
                };

                const chart = new ApexCharts(document.querySelector('#line-chart'), chartConfig);
                chart.render();



                // ***************** Funnel-Chart ************************



                const getChartOptions = () => {
                    return {
                        series: [52.8, 26.8, 20.4, 20.4, 20.4],
                        colors: ["#1C64F2", "#16BDCA", "#9061F9", "#E74694", "#FDBA8C"],
                        chart: {
                            height: 420,
                            width: "100%",
                            type: "pie",
                        },
                        stroke: {
                            colors: ["white"],
                            lineCap: "",
                        },
                        plotOptions: {
                            pie: {
                                labels: {
                                    show: true,
                                },
                                size: "100%",
                                dataLabels: {
                                    offset: -25
                                }
                            },
                        },
                        labels: ['Tickets Receieved', 'Tickets Completed', 'Upc Based Tickets', 'User Based Tickets', 'Confirmation Tickets'],
                        dataLabels: {
                            enabled: true,
                            formatter: function(val, opts) {
                                const total = opts.w.globals.series.reduce((acc, cur) => acc + cur, 0);
                                const percentage = ((opts.w.globals.series[opts.seriesIndex] / total) * 100).toFixed(2);
                                return `${percentage}%` + " - " + "(" + opts.w.globals.series[opts.seriesIndex] + ")";
                            },
                            style: {
                                fontFamily: "Inter, sans-serif",
                            },
                        },
                        yaxis: {
                            labels: {
                                formatter: function (value) {
                                    return value
                                },
                            },
                        },
                        xaxis: {
                            labels: {
                                formatter: function (value) {
                                    return value
                                },
                            },
                            axisTicks: {
                                show: false,
                            },
                            axisBorder: {
                                show: false,
                            },
                        },
                        legend: {
                            show: false,
                        },
                        tooltip: {
                            theme: "dark",
                        },
                    }
                }

                if (document.getElementById("Funnel-chart") && typeof ApexCharts !== 'undefined') {
                    const chart2 = new ApexCharts(document.getElementById("Funnel-chart"), getChartOptions());
                    chart2.render();
                }




                function jsonData() {
                    $.ajax({
                        type: "post",
                        url: "{{ route('autonomous-level') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                            ref: "staffs_actions",
                        },
                        success: function(result) {
                            var json = result.data;

                            $('#Disapprove').html(json.Disapprove);
                            $('#Deleteall').html(json.Delete_);
                            $('#Adds_a_note').html(json.Adds_a_note);
                            $('#Adds_a_flag').html(json.Adds_a_flag);
                            $('#RFSall').html(json.RFS);
                            $('#Takedown').html(json.Takedown);
                            $('#Unlinks').html(json.Unlinks);
                            $('#Manual').html(json.Manual);


                            var oncount = result.result;


                            var newData = Object.values(oncount).map(value => parseInt(value));

                            chart1.updateOptions({
                                series: [{
                                    data: newData
                                }]
                            });


                            $('#Disapprove0').html(oncount.Disapprove);
                            $('#Deleteall0').html(oncount.Delete_);
                            $('#Adds_a_note0').html(oncount.Adds_a_note);
                            $('#Adds_a_flag0').html(oncount.Adds_a_flag);
                            $('#RFSall0').html(oncount.RFS);
                            $('#Takedown0').html(oncount.Takedown);
                            $('#Unlinks0').html(oncount.Unlinks);
                            $('#Manual0').html(oncount.Manual);
                            
                        }
                    })
                }
                jsonData();

                $(document).ready(function() {
                    $('#dropdownDefaultButton').click(function() {
                        $('#lastDaysdropdown').toggle();
                    })
                })
    </script>
</head>
@endsection