@extends('admin.layouts.main')

@section('title')
Line Chart Report
@endsection

@section('content')

<main>

    <loading :active.sync="isLoading"></loading>

    <div class="two-col">
        @include("admin.common.sidebar")
        <div class="right-sec">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('report.reports') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('report.line_graph') }}</li>
                </ol>
            </nav>
            <div class="top-bar d-flex align-items-center justify-content-between">
                <h2>Line Chart</h2>
                <div class="right-table-container ml-auto">
                    <a href="javascript:void(0)" name="resetForm" id="resetForm" class="btn btn-bordered-primary float-right" 
                            @click="$refs.report_component.resetLineChartForm()">{{ @trans('report.reset') }}</a>
                </div>
            </div>
            <div class="card card-body py-3">
                <h2 class="form-sec-title border-bottom pb-2 ">Select Parameters to generate chart</h2>
                <line-chart-report chartid="{{ $reportLineChart->id }}" charturl="{{ route('admin.reports.lineGraphByAjax',['panel' => Session::get('panel')]) }}"
                    ref="report_component"></line-chart-report>   
            </div>
            <div class="box mt-4 min-height-auto py-3 px-2 lineChartDiv hidden">
                <div class="container-fluid">
                    <div class="border-bottom d-flex justify-content-between w-100 pb-2 align-items-center mb-3">
                        <h3 class="general-font gray m-0">{{ @trans('report.line_chart') }}</h3>
                        <form action="{{ route('admin.reports.exportChart',['panel' => Session::get('panel')]) }}" method="post" target="_blank">@csrf
                            <input type="hidden" name="chartName" value="Line Chart">
                            <input type="hidden" name="export-form-inputs" id="export-line-chart-form-inputs">
                            <input type="hidden" name="chartImg" id="chartImg1">
                            <button type="submit" class="btn btn-bordered-primary btn-sm exportChartCls" id="exportLineChartBtn">{{ @trans('report.export') }}</button>
                        </form>
                    </div>
                    <div class="row">
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.reports_for_scenario_number') }}</label>
                                <p class="display-info label_line_chart_mpId"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_type') }}</label>
                                <p class="display-info label_line_chart_dataType"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.data_point') }}</label>
                                <p class="display-info label_line_chart_dataPoint"></p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-xl">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('report.group_by') }}</label>
                                <p class="display-info label_line_chart_groupBy"></p>
                            </div>
                        </div>
                    </div>
                    <div style="min-height:500px;">
                        {!! $reportLineChart->container() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@include('mpClient.modules.reports.lineGraphComponent')

@push('pageModals')
@include('admin.modules.report.manage_group_modal')
@include('admin.components.modal_delete_js')
@endpush

@push('pageJs')
<script src="{{ asset('js/vendor/chart.js') }}"></script>
@include('admin.modules.report.no_data_plugin')
{!! $reportLineChart->script() !!}
<script>
    var getClientsByMpIdChartUrl = "{{ route('admin.reports.getClientsById',['panel' => Session::get('panel'), 'id' => Null]) }}";
    var getClientBranchesByMpIdChartUrl = "{{ route('admin.reports.getClientBranchesById',['panel' => Session::get('panel')]) }}";
    var getDataPointByDataTypeUrl = "{{ route('admin.reports.getDataPointByDataType',['panel' => Session::get('panel')]) }}";
    var storeReportManageGroupUrl = "{{ route('admin.reports.storeManageGroup',['panel' => Session::get('panel')]) }}";
    var deleteReportManageGroupUrl = "{{ route('admin.reports.deleteManageGroup',['panel' => Session::get('panel'), 'id' => null]) }}";
    var getCustomGroupsByMpIdUrl = "{{ route('admin.reports.getManageGroup',['panel' => Session::get('panel'), 'id' => null]) }}";
    var dateJs = '{{ config('custom.formats.date_js') }}';
</script>
<script type="text/javascript" src="{{ asset('js/vendor/vuelidate.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/vendor/validators.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/reportManageGroupMixin.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/admin/report.js') }}"></script>
@endpush