@extends('layouts.teacher')
@include('datepicker')
<style>
    .card_flexBox {
        display: flex;
        gap: 20px;
        padding: 0 30px 0 0;
        flex-wrap: wrap;
        margin: 0 0 40px;
    }
    .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;
    }
</style>

@section('main-content')
<div style="margin-left:30px; margin-top:20px;">
    <h3>
        <input type="text" id="datepicker" class="form-control bg-white" placeholder="Select Your Date" value="{{$requested_date}}" readonly style="width:115px; ">
    </h3>
    <div class="card_flexBox">
        @if (count($course_list)>0)
            @foreach ($course_list as $course)
                <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">{{strtoupper($course->coursename)}}</h5>
                    <p class="card-text">
                        <span>Standard</span>: {{$course->class_name."th"}}<br/>
                        <span>Start Date</span>: {{dateformatter($course->start_date)}} <br/>
                        <span>End Date</span>: {{dateformatter($course->end_date)}}<br/>
                    </p>
                    <a href="/timeline/{{$course->id}}" class="btn btn-outline-primary">Explore !!!</a>
                    </div>
                </div>
            @endforeach
        @else
            <div style="text-align: center;">
                <img src="https://i.etsystatic.com/34040508/r/il/48b919/3644388392/il_fullxfull.3644388392_n66v.jpg" width="55%" alt="nothing present"/>
            </div>
        @endif
    </div>
</div>


<script>
    function dateformatter(date){
        let year=date.substring(0,4),month=date.substring(5,7),day=date.substring(8);
        const date_formatted=day+'-'+month+'-'+year;
        return date_formatted;
    }
    let open_datepicker=false;
    jQuery(function($) {
        $("#datepicker").datepicker({
            dateFormat: "dd-mm-yy",
            onSelect: function(dateText, inst) {
                $.ajax({
                    url:"/timeline",
                    headers:{
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type:'GET',
                    data:{'date':dateText},
                    success:function(resp){
                        $(".card_flexBox").html(`<div style="text-align: center;">Please wait while processing your request.</div>`);
                        if(resp["status"]=="success"){
                            let card_list="";
                            if(resp["course_list"].length==0){
                                card_list+=`<div style="text-align: center;">
                                                <img src="https://i.etsystatic.com/34040508/r/il/48b919/3644388392/il_fullxfull.3644388392_n66v.jpg" width="55%" alt="nothing present"/>
                                            </div>`;
                            }
                            $.each(resp["course_list"],function(index, value){
                                card_list+=`<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">${this.coursename.toUpperCase()}</h5>
                                                <p class="card-text">
                                                    <span>Standard</span>: ${this.class_name}<br/>
                                                    <span>Start Date</span>: ${dateformatter(this.start_date)}<br/>
                                                    <span>End Date</span>: ${dateformatter(this.end_date)}<br/>
                                                </p>
                                                <a href="/timeline/${this.id}" class="btn btn-outline-primary">Explore !!!</a>
                                                </div>
                                            </div>`
                            });
                            $(".card_flexBox").html(card_list);

                        }
                    }
                });
            }
        });
    });

</script>
@endsection