@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Vaccination</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/vaccines">Vaccines</a>
                    </li>
                    <li class="breadcrumb-item active">Report
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm"><i data-feather="arrow-left-circle"></i>
                Back</a>
            <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd" type="button"><i
                    data-feather='filter'></i></button>
        </div>
    </div>
@endpush

@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card new-cardbox">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <h3>{{ $selectedVaccine->name }} | {{ ucwords($status) }} | {{ $duration == 'consolidated' ? ucwords($duration) : $yearMonth }}</h3>
                            </div>
                            <div class="col-md-12">
                                <div id="vaccine-dose-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--/ Column Search -->

    <div class="offcanvas-end-example">
        <form method="get">
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasEndLabel" class="offcanvas-title">{{ trans('common/common.filter') }}</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                    <div class="row">
                        <div class="col-sm-12">
                            <label class="form-label mt-2" for="duration">Duration</label>
                            <select class="form-control mb-2 select2" name="duration" id="duration"
                                onchange="handleDurationChange()">
                                <option value="consolidated" {{ $duration == 'consolidated' ? 'selected' : '' }}>
                                    Consolidated</option>
                                <option value="monthly" {{ $duration == 'monthly' ? 'selected' : '' }}>Monthly</option>
                            </select>
                        </div>

                        <div class="col-sm-12 year-month-select">
                            <label class="form-label mt-2" for="area_id">{{ trans('admin/template.month') }}</label>
                            <select class="form-control mb-2 select2" name="month" id="month">
                                @foreach ($months as $key => $val)
                                    <option class="form-control" value="{{ $key }}"
                                        @if ($key == $month) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-12 year-month-select">
                            <label class="form-label mt-2" for="year">{{ trans('admin/template.year') }}</label>
                            <select class="form-control mb-2 select2" name="year" id="year">
                                @foreach ($years as $val)
                                    <option class="form-control" value="{{ $val }}"
                                        @if ($val == $year) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-12">
                            <label class="form-label mt-2" for="status">Status</label>
                            <select class="form-control mb-2 select2" name="status" id="status">
                                <option value="pending" {{ $status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="completed" {{ $status == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="refused" {{ $status == 'refused' ? 'selected' : '' }}>Refused</option>
                            </select>
                        </div>
                        <div class="col-sm-12">
                            <label class="form-label mt-2" for="vaccine_id">Vaccine</label>
                            <select class="form-control mb-2 select2" name="vaccine_id" id="vaccine_id">
                                @foreach ($vaccines as $vaccine)
                                    <option value="{{ $vaccine->id }}"
                                        {{ $selectedVaccineId == $vaccine->id ? 'selected' : '' }}>
                                        {{ $vaccine->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                        data-bs-dismiss="offcanvas" aria-label="Close"><i data-feather='search' class="me-2"></i>
                        {{ trans('common/common.search') }}</button>

                </div>
            </div>
        </form>
    </div>
@endsection

@push('footer-script')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        $(window).on('load', function() {
            renderFeatherIcons();
            $('.select2').select2();
        });

        function renderFeatherIcons() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        }

        var vaccineDataValues = {!! json_encode($vaccineData['values']) !!};
        var vaccineDataLabels = {!! json_encode($vaccineData['labels']) !!};

        $(function() {
            vaccineDoseChart();
            handleDurationChange();
        });

        function handleDurationChange() {
            if ($('#duration').val() == 'monthly') {
                $('.year-month-select').show();
            } else {
                $('.year-month-select').hide();
            }
        }

        function vaccineDoseChart() {
            $('#vaccine-dose-chart').html("");
            if (vaccineDataLabels.length) {
                var options = {
                    series: vaccineDataValues,
                    chart: {
                        width: 480,
                        type: 'pie',
                        events: {
                            click: function(event, chartContext, config) {
                                var clickIndex = config.dataPointIndex;
                                var clickedLabel = vaccineDataLabels[clickIndex];

                                window.open(
                                    '{{ $orgUrl }}/employee-vaccinations/report/details?dose_name=' +
                                    clickedLabel + '&{!! request()->getQueryString() !!}',
                                    '_blank'
                                );
                            },
                        }
                    },
                    labels: vaccineDataLabels,
                    responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                width: 200
                            },
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }]
                };

                var chart = new ApexCharts($('#vaccine-dose-chart')[0], options);
                chart.render();
            }else{
                $('#vaccine-dose-chart').html("<h6>No Data Found</h6>");
            }
        }
    </script>
@endpush