@extends('layouts.app')

@section('content')

    <style>
        /* @import url(https://fonts.googleapis.com/css?family=Roboto); */
        /*
        body {
          font-family: Roboto, sans-serif;
        } */

        .chart-container1,
        .chart-container2,
        .chart-container3,
        .chart-container4 {
            /* background: #aaa; */
        }

        .text-center {
            text-align: center;
        }

        .container .row>div {
            padding: 20px;
        }

        .container .row>div h2 {
            color: rgb(34, 34, 34);
        }

        /* g#SvgjsG1164 {
          transform: translate(-105px, 0px) !important;
        } */
    </style>

    <div class="col col-lg-9 pd-30">

        @component('components.print')

        @endcomponent

        <!-- Page Title -->
        <div class="page-title divider-b pdb-10 flexbox align-between align-center-y mb-20">
            <!-- Title -->
            <h1 class="reset-block primary-color lineheight-130 fs-20"> الاطلاع على نتائج العفو الملكي السابقة </h1>
        </div>
        <!-- // Page Title -->

        <div class="row">
            <div class="col-md-6">
                <div class="chart-container1">
                    <h2 class="text-center mb-20 mt-35">عقوبة الحبس </h2>
                    <div id="chart1" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="chart-container2">
                    <h2 class="text-center mb-20 mt-35">عقوبة الغرامة المالية </h2>
                    <div id="chart2" style="width: 100%; height: 400px;"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="chart-container3">
                    <h5 class="text-center mb-20 mt-35">أكثر عوائق عدم شمول النزلاء بالعفو الملكي لعموم القضايا </h5>
                    <div id="chart3" style="width: 100%; height: 380px;"></div>
                </div>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        // Static data for charts
        var chartData1 = [44, 55, 13];
        var chartData2 = [100, 800, 1000];
        var chartData3 = [400, 430, 448, 470];

        // Chart options
        var options1 = {
            series: chartData1,
            chart: {
                width: '100%',
                type: 'pie',
                fontFamily: 'Somar Rounded'
            },
            labels: ['الإعفاء من كامل المحكومية', 'الإعفاء من نصف المحكومية', 'عدم شمولة بالعفو'],
        };

        var options2 = {
            series: chartData2,
            chart: {
                width: '100%',
                type: 'pie',
                fontFamily: 'Somar Rounded'
            },
            labels: ['الإعفاء من كامل الغرامة المالية', 'عدم الإعفاء من الغرامة المالية', 'معاملة الغرامة وفق نظام إيرادات الدولة'],
        };

        var options3 = {
            series: [{
                data: chartData3
            }],
            chart: {
                type: 'bar',
                height: 380,
                fontFamily: 'Somar Rounded'
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    horizontal: true,
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: [' القضية من الجرائم الكبيرة', 'الإستفادة من عفو سابق', ' تعدد السوابق', 'إستبعاد القضية من العفو'],
            }
        };

        // Render charts
        var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
        chart1.render();

        var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
        chart2.render();

        var chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
        chart3.render();
    </script>

@endsection