@extends('admin.layout.index')

@section('script')
<script>





    // Bootstrap 5
    const dpInstance = new mds.MdsPersianDateTimePicker(document.getElementById('start_clock_date'), {
        targetTextSelector: '[data-name="insurance_start_input"]',
        targetDateSelector: '[data-name="start_gregorian_date"]',
    });
    const dpInstance2 = new mds.MdsPersianDateTimePicker(document.getElementById('end_clock_date'), {
        targetTextSelector: '[data-name="end_jalali_date"]',
        targetDateSelector: '[data-name="end_gregorian_date"]',
    });

    // Set new default font family and font color to mimic Bootstrap's default styling
    Chart.defaults.defaultFontFamily = 'Nunito',
        '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
    Chart.defaults.defaultFontColor = '#858796';

    function number_format(number, decimals, dec_point, thousands_sep) {
        // *     example: number_format(1234.56, 2, ',', ' ');
        // *     return: '1 234,56'
        number = (number + '').replace(',', '').replace(' ', '');
        var n = !isFinite(+number) ? 0 : +number,
            prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
            sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
            dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
            s = '',
            toFixedFix = function (n, prec) {
                var k = Math.pow(10, prec);
                return '' + Math.round(n * k) / k;
            };
        // Fix for IE parseFloat(0.55).toFixed(0) = 0;
        s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
        if (s[0].length > 3) {
            s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
        }
        if ((s[1] || '').length < prec) {
            s[1] = s[1] || '';
            s[1] += new Array(prec - s[1].length + 1).join('0');
        }
        return s.join(dec);
    }


    // Area Chart Example
    var ctx = document.getElementById("myAreaChart");
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels:,
            datasets: [{
                label: "بازدید",
                lineTension: 0.3,
                backgroundColor: "rgba(78, 115, 223, 0.05)",
                borderColor: "rgba(78, 115, 223, 1)",
                pointRadius: 3,
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "rgba(78, 115, 223, 1)",
                pointHoverRadius: 3,
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10,
                pointBorderWidth: 2,
                data: ,
            }],
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{


                    time: {
                        unit: 'day'
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 7
                    }
                }],
                yAxes: [{
                    ticks: {
                        maxTicksLimit: 5,
                        beginAtZero:true,
                        padding: 10,
                        // Include a dollar sign in the ticks
                        callback: function (value, index, values) {
                            if (Math.floor(value) === value) {
                                return value + ' نفر ';
                            }

                        }
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }],
            },
            legend: {
                display: false
            },
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                intersect: false,
                mode: 'index',
                caretPadding: 10,
                callbacks: {
                    label: function (tooltipItem, chart) {
                        var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                        return datasetLabel+ ':' + tooltipItem.yLabel + ' نفر' ;
                    }
                }
            }
        }
    });
</script>
@endsection

