@extends("cms.layouts.app", ['page_id' => 'shipping_index'])

@push("css")
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@push("js")
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#dataTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: {
        url: '{{ route('cms.robot.datatable') }}',
      },
      columns: [
          { data: 'id', name: 'id' },
         
          {
              data: 'start_date', name: 'start_date',
              
          },
          { data: 'keywords', name: 'keywords'},
          { data: 'product_id1', name: 'product_id1'},
          { data: 'product_id2', name: 'product_id2'},
          {
            data: 'product_name', name: 'product_name'
          },
          {
	      	data: 'click_count', name: 'click_count'
	      },
          {
            data: 'status', name: 'status'
           
          },
          
      ],
        responsive: true
    });

    $('#table_members tbody').on('click', 'tr', function (e) {
        let td = $(e.target).closest('td');
        if (td) {
            if (td.prop('cellIndex') == 0) return;
        }

      if (!$(e.target).closest('.btn-group').length && !$(e.target).closest('.btn-user-toggle').length) {
         var data = $('#table_members').DataTable().row( this ).data();
         var id = data['id'];

         if (!id) {
          cms.log("Missing id!!!");
          return;
        }
        showDetails(id);
      }
    });

    $('#table_members tbody').on('click', '.btn-user-toggle', function (e) {
      var data = $('#table_members').DataTable().row($(this).closest('tr')).data();
      var id = data['id'];
      var name = data['name'];
      var status = data['status'];

      if (!id || !name) { return; }

      var isActive = status == {{ User::Active }};
      if (confirm('Are you sure to ' + (isActive? 'inactivate' : 'activate') + ' \"' + name + '\"?')) {
        var form = $("#form-inactivate-item");
        var route = isActive? '{{ route('cms.robot.inactivate', '__id__') }}' : '{{ route('cms.robot.activate', '__id__') }}'
        var form_action = route.replace('__id__', id);
        form.attr('action', form_action);
        form.submit();
      } else {
          //set it back to previous state
          $(this).attr('aria-pressed', function(_, attr){ return !attr});
          $(this).toggleClass('active');
      }
    });

    function showDetails(id) {
      if (!id) { return; }

      var url = '{{ route('cms.robot.show', '__id__') }}'.replace('__id__', id);
      window.location.href = url;
    }
});
</script>

@endpush

@section("title")

    Robot

    @endsection

    @section("content")
    <div class="alert alert-success sync-loading" role="alert" style="display:none">
      Processing...
    </div>
    <div class="row mb-5">
        <div class="col-md-auto mb-2 mb-md-0">
            <div class="row">
               
                <div class="col-auto">
                    <x-card.stat
                        title="Clicks Today"
                        value="0"
                    />
                </div>

                <div class="col col-sm-auto">
                    <x-card.stat
                        title="Clicks This Month"
                        value="0"
                    />
                </div>

                <div class="col col-sm-auto">
                    <x-card.stat
                        title="Total All Clicks"
                        value="0"
                    />
                </div>

            </div>
        </div>
    </div>


    <div class="card">
        <div class="card-body table-dataTable table-responsive">
        
            <table id="dataTable" class="table table-hover w-100">
                <thead>
                    <tr>
             
                    <th>Slot No.</th>
                    <th>Start Date</th>
                    <th>Key Word</th>
                    <th>Product ID 1</th>
                    <th>Product ID 2</th>
                    <th>Product Name</th>
                    <th>Clicks</th>
                    <th>Status</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @endsection