@extends('layouts.app')

@section('content')
   <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => 'Edit Group Session'])
            <!-- <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div> -->
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                   
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
            
                    <li class="nav-item">
                        <a class="nav-link {{ Route::currentRouteName() == 'user-profile' ? 'active' : '' }}" href="{{ route('user-profile') }}">
                            <span class="sidenav-mini-icon"> <i class="fa fa-cog" style="color:white;"></i> </span>
                            <span class="sidenav-normal text-bold" style="color:black;"> </span>
                        </a>
                    </li>


                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid my-5 py-2">
        <div class="d-flex justify-content-center mb-5">
            <div class="col-lg-9 mt-lg-0 mt-4">

                <!-- Card Basic Info -->
                <div class="card mt-4" id="basic-info">
                    <div class="card-header">
                        <h5>Group Session Details</h5>
                    </div>
                    <div class="card-body pt-0">

                    <form action="{{ route('groupupdate', ['id' => $group->group_id]) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            {{-- <div class="col-1">

                                <div class="input-group">
                                    <input type="hidden" class="form-control" name="group_id" id="group_id" value="{{ $group->group_id }}" required>

                                </div>
                                @error('group_id')
                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                @enderror
                            </div> --}}
                            <div class="col-6">
                                <label class="form-label">Group Name:</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="grp_name" id="group_name" value="{{ $group->grp_name }}" required>

                                </div>
                            </div>
                            <div class="col-6">
                                <label class="form-label">Teacher</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="teacher_name" id="teacher_name" value="{{ $group->teacher_name }}" readonly>

                                </div>
                                @error('group_id')
                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                @enderror
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-6">
                                <label class="form-label">Starting Time</label>
                                <div class="input-group">
                                    <input type="time" class="form-control" name="starting_time" id="starting_time" value="{{ $group->starting_time }}" required>

                                </div>
                            </div>
                            <div class="col-6">
                            <label class="form-label">End Time</label>
                            <div class="input-group">
                                <input type="time" class="form-control" name="end_time" id="end_time" value="{{ $group->end_time }}" required>

                            </div>
                            @error('group_id')
                                <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                            @enderror
                        </div>
                        <div class="col-6">
                                <label class="form-label">Class Count</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="class_count" id="class_count" value="{{ $group->class_count }}" required>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">

                            {{-- <div class="col-6">
                                <label class="form-label">Students </label>
                                <div class="input-group">
                                    <ul>
                                        @foreach($students as $student)
                                            <li>
                                                {{ $student->firstname }} {{ $student->lastname }}

                                            </li>
                                        @endforeach
                                    </ul>

                                </div>
                            </div> --}}
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <a href="{{ route('signup') }}" class="btn btn-light m-0">Back</a>
                            <button type="submit" class="btn bg-gradient-primary m-0 ms-2">Update</button>
                        </div>
                        {{-- <button type="submit">Update</button> --}}
                    </form>
                    </div>
                </div>
        </div>
            {{-- </div> --}}



                <!-- Second Card (Group Session Details) -->
                <div class="col-12">
                    <div class="card mt-4" id="basic-info">
                        <div class="card-header">
                            <h5>Students List</h5>
                        </div>
                        <div class="card-body pt-0">
                            <form action="{{ route('groupupdate', ['id' => $group->group_id]) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="row">
                                    <div class="col-6">
                                        <ul>
                                            @foreach($students as $student)
                                                <li>
                                                     {{ $student->firstname }} {{ $student->lastname }}
                                                    <form action="{{ route('students.destroy', $student->id) }}" method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('PUT')
                                                        <button type="submit" onclick="return confirm('Are you sure you want to remove this student?');" class="btn bg-gradient-primary mt-4 ms-2">Remove</button>

                                                    </form>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="col-6">
                                       <button type="button" id="showStudents" class="btn bg-gradient-primary mt-4 ms-2" data-bs-toggle="modal" data-bs-target="#studentModal">
                                        Add Student in Group
                                    </button>

                                    </div>

                                </div>



                                {{-- <div class="row mt-3">
                                    <div class="col-12">
                                        <label class="form-label">Students</label>
                                        <ul id="studentList" style="display: none;"></ul>
 <button type="submit">Update</button>
                                    </div>
                                </div> --}}

                                {{-- <div class="d-flex justify-content-end mt-4">
                                    <button type="submit" class="btn btn-success">Update</button>
                                </div> --}}
                            </form>
                        </div>
                    </div>
                </div> <!-- End Second Card -->
            </div> <!-- End Row -->
        </div>

        @include('layouts.footers.auth.footer')
    </div>


    <div class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="studentModalLabel">Select Student to Add</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">

                            <ul id="studentList" class="list-group" style="display: none;"></ul>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .choices {
            margin-bottom: 0;
        }

    </style>
@endpush

@push('js')
{{-- <a href="{{ route('signup') }}" style="display: inline-block; padding: 8px 16px; background-color: #ccc; color: black; text-decoration: none; border-radius: 5px;">Back to Signup</a> --}}