@section('style')
    <style>
        #insuranceResult{
            display: none;
        }
        .input-group-text{
            border-radius: 0 !important;
            margin-top: 1px;
            cursor: pointer;
        }
    </style>
    @endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="post d-flex flex-column-fluid" id="kt_post">
            @if(auth()->user()->role==1)
                <div id="kt_content_container" class="container-xxl">
                    <!--begin::Row-->
                    <div class="row g-5 g-xl-8">
                        <div class="col-xl-4">
                            <!--begin::امار Widget 5-->
                            <a href="#" class="card bg-body-white hoverable card-xl-stretch mb-xl-8">
                                <!--begin::Body-->
                                <div class="card-body">
                                    <i class="fas fa-comments fa-2x text-gray-300"></i>

                                    <div onclick="window.location.href='{{ route('admin.comments.index') }}'" class="text-gray-900 fw-bold fs-2 mb-2 mt-5">
                                        کامنت ها

                                    </div>
                                    <div class="fw-semibold text-gray-400">{{ $comments }}</div>
                                </div>
                                <!--end::Body-->
                            </a>

                            <!--end::امار Widget 5-->
                        </div>
                        <div class="col-xl-4">
                            <!--begin::امار Widget 5-->
                            <a href="#" class="card bg-primary hoverable card-xl-stretch mb-xl-8">
                                <!--begin::Body-->
                                <div class="card-body">
                                    <i class="ki-duotone ki-chart-simple text-gray-100 fs-2x ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                    <div class="text-white fw-bold fs-2 mb-2 mt-5">آمار فروش ماهانه</div>
                                    <div class="fw-semibold text-white">{{ number_format($subTotalMonth) }}
                                        تومان</div>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::امار Widget 5-->
                        </div>
                        <div class="col-xl-4">
                            <!--begin::امار Widget 5-->
                            <a href="#" class="card bg-dark hoverable card-xl-stretch mb-5 mb-xl-8">
                                <!--begin::Body-->
                                <div class="card-body">
                                    <i class="ki-duotone ki-chart-simple text-gray-100 fs-2x ms-n1">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        <span class="path3"></span>
                                        <span class="path4"></span>
                                    </i>
                                    <div class="text-gray-100 fw-bold fs-2 mb-2 mt-5">آمار فروش هفتگی</div>
                                    <div class="fw-semibold text-gray-100">
                                        {{ number_format($subTotalWeek) }}
                                        تومان
                                    </div>
                                </div>
                                <!--end::Body-->
                            </a>
                            <!--end::امار Widget 5-->
                        </div>
                    </div>
                    <!--end::Row-->
                    <!--begin::Row-->
                    <div class="row g-5 g-xl-8">
                        <!--begin::Col-->
                        <div class="col-xl-4">
                            <!--begin::لیست Widget 1-->
                            <div class="card card-xl-stretch mb-xl-8">
                                <!--begin::Header-->
                                <div class="card-header border-0 pt-5">
                                    <h3 class="card-title align-items-start flex-column">
                                        <span class="card-label fw-bold text-dark">آمار بازدید کنندگان</span>
                                    </h3>
                                    <div class="card-toolbar">
                                        <!--begin::Menu-->
                                        <button type="button"
                                                class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
                                                data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                            <i class="ki-duotone ki-category fs-6">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                                <span class="path3"></span>
                                                <span class="path4"></span>
                                            </i>
                                        </button>
                                        <!--end::Menu-->
                                    </div>
                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="card-body pt-5">
                                    <!--begin::item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
														<span class="symbol-label bg-light-info">
															<i class="ki-duotone ki-security-user fs-2x text-info">
																<span class="path1"></span>
																<span class="path2"></span>
															</i>
														</span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bold">
                                                امروز
                                            </a>
                                            <span class="text-muted fw-bold">{{ $today_visit_count }} نفر</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::item-->
                                    <!--begin::item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
														<span class="symbol-label bg-light-info">
															<i class="ki-duotone ki-security-user fs-2x text-info">
																<span class="path1"></span>
																<span class="path2"></span>
															</i>
														</span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bold">
                                                دیروز
                                            </a>
                                            <span class="text-muted fw-bold">{{ $yesterdayVisits }} نفر</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::item-->
                                    <!--begin::item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
														<span class="symbol-label bg-light-info">
															<i class="ki-duotone ki-security-user fs-2x text-info">
																<span class="path1"></span>
																<span class="path2"></span>
															</i>
														</span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bold">
                                                این ماه
                                            </a>
                                            <span class="text-muted fw-bold">{{ $this_month_Visits+$today_visit_count }} نفر</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::item-->

                                    <!--begin::item-->
                                    <div class="d-flex align-items-center mb-7">
                                        <!--begin::Symbol-->
                                        <div class="symbol symbol-50px me-5">
														<span class="symbol-label bg-light-info">
															<i class="ki-duotone ki-security-user fs-2x text-info">
																<span class="path1"></span>
																<span class="path2"></span>
															</i>
														</span>
                                        </div>
                                        <!--end::Symbol-->
                                        <!--begin::Text-->
                                        <div class="d-flex flex-column">
                                            <a href="#" class="text-dark text-hover-primary fs-6 fw-bold">
                                                جمع کل
                                            </a>
                                            <span class="text-muted fw-bold">{{ $total_visit + $today_visit_count }} نفر</span>
                                        </div>
                                        <!--end::Text-->
                                    </div>
                                    <!--end::item-->

                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::لیست Widget 1-->
                        </div>
                        <!--end::Col-->
                        <div class="col-xl-8">
                            <!--begin::نمودار ها Widget 1-->
                            <div class="card card-xl-stretch mb-5 mb-xl-8">
                                <!--begin::Header-->
                                <div class="card-header border-0 pt-5">
                                    <!--begin::Title-->
                                    <h3 class="card-title align-items-start flex-column">
                                        <span class="card-label fw-bold fs-3 mb-1">امار اخیر</span>
                                        <span class="text-muted fw-semibold fs-7">بیشترین از 400 عضو جدید</span>
                                    </h3>
                                    <!--end::Title-->

                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="card-body">
                                    <!--begin::Chart-->
                                    <div class="chart-area">
                                        <canvas id="myAreaChart"></canvas>
                                    </div>
                                    <!--end::Chart-->
                                </div>
                                <!--end::Body-->
                            </div>
                            <!--end::نمودار ها Widget 1-->
                        </div>
                    </div>
                    <!--end::Row-->
                    <div class="row g-5 g-xl-8">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="row card-body">
                                    <div class="col-12">
                                        <h5 class="mt-2">
                                            بازه زمانی دلخواه خود را برای نمایش تعداد بازدید انتخاب نمایید
                                            <hr>
                                        </h5>
                                        <div class="d-flex align-center flex-column text-center justify-content-end flex-md-row mt-4 mb-4">
                                            @csrf
                                            <div class="form-group me-3 mb-0">
                                                <div class="input-group">
                                                    <div class="input-group-prepend order-1">
                                                    <span class="input-group-text" id="start_clock_date">
                                                        <i class="fas fa-clock"></i>
                                                    </span>
                                                    </div>
                                                    <input disabled placeholder="تاریخ شروع" type="text"
                                                           class="form-control form-control-sm"
                                                           data-name="insurance_start_input">
                                                    <input type="hidden"
                                                           class="form-control form-control-sm"
                                                           name="start_gregorian_date"
                                                           id="start_gregorian_date"
                                                           data-name="start_gregorian_date"
                                                           value="">
                                                </div>
                                                @error('date_on_sale_from_excel')
                                                <p style="color: red;font-size: 9pt">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <div class="form-group me-3 mb-0">
                                                <div class="input-group">

                                                    <input disabled placeholder="تاریخ پایان" type="text"
                                                           class="form-control form-control-sm"
                                                           data-name="end_jalali_date">
                                                    <input type="hidden"
                                                           class="form-control form-control-sm"
                                                           name="end_gregorian_date"
                                                           id="end_gregorian_date"
                                                           data-name="end_gregorian_date"
                                                           value="">
                                                    <div class="input-group-prepend order-1">
                                                    <span class="input-group-text" id="end_clock_date">
                                                        <i class="fas fa-clock"></i>
                                                    </span>
                                                    </div>
                                                </div>
                                                @error('date_to_sale_from_excel')
                                                <p style="color: red;font-size: 9pt">{{ $message }}</p>
                                                @enderror
                                            </div>
                                            <button class="btn btn-info btn-sm" onclick="insuranceResult()">Show</button>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div id="insuranceResult" class="alert alert-info text-center">
                                            -
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

                @if(auth()->user()->role==4)
                    <div id="kt_content_container">
                        Dashboard
                    </div>
                @endif

        </div>
    </div>
@endsection