@extends('layouts.app')

@section('styles')

    <!-- Select2 css -->
    <link href="{{URL::asset('assets/plugins/select2/select2.min.css')}}" rel="stylesheet" />


    <!-- Tabs css-->
	<link href="{{URL::asset('assets/plugins/tabs/tabs-style.css')}}" rel="stylesheet" />

@endsection

@section('content')

    <!-- page-header -->
    <div class="page-header">
        <ol class="breadcrumb"><!-- breadcrumb -->
            <li class="breadcrumb-item"><a href="{{ route('admin.domain.domain.upload') }}">หน้าหลัก</a></li>
            <li class="breadcrumb-item active" aria-current="page">Inquiries Report</li>
        </ol><!-- End breadcrumb -->
        <div class="ml-auto">
            <!-- @if (mwz_roles('admin.paymentconfirm.paymentconfirm.export_payment_confirm'))
            <div class="input-group">
                <a href="javascript:void(0)" onclick="export_data();" class="btn btn-primary text-white mr-2 btn-sm" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Export" target="_blank">
                    <span>
                        <i class="fa fa-download" aria-hidden="true"></i> Export Payment Confirm
                </a>
            </div>
            @endif -->
        </div>
    </div>
    <!-- End page-header -->

    <!-- <div class="card">
		<div class="card-header pb-0">
			<h3 class="card-title">Report (Today)</h3>
		</div>
		<div class="card-body">
			<div class="panel panel-primary">
				<div class="tab_wrapper first_tab">
					<ul class="tab_list">
						<li class="">Report 1</li>
						<li>Tab 2</li>
						<li>Tab 3</li>
						<li>Tab 4</li>
					</ul>

					<div class="content_wrapper">
						<div class="tab_content active">
							<p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the
							charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
							and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour,
							when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted
							. The wise man therefore always holds in these matters to this principle
							of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.".</p>
						</div>

						<div class="tab_content">
							<p>""But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a
							complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
							happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves
							or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise,
							except to obtain some advantage from it? But who has any right to find fault with a
							man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure."</p>
						</div>

						<div class="tab_content">
							<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage
							of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator
							on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition,
							injected humour, or non-characteristic words etc. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look
							even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined
							chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The
							generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
						</div>

						<div class="tab_content">
							<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
							looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
							"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil)
							by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> -->

	<!-- row filter opened -->
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title" style="font-size:25px;">Report (<span id="date-filter-text">เดือนนี้</span>)</div>
                </div>
                <div class="card-body pt-0">
                    <form id="report_filter" name="report_filter" method="GET" enctype="multipart/form-data" class="" onsubmit="setFilterReport(); return false;" >

                    <!-- @csrf -->
                    <div class="row">

                    	<div class="col-md-2 col-lg-2">
                            <div class="form-group ">
                                <label class="form-label">บริการ</label>
                                <select name="services"  id="services" class="" data-placeholder="บริการ" tabindex="-1" aria-hidden="true">
                                    <option value="">All</option>
                                    <option value="Cloud">Cloud</option>
                                    <option value="Cloud Enterprise" selected="selected">Cloud Enterprise</option>
                                    <option value="Web Hosting">Web Hosting</option>
                                    <option value="Private Hosting">Private Hosting</option>
                                    <option value="Email Hosting">Email Hosting</option>
                                    <option value="SEO Hosting">SEO Hosting</option>
                                    <option value="Wordpress">Wordpress</option>
                                    <option value="SSL">SSL</option>
                                    <option value="Personal Sign (S-MIME)">Personal Sign (S-MIME)</option>
                                    <option value="Document Signing (AATL)">Document Signing (AATL)</option>
                                    <option value="Code Signing">Code Signing</option>
                                    <option value="Website">Website</option>
                                    <option value="SEO Rank">SEO Rank</option>
                                    <option value="LINE OA">LINE OA</option>
                                    <option value="Marketing Research">Marketing Research</option>
                                    <option value="Research">Research</option>
                                    <option value="Forex Server">Forex Server</option>
                                    <option value="Remote Desktop">Remote Desktop</option>
                                    <option value="Minecarft Server">Minecarft Server</option>
                                    <option value="Z.com Sign">Z.com Sign</option>
                                    <option value="School">School</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-2 col-lg-2">
                            <div class="form-group ">
                                <label class="form-label">แสดงรายการ</label>
                                <select name="date_filter"  id="date_filter" class="" data-placeholder="แสดงรายการ" tabindex="-1" aria-hidden="true">
                                    <option value="1" selected="selected">เดือนนี้</option>
                                    <option value="2">สัปดาห์นี้</option>
                                    <option value="3">ปีนี้</option>
                                    <option value="4">วันนี้</option>
                                    <option value="5">กำหนดเอง</option>
                                    
                                </select>
                            </div>
                        </div>


                        <div class="col-md-2 col-lg-2 date-range" style="display:none;">
                            <div class="form-group ">
                                <label class="form-label">วันที่เริ่ม</label>
                                <div class="input-group">
                                    <input class="form-control" id="start_date"
                                        name="start_date" placeholder="วันที่"
                                        value=""
                                        type="date">
                                </div>                               
                            </div>
                        </div>

                        <div class="col-md-2 col-lg-2 date-range" style="display:none;">
                            <div class="form-group ">
                                <label class="form-label">วันที่สิ้นสุด</label>
                                <div class="input-group">
                                    <input class="form-control" id="end_date"
                                        name="end_date" placeholder="วันที่"
                                        value=""
                                        type="date">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-1 col-lg-2">
                            <div class="form-group ">
                                <label class="form-label"></label>
                                <br><button type="submit" class="btn btn-primary"><i class="fa fa fa-search"></i>ค้นหา</button>
                                <!-- <button class="btn btn-default" onclick="window.location='{{ route('admin.inquiry.report')}}'; return false;" style="margin-left:5px;">ทั้งหมด</button> -->
                            </div>
                            
                        </div>
                    </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- row filter closed --> 

    <!-- row opened -->
    <div class="row">

    	<div class="col-lg-12 col-md-12">
			<div class="card">
				<div class="card-header pb-0">
					<h3 class="card-title">Inquiries Report (<span id="service-text">Cloud Enterprise</span>)</h3>
				</div>
				<div class="card-body">
					<canvas id="service-graph-chart" class="h-230 "></canvas>
				</div>
			</div>
		</div>


    </div>
    <!-- row closed -->

