@extends('admin.layout.dashboard-template')
  @section('content')
  
  <div class="db-info-wrap db-service-wrap">
      <div class="dashboard-box table-opp-color-box">

          @if(\Session::get('success'))
          <div class="alert alert-success alert-dismissible fade show" role="alert">
              <div class="alert-body">
                  {{ \Session::get('success') }}
              </div>
              <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif
          {{ \Session::forget('success') }}
          @if(\Session::get('error'))
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <div class="alert-body">
                  {{ \Session::get('error') }}
              </div>
              <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif


          <div class="card-body border">
              <h4>Filter</h4>

              <div class="row">
                  <div class="col-3">
                      <input class="form-control" value="{{ old('date', date('Y-m-01')) }}" type="date" required name="from" placeholder>
                  </div>
                  <div class="col-3">
                      <input class="form-control" type="date" required name="to" placeholder value="{{ old('date', date('Y-m-d')) }}">
                  </div>

                  <div class="col-3">
                      <input class="form-control" type="text" id="agent_phone" name="agent_phone" placeholder="Agent phone number">
                  </div>
                  <div class="col-3">
                      <button type="submit" class="btn btn-success filter">FILTER DATA</button>
                      <!-- <a class="btn btn-warning" href="{{ route('admin.export') }}">Export</a> -->
                  </div>
              </div>

          </div>
          <div class="table-responsive">
              <br><br>
              <h4>Contact List</h4>
              <div class="mb-3">
                  <button class="btn btn-danger btn-sm" id="bulk-delete">
                      Delete Selected
                  </button>
              </div>
              <table class="table table-bordered data-table">
                  <thead>
                      <tr>

                          <th width="5%">
                              <input type="checkbox" class="form-control" id="select-all" style="    width: 20%;
    margin-top: -29px;
    margin-left: 24px;">
                          </th>

                          <th style="width:10% !important;">Sl.No</th>
                          <th>AGENT</th>
                          <th>Name</th>
                          <th>Phone</th>
                          <th>Uploaded At</th>
                          <!-- <th>Action</th> -->
                      </tr>
                  </thead>
                  <tbody>

                  </tbody>
              </table>
          </div>
      </div>

  </div>
  <script type="text/javascript">
      $(function() {
          var table = $('.data-table').DataTable({
              processing: true,
              serverSide: true,
              ajax: {
                  url: "{{ route('admin.contacts.data') }}",
                  method: 'GET',
                  data: function(d) {
                      d.from = $('input[name="from"]').val();
                      d.to = $('input[name="to"]').val();
                      d.agent_phone = $('#agent_phone').val();
                  }
              },
              columns: [{
                      data: 'checkbox',
                      name: 'checkbox',
                      orderable: false,
                      searchable: false,
                      className: 'text-center',
                      render: function(data, type, row) {
                          return data;
                      }
                  },
                  {
                      data: 'DT_RowIndex',
                      name: 'DT_RowIndex',
                      orderable: false,
                      searchable: false
                  },

                  {
                      data: 'agent_id',
                      name: 'agent_id',
                  },

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

                  {
                      data: 'phone',
                      name: 'phone'
                  },

                  {
                      data: 'created_at',
                      name: 'created_at'
                  },

                  //   {
                  //       data: 'action',
                  //       name: 'action',
                  //       orderable: false,
                  //       searchable: false
                  //   }
              ],

              columnDefs: [{
                  targets: 0,
                  width: "40px"
              }],
              "select": {
                  'style': 'multi',
                  'selector': 'td:first-child' //only checkbox can select row
              },
              //   dom: 'Bfrtip',
              lengthMenu: [
                  [10, 25, 50, 100, -1], // values
                  [10, 25, 50, 100, "All"] // labels
              ],
              "bInfo": true,
              // dom: 'lBfrtip',
              dom: "<'row'<'col-sm-4'l><'col-sm-5'f><'col-sm-3'B>>" +
                  "<'row'<'col-sm-12'tr>>" +
                  "<'row'<'col-sm-5'i><'col-sm-7'p>>",
              buttons: [{
                      extend: 'csv',
                      exportOptions: {
                          columns: [1, 2, 3, 4, 5]
                      }
                  },
                  {
                      extend: 'copy',
                      exportOptions: {
                          columns: [1, 2, 3, 4, 5]
                      }
                  },
                  {
                      extend: 'excel',
                      exportOptions: {
                          columns: [1, 2, 3, 4, 5]
                      }
                  },
                  {
                      extend: 'pdf',
                      exportOptions: {
                          columns: [1, 2, 3, 4, 5]
                      }
                  },
                  {
                      extend: 'print',
                      exportOptions: {
                          columns: [1, 2, 3, 4, 5]
                      }
                  }
              ]
          });
          $(".filter").click(function() {
              table.draw();
          });
          $('#select-all').on('click', function() {

              $('.row-checkbox').prop('checked', $(this).prop('checked'));
          });
      });

      $('#bulk-delete').click(function() {

          let ids = [];

          $('.row-checkbox:checked').each(function() {
              ids.push($(this).val());
          });

          if (ids.length === 0) {

              alert('Please select at least one item');
              return;
          }

          if (!confirm('Are you sure you want to delete selected items?')) {
              return;
          }

          $.ajax({

              url: "{{ route('admin.bulk-delete-contacts') }}",

              type: "POST",

              data: {
                  _token: "{{ csrf_token() }}",
                  ids: ids
              },

              success: function(response) {

                  if (response.success) {

                      alert(response.message);

                      $('.data-table').DataTable().ajax.reload();

                      $('#select-all').prop('checked', false);

                  } else {

                      alert(response.message);
                  }
              }
          });
      });
  </script>
  @endsection