@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | View Batch</title>

@section('main-content')
<!-- froala editor -->
<style>
    .input {
        color: black
    }

    #loader {
        text-align: center;
        /* Align the loader to the center */
        margin-left: 15px;
        /* Adjust this value to manage space between loader and button */
        width: auto;
        display: inline-block;
    }

    #loader img {
        width: 30px;
    }
    #topicField .fr-box, .fr-toolbar.fr-desktop {
        width: 100% !important;
    }
    #topicField .fr-sticky-on {
        position: absolute;
    }
    table.dataTable thead .sorting_asc {
        background-image: none !important;
    }
    table.dataTable thead .sorting{
        background-image: none !important;
    }
    .target_div_ajax {
        height: 450px; 
        overflow-y: auto;
    }
    ul{
        padding-left: 1rem;
    }
    .cardBox img.rounded{
        width: 100%;
        margin: 0 auto;
        height: 170px;
        object-fit: contain;
        background-color: #f9f9f9;
        margin-top: 1.5rem;
    }
    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }
    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }
</style>
<div id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif
</div>

<div class="col-md-6 alert alert-danger print-error-msg" style="display:none">
    <ul></ul>
</div>

<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y row">
        <div class="col-6">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Batch /</span> {{ucwords($batch[0]->name)}} </h4>
        </div>
        <div class="col-6">
            <div class="text-end upgrade-btn">
                <a href="{{ route('batches.edit', ['batch' => $batch[0]->uuid]) }}" class="btn btn-primary text-white">Edit</a>
                @if (!$check_enrollments_exists)
                    <form method="POST" action="{{ route('batches.destroy', $batch[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 batch?');"> Delete </button>
                    </form>
                @endif

            </div>
        </div>
        <!-- Basic Layout -->
        <div class="row">
            <div class="col-xl">
                <div class="card mb-1">
                    <div class="card-body">
                        <div class="row">
                            <div class="card w-20 mh-75 cardBox col-4">
                                <img class="rounded" src="../assets/img/elements/2.jpg" alt="Card image cap" style="width:50%;margin-left:19%">
                                <div class="card-body">
                                    <h4 class="card-title">{{ucwords($batch[0]->name)}}</h4>
                                    <h5>( {{$batch[0]->teacher->first_name?ucwords($batch[0]->teacher->first_name):'N/A'}} {{$batch[0]->teacher->last_name?ucwords($batch[0]->teacher->last_name):'N/A' }} )</h5>
                                    <ul class="card-text">
                                        <li>Mode: {{strtoupper($batch[0]->mode)}}</li>
                                        <li>Standard: {{$batch[0]->class_name}}</li>
                                        <li>Start Time: {{date("h:i a", strtotime($batch[0]->start_time))}}</li>
                                        <li>End Time: {{date("h:i a", strtotime($batch[0]->end_time))}}</li>
                                    </ul>
                                    <a href="javascript:void(0);" class="btn btn-primary mb-2" id="get_educator">Educator Details</a>
                                    <a href="javascript:void(0);" class="btn btn-primary mb-2" id="get_students">Students List</a>
                                </div>
                            </div>
                            <div class="col-7 mh-75 border rounded ms-5 target_div_ajax">                       
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- / Content -->
    <div class="content-backdrop fade"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>

    function get_educator(){
        $.ajax({
            url:"{{route('teachers.show',$batch[0]->teacher->id)}}",
            type:"get",
            headers:{
                "X-CSRF-TOKEN":$('meta[name="csrf-token"]').attr('content'),
            },
            success:function(resp){
                if(resp["status"]=="success"){
                    $(".target_div_ajax").html("");
                    let make_html="";
                    if(resp["msg"]=="educator"){
                        make_html=
                                ` <h3 class="mt-1">Educator Details</h3>
                                        <table class="table">
                                            <tbody>
                                                <tr>
                                                    <th class="fs-4" scope="row">Name</th>
                                                    <td class="fs-4">${(resp["educator"])?(resp["educator"][0]["first_name"]?resp["educator"][0]["first_name"]:'-'):'-'} ${(resp["educator"])?resp["educator"][0]["last_name"]:'-'}</td>
                                                </tr>    
                                                <tr>
                                                    <th class="fs-4" scope="row">Mail</th>
                                                    <td class="fs-4">${(resp["educator"])?(resp["educator"][0]["email"]?resp["educator"][0]["email"]:'-'):'-'}</td>
                                                </tr>
                                                <tr>    
                                                    <th class="fs-4" scope="row">Mobile</th>
                                                    <td class="fs-4">${(resp["educator"])?(resp["educator"][0]["phone"]?resp["educator"][0]["phone"]:'-'):'-'}</td>
                                                </tr>
                                                <tr>
                                                    <th class="fs-4" scope="row">Age</th>
                                                    <td class="fs-4">${(resp["age"])?(resp["age"]?(resp["age"]+" y/o"):'-'):'-'}</td>
                                                </tr>
                                                <tr>
                                                    <th class="fs-4 " scope="row">Qualification</th>
                                                    <td class="fs-4">${(resp["education"])?((resp["education"][0]["education_type"]==1)?"Diploma":((resp["education"][0]["education_type"]==2)?"Bachelor's":(resp["education"][0]["education_type"]==3)?"Master's":(resp["education"][0]["education_type"]==4?"PHD":"-"))):"-"}</td>
                                                </tr>
                                                <tr>
                                                    <th class="fs-4 " scope="row">Stream Name</th>
                                                    <td class="fs-4">${(resp["education"])?((resp["education"][0]["name"]!=null)?resp["education"][0]["name"]:"-"):"-"}</td>
                                                </tr>
                                                <tr>
                                                    <th class="fs-4 " scope="row">Specialization</th>
                                                    <td class="fs-4">${(resp["education"])?((resp["education"][0]["specialization"]!=null)?resp["education"][0]["specialization"]:"-"):"-"}</td>
                                                </tr>

                                            </tbody>
                                        </table>
                                        <div class="align-bottom mt-2">
                                            <a href="{{route('teachers.edit', ['teacher' => $batch[0]->teacher->uuid]) }}" class="btn btn-primary text-white ">View More</a>    
                                        </div>`;
                    }else{
                        make_html=`<div>Something went wrong while fetching educator details please try again later.</div>`;
                    }
                    $(".target_div_ajax").html(make_html);
                }
            },
            error:function(){
                
            }
        });
    }
    // get educator details on loading page first time.
    get_educator();

    $("#get_educator").on("click",function(e){
        e.preventDefault();
        e.stopPropagation();
        $(".target_div_ajax").html(`<div class='fs-2'>Please wait....</div>`);
        get_educator();
    });

    $("#get_students").on("click",function(e){
        e.preventDefault();
        e.stopPropagation();
        $(".target_div_ajax").html(`<div class='fs-2'>Please wait....</div>`);

        $.ajax({
            url:"/getstudentsList",
            type:"POST",
            headers:{
                'X-CSRF-Token':$("meta[name='csrf-token']").attr('content'),
            },
            data:{id:{{$batch[0]->id}}},
            success:function(resp){
                if(resp["status"]=="success"){
                    
                    $(".target_div_ajax").html(`<div class="table dataTable text-nowrap dtbl_dropdown" id="show_hide_table">
                        <table class="table" id="services" style="width:90%;">
                            <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">
                            </tbody>
                        </table>
                    </div>`);
                    try{

                        var table = $('#services');
                        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="/students/${data["uuid"]}" target='_blank'>View</a>`;
                                                                }},
                                ]
                            });

                        console.log(resp["students"]);
                    }catch(error){
                        console.error('DataTable initialization error:', error);
                    }
                }
                if(resp["status"]=="error"){
                    $(".target_div_ajax").html("<div class='fs-3'>No Student Enrolled</div>"); 
                }
            },
            error:function(){
                
            }
        });
    });
</script>
@endsection