@extends('admin.layout.master')
@section('content')

    <style>
        .dataTables_length{
           display: none !important;
       }

       .dataTables_filter{
           display: none !important;
       }
      </style>


      <div class='bg-white rounded'>
      <div class="nav-scroller">
          <nav class="nav">
              <li class="nav-item d-flex align-items-center">
                  <a class='nav-link fw-bold text-primary' href="{{url('/home')}}">{{trans('admin.home')}}</a>
                  <span class="bi bi-caret-right"></span>
                  <span class="mx-2"> {{ trans('admin.contact_us') }} </span>
              </li>

              <li class="nav-item mx-auto me-2 d-flex align-items-center gap-2">
                  <label> {{ trans('admin.show') }} </label>
                  <select class="form-select form-select-sm" id="no_of_entries">
                      <option value="10" selected>10</option>
                      <option value="30">30</option>
                      <option value="50">50</option>
                      <option value="100">100</option>
                      <option value="200">200</option>
                      <option value="300">300</option>
                      <option value="400">400</option>
                      <option value="400">500</option>
                      <option value="-1">{{ trans('admin.all') }}</option>
                  </select>
              </li>




              <li class="nav-item me-2">
                  <input type="text" class="form-control form-control-sm" id="search_new" placeholder="{{trans('project.search')}}">
              </li>


              <li class="nav-item me-2">
                <select id="status_filter" class="form-select form-select-sm">
                    <option value="" selected> {{ trans('admin.all') }}</option>
                    <option value="1"> {{ trans('admin.viewed') }}</option>
                    <option value="0"> {{ trans('admin.not_viewed') }} </option>
                  </select>
              </li>

              <li class="nav-item">
                  <a class="nav-link" data-bs-toggle="dropdown">
                      <b class="bi-box-arrow-up-right me-2"></b> {{ trans('admin.export') }}
                  </a>
                  <ul class="dropdown-menu">
                      <li>
                          <a class="dropdown-item" onclick="jQuery('.data-table').print()">
                              <i class="bi-printer mx-2"></i>
                              {{__('project.print')}}
                          </a>
                              <a class="dropdown-item" onclick="exportTable('data-table', 'pdf', '{{trans('home slider')}} 2024-10-18 02:28:21')">
                                  <i class="bi bi-file-earmark-pdf mx-2"></i>
                                  {{__('project.pdf')}}
                              </a>
                          <a class="dropdown-item" onclick="exportTable('data-table', 'csv', '{{trans('home slider')}} 2024-10-18 02:28:21')">
                              <i class="bi bi-file-spreadsheet mx-2"></i>
                              {{__('project.excel_csv')}}
                          </a>
                      </li>
                  </ul>
              </li>
          </nav>
      </div>
      </div>

    <main class="px-0 scroll-y">
        <!-- body content  -->
        <div class="card rounded border-0">
          <div class="card-body pt-0">
            <div class="row">
              <div class="col-lg-12">
                <div class="table-responsive">
                  <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
                    <thead class="bg-light">
                        <tr>
                            <th>{{ trans('admin.name') }}</th>
                            <th>{{ trans('admin.Email') }}</th>
                            <th>{{ trans('admin.date') }}</th>
                            <th>{{ trans('admin.is_viewed') }}</th>
                            <th>{{ trans('admin.reply_count') }}</th>
                            <th class="text-end">{{ trans('admin.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
            </div>
          </div>
        </div>
      </div>
      </main>






<script type="text/javascript">
    var table = "";
    $(function() {
        table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            "searching": false,
            ajax: {
                url: "{{ route('contact_us_list') }}",
                type: 'GET',
                data: function(d) {
                  d.search_new = $('#search_new').val();
                  d.status_filter = $('#status_filter').val();
                  // console.log(d);
                }
            },
            columns: [
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'created_at', name: 'created_at'},
                {data: 'is_viewed', name: 'is_viewed', orderable: false},
                {data: 'reply_count', name: 'reply_count', orderable: false},
                {data: 'action', name: 'action', class:'no-print', orderable: false, searchable: false},
            ],
            "lengthMenu": [[10, 25, 50, 100, -1], [100, 200, 500, 700, "All"]]
        });
    });
    $('body').on('change', '#status_filter', function(e) {
      table.draw(true);
    });
    $('body').on('keyup', '#search_new', function(e) {
      table.draw(true);
    });
    $('body').on('click', '.clear', function(e) {
        $('#search_new').val("");
        $('#status_filter').val("");
        table.draw(true);
    });
</script>
@endsection