@extends('layouts.' . $viewPrefix . '.' . session('layout', 'app'))

@section('title','Training Register Reports')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit"></i>
                </div>
                <div>{{ __('Training Register Reports') }}</div>
            </div>

            <div class="page-title-actions">
                <div class="d-grid gap-2 d-block">
                    <a href="{{ route($routePrefix . '.trainings.all', ['layout' => session('layout')]) }}" class="btn-shadow btn btn-danger">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-arrow-circle-left fa-w-20"></i>
                        </span>
                        {{ __('Back to Records') }}
                    </a>
                    @can(\App\Models\Permission::PERM_TRAINING_CREATE)
                        <a href="{{ route($routePrefix . '.trainings.create') }}" class="btn-shadow btn btn-info">
                        <span class="btn-icon-wrapper pr-2 opacity-7">
                            <i class="fas fa-plus-circle fa-w-20"></i>
                        </span>
                            {{ __('Create New Training Record') }}
                        </a>
                    @endcan
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        @foreach($charts as $id => $chart)
        <div class="col-sm-12 col-md-6">
            <h4 class="my-3">Types of Completed Training</h4>
            <div class="main-card card mb-2">
                <div class="card-body">
                    <div style="height: 400px">
                        <canvas id="{{ $id }}" height="400"></canvas>
                    </div>
                    <div class="page-installation-code mt-2 d-flex justify-content-between">
                        <a class="btn-shadow btn btn-xs px-3 btn-outline-dark" data-bs-toggle="modal" data-bs-target="#email-link-modal"><i class="fas fa-envelope"></i> Email Link</a>
                        <textarea id="graph-embed-code-{{ $id }}" rows="12" readonly class="graph-copy-area form-control pt-4 d-none">{{ $chart['code'] }}</textarea>
                        <button  type="button" id="graph-copyit" class="btn-shadow btn btn-xs px-3 btn-outline-dark" onclick="InstallationCode.copy('.graph-copy-area', this)"><i class="fas fa-clipboard"></i> Copy Link</button>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="email-link-modal" tabindex="-1" role="dialog" aria-labelledby="emailLinkModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-label">Email Link</h5>
                </div>
                <div class="modal-body">
                    <div id="error" class="text-danger">

                    </div>
                    <div class="form-group">
                        <label class="form-label" for="to">Name</label>
                        <input class="form-control" id="name">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="to">Email</label>
                        <input class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <button id="onSubmit" class="btn btn-primary btn-sm btn-shadow"><i class=""></i> Email</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js" integrity="sha512-O2fWHvFel3xjQSi9FyzKXWLTvnom+lOYR/AUEThL/fbP4hv1Lo5LCFCGuTXBRyKC4K4DJldg5kxptkgXAzUpvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script>
        $(document).ready(function(){

            $('#onSubmit').click(function(e){
                $(this).find('i').addClass('fas fa-spinner fa-spin');
                axios({
                    method: 'POST',
                    url: '{{ route($routePrefix . '.trainings.reports.email' ) }}',
                    data: { email: $('#email').val(), name: $('#name').val()}
                }).then((response) => {
                    //$('.invalid-feedback').empty();
                    //$('#to').removeClass('is-invalid');
                    $('#error').empty();
                    $('#email').val('');
                    $('#name').val('');
                    iziToast.success({
                        title: 'Success',
                        message: 'Email is sent',
                    });
                    $('#email-link-modal').modal('hide');
                }).catch((errors) => {

                    //$('.invalid-feedback').text(errors.response.data.message);
                    //$('#to').addClass('is-invalid');
                    $('#error').text(errors.response.data.message);
                }).finally(() => {
                    $(this).find('i').removeClass('fas fa-spinner fa-spin');
                });
            });
            const ctx = document.getElementById('training_provider_pie');
            Chart.register(ChartDataLabels);
            const chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: JSON.parse('{!! json_encode(array_keys($charts['training_provider_pie']['graph'])) !!}'),
                    datasets: [{
                        label: '# of Training Records',
                        data: JSON.parse('{!! json_encode(array_values($charts['training_provider_pie']['graph'])) !!}'),
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {

                    },
                    tooltips: {
                        enabled: false
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value, ctx) => {
                                let sum = 0;
                                let dataArr = ctx.chart.data.datasets[0].data;
                                dataArr.map(data => {
                                    sum += data;
                                });
                                return (value*100 / sum).toFixed(2)+"%";
                            },
                            color: '#000',
                        }
                    }
                }
            });
        });
    </script>
@endpush