@extends('Admin.layouts.app')
@section('pagetitle',__('messages.statics'))
@section('content')

<div class="row stats">
    <div class="col">
        <div class="statContainer pink shadow-sm">
          <div class="title text-center">Google</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Google }}</h5>
            </div>
          </div>
        </div>
    </div>
    <div class="col">
        <div class="statContainer blue shadow-sm">
          <div class="title text-center">Facebook</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Facebook }}</h5>
            </div>
          </div>
        </div>
    </div>
    <div class="col">
        <div class="statContainer yellow shadow-sm">
          <div class="title text-center">SnapChat</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Snapchat }}</h5>
            </div>
          </div>
        </div>
    </div>
    <div class="col">
        <div class="statContainer fountainBlue shadow-sm">
          <div class="title text-center">PRINCE BURGER</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Snapchat }}</h5>
            </div>
          </div>
        </div>
    </div>
    <div class="col">
        <div class="statContainer lightBlue shadow-sm">
          <div class="title text-center">FoodWorld</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Foodworld }}</h5>
            </div>
          </div>
        </div>
    </div>
    <div class="col">
        <div class="statContainer purple shadow-sm">
          <div class="title text-center">Binance</div>
          <div class="d-flex">
            <div class="p-2 flex-fill text-center ">
              <h5 class="font-weight-bold status">{{ $Binance }}</h5>
            </div>
          </div>
        </div>
    </div>
</div>


<input type="hidden" id="month" value="">
<input type="hidden" id="year" value="">
<div class="row stats">
    <div class="col-12 col-md-3">
        <select class="form-control" onchange="setYearAction(this);">
        <option value="2025" {{  $year == date("Y",strtotime("-1 year")) ? 'selected' : '' }}>2025</option>
        <option value="2026" {{  $year == date("Y") ? 'selected' : '' }}>2026</option>
        <option value="2027" {{  $year == date("Y",strtotime("1 year")) ? 'selected' : '' }}>2027</option>
        <option value="2028" {{  $year == date("Y",strtotime("2 year")) ? 'selected' : '' }}>2028</option>
        <option value="2029" {{  $year == date("Y",strtotime("3 year")) ? 'selected' : '' }}>2029</option>
        <option value="2030" {{  $year == date("Y",strtotime("4 year")) ? 'selected' : '' }}>2030</option>
        </select>
    </div>
    <div class="col-12 col-md-9">
        <div style="form-control">
            <!--<a href="?year={{ $year }}&month=0" class="btn  {{ $month == '0' ? 'btn-success' : 'btn-primary' }}">All</a>-->
            <a href="?year={{ $year }}&month=01" class="btn {{ $month == '01' ? 'btn-success' : 'btn-primary' }}">Jan</a>
            <a href="?year={{ $year }}&month=02" class="btn {{ $month == '02' ? 'btn-success' : 'btn-primary' }}">Feb</a>
            <a href="?year={{ $year }}&month=03" class="btn {{ $month == '03' ? 'btn-success' : 'btn-primary' }}">Mar</a>
            <a href="?year={{ $year }}&month=04" class="btn {{ $month == '04' ? 'btn-success' : 'btn-primary' }}">Apr</a>
            <a href="?year={{ $year }}&month=05" class="btn {{ $month == '05' ? 'btn-success' : 'btn-primary' }}">May</a>
            <a href="?year={{ $year }}&month=06" class="btn {{ $month == '06' ? 'btn-success' : 'btn-primary' }}">Jun</a>
            <a href="?year={{ $year }}&month=07" class="btn {{ $month == '07' ? 'btn-success' : 'btn-primary' }}">Jul</a>
            <a href="?year={{ $year }}&month=08" class="btn {{ $month == '08' ? 'btn-success' : 'btn-primary' }}">Aug</a>
            <a href="?year={{ $year }}&month=09" class="btn {{ $month == '09' ? 'btn-success' : 'btn-primary' }}">Sep</a>
            <a href="?year={{ $year }}&month=10" class="btn {{ $month == '10' ? 'btn-success' : 'btn-primary' }}">Oct</a>
            <a href="?year={{ $year }}&month=11" class="btn {{ $month == '11' ? 'btn-success' : 'btn-primary' }}">Nov</a>
            <a href="?year={{ $year }}&month=12" class="btn {{ $month == '12' ? 'btn-success' : 'btn-primary' }}">Dec</a>
        </div>
    </div>
</div>

<div id="DaychartContainer" style="height: 370px; width: 100%;"></div>
<div id="MonthchartContainer" style="height: 370px; width: 100%;"></div>
<div id="YearchartContainer" style="height: 370px; width: 100%;"></div>


<table class="table table-bordered data-table" id="DataTable">
    <thead>
        <tr>
            <th>#</th>
            <th>URL</th>
            <th>From</th>
            <th>Device</th>
            <th>Platform</th>
            <th>Browser</th>
            <th>IP</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>



@endsection

