@extends('admin.layout.master')
@section('content')
<style>
    .dataTables_length{
       display: none !important;
   }
</style>
{{--

<div class="container-fluid">
    <div class="row justify-content-between align-items-center p-3 rounded m-2  bg-light">
        <div class=" col-md-6 col-12 ">
            <a class='text-decoration-none fw-bold theme_link_color' href="{{url('/home')}}">{{trans('admin.Home')}}  </a> <span class="bi bi-caret-right theme_text_color"></span>
            <span class='text-decoration-none fw-bold theme_text_color' >{{trans('admin.support')}}</span>
        </div>
        <div class="col-md-6 col-12 d-flex align-items-center justify-content-end">
                <div class="row">
                    <div class="col-md-5 mt-md-0 mt-1">
                        <div>
                            <input type="text" class="form-control rounded-pill bg-light" id="search_new" placeholder="{{trans('admin.search')}}">
                        </div>
                    </div>
                    <div class="col-md-4 mt-md-0 mt-1">
                      <select id="status_filter" class="form-select rounded-pill">
                        <option value="" selected>{{ trans('admin.all_status') }}</option>

                        <option value="1"> {{ trans('admin.pending') }} </option>

                        <option value="2"> {{ trans('admin.completed') }} </option>
                      </select>
                    </div>
                    <div class="col-md-3 mt-md-0 mt-1 text-end">
                        <div class="dropdown p-0">
                            <a class=" bi bi-three-dots-vertical fs-3 text-white bg-warning admin_css_dot d-flex justify-content-center align-items-center" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">

                            </a>

                            <ul class=" dropdown-menu" aria-labelledby="dropdownMenuLink">
                            <li> <a href="#" class="dropdown-item" onclick="jQuery('.data-table').print()"><i class="bi-printer mx-2"></i>
                                {{__('admin.print')}}</a>
                                </li>
                            <li>  <a class="dropdown-item" href="#" onclick="exportTable('data-table', 'pdf', '{{trans('Support')}} 2024-10-18 02:32:45')"> <i class="bi bi-file-earmark-pdf  mx-2"></i>
                                {{__('admin.PDF')}}</a></li>
                            <li>
                                    <a class="dropdown-item" href="#" onclick="exportTable('data-table', 'csv', '{{trans('Support')}} 2024-10-18 02:32:45')">  <i class="bi bi-file-spreadsheet  mx-2"></i>
                                {{__('admin.excel_csv')}} </a></li>
                            </ul>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div> --}}

<div class='bg-white rounded'>
    <div class="nav-scroller">
        <nav class="nav justify-content-between">
            <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.support') }} </span>
            </li>


            <li class="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=""> {{trans('project.status')}} </option>
                    <option value="0"> {{trans('project.panding')}} </option>
                    <option value="1"> {{trans('project.completed')}} </option>
                </select>
            </li>
        </nav>
    </div>
</div>


{{-- <div class="container-fluid">
    <div class='p-2 table-responsive'>
        <table class='table w-100 border-top data-table'>
        	<thead>
                <tr class='tex-g'>
                    <th>{{ trans('admin.business_name') }}</th>
                    <th>{{ trans('admin.ticket_id') }}</th>
                    {
                    <th>{{ trans('admin.date') }}</th>
                    <th>{{ trans('admin.status') }}</th>
                    <th class="text-end">{{ trans('admin.actions') }}</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </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.photo') }}</th>
                    <th>{{ trans('admin.username') }}</th>
                    <th>{{ trans('admin.ticket_id') }}</th>
                    {{-- <th>{{ trans('admin.type') }}</th> --}}
                    <th>{{ trans('admin.date') }}</th>
                    <th>{{ trans('admin.status') }}</th>
                    <th class="text-end">{{ trans('admin.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
        </div>
      </div>
    </div>
  </div>
</main>

<style>
  .dataTables_filter {
    display: none;
  }
</style>
<script type="text/javascript">
var table ="";
$(function () {
   table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
      "searching": false,
      ajax: {
          url: "{{ route('support') }}",
          type: 'GET',
          data: function(d) {
            d.search_new = $('#search_new').val();
            d.status_filter = $('#status_filter').val();
            // console.log(d);
          }
      },
      columns: [
        {data: 'photo', name: 'photo'},
          {data: 'user_id', name: 'user_id'},
          {data: 'id', name: 'id'},
        //   {data: 'type', name: 'type'},
          {data: 'created_at', name: 'created_at'},
          {data: 'status', name: 'status', orderable: false, searchable: false},
          {data: 'action', name: 'action', class:'text-end 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);
});
// $("#search_new").on("keyup search input paste cut", function() {
//     table.search(this.value).draw();
// });
$('body').on('click', '.clear', function(e) {
    $('#search_new').val("");
    $('#status_filter').val("");
    table.draw(true);
});

 $('body').on('change', '#active_status', function(e) {
        var id = $(this).data('id');
        var status = $(this).val();
        try {
            $.ajax({
                type : 'GET',
                url : '{{url("support/status_change")}}/'+id+'/'+status,
                success : function (res) {
                    swal(res.message,res.status);
                    window.location.reload();
                }
            });
        } catch (error) {
            console.log(error);
        }
    });
</script>
@endsection