@endsection('content')

@section('scripts')

    <!--Jquery Sparkline js-->
    <script src="{{URL::asset('assets/plugins/vendors/jquery.sparkline.min.js')}}"></script>

    <!-- Chart Circle js-->
    <script src="{{URL::asset('assets/plugins/vendors/circle-progress.min.js')}}"></script>

    <!--Time Counter js-->
    <script src="{{URL::asset('assets/plugins/counters/jquery.missofis-countdown.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/counters/counter.js')}}"></script>

    <!-- Flot Chart js-->
	<script src="{{URL::asset('assets/plugins/flot-charts/jquery.flot.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/flot-charts/jquery.flot.fillbetween.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/flot-charts/jquery.flot.pie.js')}}"></script>

	<!-- Chartist js -->
	<script src="{{URL::asset('assets/plugins/chart/chart.bundle.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/chart/utils.js')}}"></script>

	<!-- Custom-charts js-->
	<script src="{{URL::asset('assets/js/chart.js')}}"></script>

	<!---Tabs js-->
	<script src="{{URL::asset('assets/plugins/tabs/jquery.multipurpose_tabcontent.js')}}"></script>
	<script src="{{URL::asset('assets/plugins/tabs/tabs.js')}}"></script>

    <!-- INTERNAL Data tables -->
    <script src="{{URL::asset('assets/plugins/datatable/js/jquery.dataTables.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.bootstrap4.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/dataTables.buttons.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.bootstrap4.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/jszip.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/pdfmake.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/vfs_fonts.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.html5.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.print.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/js/buttons.colVis.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/dataTables.responsive.min.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/datatable/responsive.bootstrap4.min.js')}}"></script>
    <!-- <script src="{{URL::asset('assets/plugins/datatable/datatable-2.js')}}"></script> -->

    <!-- Notifications js -->
    <link href="{{URL::asset('assets/plugins/notify-growl/css/jquery.growl.css')}}" rel="stylesheet" />
    <link href="{{URL::asset('assets/plugins/notify-growl/css/notifIt.css')}}" rel="stylesheet" />
    <script src="{{URL::asset('assets/plugins/bootbox/bootbox.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/rainbow.js')}}"></script>
    <script src="{{URL::asset('assets/plugins/notify-growl/js/jquery.growl.js')}}"></script>

    <!--Select2 js -->
    <script src="{{URL::asset('assets/plugins/select2/select2.full.min.js')}}"></script>

    <!-- mwz master js css -->
    <link rel="stylesheet" href="{{ mix('css/mwz.css') }}">
    <script src="{{ mix('js/mwz.js')  }}"></script>

    <!-- module js css -->
    <link rel="stylesheet" href="{{ mix('css/inquiry.css') }}">
    <script src="{{ mix('js/inquiry.js')  }}"></script>

    <script type="text/javascript">

        var myChart = '';
    	
        $(document).ready(function(){

        	$('#services').select2({ width: '100%' ,allowClear: false});
        	$('#date_filter').select2({ width: '100%' ,allowClear: false});

            $('#date_filter').change(function(){
                if($(this).val() == 5){
                    $('.date-range').show(0);
                }else{
                    $('.date-range').hide(0);
                }
            });

        	inquiriesReport();
        	
        });

        inquiriesReport = function(){
        	var ctx = document.getElementById( "service-graph-chart" );
		    myChart = new Chart( ctx, {
		        type: 'line',
		        data: {
		            labels: [ {!! $inquiries_data_month !!} ],
		            type: 'line',
		            defaultFontFamily: 'Montserrat',
		            datasets: [ {
		                label: "Inquiries",
		                data: [ {!! $inquiries_data !!} ],
		                backgroundColor: 'transparent',
		                borderColor: 'rgba(70, 127, 207,0.75)',
		                borderWidth: 3,
		                pointStyle: 'circle',
		                pointRadius: 5,
		                pointBorderColor: 'transparent',
		                pointBackgroundColor: 'rgba(70, 127, 207,0.75)',
		            } ]
		        },
		        options: {
		            responsive: true,
					maintainAspectRatio: false,
		            tooltips: {
		                mode: 'index',
		                titleFontSize: 12,
		                titleFontColor: '#000',
		                bodyFontColor: '#000',
		                backgroundColor: '#fff',
		                titleFontFamily: 'Montserrat',
		                bodyFontFamily: 'Montserrat',
		                cornerRadius: 3,
		                intersect: false,
		            },
		            legend: {
		                display: false,
		                labels: {
		                    usePointStyle: true,
		                    fontFamily: 'Montserrat',
		                },
		            },
		            scales: {
		                xAxes: [ {
							ticks: {
								fontColor: "#000",
							},
		                    display: true,
		                    gridLines: {
		                        display: false,
		                        drawBorder: false
		                    },
		                    scaleLabel: {
		                        display: true,
		                        labelString: '{{ date("F") }}',
								fontColor: "#000",
		                    }
		                        } ],
		                yAxes: [ {
							ticks: {
								fontColor: "#000",
							},
		                    display: true,
		                    gridLines: {
		                        display: true,
								color:'rgba(187, 193, 202,0.2)',
		                        drawBorder: false
		                    },
		                    scaleLabel: {
		                        display: true,
		                        labelString: 'Inquiries Total',
								fontColor: "#000",
		                    }
		                        } ]
		            },
		            title: {
		                display: false,
		                text: 'Normal Legend'
		            }
		        }
		    } );
        }

        reloadChart = function(inq_data, inq_x_axis_title, inq_x_axis){

           
            myChart.destroy();

            var ctx = document.getElementById( "service-graph-chart" );

            myChart = new Chart( ctx, {

                type: 'line',
                data: {
                    labels: inq_x_axis.split(','),
                    type: 'line',
                    defaultFontFamily: 'Montserrat',
                    datasets: [ {
                        label: "Inquiries",
                        data: inq_data.split(','),
                        backgroundColor: 'transparent',
                        borderColor: 'rgba(70, 127, 207,0.75)',
                        borderWidth: 3,
                        pointStyle: 'circle',
                        pointRadius: 5,
                        pointBorderColor: 'transparent',
                        pointBackgroundColor: 'rgba(70, 127, 207,0.75)',
                    } ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        mode: 'index',
                        titleFontSize: 12,
                        titleFontColor: '#000',
                        bodyFontColor: '#000',
                        backgroundColor: '#fff',
                        titleFontFamily: 'Montserrat',
                        bodyFontFamily: 'Montserrat',
                        cornerRadius: 3,
                        intersect: false,
                    },
                    legend: {
                        display: false,
                        labels: {
                            usePointStyle: true,
                            fontFamily: 'Montserrat',
                        },
                    },
                    scales: {
                        xAxes: [ {
                            ticks: {
                                fontColor: "#000",
                            },
                            display: true,
                            gridLines: {
                                display: false,
                                drawBorder: false
                            },
                            scaleLabel: {
                                display: true,
                                labelString: inq_x_axis_title,
                                fontColor: "#000",
                            }
                                } ],
                        yAxes: [ {
                            ticks: {
                                fontColor: "#000",
                            },
                            display: true,
                            gridLines: {
                                display: true,
                                color:'rgba(187, 193, 202,0.2)',
                                drawBorder: false
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Inquiries Total',
                                fontColor: "#000",
                            }
                                } ]
                    },
                    title: {
                        display: false,
                        text: 'Normal Legend'
                    }
                }
            } );
        }

		setFilterReport = function(){
			var start_date = $('#start_date').val();
			var end_date = $('#end_date').val();
			if(start_date != "" && end_date != ""){
				window.location = '{{ route("admin.inquiry.report") }}' + '?start_date='+start_date+'&end_date='+end_date;
			}
		}

		setFilterReport = function(){
			$.ajax({
		        url: "/admin/inquiry/filter_report_ajax",
		        type: "POST",
		        data: {
		              services : $("#services").val(),
                      date_filter : $('#date_filter').val(),
                      start_date : $('#start_date').val(),
                      end_date : $('#end_date').val(),
		        },
                dataType : 'json',
		        headers: {
		            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		        },
		        success: function (data) {
		           switch(data.result){
                        case 'success' :
                            $('#date-filter-text').html(data.filter_text);
                            $('#service-text').html(data.service);
                            reloadChart(data.inquiries_data, data.inquiries_data_x_axis_title, data.inquiries_data_x_axis);
                        break;

                        default :
                            mwz_noti('error', data.msg);
                        break;
                   }
		        },
		    });
		}

    </script>

@endsection