@extends('admin.layout')
@section('content')
<style>
    /* .name-container {
    padding: 0px;
    background-color: #3c8dbc; 
    border-radius: 5px;
    margin-bottom:23px;
 
} */
.name-container1 {
    padding-top: 20px;
    background-color: #3c8dbc; /* Blue background color */
    border-radius: 5px;
    margin-top:23px
}

.styled-name {
    font-size: 24px;
    color: black; 
    text-transform: uppercase;
}
</style>
<div class="content-wrapper"> 
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1> {{ trans('Flussonic Log') }}</h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <!-- <li class="active">{{ trans('Flussonic Log') }}</li> -->
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="content"> 
    <!-- Info boxes --> 
    <!-- /.row -->
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <!-- <h3 class="box-title">{{ trans('Flussonic Log') }}</h3> -->
          </div>
          
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                @if (count($errors) > 0)
                  @if($errors->any())
                    <div class="alert alert-success alert-dismissible" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      {{$errors->first()}}
                    </div>
                  @endif
                @endif
              </div>
            </div>

               <form id="form1" method="get" action="{{ url('admin/flussonic') }}" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="order_by" id="order_by">
    <input type="hidden" name="order_type" id="order_type">
    <div class="box-header" style="margin-left:280px">

        <div class="col-sm-1 col-md-1">
            <input type="text" name="search" id="search" 
                   value="{{ $search }}" class="form-control" 
                   placeholder="Search" autocomplete="off">
        </div>

        <div class="col-sm-1 col-md-1">
            <input type="text" name="from_date" id="from_date" 
                   value="{{ $from_date }}" class="form-control" 
                   placeholder="Date range" autocomplete="off">
        </div>
        
        <button type="submit" class="btn btn-success" name="submit_search" id="submit_search">Search</button>
        <a href="{{ url('admin/flussonic')}}" class="btn btn-danger">Clear</a>

        <a href="{{ url('admin/flussonic-filter')}}" class="btn btn-warning">Channel/IP Filter</a>

    </div>
</form>


<div class="row" style="margin-top:28px">
        <div class="col-xs-12">



        <table border="2" bordercolor="black" cellpadding="5" cellspacing="5" style="border-collapse: collapse; font-size: 16px;" class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th style="font-size: 18px; text-align: center;">S no</th>
                    <th style="font-size: 18px; text-align: center;">Channle Name</th>
                    <th style="font-size: 18px; text-align: center;">IP</th>
                    <th  style="font-size: 18px; text-align: center;"onclick="sortFilter('server_name', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc') ? 'desc' : 'asc') }}');">Server Name <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'server_name') ? 'desc' : 'asc') }}" aria-hidden="true"></i></th>
                    <th  style="font-size: 18px; text-align: center;"onclick="sortFilter('created_time', '{{ (!Request::has('order_type') || (Request::has('order_type') && request('order_type') == 'asc') ? 'desc' : 'asc') }}');">Created At <i class="fa fa-sort-{{ (!Request::has('order_by') || (Request::has('order_by') && request('order_type') == 'asc' && request('order_by') == 'created_time') ? 'desc' : 'asc') }}" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody class="opp">
              <tbody>
                @foreach($data as $index =>  $row)
                  <tr>
                    <td style="font-size: 16px; text-align: center;">{{ $index + 1 }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $row->channel_name }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $row->ip }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $row->server_name }}</td>
                    <td style="font-size: 16px; text-align: center;">{{ $row->created_time }}</td>
                  </tr>
                @endforeach
              </tbody>
            </tbody>        
        </table>
                <td colspan="9">
                @if ($data->count() > 0)
        {{ $data->appends(request()->except('page'))->links() }}
    @endif
                </td>
    </div>
</div>

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

