@extends('admin.layouts.app')

@section('content')
<section class="section dashboard spr-pnl">
    <div class="row ">
      <div class="line-hdr prsnl-spcfn">
        <!-- <h4>Master Panel</h4> -->
        <nav aria-label="breadcrumb ">
          <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item active" aria-current="page">Affiliate</li>
            <li class="breadcrumb-item active" aria-current="page">Affiliate List</li>

          </ol>
        </nav>
      </div>
      <div class="col-lg-12">

        {{-- <div class="payment-Status-sec mb-3">

                <a href="{{ route('admin.affiliate.add') }}" class ="btn btn-primary">
                  Create Affiliate</a>

        </div> --}}
        <div class="performance-statistics row district">
          <div class="table-responsive">
            <table class="table table-borderless custom-data-table" id="affiliateDatatable">
              <thead>
                <tr>
                  <th scope="col">Affiliate Name</th>
                  <th scope="col">Affiliate Address</th>
                  <th scope="col">Created At</th>
                  <th scope="col">Status</th>
                  <th scope="col">Action</th>

                </tr>
              </thead>
              <tbody>
                @forelse ($listAffiliates as $affiliate)
                <tr>
                    <td>{{ $affiliate->affiliate_name }}</td>
                    <td>{{ $affiliate->affiliate_address }}</td>
                    <td>{{ date('d-m-Y', strtotime($affiliate->created_at)) }}</td>
                    <td>
                        @switch($affiliate->status)
                        @case(1)
                        <a href="javascript:void(0)" data-value="0" data-table="affiliates" data-message="inactive" data-uuid="{{ $affiliate->uuid }}" class="badge bg-success changeStatus">Active</a>
                        @break
                        @case(0)
                        <a href="javascript:void(0)" data-value="1" data-uuid="{{ $affiliate->uuid }}" data-table="affiliates" data-message="active" class="badge bg-danger changeStatus">Inactive</a>
                        @break
                        @default
                        <a href="javascript:void(0)" class="badge badge-danger text-dark">Deleted</a>
                        @endswitch
                    </td>
                    <td>
                        {{-- <a href="{{ route('admin.seller.edit', $user->uuid) }}" class="badge bg-primary"><i class="fa-regular fa-pen-to-square"></i></a> --}}
                        <a class="icon show" href="{{ route('admin.affiliate.edit', $affiliate->uuid) }}"
                              aria-expanded="true"><i class="fa-regular fa-pen-to-square"></i></a>
                              {{-- <a href="#"><i class="fa-regular fa-trash-can"></i></a> --}}
                        <a href="javascript:void(0)" data-value="0" data-table="affiliates" data-message="inactive" data-uuid="{{ $affiliate->uuid }}" class="icon show deleteData"><i class="fa-regular fa-trash-can"></i></a>

                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center">No Data Yet</td>
                </tr>
            @endforelse





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


    </div>


    {{-- <div class="row">
      <div class="col-lg-12 mt-3 mb-5">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&lsaquo;</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&rsaquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div> --}}
  </section>
    {{-- @include('admin.layouts.paginate', ['paginatedCollection' => $listBlogs]) --}}
@endsection

@push('scripts')
    <script>
        // A basic demo function to handle "select all" functionality
        document.addEventListener('alpine:init', () => {
            Alpine.data('handleSelect', () => ({
                selectall: false,
                selectAction() {
                    countEl = document.querySelector('.table-items-action');
                    if (!countEl) return;
                    checkboxes = document.querySelectorAll('input.table-item:checked');
                    document.querySelector('.table-items-count').innerHTML = checkboxes.length;
                    if (checkboxes.length > 0) {
                        countEl.classList.remove('hidden');
                    } else {
                        countEl.classList.add('hidden');
                    }
                },
                toggleAll() {
                    this.selectall = !this.selectall;
                    checkboxes = document.querySelectorAll('input.table-item');
                    [...checkboxes].map((el) => {
                        el.checked = this.selectall;
                    });
                    this.selectAction();
                },
                uncheckParent() {
                    this.selectall = false;
                    document.getElementById('parent-checkbox').checked = false;
                    this.selectAction();
                }
            }))
        })
    </script>

<script>
    $(document).ready(function() {
        loadData();
    })
    const loadData = () => {
        //   $('#bannerTable').DataTable().destroy();
        var dataTable = $('#affiliateDatatable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: false,
            autoWidth: false,
            responsive: true,
            searching: true,
            buttons: [
       'csv', 'excel', 'pdf'
    ]


        });
    }
</script>
@endpush