@extends('layouts.master') @section('title') hotspot @endsection @section('css')
<link href="{{URL::asset('assets/js/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/css/datatable-custom.css')}}" rel="stylesheet" type="text/css" />
<style>
   .dataTables_wrapper .dataTables_info {
   display: none !important;
   }
</style>
@endsection @section('content') 
{{-- @component('components.breadcrumb') @slot('li_1') Networking @endslot @slot('title') Hotspot @endslot @endcomponent --}}
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">Hotspot</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="#">Networking</a></li>
         <li class="breadcrumb-item active"><a href="{{ route('hotspot.index') }}">Hotspot</a></li>
      </ol>
   </div>
</div>
@can('view hotspot widgets')
<div class="row g-2 mb-3">
   <!-- Active Vouchers Card -->
   <div class="col-6 {{ auth()->user()->can('view hotspot revenue') ? 'col-md-3' : 'col-md-4' }}">
      <div class="widget-card clients-card">
         <div class="widget-header">
            <h3 class="widget-title">Active Vouchers</h3>
            <i class="ri-user-2-fill widget-icon"></i>
         </div>
         <div class="widget-content">
            <div class="widget-main-value">
               <span id="activevouchers">{{ $active_vouchers }}</span>
            </div>
            <div class="widget-icon-small">
               <i class="ri-team-fill"></i>
            </div>
         </div>
         <div class="widget-footer d-flex justify-content-center gap-2">
            <span class="data-stats d-flex align-items-center gap-2">
            <span class="detail-item d-flex align-items-center gap-1">
            <i class="ri-inbox-line text-info"></i>
            <span id="newVouchers">{{ $new_vouchers }}</span>
            </span>
            <span class="detail-separator">|</span>
            <span class="detail-item d-flex align-items-center gap-1">
            <i class="ri-check-line text-warning"></i>
            <span id="usedVouchers">{{ $used_vouchers }}</span>
            </span>
            </span>
         </div>
      </div>
   </div>
   <!-- Online Sessions Card -->
   <div class="col-6 {{ auth()->user()->can('view hotspot revenue') ? 'col-md-3' : 'col-md-4' }}">
      <div class="widget-card sessions-card">
         <div class="widget-header">
            <h3 class="widget-title">Online Sessions</h3>
            <i class="ri-wifi-fill widget-icon"></i>
         </div>
         <div class="widget-content">
            <div class="widget-main-value">
               <span id="onlinesessions">{{ $onlinesessions }}</span>
            </div>
            <div class="widget-icon-small">
               <i class="ri-pulse-line"></i>
            </div>
         </div>
         <div class="widget-footer text-center">
            <span class="detail-label">Total Connected</span>
         </div>
      </div>
   </div>
   <!-- Data Usage Card -->
   <div class="{{ auth()->user()->can('view hotspot revenue') ? 'col-6 col-md-3' : 'col-12 col-md-4' }}">
      <div class="widget-card data-card">
         <div class="widget-header">
            <h3 class="widget-title">Data (24h)</h3>
            <i class="ri-database-2-fill widget-icon"></i>
         </div>
         <div class="widget-content">
            <div class="widget-main-value">
               <span id="consumed_data">{{ $totaldata }}</span>
            </div>
            <div class="widget-icon-small d-none d-md-block">
               <i class="ri-stack-fill"></i>
            </div>
         </div>
         <div class="widget-footer {{ auth()->user()->can('view hotspot revenue') ? 'd-none d-md-flex' : 'd-flex' }} justify-content-center gap-2">
            <span class="data-stats d-flex align-items-center gap-2">
            <span class="detail-item d-flex align-items-center gap-1">
            <i class="ri-arrow-up-line"></i>
            <span id="upload">{{ $totalupload }}</span>
            </span>
            <span class="detail-separator">|</span>
            <span class="detail-item d-flex align-items-center gap-1">
            <i class="ri-arrow-down-line"></i>
            <span id="download">{{ $totaldownload }}</span>
            </span>
            </span>
         </div>
         @if(auth()->user()->can('view hotspot revenue'))
         <!-- Only show this mobile footer if user CAN view revenue -->
         <div class="widget-footer d-block d-md-none text-center">
            <span class="detail-label">Data usage</span>
         </div>
         @endif
      </div>
   </div>
   @can('view hotspot revenue')
   <!-- Payments Today Card -->
   <div class="col-6 col-md-3">
      <div class="widget-card payments-card">
         <div class="widget-header">
            <h3 class="widget-title">Payments Today</h3>
            <i class="ri-money-dollar-circle-line widget-icon"></i>
         </div>
         <div class="widget-content">
            <div class="widget-main-value">
               <span id="payments">{{ $totalRevenueTodayFormatted }}</span>
            </div>
            <div class="widget-icon-small">
               <i class="ri-exchange-dollar-line"></i>
            </div>
         </div>
         <div class="widget-footer text-center">
            <span class="detail-label">Month: <span id="monthpayments" class="detail-value">{{ $totalRevenueThisMonthFormatted }}</span></span>
         </div>
      </div>
   </div>
   @endcan
</div>
@endcan
{{-- @if(isset($updateData['version']) && isUpdateAvailable($updateData['version'], env('VERSION_INSTALLED')))
@include('dashboard.update')
@endif --}}
@hasrole('super-admin')
@include('dashboard.license')
@endhasrole

<div class="row mt-3">
   <div class="col-lg-12">
      <div class="card" id="orderList">
         <div class="card-header border-bottom-dashed">
            <div class="d-flex align-items-center">
               <h5 class="card-title mb-0 flex-grow-1"><i class="ri-notification-badge-fill text-success"></i> Online Users</h5>
            </div>
         </div>
         <div class="card-body pt-0">
            <div>
               <div class="table-responsive table-card mb-1" id="session-table">
                  <table class="table table-nowrap align-middle" id="datatable" style="width: 100%;">
                     <thead class="text-muted table-light">
                        <tr class="text-uppercase">
                           @foreach(['', 'Voucher', 'Ip address', 'Start Time', 'Download', 'Upload', 'Time online'] as $cell)
                           <th>{{ $cell }}</th>
                           @endforeach
                        </tr>
                     </thead>
                     <tbody class="list form-check-all">
                        <!-- Placeholder for session data -->
                     </tbody>
                  </table>
               </div>
            </div>
            <!--end modal -->
         </div>
      </div>
   </div>
   <!--end col-->
</div>
@php
function countdown($date){
$seconds = strtotime($date) - time(); // Calculate the remaining seconds
$days = floor($seconds / 86400); // Calculate the remaining days
$hours = floor(($seconds % 86400) / 3600); // Calculate the remaining hours
$minutes = floor(($seconds % 3600) / 60); // Calculate the remaining minutes
$seconds = ($seconds % 60); // Calculate the remaining seconds
// Output the countdown
echo "Days: $days, Hours: $hours, Minutes: $minutes, Seconds: $seconds";
}
@endphp
<!--end row-->@endsection @section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="{{ URL::asset('/assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/datatable.js') }}"></script> 
<script>
   $(document).ready(function () {
       setInterval(function () {
           $.ajax({
               url: "{{route('hotspot.index')}}",
               type: "GET",
               dataType: "json",
               success: function (response) {
                   // Get and set variables for use
                   var totaldata = response.totaldata;
                   var onlinesessions = response.onlinesessions;
                   var upload = response.totalupload;
                   var download = response.totaldownload;
                   var activevouchers = response.activevouchers;
                   var payments = response.totalRevenueToday;
                   var monthPayments = response.totalRevenueThisMonth;
                   var newVouchers = response.newVouchers;
                   var usedVouchers = response.usedVouchers;
   
                   // Auto update total clients
                   $("#activevouchers").text(activevouchers);
                   // Auto update consumed data section
                   $("#consumed_data").text(totaldata);
                   // Auto update onlinesessions data sections
                   $("#onlinesessions").text(onlinesessions);
                   $("#online").text(onlinesessions);
                   // Auto update upload and download section
                   $("#upload").text(upload);
                   $("#download").text(download);
                   // Auto update payments
                   $("#payments").text(payments);
                   // Auto update this month's payments
                  $("#monthpayments").text(monthPayments);
                  // Auto update new and used vouchers section
                  $("#newVouchers").text(newVouchers);
                  $("#usedVouchers").text(usedVouchers);
               },
               error: function (err) {
                   console.error('Error fetching data:', err);
               },
           });
       }, 5000); // Update every 5 seconds
   });
</script>
</script>
<script>
   // function to format bytes to a human-readable format
   function formatSizeUnits(bytes) {
     if (bytes < 1024) {
       return bytes + " bytes";
     } else if (bytes < 1048576) {
       return (bytes / 1024).toFixed(2) + " KB";
     } else if (bytes < 1073741824) {
       return (bytes / 1048576).toFixed(2) + " MB";
     } else {
       return (bytes / 1073741824).toFixed(2) + " GB";
     }
   }
   
   // function to calculate session time in human-readable format
   function calculateSessionTime(seconds) {
     var hours = Math.floor(seconds / 3600);
     var minutes = Math.floor((seconds - (hours * 3600)) / 60);
     var seconds = seconds - (hours * 3600) - (minutes * 60);
   
     if (hours < 10) { hours = "0" + hours; }
     if (minutes < 10) { minutes = "0" + minutes; }
     if (seconds < 10) { seconds = "0" + seconds; }
   
     return hours + ":" + minutes + ":" + seconds;
   }
   
   function updateTable() {
    $.ajax({
        url: "{{ route('hotspot.index') }}",
        type: "GET",
        dataType: 'json',
        success: function(data) {
            var sessions = data.sessions;
            var table = $('#datatable').DataTable();
            table.clear(); // clear existing rows before adding new ones
            if (sessions.length > 0) {
                $.each(sessions, function(index, session) {
                    var sessionRow = [
                        '<span class="badge badge-soft-success text-uppercase">online</span>',
                        session.username,
                        session.framedipaddress || 'Unknown',
                        session.acctstarttime ? new Date(session.acctstarttime).toLocaleString('en-US', { year: 'numeric', month: 'short', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }) : 'Unknown',
                        formatSizeUnits(session.acctoutputoctets),
                        formatSizeUnits(session.acctinputoctets),
                        onlineDuration
                    ];
                    table.row.add(sessionRow);
                });
            } else {
                // If no sessions found, add a row indicating so
                table.row.add(['Sorry, no sessions found', '', '', '', '', '', '']);
            }
            table.draw(false); // redraw the table without shifting child rows
   
            // Update other elements with data
            $('#totaldata').html(data.totaldata);
            $('#onlinesessions').html(data.onlinesessions);
            $('#totaldownload').html(formatSizeUnits(data.totaldownload));
            $('#totalupload').html(formatSizeUnits(data.totalupload));
            $('#activevouchers').html(data.activevouchers);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
   }
   
   $(document).ready(function() {
    // Check if DataTables plugin is already initialized
    if (!$.fn.DataTable.isDataTable('#datatable')) {
        // Initialize DataTables plugin if it is not already initialized
        $('#datatable').DataTable({
            paging: false, // Disable pagination
            searching: false, // Disable search bar
            info: false // Disable "Showing x of y entries" information
        });
    }
   
    // Call updateTable initially
    updateTable();
   
    // Set interval to call updateTable every 30 seconds
    setInterval(updateTable, 30 * 1000);
   });
   
   
     
</script>
@endsection