@if ($faculty !='')
    <div class="intro-y flex flex-col gap-5 sm:flex-row">
        <div class="left w-full mt-5">
            <div class="intro-y col-span-12 sm:col-span-6 flex gap-3 border rounded-md p-4">
                <div class="w-full">
                    <div class="intro-y col-span-12 sm:col-span-6">
                        <div class="mb-2 font-bold">Select Year </div>
                        <select wire:model="courseYear" class="input w-full border flex-1">
                            @foreach ($yearsToShow as $year)
                                <option value="{{$year}}"> {{$year}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                @if ($courseYear != '')
                <div class="w-full">
                    <div class="intro-y col-span-12 sm:col-span-6">
                        <div class="mb-2 font-bold">Select term </div>
                        <select wire:model="trimester" class="input w-full border flex-1">
                            <option> Trimester 1</option>
                            <option> Trimester 2</option>
                            <option> Trimester 3</option>
                        </select>
                    </div>
                </div>
                @endif
                @if ($trimester != '')
                <div class="w-full">
                    <div class="intro-y col-span-12 sm:col-span-6">
                        <div class="mb-2 font-bold">Select course </div>
                        <select wire:model="course" class="input w-full border flex-1">
                            <option> Electrical Engineering </option>
                            <option> Mechanical Engineering</option>
                        </select>
                    </div>
                </div>
                @endif
            </div>
            @if ($course != '')
            <div class="intro-y col-span-12 sm:col-span-6 border rounded-md p-4 mt-3">
                <div class="mb-2 font-bold">Select N-Level </div>
                <div class="flex justify-between">
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('1')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === '1' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N1 @if($n_level === '1') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('n2')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === 'n2' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N2 @if($n_level === 'n2') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('n3')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === 'n3' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N3 @if($n_level === 'n3') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('n4')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === 'n4' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N4 @if($n_level === 'n4') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('n5')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === 'n5' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N5 @if($n_level === 'n5') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                    <div>
                        <input class="hidden" type="electrical" name="Electrical" id="electrical">
                        <label wire:click="selectLevel('n6')" for="electrical" class="flex flex-col p-2 border rounded-md justify-center items-center cursor-pointer {{ $n_level === 'n6' ? 'bg-green-300' : '' }} hover:bg-gray-200">
                            <span class="flex text-samll"> N6 @if($n_level === 'n6') <x-feathericon-check class="w-4 h-4 text-black ml-3 bg-white  rounded-full"/>@endif</span>
                        </label>
                    </div>
                </div>
            </div>
            @endif
            @if ($n_level != '')
                <div class="intro-y col-span-12 sm:col-span-6 border rounded-md p-4 mt-4 h-64 overflow-x-auto">
                    <div class="flex justify-between">
                        <div class="mb-1 font-bold">Select Subjects For {{ strtoupper($course) }} @if($n_level !='') (N{{ strtoupper($n_level) }}) @endif  {{ strtoupper($trimester) }} </div>
                        <div class="flex">
                            <div class="relative text-gray-700 dark:text-gray-300">
                                <input type="text" class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13" placeholder="Search subject...">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                            </div>
                        </div>
                    </div>
                    <table class="table table--sm mt-5">
                        <thead>
                            <tr class="bg-gray-200 text-gray-700">
                                <th class="whitespace-no-wrap">Description</th>
                                <th class="whitespace-no-wrap">Subject</th>
                                <th class="whitespace-no-wrap">Attendance </th>
                                <th class="whitespace-no-wrap">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subjects as $subject)
                                <form>
                                    <tr>
                                        <td class="border-b dark:border-dark-5">
                                            <input type="hidden" wire:modal="subject_name" value="{{ $subject->subject_name }}" >
                                            {{ $subject->subject_name}}
                                            </td>
                                        <td class="border-b dark:border-dark-5"> {{ $subject->subject_code}}</td>

                                        <td class="border-b dark:border-dark-5">
                                            <select wire:model="attendance" name="attentace">
                                                <option selected disabled hidden >Attendance</option>
                                                <option value="fulltime" >FullTime</option>
                                                <option value="sat" >Saturday</option>
                                                <option value="eve" >Evenings</option>
                                                <option value="exam" >Exam-only</option>
                                            </select>
                                        </td>
                                        <td class="border-b dark:border-dark-5 ">
                                            <div wire:click="addSubject({{ $subject->id }})" class="flex items-center rounded-md cursor-pointer bg-green-500" >
                                                {{-- <input class="" type="button" alue="Add"> --}}
                                                <span class="pl-2" >Add</span>
                                                <x-feathericon-plus class="w-3 h-3"/>
                                            </div>
                                        </td>
                                    </tr>
                                </form>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
        <div class="right w-full mt-5">
            <div class="intro-y col-span-12 sm:col-span-6 border rounded-md p-4">
                <div class="flex flex-1 gap-5">
                    <div class="flex flex-col">
                        <div class="mb-2 font-bold">Course Details</div>
                        <div class="flex flex-1 items-center py-2 px-2 rounded-md bg-gray-100">
                            <div class="flex flex-col">
                                @if (!empty($nated_course_details))
                                    <div class="flex">
                                        <div class="font-bold"> Faculty : </div>
                                        <span class="ml-3">{{ $nated_course_details['faculty'] }} </span>
                                    </div>
                                    <div class="flex">
                                        <div class="font-bold"> Year :</div>
                                        {{ $nated_course_details['year'] }}
                                    </div>
                                    <div class="flex">
                                        <div class="font-bold"> Trimester :</div>
                                        <span class="ml-3">{{ $nated_course_details['trimester'] }}</span>
                                    </div>
                                    <div class="flex">
                                        <div class="font-bold"> N-Level :</div>
                                        <span class="ml-3">{{ $nated_course_details['n_level'] }}</span>
                                    </div>
                                    <div class="flex">
                                        <div class="font-bold"> Course :</div>
                                        <span class="ml-3"> {{ $nated_course_details['course'] }}</span>
                                    </div>
                                @endif
                            </div>
                            <x-feathericon-x class="w-3 h-3 mx-5 text-white bg-black cursor-pointer rounded-full hover:bg-red-600"/>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="mb-2 font-bold">Selected Subjects</div>
                        @foreach ($selectedSubject as $selected)
                            <div class="flex flex-col py-2 px-2 rounded-md bg-gray-100">
                                <div class="flex flex-col">
                                    @if (!empty($nated_course_details))
                                        <div class="flex">
                                            <div class="font-bold"> Subject Name : </div>
                                            <span class="ml-3"> {{ $selected['subject_name'] }}</span>
                                        </div>
                                        <div class="flex">
                                            <div class="font-bold"> subject code :</div>
                                            <span class="ml-3"> {{ $selected['subject_code'] }}</span>
                                        </div>
                                        <div class="flex">
                                            <div class="font-bold"> Attendance :</div>
                                            <span class="ml-3"> </span>
                                        </div>
                                    @endif
                                </div>
                                <x-feathericon-x class="w-3 h-3 mx-5 text-white bg-black cursor-pointer rounded-full hover:bg-red-600"/>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif