@extends('layouts.app')

@section('content')
    <!-- Navbar -->
    <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' => ' Group Sessions Details'])
            <!-- <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>
    <!-- End Navbar -->


                                        </div>
                                    </div>
                                    <div class="col-4 text-end">

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


                    <!-- <div class="col-lg-3 col-md-6 col-12">
                        <div class="card  mb-4">
                            <div class="card-body p-3">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="numbers">
                                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Sales</p>
                                            <h5 class="font-weight-bolder">
                                                $103,430
                                            </h5>
                                            <p class="mb-0">
                                                <span class="text-success text-sm font-weight-bolder">+5%</span> than
                                                last month
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-4 text-end">
                                        <div
                                            class="icon icon-shape bg-gradient-warning shadow-warning text-center rounded-circle">
                                            <i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="card mx-1 my-1  mt-1 pt-1" id="basic-info">
           

            <div class="container mt-7 d-flex justify-content-center">
                <div class="card p-4 shadow w-100" style="max-width: 1300px; background-color: #f8f5f5; border-radius: 8px;">
                    <h3 class="text-center mb-4" style="color: #5c2018;">All Group Sessions</h3>

            
                    <div class="table-container mt-3">
                        <table class="table table-bordered table-striped text-center">
                        <thead style="background-color:rgb(224, 233, 219); color: dark;">
                                <tr>
                                <th style="color: black; background-color:rgb(158, 129, 172);">Group Name</th>
                                    <th style="color: black; background-color:rgb(158, 129, 172);">Teacher</th>
                                    <th style="color: black; background-color:rgb(158, 129, 172);">Start Time</th>
                                    <th style="color: black; background-color: rgb(158, 129, 172);">End Time</th>
                                    <th style="color: black; background-color: rgb(158, 129, 172);">Students</th>
                                    <th style="color: black; background-color: rgb(158, 129, 172);">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($groups as $group)
                                    @if($group->grp_name)
                                    <tr>
                                        <td>{{ $group->grp_name }}</td>
                                        <td>{{ $group->teacher_name }}</td>
                                        <td>{{ $group->starting_time }}</td>
                                        <td>{{ $group->end_time }}</td>
                                        <td>
                                            <ul class="list-unstyled mb-0">
                                                @foreach($group->students as $student)
                                                    <li>👤{{ $student->firstname }} {{ $student->lastname }}</li>
                                                @endforeach
                                            </ul>
                                        </td>
                                        <td>
                                                <a href="{{ route('groupedit', ['id' => $group->group_id]) }}" class="btn btn-sm btn-success">
                                                    <i class="fas fa-edit"></i> Edit
                                                </a>
                                                <form action="{{ route('groupdelete', ['id' => $group->group_id]) }}" method="POST" class="d-inline delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" class="btn btn-sm btn-danger delete-btn" data-id="{{ $group->group_id }}"data-name="{{ $group->grp_name }}"">
                                                        <i class="fa-solid fa-trash"></i> Delete
                                                    </button>
                                                </form>
                                            </td>

                                    </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>

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




                        @include('layouts.footers.auth.footer')
                    </div>
@endsection
    <style>
 .table-header {
    color: white;
    padding: 15px;
    font-size: 20px;
    text-align: center;
    margin-top: 120px;
    border-top-left-radius: 20px;
    border-top-right-radius: 10px;
}

/* Style for the table */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    background-color: white;
}

/* Styling for table headers */
th {
    min-width: 200px; /* Set a minimum width */
    padding: 12px; /* Increased padding */
    text-align: left; /* Align text to the left */
    background-color: #ff5722; /* Orange background */
    color: white; /* White text */
    border-radius: 10px;* Added rounded corners */
}

/* Alternate row colors */
tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:nth-child(odd) {
    background-color: #fff;
}

h2{
    text-align:center;
    margin-top:28px;
}


    </style>


<script>
    window.csrfToken = "{{ csrf_token() }}";
</script>
@push('js')
    <script src="../../assets/js/plugins/chartjs.min.js"></script>
    <!-- Include SweetAlert2 from CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "New Students",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                    maxBarThickness: 6

                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
</script>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>




<script>
function editRecord(group_id, grp_name, teacher_id, starting_time, end_time) {
    Swal.fire({
        title: "Edit Group",
        html: `
            <label>Group Name</label>
            <input type="text" id="grp_name" class="swal2-input" value="${grp_name}" placeholder="Group Name">
            <label>Start Time</label>
            <input type="text" id="starting_time" class="swal2-input" value="${starting_time}" placeholder="Start Time">
            <label>End Time</label>
            <input type="text" id="end_time" class="swal2-input" value="${end_time}" placeholder="End Time">
            <label>Teacher</label>
            <input type="number" id="teacher_id" class="swal2-input" value="${teacher_id}" placeholder="Teacher ID">
        `,
        showCancelButton: true,
        confirmButtonText: "Update",
        preConfirm: () => {
            const csrfTokenElement = document.querySelector('meta[name="csrf-token"]');
            const csrfToken = csrfTokenElement ? csrfTokenElement.content : null;

            if (!csrfToken) {
                Swal.showValidationMessage("CSRF token is missing in the page!");
                return false;
            }

            return {
                grp_name: document.getElementById("grp_name").value.trim(),
                starting_time: document.getElementById("starting_time").value.trim(),
                end_time: document.getElementById("end_time").value.trim(),
                teacher_id: parseInt(document.getElementById("teacher_id").value) || 0,
                csrf_token: csrfToken // Include CSRF token in the data
            };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const data = result.value;

            $.ajax({
                url: `/edit/${group_id}`,
                type: "PUT",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": data.csrf_token // Attach CSRF token
                },
                success: function(response) {
                    Swal.fire("Success", response.message, "success").then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    console.error("Error:", xhr.responseText);
                    Swal.fire("Error", "Something went wrong! " + xhr.responseText, "error");
                }
            });
        }
    });
}


    // function deleteRecord(teacher_id) {
    //     Swal.fire({
    //         title: "Are you sure?",
    //         text: "You won't be able to revert this!",
    //         icon: "warning",
    //         showCancelButton: true,
    //         confirmButtonColor: "#d33",
    //         cancelButtonColor: "#3085d6",
    //         confirmButtonText: "Yes, delete it!"
    //     }).then((result) => {
    //         if (result.isConfirmed) {
    //             $.ajax({
    //                 url: `/delete/${teacher_id}`,
    //                 type: "DELETE",
    //                 data: {
    //                     _token: "{{ csrf_token() }}"
    //                 },
    //                 success: function(response) {
    //                     Swal.fire("Deleted!", response.success, "success").then(() => {
    //                         location.reload();
    //                     });
    //                 },
    //                 error: function(error) {
    //                     Swal.fire("Error", "Failed to delete record", "error");
    //                 }
    //             });
    //         }
    //     });
    // }
</script>




<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.delete-btn');

        deleteButtons.forEach(button => {
            button.addEventListener('click', function (e) {
                const form = this.closest('form');
                const groupId = this.getAttribute('data-id');
                const groupName = this.getAttribute('data-name');

                Swal.fire({
                    title: 'Are you sure?',
                    text: `You are about to delete the group: "${groupName}"`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    

       // 🔔 Show "Deleted!" popup after deletion
       @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Deleted!',
                text: "{{ session('success') }}", // This will include the group name
                showConfirmButton: false,
                timer: 1500,
                timerProgressBar: true,
            });
        @endif
    });
</script>

@endpush