@extends('layouts-v2.app')

@section('title', 'Nhóm giáo viên')

@section('content')
<div>
    <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>Nhóm giáo viên</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Nhóm giáo viên</h1>

    <div class="flex justify-between items-center mb-4">
        <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'
            ]"
        />

        <button id="btn-add-teacher-team" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center text-sm font-medium transition duration-200 shadow-sm">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            THÊM NHÓM GIÁO VIÊN
        </button>
    </div>

    <div class="flex flex-col">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <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">TÊN NHÓM</th>
                        <th scope="col" class="px-6 py-3 text-left text-sm font-semibold text-gray-500 uppercase tracking-wider">MÔ TẢ</th>
                        <th scope="col" class="px-6 py-3 text-left 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">HÀNH ĐỘNG</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="tbody-oa-teams">
                    <tr>
                        <td colspan="5" 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>

        {{-- Phân trang --}}
        <div class="mt-6 flex justify-center" id="pagination"></div>
    </div>

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

        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="add-teacher-team-content" class="relative w-full max-w-md bg-white rounded-xl shadow-xl transform transition-all overflow-hidden">
                
                <div class="bg-white p-6 rounded-xl shadow-xl">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800" id="modal-title">
                            Thêm nhóm giáo viên
                        </h3>
                        <button type="button" class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-add-teacher-team">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="add-teacher-team-form" method="POST" action="#">
                        @csrf
                        
                        <div class="mb-4">
                            <x-floating-input name="title" id="add-teacher-team-title" label="Tên nhóm giáo viên" />
                        </div>

                        <div class="mb-4">
                            <textarea name="description" rows="4" placeholder="Mô tả"
                                class="w-full border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-3 text-sm outline-none"></textarea>
                        </div>

                        <div class="relative mb-4">
                            <span class="custom-placeholder-package 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">
                                Kỹ năng
                            </span>
                            <select id="skills" multiple placeholder="Kỹ năng" style="width: 100%;" class="select2-custom"></select>
                        </div>

                        <div class="mb-8 flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_active" id="add-teacher-team-is-active" class="sr-only peer" checked>
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <label for="add-teacher-team-is-active" class="text-sm font-medium text-gray-400 cursor-pointer">Hoạt động</label>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" class="btn-close-add-teacher-team flex-1 bg-gray-100 hover:bg-gray-200 text-gray-500 font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                Hủy
                            </button>
                            <button id="btn-submit-add-teacher-team" class="disabled:opacity-50 disabled:cursor-not-allowed flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                Xác nhận
                            </button>
                        </div>
                    </form>

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

    <!-- Modal: Cập nhật nhóm giáo viên -->
    <div id="edit-teacher-team-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title" role="dialog" aria-modal="true">

        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="edit-teacher-team-content" class="relative w-full max-w-md bg-white rounded-xl shadow-xl transform transition-all overflow-hidden">
                
                <div class="bg-white p-6 rounded-xl shadow-xl">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800" id="modal-title">
                            Sửa nhóm giáo viên
                        </h3>
                        <button type="button" class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-edit-teacher-team">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="edit-teacher-team-form" method="POST" action="#">
                        @csrf
                        
                        <div class="mb-4">
                            <x-floating-input name="title" id="edit-teacher-team-title" label="Tên nhóm giáo viên" />
                        </div>

                        <div class="mb-4">
                            <textarea name="description" id="edit-teacher-team-description" rows="4" placeholder="Description"
                                class="w-full border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2.5 px-3 text-sm outline-none"></textarea>
                        </div>

                        <div class="relative mb-4">
                            <span class="custom-placeholder-package 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">
                                Kỹ năng
                            </span>
                            <select id="edit-teacher-team-skills" multiple placeholder="Kỹ năng" style="width: 100%;" class="select2-custom"></select>
                        </div>

                        <div class="mb-8 flex items-center gap-3">
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="is_active" id="edit-teacher-team-is-active" class="sr-only peer" checked>
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                            <label for="edit-teacher-team-is-active" class="text-sm font-medium text-gray-400 cursor-pointer">Hoạt động</label>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" class="btn-close-edit-teacher-team flex-1 bg-gray-100 hover:bg-gray-200 text-gray-500 font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                Hủy
                            </button>
                            <button id="btn-submit-edit-teacher-team" class="disabled:opacity-50 disabled:cursor-not-allowed flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                CẬP NHẬT
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal: Thêm giáo viên vào nhóm -->
    <div id="add-teacher-to-team-modal" class="fixed inset-0 z-50 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    
        <div class="flex items-center justify-center min-h-screen p-4">
            <div id="add-teacher-to-team-content" class="relative w-full max-w-md bg-white rounded-xl shadow-xl transform transition-all">
                
                <div class="bg-white p-6 rounded-xl shadow-xl">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-gray-800" id="modal-title">
                            Thêm giáo viên vào nhóm
                        </h3>
                        <button type="button" class="text-gray-400 hover:text-gray-500 p-1 rounded-full hover:bg-gray-100 btn-close-add-teacher-to-team">
                            <span class="sr-only">Close</span>
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>

                    <form id="form-add-teacher-to-team" method="POST" action="#">
                        @csrf

                        <div class="relative mb-4">
                            <span class="custom-placeholder-package 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">
                                Giáo viên
                            </span>
                            <select id="teachers" multiple placeholder="Giáo viên" style="width: 100%;" class="select2-custom"></select>
                        </div>

                        <div class="flex gap-3">
                            <button type="button" class="btn-close-add-teacher-to-team flex-1 bg-gray-100 hover:bg-gray-200 text-gray-500 font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                Hủy
                            </button>
                            <button id="btn-submit-add-teacher-to-team" class="disabled:opacity-50 disabled:cursor-not-allowed flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg text-sm uppercase tracking-wider transition duration-200">
                                Xác nhận
                            </button>
                        </div>
                    </form>

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

<script>
    window.routes = {
        getOASkills: "{{ route('oa-skills.getOASkills')}}",
        getOATeams: "{{ route('oa-teams.getOATeams') }}",
        getOATeam: "{{ route('oa-teams.show', ['id' => ':id']) }}",
        addOATeam: "{{ route('oa-teams.store') }}",
        updateOATeam: "{{ route('oa-teams.update', ['id' => ':id']) }}",
        deleteOATeam: "{{ route('oa-teams.destroy', ['id' => ':id']) }}",
        getTeachersInOATeam: "{{ route('oa-teams.getTeachersInOATeam', ['id' => ':id']) }}",
        searchOATeachers: "{{ route('oa-teachers.searchOATeachers') }}",
        addTeacherToTeam: "{{ route('oa-teams.addTeacherToTeam', ['id' => ':id']) }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-team.js') }}"></script>

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

@endsection