<!-- jQuery for AJAX -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function() {
    $("#showStudents").click(function() {
        $.ajax({
            url: "{{ route('getStudents') }}",
            method: "GET",
            beforeSend: function() {
                $("#studentList").html("<li class='list-group-item text-center text-muted'>Loading...</li>");
            },
            success: function(response) {
                let studentList = $("#studentList");
                let studentItems = "";

                if (response.length === 0) {
                    studentItems = "<li class='list-group-item text-center text-muted'>No available students</li>";
                } else {
                    response.forEach(student => {
                        studentItems += `
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <span class="fw-bold">${student.firstname} ${student.lastname}</span>
                                <button class="btn btn-sm btn-success selectStudent"
                                    data-id="${student.id}"
                                    data-group="{{ $group->id }}">
                                    <i class="fas fa-user-plus"></i> Add
                                </button>
                            </li>`;
                    });
                }

                setTimeout(() => {
                    studentList.html(studentItems); // Prevents instant flicker
                }, 200); // Small delay for smooth rendering
            },
            error: function() {
                $("#studentList").html("<li class='list-group-item text-danger'>Failed to load students.</li>");
            }
        });
    });



    // Event delegation for dynamically added buttons teacher_id
    $(document).on("click", ".selectStudent", function() {
        let studentId = $(this).data("id");
        let grp_name = $('#group_name').val();
        let starting_time = $('#starting_time').val();
        let class_count = $('#class_count').val();
        let end_time = $('#end_time').val();
        let teacher_id = $('#teacher_id').val();
        console.log(grp_name);


        $.ajax({
            url: "{{ route('addStudentToGroup') }}", // Laravel route for inserting
            method: "POST",
            data: {
                student_id: studentId,
                grp_name: grp_name,
                starting_time: starting_time,
                class_count: class_count,
                end_time: end_time, // Change this dynamically based on actual group selection
                teacher_id: teacher_id,
                _token: "{{ csrf_token() }}" // Include CSRF token for security
            },
            success: function(response) {
                alert(response.message); // Success message
                $("#showStudents").click(); // Refresh student list
            },
            error: function(xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    });
});
$("#showStudents").click(function() {
    $.ajax({
        url: "{{ route('getStudents') }}",
        method: "GET",
        success: function(response) {
            let studentList = $("#studentList");
            let studentItems = "";

            if (response.length === 0) {
                studentItems = "<li class='list-group-item text-center text-muted'>No available students</li>";
            } else {
                response.forEach(student => {
                    studentItems += `
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="fw-bold">${student.firstname} ${student.lastname}</span>
                            <button class="btn btn-sm btn-success selectStudent"
                                data-id="${student.id}"
                                data-group="{{ $group->id }}">
                                <i class="fas fa-user-plus"></i> Add
                            </button>
                        </li>`;
                });
            }

            studentList.html(studentItems).fadeIn(300); // Instant replace & fade in
        }
    });
});

</script>

<!-- Show Students Button -->
{{-- <button id="showStudents">Add Student in Group</button>

<!-- Student List (Initially Hidden) -->
<ul id="studentList" style="display: none;"></ul> --}}

<!-- Back button -->
{{-- <a href="{{ route('signup') }}" style="display: inline-block; padding: 8px 16px; background-color: #ccc; color: black; text-decoration: none; border-radius: 5px;">Back to Signup</a> --}}

<!-- jQuery for AJAX -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function() {
    $("#showStudents").click(function() {
        $.ajax({
            url: "{{ route('getStudents') }}", // Fetch students who are not in groups
            method: "GET",
            success: function(response) {
                let studentList = $("#studentList");
                studentList.empty().show(); // Show list and clear previous data

                if (response.length === 0) {
                    studentList.append("<li>No available students</li>");
                } else {
                    response.forEach(student => {
                        let studentItem = `<li>
                            ${student.firstname} ${student.lastname}
                            <button class="selectStudent"
                                data-id="${student.id}"
                                data-group="{{ $group->id }}">
                                Add Group
                            </button>
                        </li>`;
                        studentList.append(studentItem);
                    });
                }
            }
        });
    });

    // Event delegation for dynamically added buttons teacher_id
    $(document).on("click", ".selectStudent", function() {
        let studentId = $(this).data("id");
        let grp_name = $('#group_name').val();
        let starting_time = $('#starting_time').val();
        let class_count = $('#class_count').val();
        let end_time = $('#end_time').val();
        let teacher_id = $('#teacher_id').val();
        console.log(grp_name);


        $.ajax({
            url: "{{ route('addStudentToGroup') }}", // Laravel route for inserting
            method: "POST",
            data: {
                student_id: studentId,
                grp_name: grp_name,
                starting_time: starting_time,
                class_count:class_count,
                end_time: end_time, // Change this dynamically based on actual group selection
                teacher_id: teacher_id,
                _token: "{{ csrf_token() }}" // Include CSRF token for security
            },
            success: function(response) {
                alert(response.message); // Success message
                $("#showStudents").click(); // Refresh student list
            },
            error: function(xhr) {
                alert("Error: " + xhr.responseJSON.message);
            }
        });
    });
});

</script>


@endpush