@extends('user.layout.layout')

@section('content')
    <div class="container-fluid">
        <div class="top_bar">
            <div class="col-lg-auto col-auto my-auto">
                <div class="main_title">
                    <h3>Dashboard</h3>
                </div>
            </div>
        </div>
        <!--  Row 1 -->
        <div class="row">

            <div class="col-lg-auto col-xxl-auto col-md-auto col-auto">
                <div class="white_shadow dasboard-3">
                    <div class="left">
                        <span>Total User</span>
                        <h3 id="TotalUsers">0 </h3>
                    </div>
                    <div class="right">
                        <span>
                            <img src="{{ asset('assets/images/total_filed.png') }}">
                        </span>
                    </div>
                </div>
            </div>

            <div class="col-lg-auto col-xxl-auto col-md-auto col-auto">
                <div class="white_shadow dasboard-3">
                    <div class="left">
                        <span>Total Deal</span>
                        <h3 id="TotalDeal">0 </h3>
                    </div>
                    <div class="right">
                        <span>
                            <img src="{{ asset('assets/images/deal.png') }}">
                        </span>
                    </div>
                </div>
            </div>

            <div class="col-lg-auto col-xxl-auto col-md-auto col-auto">
                <div class="white_shadow dasboard-3">
                    <div class="left">
                        <span>Total Incentive</span>
                        <h3 id="TotalIncentive">0 </h3>
                    </div>
                    <div class="right">
                        <span>
                            <img src="{{ asset('assets/images/incentive.png') }}">
                        </span>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-xxl-8 col-md-10 col-12">
                <div class="white_round">
                    <div class="row">
                        <div class="col-lg-auto col-xxl-auto col-md-auto col-auto">
                            <div class="main_title">
                                <h3>Total Incentive</h3>
                            </div>
                        </div>
                        <div class="col-lg-auto col-xxl-auto col-md-auto col-auto ms-auto">
                            <div class="select_bg">
                                <select class="select2 js-example-basic-single select-label form-control w-100"
                                    name="fyYearId" id="fyYearId">
                                    <option value="" selected disabled>Select Year</option>
                                    @foreach ($data['fy_years'] as $key => $fy_year)
                                        <option value="{{ $fy_year->id }}"
                                            {{ $fy_year->id == $data['current_fy_year']['id'] ? 'selected' : '' }}>
                                            {{ $fy_year->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="chart_view">
                            <canvas id="chLine"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
@endsection

@section('customJs')
    <script>
        $(document).ready(function() {
            getCount();
            getLineGraphCount();

            $("#fyYearId").on("change", function() {
                getLineGraphCount();
            });
        });
    </script>
    <script>
        function getCount() {
            // dtFrom = $("#dtFrom").val();
            // dtTo = $("#dtTo").val();
            // userEmpCode = $("#userEmpCode option:selected").val();
            // doctorId = $("#doctorId option:selected").val();
            $.ajax({
                url: "{{ route('userDashboardCount') }}",
                type: 'GET',
                data: {
                    '_token': '{{ csrf_token() }}'
                    // 'dtFrom': dtFrom,
                    // 'dtTo': dtTo,
                    // 'userEmpCode': userEmpCode,
                    // 'doctorId': doctorId
                },
                dataType: "json",
                success: function(response) {
                    $("#TotalUsers").html(response.data.TotalUsers);
                    $("#TotalDeal").html(response.data.TotalDeal);
                    $("#TotalIncentive").html(response.data.TotalIncentive);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }


        function getLineGraphCount() {
            $.ajax({
                url: "{{ route('userDashboardGraph') }}",
                type: 'GET',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'fyYearId': $("#fyYearId option:selected").val()
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        var colors = ['#9d7f1b', '#4C4C9B', '#FF852B', '#A96FE9', '#dc3545', '#6c757d'];
                        var labels = response.data.labels;
                        var dataLimit = response.data.dataLimit;
                        var IncentiveCountdata = response.data.incentiveCount;

                        // Calculate min and max from dataLimit array
                        var minLimit = Math.min(...dataLimit);
                        var maxLimit = Math.max(...dataLimit);

                        var chLine = $("#chLine");
                        var chartData = {
                            labels: labels,
                            datasets: [{
                                data: IncentiveCountdata,
                                backgroundColor: 'transparent',
                                borderColor: colors[0],
                                borderWidth: 4,
                                pointBackgroundColor: colors[0]
                            }]
                        };

                        new Chart(chLine, {
                            type: 'line',
                            data: chartData,
                            options: {
                                scales: {
                                    xAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: '(Month)'
                                        },
                                        ticks: {
                                            beginAtZero: false
                                        }
                                    }],
                                    yAxes: [{
                                        scaleLabel: {
                                            display: true,
                                            labelString: '(Amount in CR)'
                                        },
                                        ticks: {
                                            beginAtZero: true,
                                            min: minLimit, // Set the min value of y-axis
                                            max: maxLimit, // Set the max value of y-axis
                                            callback: function(value) {
                                                return (value / 10000000).toFixed(
                                                0); // Convert to crores
                                            }
                                        }
                                    }]
                                },
                                legend: {
                                    display: false
                                },
                                responsive: true
                            }
                        });

                    } else {
                        $.notify(response.message, "error");
                    }

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                }
            });
        }
    </script>
@endsection