@section('css')
    <style>
        .dataTables_wrapper {
            overflow-x: scroll;
        }
        .stats {
          margin: 5px;
        }
        .stats .col {
          //border: 1px solid red;
          margin: 0;
          padding: 3;
        }
        .statContainer {
          margin: 5px;
          width: 100%;
          font-size: 13px;
          border-radius: 3px;
          background-color: #fff;
          padding: 0;
          overflow: hidden;
        }
        .statContainer .title {
          padding: 5px 10px;
          color: #fff;
        }
        .statContainer.blue .title {
          background-color: #2d72c0;
        }
        .statContainer.blue .status {
          color: #2d72c0;
        }
        
        .statContainer.yellow .title {
          background-color: #f3a254;
        }
        .statContainer.yellow .status {
          color: #f3a254;
        }
        
        .statContainer.fountainBlue .title {
          background-color: #6abebf;
        }
        .statContainer.fountainBlue .status {
          color: #6abebf;
        }
        
        .statContainer.lightBlue .title {
          background-color: #52a1e5;
        }
        .statContainer.lightBlue .status {
          color: #52a1e5;
        }
        
        .statContainer.purple .title {
          background-color: #916df6;
        }
        .statContainer.purple .status {
          color: #916df6;
        }
        
        .statContainer.pink .title {
          background-color: #ef6e85;
        }
        .statContainer.pink .status {
          color: #ef6e85;
        }
        
        .statContainer.orange .title {
          background-color: #ff7043;
        }
        .statContainer.orange .status {
          color: #ff7043;
        }
        @media (max-width: 1200px) {
          .stats .col {
            min-width: 20% !important;
          }
        }
        
        @media (max-width: 887px) {
          .stats .col {
            min-width: 25% !important;
          }
        }
        @media (max-width: 768px) {
          .stats .col {
            min-width: 50% !important;
          }
        }
        @media (max-width: 525px) {
          .stats .col {
            min-width: 100% !important;
          }
        }
        
    </style>
@endsection
@section('js')
    <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    <script type="text/javascript">
        $(function() {

            var table = $('#DataTable').DataTable({
                processing: true,
                serverSide: true,
                createdRow: function( row, data, dataIndex ) {
                    $( row ).attr('data-position', data.position);
                    $( row ).attr('data-id', data.id);
                },
                ajax: {
                    url: "{{ route('admin.home') }}",
                    data: {
                        url: '{{ request()->url  ?? 0 }}',
                        referer: '{{ request()->referer  ?? 0 }}',
                        device: '{{ request()->device  ?? 0 }}',
                        platform: '{{ request()->platform  ?? 0 }}',
                        browser: '{{ request()->browser  ?? 0 }}',
                        ip: '{{ request()->ip  ?? 0 }}',
                        date: '{{ request()->date  ?? 0 }}',
                        
                        month: '{{ request()->month  ?? 0 }}',
                        year: '{{ request()->year  ?? 0 }}',
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',

                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'url',
                        name: 'url',
                    },

                    {
                        data: 'referer',
                        name: 'referer',
                    },


                    {
                        data: 'device',
                        name: 'device',
                    },


                    {
                        data: 'platform',
                        name: 'platform',
                    },


                    {
                        data: 'browser',
                        name: 'browser',
                    },


                    {
                        data: 'ip',
                        name: 'ip',
                    },


                    {
                        data: 'date',
                        name: 'date'
                    },
                ]
            });

        });
        
        function setYearAction(data){
            let month = $('#month').val();
            window.location = location.origin+'/admin?year='+data.value+'&month='+month;
            
        }
    </script>
    <script>
        window.onload = function () {
        
            
            $("#DaychartContainer").CanvasJSChart({
            	animationEnabled: true,
            	title:{
            		text: "Day Chart"
            	},
            	axisX:{
            		valueFormatString: "DD MMM",
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true
            		}
            	},
            	axisY: {
            		title: "Visits Numbers",
                    includeZero: true,
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true,
            		}
            	},
                toolTip: {
                    enabled: false
                },
            	data: [{
            		type: "area",
                    dataPoints: [
                        @foreach ($DayVisits as $Visit)
                            { x: new Date({{ date('Y', strtotime($Visit->new_date)) }}, {{ date('m', strtotime($Visit->new_date . "-1 Month")) }}, {{ date('d', strtotime($Visit->new_date)) }}), y: {{ $Visit->views }} },
                        @endforeach
                    ]
            	}]
            });
            

            
            
            
            $("#MonthchartContainer").CanvasJSChart({
            	animationEnabled: true,
            	title:{
            		text: "Month Chart"
            	},
            	axisX:{
            		valueFormatString: "MM YYYY",
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true
            		}
            	},
            	axisY: {
            		title: "Visits Numbers",
                    includeZero: true,
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true,
            		}
            	},
                toolTip: {
                    enabled: false
                },
            	data: [{
            		type: "area",
                    dataPoints: [
                        @foreach ($MonthVisits as $Visit)
                            { x: new Date({{ $Visit->year }},{{  $Visit->month }}, {{ date('d', strtotime($Visit->new_date)) }}), y: {{ $Visit->views }} },
                        @endforeach
                    ]
            	}]
            });
            
            
            
            $("#YearchartContainer").CanvasJSChart({
            	animationEnabled: true,
            	title:{
            		text: "Year Chart"
            	},
            	axisX:{
            		valueFormatString: "YYYY",
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true
            		}
            	},
            	axisY: {
            		title: "Visits Numbers",
                    includeZero: true,
            		crosshair: {
            			enabled: true,
            			snapToDataPoint: true,
            		}
            	},
                toolTip: {
                    enabled: false
                },
            	data: [{
            		type: "area",
                    dataPoints: [
                        @foreach ($YearVisits as $Visit)
                            { x: new Date({{ date('Y', strtotime($Visit->year)) }}, {{ date('m', strtotime($Visit->new_date)) }}, {{ date('d', strtotime($Visit->new_date)) }}), y: {{ $Visit->views }} },
                        @endforeach
                    ]
            	}]
            });
            
        }
    </script>
@endsection