@extends('layouts.app')

@section('content')

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />

<style>

    .icon {
        width: 2.5rem;
        height: 2.5rem;
        box-shadow: 0 0 15px 5px rgba(128, 128, 128, 0.25) !important;
    }

    .icon i {
        font-size: 1.5rem;
    }

    .icon-shape {
        display: inline-flex;
        padding: 12px;
        text-align: center;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
    }

    .card-footer {
        padding: 0.5rem 1rem !important;
    }

</style>

<!-- - PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1 class="page-title">Dashboard</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

</div>
<!-- PAGE-HEADER END -->

<div class="jumbotron mb-5 ">
    <div class="card">
        <div class="card-body">
            <h4 class="display-6">{{ $notice->title }}</h4>
            <p class="lead">{{ $notice->description }}</p>
        </div>
    </div>
</div>

<div class="row mb-4 mt-4
">
    <div class="col-sm-12">
        <h4 class="badge bg-primary">My KRA Stats (Current Month):</h4>
    </div>

    @foreach($emp_stats as $stats)
    <div class="col-xl-3 col-lg-6 mb-3">
        <div class="card card-stats mb-4 mb-xl-0">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title text-muted mb-2">{{ $stats['title'] }}</h5>
                        <span class="h2 font-weight-bold mb-0">{{ $stats['data'] }}</span>
                    </div>
                    <div class="col-auto">
                        <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                            <i class="{{ $stats['icon'] }}"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach

</div>

<div class="content mt-3">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Invoice Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="invoiceStatusChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>


        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Project Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="projectDelayChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Service's Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="serviceChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

@section('scripting')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const invoiceData = {
        labels: ["Pending Invoices (50)", "Cleared Invoices (70)"],
        datasets: [{
            data: [50, 70], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };

    const projectData = {
        labels: ["Delayed Projects (25)", "On-Time Projects (45)"],
        datasets: [{
            data: [25, 45], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };

    const serviceData = {
        labels: ["Completed Service (15)", "Pending Services (45)"],
        datasets: [{
            data: [15, 45], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };
        new Chart(document.getElementById('invoiceStatusChart'), {
            type: 'pie',
            data: invoiceData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        new Chart(document.getElementById('projectDelayChart'), {
            type: 'pie',
            data: projectData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        new Chart(document.getElementById('serviceChart'), {
            type: 'pie',
            data: serviceData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });
    });
</script>

@stop









@section('scripting')

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });



        var options = {
          series: [{
          // data: [21, 22, 10, 28, 16, 21, 13, 30]
          data: [],
        }],
          chart: {
          height: 350,
          type: 'bar',
          events: {
            click: function(chart, w, e) {
              // console.log(chart, w, e)
            }
          }
        },
        // colors: colors,
        plotOptions: {
          bar: {
            columnWidth: '45%',
            distributed: true,
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          show: false
        },
        xaxis: {
        //   categories: [
        //     ['John', 'Doe'],
        //     ['Joe', 'Smith'],
        //     ['Jake', 'Williams'],
        //     'Amber',
        //     ['Peter Brown'],
        //     ['Mary', 'Evans'],
        //     ['David', 'Wilson'],
        //     ['Lily', 'Roberts'], 
        //   ],
        categories: [],
          labels: {
            style: {
              // colors: colors,
              fontSize: '12px'
            }
          }
        }
        };

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


        // var options = {
        //   series: [],
        //   chart: {
        //   height: 350,
        //   type: 'bar',
        // },
        // dataLabels: {
        //   enabled: false
        // },
        // title: {
        //   text: 'Ajax Example',
        // },
        // noData: {
        //   text: 'Loading...'
        // },
        // xaxis: {
        //   type: 'category',
        //   tickPlacement: 'on',
        //   labels: {
        //     rotate: -45,
        //     rotateAlways: true
        //   }
        // }
        // };

        // var chart = new ApexCharts(document.querySelector("#chart"), options);
        // chart.render();
    
        $.getJSON("{{ url('getStats') }}", function(response) {
            console.log(response.leads);
            // chart.updateSeries([
            //     {
            // name: 'Funnel',
            // data: response.leads,
            // categories: response.names
            // }
            // ])

            chart.updateOptions({
   xaxis: {
      categories: response.names
   },
   series: [{
      data: response.leads
   }],
});
        });

    });

</script>

@endsection