@extends('layouts-v2.app')

@section('title', 'Danh sách giáo viên')

@section('content')
<div>
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Danh sách giáo viên</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Danh sách giáo viên</h1>

    {{-- Khu vực Tìm kiếm và Lọc --}}
    <div class="bg-white shadow-md rounded-lg p-4 mb-6 flex items-center justify-between">
        <div class="flex gap-5">
            <div class="w-72"><x-floating-input name="email" id="teacher-email" label="Email" clearable="true" /></div>

            <x-floating-select 
                name="is_active"
                id="is-active"
                class="w-72"
                label="Trạng thái"
                :options="[
                    '' => 'Tất cả',
                    '1' => 'Hoạt động',
                    '0' => 'Không hoạt động'
                ]"
            />
        </div>

        {{-- Nút Lọc --}}
        <button id="btnFilter"
                class="inline-flex justify-center py-2.5 px-6 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            LỌC
        </button>
    </div>

    {{-- Khu vực Thao tác (Header của Bảng) --}}
    <div class="flex justify-between items-center mb-4">
        {{-- Số lượng hiển thị --}}
        <x-floating-select 
            name="perpage"
            id="perpage"
            class="w-40"
            label="Số lượng hiển thị"
            :options="[
                '' => '10',
                '20' => '20',
                '30' => '30',
                '50' => '50',
                '100' => '100'
            ]"
        />

        {{-- Nút Thêm Mới --}}
        <button type="button" id="btn-add-teacher-modal"
                class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
            <svg class="w-5 h-5 -ml-1 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
            THÊM MỚI
        </button>
    </div>

    {{-- Bảng Danh sách Sản phẩm --}}
    <div class="flex flex-col">
        <div class="py-2 align-middle inline-block min-w-full">
            <div class="shadow-md border border-gray-100">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                ID
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider w-1/4">
                                GIÁO VIÊN
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                NHÓM
                            </th>
                            <th scope="col" class="px-6 py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                TRẠNG THÁI
                            </th>
                            <th scope="col" class="px-6 py-3 text-center text-sm font-semibold text-gray-500 uppercase tracking-wider">
                                THAO TÁC
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="tbody-oa-teachers">
                        <tr>
                            <td colspan="7" class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium text-gray-900">
                                <div class="flex items-center justify-center">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
                                </div>            
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- Phân trang -->
        <div class="mt-6 flex justify-center" id="pagination"></div>
    </div>

    <!-- Modal: Thêm teacher -->
    <div id="add-teacher-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title-add-teacher" role="dialog" aria-modal="true">

        {{-- Panel (Nội dung Modal) --}}
        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="add-teacher-content" class="relative w-full max-w-lg bg-white rounded-xl shadow-xl transform transition-all">

                <div class="bg-white p-6 rounded-xl shadow-xl">
                    {{-- Modal Header --}}
                    <div class="flex justify-between items-center pb-4">
                        <h3 class="text-xl font-semibold text-gray-900">
                            Thêm giáo viên
                        </h3>
                        {{-- Nút Đóng --}}
                        <button type="button"
                                class="btn-close-add-teacher-modal text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100">
                            <span class="sr-only">Đóng</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="add-teacher-form" method="POST">
                        @csrf
                        
                        <div class="relative">
                            <span class="custom-placeholder absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                                Người dùng
                            </span>
                            <select id="add-teacher-user-search" multiple></select>
                        </div>

                        <div class="flex justify-end space-x-3 mt-6 pt-4 border-t">
                            <button type="button"
                                    class="btn-close-add-teacher-modal w-20 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-gray-300 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out">
                                HỦY
                            </button>
                            <button id="btn-submit-add-teacher"
                                    class="disabled:opacity-50 disabled:cursor-not-allowed w-20 justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                                TẠO
                            </button>
                        </div>
                    </form>

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

<script>
    window.routes = {
        getOATeachers: "{{ route('oa-teachers.getOATeachers') }}",
        searchUsers: "{{ route('users.searchUsers') }}",
        addOATeacher: "{{ route('oa-teachers.store') }}",
        deleteOATeacher: "{{ route('oa-teachers.destroy' , ':id') }}",
        updateOATeacherStatus: "{{ route('oa-teachers.updateOATeacherStatus', ':id') }}",
        teacherAvatar: "{{ asset('images/teacher_avatar.png') }}"
    }
</script>

<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-teacher.js') }}"></script>

<script>
    $(document).ready(function() {
        loadOATeachers();
    });
</script>  

@endsection