@extends('supertiendent.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">Staff</li>
                        <li class="breadcrumb-item active" aria-current="page">Staff List</li>

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

                <div class="payment-Status-sec mb-3">
                    {{-- <a href="create-user-inner.html"> <button class="assgn-user"><img src="{{ asset('assets/admin/assets_school_admin/img/prfl.png')}}"
                class="img-fluid btn btn-primary" alt="">Create New User</button></a> --}}
                    <a href="{{ route('district-admin.addstaff') }}" class ="btn btn-primary">
                        Create Staff</a>

                </div>
                <div class="pagetitle-row">
                    <div class="row">
                        <div class="col-lg-10 ">
                            <form form action="" method="GET">
                                <div class="row">
                                    <div class="col-lg-4 col-sm-4 col-12">
                                        <input type="text" name="first_name" id="first_name" class="form-control"
                                            placeholder="First Name"
                                            value="{{ !empty($_REQUEST['first_name']) ? $_REQUEST['first_name'] : '' }}">
                                    </div>

                                    <div class="col-lg-4 col-sm-4 col-12">
                                        <input type="text" name="last_name" id="last_name" class="form-control"
                                            placeholder="Last Name"
                                            value="{{ !empty($_REQUEST['last_name']) ? $_REQUEST['last_name'] : '' }}">
                                    </div>

                                    {{-- <div class="col-lg-2 col-sm-4 col-12">
                        <input type="text" name="mobile_number" id="mobile_number"
                            class="form-control" placeholder="Phone No"
                            value="{{ !empty($_REQUEST['mobile_number']) ? $_REQUEST['mobile_number'] : '' }}">
                    </div>

                    <div class="col-lg-4 col-sm-4 col-12">
                        <input type="text" name="email" id="email" class="form-control"
                            placeholder="Email Id"
                            value="{{ !empty($_REQUEST['email']) ? $_REQUEST['email'] : '' }}">
                    </div> --}}

                                    <div class="col-lg-3 col-sm-4 col-12">
                                        <button type="submit"><svg class="svg-inline--fa fa-magnifying-glass"
                                                aria-hidden="true" focusable="false" data-prefix="fas"
                                                data-icon="magnifying-glass" role="img"
                                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                <path fill="currentColor"
                                                    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z">
                                                </path>
                                            </svg><!-- <i class="fa-solid fa-magnifying-glass"></i> Font Awesome fontawesome.com -->
                                            Search</button>


                                    </div>
                                    <div class="col-lg-1 col-sm-4 col-12">
                                        <a class="btn btn-warning btn-lg" href="{{ route('district-admin.stafflist') }}">Reset</a>


                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-lg-2"></div>

                    </div>
                </div>
                <div class="performance-statistics row district">
                    <div class="table-responsive">
                        <table class="table table-borderless custom-data-table" id="staffNewTable">
                            <thead>
                                <tr>
                                    <th scope="col">First Name</th>
                                    <th scope="col">Last Name</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Phone</th>
                                    <th scope="col">School</th>
                                    <th scope="col">Created On</th>
                                    <th scope="col">Status</th>
                                    <th scope="col" class="noExport">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($users as $user)
                                    <tr>
                                        <td>{{ $user->first_name }}</td>
                                        <td>{{ $user->last_name }}</td>
                                        <td><a href="mailto:{{ $user->email }}"> {{ $user->email }} </a> </td>
                                        <td><a
                                                href="tel:{{ $user->mobile_number ?? '--' }}">{{ $user->mobile_number ?? '--' }}</a>
                                        </td>
                                        <td>{{ $user->schoolEmployee?->school_name }}</td>
                                        <td>{{ date('d-m-Y', strtotime($user->created_at)) }}</td>
                                        <td>
                                            @switch($user->is_active)
                                                @case(1)
                                                    <a href="javascript:void(0)" data-value="0" data-table="users"
                                                        data-message="inactive" data-uuid="{{ $user->uuid }}"
                                                        class="badge bg-success changeUserStatus">Active</a>
                                                @break

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

                                        </td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" 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 = $('#staffNewTable').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