@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">School List</li>

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

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

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

                                    <div class="col-lg-2 col-sm-4 col-12">
                                        <input type="text" name="school_email" id="school_email" class="form-control"
                                            placeholder="Email Id"
                                            value="{{ !empty($_REQUEST['school_email']) ? $_REQUEST['school_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-3 col-sm-4 col-12">
                                        <a class="btn btn-warning btn-lg" href="{{ route('admin.school.list') }}">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">
                            <thead>
                                <tr>
                                    <th scope="col">School Name</th>
                                    <th scope="col">Phone No.</th>
                                    <th scope="col">Email Id.</th>
                                    <th scope="col">Address</th>
                                    <th scope="col">Created At</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Action</th>

                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($schools as $school)
                                    <tr>
                                        <td>{{ $school->school_name }}</td>
                                        <td>{{ $school->contact_phone_number ?? '' }}</td>
                                        <td>{{ $school->school_email ?? '' }}</td>
                                        <td>{{ !empty($school->address) ? substr($school->address, 0, 100) : '' }}</td>
                                        <td>{{ date('d-m-Y', strtotime($school->created_at)) }}</td>
                                        <td>
                                            @switch($school->status)
                                                @case(1)
                                                    <a href="javascript:void(0)" data-value="0" data-table="schools"
                                                        data-message="inactive" data-uuid="{{ $school->uuid }}"
                                                        class="badge bg-success changeStatus">Active</a>
                                                @break

                                                @case(0)
                                                    <a href="javascript:void(0)" data-value="1" data-uuid="{{ $school->uuid }}"
                                                        data-table="schools" 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.school.edit', $school->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="schools"
                                                data-message="inactive" data-uuid="{{ $school->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>
    @endpush