@extends('admin.layout.master')
@section('content')
@include('admin/site_socials/socials_js')

<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.social_media') }} </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">
            <a class="nav-link text-primary fw-bld" onclick="add_category()">
                <b class="bi-plus-square-fill me-1"></b>  {{ trans('admin.add_New') }}
            </a>
        </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:27:19')">
                            <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:27:19')">
                        <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.id')}}</th>
                        <th>{{trans('admin.icon')}}</th>
                        <th>{{trans('admin.link')}}</th>
                        <th>{{trans('admin.status')}}</th>
                        <th class="text-end">{{trans('admin.action')}}</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,
      ajax: "{{ route('socials') }}",
      columns: [
          {data: 'id', name: 'id'},
          {data: 'icon', name: 'icon'},
          {data: 'link', name: 'link'},
          {data: 'status', name: 'status'},
          {data: 'action', name: 'action', class:'text-end no-print', orderable: false, searchable: false},
      ],
      "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });
  });
  $("#search_new").on("keyup search input paste cut", function() {
     table.search(this.value).draw();
  });
</script>

{!! modelBox("addcategory", trans('admin.add'),"box","status_msg","add_category") !!}
{!! modelBox("editcategory", trans('admin.edit'),"box_edit","status_update","update_category") !!}
@endsection