@extends('student.layouts.app')
@section('titlePage', 'Course - Status')
@section('content')
@push('script')
<script>
    document.getElementById("kts-3").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">
        <h4 class="text-primary font-weight-bold py-3 mb-0">
            MASTER <span class="text-secondary">CLASS</span>
        </h4>
        <div class="card">
            <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 ..." 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.master_class.masterClassLive')}}" class="btn btn-secondary mb-2 reset" 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">
                                @if(count($meetings) > 0)
                                @foreach ($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="row d-lg-flex align-items-center">
                                                <div class="col-6">
                                                    <!-- @if (!empty($meeting->image))
                                                        <img src="{{ $meeting->image }}" width="150px"/>
                                            @endif -->
                                                    <img src="{{ $meeting->image }}" alt="img" onerror="this.src='{{asset('assets/b2c_img/master_class.svg')}}'; this.alt='Image';">
                                                </div>
                                                <div class="col-6">

                                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 ">
                                                      
                                                            <div class="">
                                                                <h4 class="tx-muted font-weight-semibold text-primary mb-2 text-uppercase">{{ $meeting->topic }}</h4>
                                                            </div>
                                                            <div class="">
                                                                <p class="text-capitalize">{{ $meeting->agenda }}</p>
                                                            </div>
                

                                                        <p class=" tx-14 my-2"><i class="bi bi-alarm me-2 tx-17 tx-primary"></i>
                                                            {{$meeting->start_date}}
                                                        </p>

                                                        <p class=" tx-14 my-2"><i class="fa-regular fa-hourglass-half me-3 tx-17 tx-primary"></i>{{ $meeting->duration }} <span>min</span></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 my-2">
                                                                                                                        <!-- <a class="btn btn-secondary bt" data-bs-target="#dangerModal" data-bs-toggle="modal" href="javascript:void(0)">Help Desk</a> -->
                                                            @php
                                                                $meetingStartTime = \Carbon\Carbon::parse($meeting->start_date);
                                                                $currentTime = now();
                                                                $isWithin10Minutes = $meetingStartTime->diffInMinutes($currentTime) <= 10;
                                                            @endphp
                                                            @if($isWithin10Minutes)
                                                            <!-- <a class="btn btn-secondary bt" href="{{ _route('student.master_class.startMeeting',$meeting->id)}}">Join</a> -->
                                                            <a class="btn btn-secondary bt" href="{{ $meeting->join_url }}">Join</a>
                                                            @else
                                                                <button class="btn btn-secondary mb-2" style="margin-left: 5px;" disabled>Join</button>
                                                            @endif
                                                        </div>
                                                        <div class="modal fade" id="dangerModal" tabindex="-1" aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered modal-fullscreen">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <h4>Add Student</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                                    </div>
                                                                    <div style="position: relative; padding-top: 100%;"><iframe src="{{$meeting->join_url}}" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;background:white" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                @else
                                <h5 class="text-center mt-2">No meetings scheduled</h5>
                                @endif
                            </div>
                        </div>
                    </div>

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


            </div>
</div>
<!-- [ Main Content ] end -->
@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