@extends('layouts.admin')
<title>{{ config('app.name', 'Laravel') }} | Admin | Course Batches</title>
<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;
    }
    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }
    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }
    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 ;
    }

    table.dataTable thead .sorting_asc {
        background-image: none !important;
    }
    table.dataTable thead .sorting{
        background-image: none !important;
    }

</style>
@section('main-content')
    <div style="margin:30px;">
        <div class="row">
            <div class="card w-30 p-3 cardBox col-9">
                <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="ms-5 col-2" style="text-align: right;">
                <a class="btn btn-primary text-white" href="{{route('courses.edit',$course[0]->uuid)}}">Edit</a>
                @if (!$check_enrollments_exists)
                    <form method="POST" action="{{ route('courses.destroy', $course[0]->uuid) }}" style="display: inline;">
                        @csrf
                        @method('DELETE')                        
                        <button type="submit" class="btn text-white" style="background: #dc3545 !important;" onclick="return confirm('Are you sure you want to remove this course?');"> Delete </button>
                    </form>
                @endif
            </div>
        </div>
        @if (isset($batch_list) && count($batch_list))
        <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="/batch-details/{{$batch->id}}" class="btn btn-outline-primary get_description" target="_blank">View More !!!</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
            @else
                <h4 class="mt-5">No batch Found</h4>
            @endif    
        </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>First Name</th>
                            <th>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="/students/{{$student->uuid}}" target='_blank'>View</a>
                                </td>
                            </tr>
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
        @if (count($batch_list)>0)
            <h4 style="text-align: center;" id="no_student_found">{{(count($student_list)==0)?"No Student Enrolled":""}}</h4>
        @endif

    </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();
        }

        $(document).ready(function() {
            $(document).on('draw.dt', '#services', function() {
                $('#services').find('.sorting_asc').removeClass('sorting_asc');
                $('#services').find('.sorting_desc').removeClass('sorting_desc');
            });
            var table = $('#services');

            $(".get_student_list").on("click",function(){
                // call ajax;
                $.ajax({
                    url:"/getstudentsList",
                    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{
                                if ($.fn.DataTable.isDataTable(table)) {
                                    table.DataTable().destroy();
                                }
                            
                                    $('#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) {
                                                                            return `<a href="/studentdetail/${data["id"]}" target='_blank'>View</a>`;
                                                                        }},
                                        ],
                                    });

                            }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