@extends('layout', ['profile' => true])
@section('content')
    <!-- Page Header section start here -->
    <div class="pageheader-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="pageheader-content text-center">
                        <h1 class="font-bold text-[24px] lg:text-[30px]">{{ $course->course_name() }} {{ __e('Overview') }}
                        </h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb justify-content-center mt-2">
                                <li class="breadcrumb-item"><a href="{{ route('profile') }}">{{ __e('profile') }}</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ $course->course_name() }}</a></li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header section ending here -->
    <!-- course section start here -->
    <div class="grid grid-cols-12  my-[20px]">
        <!--first card-->
        {{-- @dd($course->course_sessions()->where('id',89278)->first()) --}}
        @foreach ($course->course_sessions()->orderBy('session_date', 'ASC')->get() as $session)
            <div class="w-[90%] sm:w-3/4 mx-auto  col-span-12 grid grid-cols-12">
                <div class="col-span-1 mt-[20px]">
                    <div class="w-[25px] h-[25px] sm:w-[30px] sm:h-[30px] rounded-full bg-[#EB695D]"></div>
                    @if (!$loop->last)
                        <div class="w-[1px] h-full bg-[#EB695D] ml-[12.5px] sm:ml-[15px]"></div>
                    @endif
                </div>
                <div id="accordion-arrow-icon-{{ $session->id }}" data-accordion="open" class=" col-span-11 mb-[10px] ">
                    <h2 id="accordion-arrow-icon-heading-{{ $session->id }}">
                         
                        <button type="button"
                            class="flex items-center justify-between w-full p-[20px] rounded-md focus:rounded-b-none font-medium text-left text-black text-opacity-75 bg-white drop-shadow-[2px_4px_4px_rgba(0,0,0,0.1)]"
                            data-accordion-target="#accordion-arrow-icon-body-{{ $session->id }}"
                            aria-expanded="{{ $today_session_id == $session->id ? 'true' : 'false' }}"
                            aria-controls="accordion-arrow-icon-body-{{ $session->id }}">
                            <div class="flex">
                                <span
                                    class="md:text-[22px] text-[12px]">{{ $session->title ?? $session->session_date }}</span>
                                @if ($course_customer)
                                    @if ($session->course_customer_attendances()->where('course_customer_id', '=', $course_customer->id)->where('attend', '=', 1)->first())
                                        <i class="fa-regular fa-circle-check text-green-500 ml-3 "></i>
                                    @endif
                                @endif
                            </div>
                            <div class="flex items-center justify-between lg:gap-16 md:gap-3">
                                @if (App\Models\CourseSessionHomework::where('session_id', $session->id)->count() > 0)
                                    @if (auth('instructor')->user())
                                        <a class="md:text-[22px] text-[12px] text-[#38A7B8]"
                                            href="{{ route('instructor.myCourses.homework', ['course' => $course, 'session' => $session]) }}">See
                                            Students homework</a>
                                    @endif
                                @endif
                                <svg class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        </button>
                    </h2>
                    @if (auth('customers')->user())
                        @include('profile._course_details', [
                            'today_session_id' => $today_session_id,
                            'session' => $session,
                            'course' => $course,
                        ])
                    @else
                        @livewire('instracture-course-details-component', ['today_session_id' => $today_session_id, 'session' => $session, 'course' => $course])
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@endsection
<!-- course section ending here -->