@include('admin.common-layout.header')
<div class="dashboard-main-body">
    <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <div class="">
            <h1 class="fw-semibold mb-4 h6 text-primary-light">Teacher List</h1>
            <div class="">
                <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline">Dashboard </a>
                <a href="javascript:void(0)" class="text-secondary-light hover-text-primary hover-underline d-none"> / Teacher</a>
                <span class="text-secondary-light">/ Teacher List</span>
            </div>
        </div>
        <a href="{{ route('admin.teacherAdd') }}" class="btn btn-primary-600 d-flex align-items-center gap-6 ">
            <span class="d-flex text-md">
                <i class="ri-add-large-line"></i>
            </span>
            Add Teacher
        </a>
    </div>

    <div class="mt-24">
        <div class="card h-100">
            <div class="card-body p-0 dataTable-wrapper">
                <!--<div class="d-flex align-items-center justify-content-between flex-wrap gap-16 px-20 py-12 border-bottom border-neutral-200">
                    <div class="d-flex flex-wrap align-items-center gap-16">
                        <div class="dropdown">
                            <button type="button" class="px-12 py-5-px border border-neutral-300 radius-8 d-flex align-items-center gap-20 " data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="d-flex align-items-center gap-1 text-secondary-light text-sm">
                                    <i class="ri-file-upload-line text-md line-height-1"></i>
                                    Export
                                </span>
                                <span class="">
                                    <i class="ri-arrow-down-s-line"></i>
                                </span>
                            </button>
                            <ul class="dropdown-menu p-12 border bg-base shadow">
                                <li>
                                    <button type="button" class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10" data-bs-toggle="modal" data-bs-target="#exampleModalView">
                                        <i class="ri-file-3-line"></i>
                                        PDF
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="dropdown-item px-16 py-8 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-10" data-bs-toggle="modal" data-bs-target="#exampleModalEdit">
                                        <i class="ri-file-excel-line"></i>
                                        Excel
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <form class="navbar-search dt-search m-0">
                            <input type="text" class="dt-input bg-transparent radius-4" aria-controls="dataTable" name="search" placeholder="Search...">
                            <iconify-icon icon="ion:search-outline" class="icon"></iconify-icon>
                        </form>
                        <div class="dropdown">
                            <button type="button" class="px-12 py-5-px border border-neutral-300 radius-8 d-flex align-items-center gap-20" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="d-flex align-items-center gap-1 text-secondary-light text-sm">
                                    Filter
                                </span>
                                <span class="">
                                    <i class="ri-arrow-down-s-line"></i>
                                </span>
                            </button>
                            <div class="dropdown-menu border bg-base shadow dropdown-menu-lg p-0">
                                <div class="d-flex align-items-center justify-content-between border-bottom py-8 px-16">
                                    <span class="fw-semibold text-lg text-primary-light">Filter</span>
                                    <button type="button">
                                        <i class="ri-close-large-line"></i>
                                    </button>
                                </div>

                                <form action="#" class="p-16">
                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label for="subject" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Gender</label>
                                            <select id="subject" class="form-control form-select">
                                                <option value="Select">Select Subject</option>
                                                <option value="Match">Match</option>
                                                <option value="English">English</option>
                                                <option value="Bangla">Bangla</option>
                                                <option value="Economics">Economics</option>
                                                <option value="Physics">Physics</option>
                                            </select>
                                        </div>
                                        <div class="col-12">
                                            <label for="status" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Status</label>
                                            <select id="status" class="form-control form-select">
                                                <option value="Select">Select Status</option>
                                                <option value="Active">Active</option>
                                                <option value="Inactive">Inactive</option>
                                            </select>
                                        </div>
                                        <div class="col-6">
                                            <button type="reset" class="btn btn-danger-200 text-danger-600 w-100">Reset</button>
                                        </div>
                                        <div class="col-6">
                                            <button type="submit" class="btn btn-primary-600 w-100">Apply</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-8 text-secondary-light">
                        <span class="">Rows per page:</span>
                        <div class="dt-length">
                            <select name="dataTable_length" aria-controls="dataTable" class="dt-input form-control form-select">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                </div>!-->

                <div class="p-0">
                    <table class="table bordered-table mb-0">
                        <thead>
                            <tr>
                                <th scope="col">
                                    <div class="form-check style-check d-flex align-items-center">
                                        <!-- <input class="form-check-input" type="checkbox"> -->
                                        <label class="form-check-label">SR.No</label>
                                    </div>
                                </th>
                                <th scope="col">Full Name</th>
                                <th scope="col">Email-Id</th>
                                <th scope="col">Mobile Number</th>
                                <th scope="col">Date of Birth</th>
                                <th scope="col">Age</th>
                                <th scope="col">Gender</th>
                                <!-- <th scope="col">Mobile Number</th> -->
                                <!-- <th scope="col">Category</th> -->
                                <th scope="col">Status</th>
                                <th scope="col">Registered At</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $sr=1; @endphp
                            @foreach($teachers as $teacherlist)
                            <tr id="teacher-row-{{ $teacherlist->teachId }}">
                                <td>
                                    <div class="form-check style-check d-flex align-items-center">
                                        <!-- <input class="form-check-input" type="checkbox"> -->
                                        <label class="form-check-label">{{ $sr }}</label>
                                    </div>
                                </td>
                                <td><span class="text-primary-600">{{ $teacherlist->name }}</span></td>
                                <td>{{ $teacherlist->email }}</td>
                                <td>{{ $teacherlist->mobile_number }}</td>
                                <td>{{ $teacherlist->date_of_birth }}</td>
                                <td>{{ $teacherlist->age }}</td>
                                <td>{{ $teacherlist->gender_name }}</td>
                                <!-- <td>{{ $teacherlist->category_name }}</td> -->
                                <!-- <td>
                                    <div class="d-flex align-items-center">
                                        <img src="assets/images/thumbs/teacher-avatar-img1.png"
                                            alt="Marvin McKinney Image" class="flex-shrink-0 me-12 radius-8">
                                        <div class="">
                                            <h6 class="text-md mb-0 fw-medium flex-grow-1">Marvin McKinney</h6>
                                        </div>
                                    </div>
                                </td> -->
                                <td> 
                                    <button class="status-toggle px-16 py-4 radius-4 fw-medium text-sm border-0 {{ $teacherlist->status == 1 ? 'bg-success-100 text-success-600' : 'bg-danger-100 text-danger-600' }}" data-id="{{ $teacherlist->teachId }}" data-status="{{ $teacherlist->status }}" id="teacher-status-toggle">
                                        {{ $teacherlist->status == 1 ? 'Active' : 'Inactive' }}
                                    </button>
                                </td>
                                <td>
                                    @if(!empty($teacherlist->created_at))
                                        {{ date('d-m-Y', strtotime($teacherlist->created_at)) }}
                                    @else
                                        
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="text-primary-light text-xl" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                                            <iconify-icon icon="tabler:dots-vertical"></iconify-icon>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-lg-end border p-12">
                                            <!-- <li>
                                                <a href="javascript:void(0);" class="dropdown-item rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6">
                                                    <i class="ri-user-3-line"></i>
                                                    View Student
                                                </a>
                                            </li> -->
                                            <li>
                                                <a href="{{ route('admin.teacherEdit', ['id' => $teacherlist->teachId]) }}" class="dropdown-item rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6">
                                                    <i class="ri-edit-2-line"></i>
                                                    Edit
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('admin.teacherView', ['id' => $teacherlist->teachId]) }}" class="dropdown-item rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6">
                                                    <i class="ri-account-circle-line"></i>
                                                    View
                                                </a>
                                            </li>
                                            <!-- <li>
                                                <button class="dropdown-item rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6"
                                                    type="button">
                                                    <i class="ri-error-warning-line"></i>
                                                    Inactive
                                                </button>
                                            </li> -->
                                            <li>
                                                <button class="dropdown-item delete-btn-teacher rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900 d-flex align-items-center gap-2 py-6" data-id="{{ $teacherlist->teachId }}" data-bs-toggle="modal" data-bs-target="#exampleModalDeleteTeacher"><i class="ri-delete-bin-6-line"></i>Delete</button>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @php $sr++; @endphp
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- DELETE MODAL -->
<!--<div class="modal fade" id="exampleModalDeleteTeacher" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Delete Teacher</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                Are you sure you want to delete this Teacher?
            </div>

            <div class="modal-footer">
                <button type="button" id="confirmDeleteTeacher" class="btn btn-danger">
                    Yes, Delete
                </button>

                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Cancel
                </button>
            </div>

        </div>
    </div>
</div>!-->
<!-- Modal Delete Event start -->
<div class="modal fade" id="exampleModalDeleteTeacher" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog modal-dialog-centered max-w-340-px">
        <div class="modal-content radius-16 bg-base">
            <div class="modal-body pt-32 px-36 pb-24 text-center">
                <span class="mb-16 fs-1 line-height-1 text-danger">
                    <iconify-icon icon="fluent:delete-24-regular" class="menu-icon"></iconify-icon>
                </span>
                <h6 class="text-lg fw-semibold text-primary-light mb-0">Are your sure you want to Delete this teacher</h6>
                <div class="d-flex align-items-center justify-content-center gap-3 mt-24">
                    <button type="reset" class="flex-grow-1 border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-24 py-11 radius-8" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="flex-grow-1 btn btn-primary-600 border border-primary-600 text-md px-16 py-12 radius-8" id="confirmDeleteTeacher">Yes, Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal Delete Event end -->
@include('admin.common-layout.footer')