@extends('admin.layouts.master')
@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">PHQ-9 Feedback</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
                        <li class="breadcrumb-item active"><a href="{{asset(route('depression-feedback'))}}">Depression Feedback</a></li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </div>
    @if(session()->has('success'))
        <div class="alert alert-success">
            {{ session()->get('success') }}
        </div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-success">
            {{ session()->get('error') }}
        </div>
    @endif
    <section class="container-fluid px-3">
        <div class="row">
            <div class="col-md-12">
                <div class="card" style="">
                    <div class="card-body">
                        <form role="form" class="form-inline" method="get" action="{{route('depression-feedback')}}"
                                autocomplete="off">
                            <div class="form-row">
                                <div class="col">
                                    <label>Company</label>
                                    <select
                                        class="form-control w-100"
                                        name="company"
                                    >
                                        <option value="">Select company</option>
                                        @foreach($companies as $company)
                                            <option value={{$company->id}} {{isset($selected_company) && $selected_company == $company->id ? "selected" : ""}}>
                                                {{$company->company_name}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col">
                                    <label>Country</label>
                                    <select
                                        class="form-control w-100"
                                        name="country"
                                    >
                                        <option value="">Select country</option>
                                        @foreach($countries as $country)
                                            <option value={{$country->user_id}} {{isset($selected_country) && $selected_country == $country->id ? "selected" : ""}}>
                                                {{$country->name}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col">
                                    <label>Period</label>
                                    <select
                                        class="form-control w-100"
                                        name="period"
                                    >
                                        <option value="">Select period</option>
                                        <option value="week" {{isset($selected_period) && $selected_period != "week" ? "" : "selected"}}>
                                            Week
                                        </option>
                                        <option value="month" {{isset($selected_period) && $selected_period == "month" ? "selected" : ""}}>
                                            Month
                                        </option>
                                        <option value="year" {{isset($selected_period) && $selected_period == "year" ? "selected" : ""}}>
                                            Year
                                        </option>
                                    </select>
                                </div>

                                <div class="col">
                                    <label>Comparable</label>
                                    <input type="checkbox" class="form-control w-100"  name="comparable" {{isset($comparable)  && $comparable == "on" ? "checked" : ""}} data-bootstrap-switch  >
                                </div>

                                <div class="col pt-4 d-flex">                            
                                    <button type="submit" class="btn btn-primary" style="margin-right: 0.5rem">
                                        Submit
                                    </button>
                                    <a href="{{route('depression-feedback')}}" class="btn btn-secondary">Reset</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-12" id="chart">
            </div>
        </div>
    </section>
@endsection

@section('script')
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highchartscom/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
    <script>
        $(document).ready(function () {
            const chartData = {!! json_encode($chart_data) !!};
            
            // Initialize Highcharts for this title
            Highcharts.chart('chart', {
                chart: {
                    type: 'pie',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: "PHQ-9"
                },
                tooltip: {
                    pointFormat: '<b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [
                    {
                        name: 'Total',
                        colorByPoint: true,
                        data: chartData
                    }
                ]
            });
        });
    </script>
@endsection