@extends('student.layouts.app')
@section('titlePage', 'Course - Status')
@section('content')
@push('script')
<script>
    document.getElementById("drs-1").classList.add("is-expanded");
    document.getElementById("dr-1").classList.add("active");
    document.getElementById("free_course").classList.add("active");
</script>
@endpush
@php
    if($dataConfigs['brand'] == 'default' || $dataConfigs == 'dark'){
        $default_course_image = is_default()['course_blue'];
    } else {
        $default_course_image = is_default()['course_green'];
    }
  
@endphp

<div class="row mt-3">
    <div class="col">
         <div class="card">
            <div class="card-header">
                <h3 class="breadcrumb-item active font-weight-bold text-uppercase">Course-Status</h3>
            </div>

            <div class="card-body">
                @include('common.alert')
                <div class="row">
                    <form class="form-inline" action="" method="GET">
                        <div class="form-group mr-2 mb-2">
                            <input type="text" value="{{request()->get('q')}}" class="form-control" name="q" placeholder="Enter ..." required minlength="2">
                        </div>
                        <button type="submit" class="btn btn-primary mb-2" style="margin-left:5px;"><i class="fa fa-search"></i> Search</button>
                        <a href="{{ _route('student.courses.index')}}" class="btn btn-secondary mb-2" style="margin-left:5px;"><i class="fa fa-times"></i> Reset</a>
                        
                    </form>
                    <div class="mt-2 col-sm-12">
                        <div class="table-responsive dt-responsive">
                            <div class="row">
                                @foreach ($start_meetings as $meeting)
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 ">
                                    <div class="card overflow-hidden "> 
                                        <div class="card-body" style="height :240px">
                        
                                        <div class="d-lg-flex ">
                                        <div class="col-6">
                                            <!-- @if (!empty($meeting->image))
                                                        <img src="{{ $meeting->image }}" width="150px"/>
                                            @endif -->
                                            <img src="{{$default_course_image}}" alt="img">
                                        </div>
                                        <div class="col-6">
                        
                                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
                                                <div class="">

                                                    <div class="">
                                                        <h5 class="tx-muted font-weight-semibold text-primary mb-2 text-uppercase">{{ $meeting->topic }}</h5>
                                                    </div>    
                                                    <div class="">  
                                                               
                                                    </div>
                                                </div>  

                                                <div style="white-space:nowrap; overflow:hidden my-2">
                                                <p class="my-2">{{$meeting->start_date}}</p>
                                                </div>

                                                <p class=" tx-14 mb-1"><i class="bi bi-alarm me-2 tx-17 tx-primary"></i><strong>Start : </strong>
                                                {{$meeting->start_date}}
                                                </p>
                                              
                                              
                                               
                                                    <!-- <a href="{{ _route('student.courses.detail', $meeting->id) }}" class="btn btn-primary">View Now</a> -->
                                                    <div class="col-xl col-lg col-md col-sm">
                                                        <a href="{{ _route('student.master_class.startMeeting', $meeting->meeting_id) }}" class="btn btn-primary p-1">View Now</a>
                                                    </div>
                                          
                                                </div>
                                            </div> 
                                        </div>
                                     </div>
                                </div>   
                            </div>  
                        @endforeach                                  
                    </div>
                </div>        
            </div>

        </div> 
    </div>	        
</div>
                {{-- Pagination --}}
               

                             </div>
                </div>
				
	</div>
	<!-- [ Main Content ] end -->
</div>
@endsection
@push('script')
<script>
	@if(session()->has('close_window'))
	setTimeout(() => {
		window.close();
	}, 2000);
	@endif
        $('.test-table').dataTable( {
        "paging": false,
        "searching" : false,
		"info" : false,
        });
       // document.getElementById("course").classList.add("is-expanded");
</script>
@endpush