@extends('admin.layouts.app')

@section('header_extra')
        <!-- Date Picker -->
<link rel="stylesheet" href="{{URL::asset('assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css')}}">
<!-- Daterange picker -->
<link rel="stylesheet" href="{{URL::asset('assets/bower_components/bootstrap-daterangepicker/daterangepicker.css')}}">

@endsection

@section('content')

        <!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Visitors Report
        </h1>

        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="#">Admin</li>
            <li class="#">Reports</li>
            <li class="active">Visitors</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="box box-default">
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Select Account</label>
                            <select class="form-control select2 select-account" style="width: 100%;">
                                <option value="" disabled selected>Select Account</option>
                                @foreach($accounts as $account)
                                    <option value="{{$account->id}}">{{$account->account_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- /.col -->

                    <!--
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Visitor Type</label>
                            <select class="form-control select2 select-type" style="width: 100%;">
                                <option value="" disabled selected>Select Type</option>
                                <option value="isp">ISP</option>
                                <option value="org">Org</option>
                                <option value="as">AS</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Visitor Name</label>
                            <select class="form-control select2 select-name" style="width: 100%;">
                                <option value="" disabled selected>Select Name</option>
                            </select>
                        </div>
                    </div>
                    -->

                    <div class="col-md-3">
                        <!-- Date -->
                        <div class="form-group">
                            <label>Start Date:</label>

                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control pull-right datepicker" id="startDate">
                            </div>
                            <!-- /.input group -->
                        </div>
                        <!-- /.form group -->
                    </div>
                    <!-- /.col -->

                    <div class="col-md-3">
                        <!-- Date -->
                        <div class="form-group">
                            <label>End Date:</label>

                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control pull-right datepicker" id="endDate">
                            </div>
                            <!-- /.input group -->
                        </div>
                        <!-- /.form group -->
                    </div>
                    <!-- /.col -->

                    <div class="col-md-2">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <button class="btn btn-flat btn-primary btn-block" id="reportSubmit">Submit</button>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">Report Data</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="reportData" class="table table-bordered table-striped">
                            <thead>

                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

@endsection

@section('footer_extra')

<!-- daterangepicker -->
<script src="{{URL::asset('assets/bower_components/moment/min/moment.min.js')}}"></script>
<script src="{{URL::asset('assets/bower_components/bootstrap-daterangepicker/daterangepicker.js')}}"></script>
<!-- datepicker -->
<script src="{{URL::asset('assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
<!-- select2 -->
<script src="{{URL::asset('assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>


<script>
    $(function () {
        //Initialize Select2 Elements
        $('.select2').select2()

        //Date picker
        $('.datepicker').datepicker({
            autoclose: true,
            dateFormat: "dd/mm/yy"
        })
    })

    /**
     * Ajax Post
     **/

    $(document).ready(function(){
        /*
        $(".select-type").change(function(){
            $.ajax({
                url: '{{route('admin_report_visitors_name_ajax')}}',
                type: 'POST',
                data: {
                    _token: "{{ csrf_token() }}",
                    account_id: $(".select-account").val(),
                    visitor_type: $(".select-type").val()
                },
                dataType: 'JSON',
                success: function (data) {
                    $('.select-name').html('');

                    $.each(data.msg, function(k,v){
                        $(".select-name").append('<option value="' + v.visitor_name + '">' + v.visitor_name + '</option>');
                    })

                    $(".select-name").select2();

                }
            });
        });
        */

        $("#reportSubmit").click(function(){
            $.ajax({
                /* the route pointing to the post function */
                url: '{{route('admin_report_visitors')}}',
                type: 'POST',
                /* send the csrf-token and the input to the controller */
                data: {
                    _token: "{{ csrf_token() }}",
                    account_id: $(".select-account").val(),
                    //visitor_type: $(".select-type").val(),
                    //visitor_name: $(".select-name").val(),
                    start_date: $('#startDate').datepicker().val(),
                    end_date: $('#endDate').datepicker().val()
                },
                dataType: 'JSON',
                /* remind that 'data' is the response of the AjaxController */
                success: function (data) {

                    if ($.fn.DataTable.isDataTable("#reportData")) {
                        $('#reportData').DataTable().clear().destroy();
                    }

                    $('#reportData thead').html('');
                    $('#reportData tbody').html('');

                    $('#reportData thead').append('<tr><th>Organization</th><th>Location</th><th>Visitors</th><th>Last Visit</th></tr>');

                    $.each(data.msg, function(k,v){
                        $('#reportData tbody').append('<tr><td>' + v.org + '</td><td>' + v.city_name + ' ,' + v.region_name + ' ,' + v.country_name + '</td><td>' + v.visit_count + '</td><td>' + v.tracking_date + '</td></tr>');
                    })

                    $('#reportData').DataTable({
                        "order": [[ 2, "desc" ]]
                    })

                }
            });
        });

    });

</script>

@endsection