@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">District</li>
                        <li class="breadcrumb-item active" aria-current="page">District List</li>

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

                <div class="pagetitle-row">

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

                                </tr>
                            </thead>
                            <tbody class="discrict-row">
                                @forelse ($listDistricts as $district)
                                    <tr>
                                        <td>{{ $district->district_name }}</td>
                                        <td>{{ date('d-m-Y', strtotime($district->created_at)) }}</td>
                                        <td>
                                            @switch($district->status)
                                                @case(1)
                                                    <a href="javascript:void(0)" data-value="0" data-table="districts"
                                                        data-message="inactive" data-uuid="{{ $district->uuid }}"
                                                        class="badge bg-success changeStatus">Active</a>
                                                @break

                                                @case(0)
                                                    <a href="javascript:void(0)" data-value="1" data-uuid="{{ $district->uuid }}"
                                                        data-table="districts" 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.district.edit', $district->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="districts"
                                                data-message="inactive" data-uuid="{{ $district->uuid }}"
                                                class="icon show deleteData"><i class="fa-regular fa-trash-can"></i></a>

                                            <a class="icon show"
                                                href="{{ route('admin.district.view.schools', $district->uuid) }}"
                                                title="View Schools" aria-expanded="true"><i
                                                    class="fa-solid fa-eye"></i></a>

                                        </td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" 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 = $('#districtDatatable').DataTable({
                    dom: 'Bfrtip',
                    processing: true,
                    serverSide: false,
                    autoWidth: false,
                    responsive: true,
                    searching: true,
                    buttons: [{
                            extend: 'pdf',
                            footer: true,
                            exportOptions: {
                                columns: "thead th:not(.noExport)"
                            }
                        },
                        {
                            extend: 'csv',
                            footer: true,
                            exportOptions: {
                                columns: "thead th:not(.noExport)"
                            }

                        },
                        {
                            extend: 'excel',
                            footer: true,
                            exportOptions: {
                                columns: "thead th:not(.noExport)"
                            }
                        }
                    ]


                });
            }
        </script>
    @endpush