<script>
    function sortFilter(order_by, order_type) { 
        $("#order_by").val(order_by);
        $("#order_type").val(order_type);
        $("#form1").submit();
    }
    
    function submitSearchForm() {
        document.getElementById('form1').submit();
    }

  jQuery($ => {
    $('#search_chat_number').on('submit', e => {
      e.preventDefault();
      searchWaNumber();
    })
  });

  function searchWaNumber() {
    var number = $("#number").val();
    localStorage.setItem("number", number);
    startIntervalChatListBox(number);
  }


  function clearWaNumber() {
    localStorage.removeItem("number");
    $("#number").val('');
  }
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- <script>
$(document).ready(function() {
  $('#product').change(function() {
    var selectedProduct = $(this).val();
    $('#template option').hide();

    if (selectedProduct === 'Guru') {
      $('.Guru').show(); 
    } else if (selectedProduct === 'Tashan') {
      $('.Tashan').show(); 
    } else {
      $('#template').val(''); 
    }
  });
});
</script> -->
<script>
    $(function() {
        $('#from_date').daterangepicker({
            opens: 'left',
            locale: { cancelLabel: 'Clear' },
            timePicker: true,  // Enable time picker
            timePicker24Hour: true,  // Use 24-hour time format
            timePickerIncrement: 1,  // 30 minutes increment
            startDate: moment().subtract(1, 'month').startOf('month').set({ hour: 0, minute: 0, second: 0 }),
            endDate: moment().set({ hour: 23, minute: 59, second: 59 }),  // End date with time set to 23:59:59
            ranges: {
                'Today': [moment().startOf('day').set({ hour: 0, minute: 0, second: 0 }), moment().set({ hour: 23, minute: 59, second: 59 })],
                'Yesterday': [moment().subtract(1, 'days').startOf('day').set({ hour: 0, minute: 0, second: 0 }), moment().subtract(1, 'days').set({ hour: 23, minute: 59, second: 59 })],
                'Last 7 Days': [moment().subtract(6, 'days').startOf('day').set({ hour: 0, minute: 0, second: 0 }), moment().set({ hour: 23, minute: 59, second: 59 })],
                'Last 30 Days': [moment().subtract(29, 'days').startOf('day').set({ hour: 0, minute: 0, second: 0 }), moment().set({ hour: 23, minute: 59, second: 59 })],
                'This Month': [moment().startOf('month').set({ hour: 0, minute: 0, second: 0 }), moment().endOf('month').set({ hour: 23, minute: 59, second: 59 })],
                'Last Month': [moment().subtract(1, 'month').startOf('month').set({ hour: 0, minute: 0, second: 0 }), moment().subtract(1, 'month').endOf('month').set({ hour: 23, minute: 59, second: 59 })]
            }
        },
        function(start, end, label) {
            console.log("A new date selection was made: " + start.format('YYYY-MM-DD HH:mm:ss') + ' to ' + end.format('YYYY-MM-DD HH:mm:ss'));
        });

        $('#from_date').on('apply.daterangepicker', function(ev, picker) {
            var startDate = picker.startDate.format('YYYY-MM-DD HH:mm:ss') + '/' + picker.endDate.format('YYYY-MM-DD HH:mm:ss');
            $('#date_range').val(startDate);
            $('#date_day_filter').submit();
        });

        $('#from_date').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY HH:mm') + ' - ' + picker.endDate.format('DD/MM/YYYY HH:mm'));
        });

        $('#from_date').on('cancel.daterangepicker', function(ev, picker) {
            $('#date_range').val('');
            $('#from_date').val('');
            $('#date_day_filter').submit();
        });
    });
</script>


<script type="text/javascript"> 
    $(function () { 
        $("#bulk_search").select2({
            closeOnSelect: false,
            placeholder: 'Status',
        }).on("select2:select", function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();            
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
        }).on('select2:unselect', function (e) {
            var selected_element = $(e.currentTarget);
            var select_val = selected_element.val();
            var select_status = $('#r_status').val();
            $('#hidden_page').val('1')
        });

    });
</script>

@endsection