@extends('layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/js/pages/chart.js') }}">
@endsection
@section('content')



<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-12">
                  <h6>عقوبة الحبس</h6>
                  <div id="chart">
                  </div>
                </div>
                <div class="col-12">
                  <h6>عقوبة الغرامة المالية</h6>
                  <div id="chart2">
                  </div>
                </div>
                <div class="col-6">
                    <h6 class="text-center mb-25 mt-35">أكثر عوائق عدم شمول النزلاء بالعفو الملكي لعموم القضايا </h6>
                    <div id="chart3"></div>
              </div>
            </div




</div>


@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.46.0/apexcharts.min.js" integrity="sha512-S0o4cCUyDGDTT7LdYR0skjjZ47xBay7KYorwWlevl+/7mADWHZhklWMLvoJprbKALVNpwFacL7VZAgjI3Ga2Rg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>



var options = {
    dataLabels: {
        //formatter: function (val, opts) {
           // return val.toFixed(2)
       // },
      },
series: [{{$data['count_remaining_pardon']}}, {{$data['count_half_pardon']}}, {{$data['count_not_pardon']}}],
chart: {
width: 430,
type: 'pie',
fontFamily: 'Somar Rounded'
},
labels: ['الأعفاء من كامل المحكومية' + " (  {{$data['count_remaining_pardon']}} %) ", 'الأعفاء من نصف المحكومية'+ " (  {{$data['count_half_pardon']}} %) ", 'عدم شمولة بالعفو'+ " (  {{$data['count_not_pardon']}} %) "],
responsive: [{
breakpoint: 480,
options: {
  chart: {
    width: 250,
    fontFamily: 'Somar Rounded'

  },
  legend: {
    position: 'bottom'
  }
}
}]
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();


var options2 = {
series: [{{$data['count_money']}}, {{$data['count_not_money']}}, {{$data['count_financial_fines_state_revenues']}}],
chart: {
width: 480,
type: 'pie',
fontFamily: 'Somar Rounded',
},
labels: ['الأعفاء من كامل الغرامة المالية' + " (  {{$data['count_money']}} %) " , 'عدم الأعفاء من الغرامة المالية' + " (  {{$data['count_not_money']}} %) " , 'معاملة الغرامة وفق نظام أيرادات الدولة' + " (  {{$data['count_financial_fines_state_revenues']}} %) " ],
responsive: [{
breakpoint: 480,
options: {
  chart: {
    width: 250,
    fontFamily: 'Somar Rounded',
  },
  legend: {
    position: 'bottom'
  }
}
}]
};

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



var options3 = {
series: [{
data: [
    @foreach($data['filters_reason_type'] as  $key=>$val)
    '{{ $val }}',
  @endforeach
]
}],
chart: {
type: 'bar',
height: 380,
fontFamily: 'Somar Rounded'

},

plotOptions: {
bar: {
  borderRadius: 4,
  horizontal: true,
}
},
dataLabels: {
enabled: false
},
xaxis: {
opposite:true,
categories: [
    @foreach($data['filters_reason_type'] as  $key=>$val)
    '{{ $key }}({{$val}})'.split("-") ,

  @endforeach
// ' القضية من الجرائم الكبيرة', 'الأستفادة من عفو سابق', ' تعدد السوابق', 'إستبعاد القضية من العفو'
],
title: {
  text: undefined,
  align: 'left',
  margin: 10,
  offsetX: 0,
  offsetY: 0,
  floating: false,
  style: {
    fontSize:  '14px',
    fontWeight:  'bold',
    fontFamily:  undefined,
    color:  '#263238'
  },
}

}
};

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

var options4 = {
series: [{
data: [400, 430, 448, 470]
}],
chart: {
type: 'bar',
height: 380,
width: 430,
fontFamily: 'Somar Rounded'

},

plotOptions: {
bar: {
  borderRadius: 4,
  horizontal: false,
}
},
dataLabels: {
enabled: false
},

xaxis: {
opposite:true,
categories: [' القضية من الجرائم الكبيرة', 'الأستفادة من عفو سابق', ' تعدد السوابق', 'إستبعاد القضية من العفو'],
}
};

var chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
chart4.render();



</script>
@endsection