@extends('layouts.teacher')
<style>
    .card_flexBox {
        display: flex;
        gap: 20px;
        padding: 0 30px 0 0;
        flex-wrap: wrap;
        margin: 0 0 40px;
        margin-top: 10px;
    }
    .card_flexBox .cardBox {
        flex: 0 0 calc(25% - 15px);
        max-width: calc(25% - 15px);
    }
    .cardBox img.card-img-top {
        height: 240px;
        width: 100%;
        object-fit: cover;
    }

    /* Modal css */
    .popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        width: 50%;
        height: 50%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        z-index: 9999;
        border-radius: 8px
    }

    .popup-content {
        text-align: center;
        overflow-y: auto;
        height: 100%;
    }

    #modalBackdrop {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000000a8;
        z-index: 9999;
        display: none;
    }

    .close {
        position: absolute;
        top: -15px;
        right: -15px;
        cursor: pointer;
        font-size: 30px;
        color: #333;
        background-color: #fff;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        box-shadow: 0px 3px 5px 0px #00000054;
    }
    .close:hover {
        background-color: red;
        color: white;
        box-shadow: 0px 2px 3px 0px #0000002e;
    }
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd !important;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dbcdcd ;
    }
</style>
@section('main-content')
    <div style="margin:30px;">
        <div class="card w-30 p-3 cardBox">
            <h2>{{ucfirst($course[0]->coursename)}}</h2>
            <h3>Standard:- {{$course[0]->class_name}}th</h3>
            <h4>Duration:- {{$course[0]->courseduration}} {{'( '.date("d-m-Y",strtotime($course[0]->start_date)).' to '.date("d-m-Y",strtotime($course[0]->end_date)).' )'}}</h4>
        </div>
        <div class="card_flexBox">
            @foreach ($batch_list as $batch)
            <div class="card w-30 cardBox">
                <img class="card-img-top" src="../assets/img/elements/2.jpg" alt="Card image cap">
                <div class="card-body">
                                      <h5 class="card-title">{{$batchname}}</h5>
                  <p class="card-text">
                    <span>Timing</span>: {{$start_time." to ".$end_time}}<br/>
                    <span>Subject</span>: {{$subject_name}}<br/>
                    <span>Mode</span>: {{$mode}}<br/>
                    <span>Fee</span>: &#x20B9;{{$fee}}<br/>
                  </p>
                  <!-- <a href="javascript:void(0)" class="btn btn-outline-primary" class="get_description"
                        onclick='openPopup(`{{$batchname}}`,"{{$start_time}}","{{$end_time}}",`{{$subject_name}}`,"{{$mode}}","{{$fee}}",`{{$description}}`)'>
                        View Description !!!</a>
                        <br><br> -->
                  <a  href="javascript:void(0)" class="btn btn-outline-primary get_student_list" data-batch_id="{{$batch->id}}">Student List</a>      
                </div>
              </div>
            @endforeach
        </div>
        <div id="make_new_table">
            <div class="table dataTable text-nowrap dtbl_dropdown" id="show_hide_table">
                <table class="table" id="services" style="width:70%;">
                    <thead>
                        <tr>
                            <th style="width:25%">First Name</th>
                            <th style="width:25%">Last Name</th>
                            <th style="text-align:center;">Action</th>
                        </tr>
                    </thead>
                    <tbody class="table-border-bottom-0" id="student_data_list">
                        @if(count($student_list) != 0)
                            @foreach($student_list as $key => $student)
                            <tr id="row_{{ $student->id }}">
                                <td>{{ $student->first_name }}</td>
                                <td>{{ $student->last_name }}</td>
                                <td style="text-align: center;">
                                    <a href="/studentdetail/{{$student->id}}" target='_blank'>View</a>
                                </td>
                            </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        <h4 style="text-align: center;" id="no_student_found">{{(count($student_list)==0)?"No Student Enrolled":""}}</h4>

    </div>

    <div id="modalBackdrop"></div>
    <div class="popup" id="popup">
        <span class="close" onclick="closePopup()">&times;</span>
        <div class="popup-content">
            
            <h3 class="popup_name"></h3>
            <h5 class="popup_stime"></h5>
            <h5 class="popup_etime"></h5>
            <h5 class="popup_subject"></h5>
            <h5 class="popup_mode"></h5>
            <h5 class="popup_fee"></h5>
            <div class="popup_description" style="text-align: left;"></div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.slim.js" integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
    {{-- Modal script --}}
    <script>
        
        if({{count($student_list)}}==0){
            $("#no_student_found").text("No Student Enrolled"); 
            $("#services").hide();
            $("#show_hide_table").hide();
        }else{
            $("#services").show();
        }
        function openPopup(name,start_time,end_time,subject_name,mode,fee,description) {
            $(".popup_name").text(name);
            $(".popup_stime").text("Timing: "+start_time+" to "+end_time);
            $(".popup_subject").text("Subject: "+subject_name);
            $(".popup_mode").text("Mode: "+mode);
            $(".popup_fee").text("Fee: &#x20B9;"+fee);
            $(".popup_description").html("");
            $(".popup_description").append(description);
            document.getElementById("popup").style.display = "block";
            document.getElementById("modalBackdrop").style.display = "block";
        }
        
        function closePopup() {
            document.getElementById("popup").style.display = "none";
            document.getElementById("modalBackdrop").style.display = "none";
        }

        $(".get_student_list").on("click",function(){
            // call ajax;
            $.ajax({
                url:"/getstudents",
                type:"POST",
                headers:{
                    'X-CSRF-Token':$("meta[name='csrf-token']").attr('content'),
                },
                data:{id:$(this).data("batch_id")},
                success:function(resp){
                    $("#services").hide();
                    $("#show_hide_table").hide();
                    $("#no_student_found").text(""); 

                    if(resp["status"]=="success"){
                        $("#services").show(); 
                        try{
                            let new_arr=[];
                            var table = $('#services');
                            if ($.fn.DataTable.isDataTable(table)) {
                                table.DataTable().destroy();
                            }
                            // for(let i=0;i<resp["students"].length;i++){
                            //     temp={"column1":resp["students"][i]["first_name"],"column2":resp["students"][i]["last_name"],"column3":"View"};
                            //     new_arr.push(temp);
                            // }
                        
                                $('#services').DataTable({
                                    pageLength: 50,
                                    data: resp["students"],
                                    columns: [
                                        { title: 'First Name', data: 'first_name' },
                                        { title: 'Last Name', data: 'last_name' },
                                        { title: 'Action', data: null, className: 'text-center',
                                                                    render: function(data, type, row) {
                                                                        // Use staticValue for every row in the third column
                                                                        return `<a href="/studentdetail/${data["id"]}" target='_blank'>View</a>`;
                                                                    }},
                                        // Add more columns as needed
                                    ]
                                    // Additional DataTable options can be added here
                                });

                            console.log(resp["students"]);
                        }catch(error){
                            console.error('DataTable initialization error:', error);
                        }
                        $("#show_hide_table").show();                        
                    }
                    if(resp["status"]=="error"){
                        $("#no_student_found").text("No Student Enrolled"); 
                    }
                },
                error:function(){

                }
            });
        });
    </script>
@endsection