@extends('Layouts.app')

@section('content')
<main class="flex-1 p-6 space-y-6">
    <div class="bg-white p-6 rounded-xl shadow">
    <h2 class="text-2xl font-semibold text-gray-800 mb-2">
            Daftar Course
    </h2>
        <nav class="text-sm text-gray-600">
            <ol class="flex flex-wrap space-x-2">
                <li>
                    <a href="{{ route('dashboard') }}" class="text-blue-600 hover:underline">Dashboard</a>
                </li>
                
                <li>/</li>
                <li>
                    <a href="#" class="text-blue-600 hover:underline">Daftar Course</a>
                </li>
            </ol>
        </nav>
    </div>

<!--@auth-->
<!--    @if(auth()->user()->level === 'superadmin')-->
<!--<div class="bg-white p-6 rounded-xl shadow">-->
<!--    <h2 class="text-2xl font-semibold text-gray-800 mb-4">-->
<!--        {{ isset($course) ? 'Edit Course' : 'Tambah Course' }}-->
<!--    </h2>-->

<!--    {{-- Form Tambah / Edit --}}-->
<!--    <form action="{{ isset($course) ? route('courses.update', $course->id) : route('courses.store') }}" -->
<!--          method="POST" class="space-y-4">-->
<!--        @csrf-->
<!--        @if(isset($course))-->
<!--            @method('PUT')-->
<!--        @endif-->
        
<!--<div>-->
<!--    <label class="block text-sm font-medium text-gray-700">Nama Dosen</label>-->
<!--    <select name="lecturer_name" class="w-full border rounded-lg p-2" required>-->
<!--        <option value="">-- Pilih Dosen --</option>-->
<!--        @foreach($dosens as $dosen)-->
<!--<option value="{{ $dosen->nama }}" -->
<!--    {{ old('lecturer_name', $course->lecturer_name ?? '') == $dosen->nama ? 'selected' : '' }}>-->
<!--    {{ $dosen->nama }}-->
<!--</option>-->
<!--        @endforeach-->
<!--    </select>-->
<!--</div>-->

        
<!--        <div>-->
<!--            <label class="block text-sm font-medium text-gray-700">Jurusan</label>-->
<!--            <input type="text" name="title" value="{{ old('title', $course->title ?? '') }}" class="w-full border rounded-lg p-2" required>-->
<!--        </div>-->
        
<!--        <div>-->
<!--            <label class="block text-sm font-medium text-gray-700">Matakuliah</label>-->
<!--            <input type="text" name="description" value="{{ old('description', $course->description ?? '') }}" class="w-full border rounded-lg p-2" required>-->
<!--        </div>-->

<!--        <div>-->
<!--            <label class="block text-sm font-medium text-gray-700">Kode Matakuliah</label>-->
<!--            <input type="text" name="code" value="{{ old('code', $course->code ?? '') }}" class="w-full border rounded-lg p-2" required>-->
<!--        </div>-->

<!--        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">-->
<!--            {{ isset($course) ? 'Update' : 'Simpan' }}-->
<!--        </button>-->
<!--    </form>-->
<!--</div>-->
<!--    @endif-->
<!--@endauth-->

    
    {{-- Alert Success --}}
@if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative my-4" role="alert">
        <strong>Sukses!</strong> {{ session('success') }}
    </div>
@endif

{{-- Alert Error (optional) --}}
@if(session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative my-4" role="alert">
        <strong>Gagal!</strong> {{ session('error') }}
    </div>
@endif
    
<div class="bg-white p-6 rounded-xl shadow stripe">
    
        {{-- Search Form --}}
    <form method="GET" action="{{ route('courses.index') }}" class="mb-4">
        <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Cari Course:</label>
        <input type="search" id="search" name="search" 
               value="{{ request('search') }}" 
               placeholder="Masukkan kata kunci..." 
               class="w-60 border rounded-lg p-2">
    </form>
    
    @foreach($courses as $course) 
        <p class="text-lg my-4 flex justify-between items-center ">
<div class="flex justify-between items-center my-2">
    {{-- Info Course di kiri --}}
    <span>
        {{ $course->title }} | {{ $course->code }} | {{ $course->description }} | {{ $course->lecturer_name }} | {{ $course->semester }} {{ $course->academic_year }}
    </span>

    {{-- Tombol Aksi di kanan --}}
<!--@auth-->
<!--    @if(auth()->user()->level === 'superadmin')-->
<!--    <div class="flex space-x-2">-->
<!--        {{-- Tombol Edit --}}-->
<!--        <a href="{{ route('courses.edit', $course->id) }}" -->
<!--           class="p-2 bg-yellow-400 h-9 rounded hover:scale-110 transition" title="Edit">-->
<!--            <i class="fa fa-edit text-white"></i>-->
<!--        </a>-->

<!--        {{-- Tombol Delete --}}-->
<!--        <form action="{{ route('courses.destroy', $course->id) }}" method="POST" -->
<!--              onsubmit="return confirm('Yakin ingin menghapus course ini?')">-->
<!--            @csrf-->
<!--            @method('DELETE')-->
<!--            <button type="submit" -->
<!--                class="p-2 bg-red-500 rounded hover:scale-110 transition" title="Delete">-->
<!--                <i class="fa fa-trash text-white"></i>-->
<!--            </button>-->
<!--        </form>-->
<!--    </div> -->
<!--    @endif-->
<!--@endauth-->
</div>


            <div class="flex items-center space-x-3">
                {{-- Tombol Enrol --}}
                <form action="{{ route('enrol.store', $course->id) }}" method="POST" 
                      onsubmit="return confirm('Apakah kamu yakin ingin enrol mata kuliah ini?')">
                    @csrf
                    <button type="submit" class="hover:scale-110 transition" title="Enrol">
                        <i class="fa fa-sign-in text-blue-600"></i>
                    </button>
                </form>

                
            </div>
        </p>
        <hr>
    @endforeach 
<div class="mt-6 flex justify-center">
    {{ $courses->links('pagination::tailwind') }} 
</div>
</div>

    </main>
    @endsection
    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "-- Pilih --",
            allowClear: true
        });
    });
</script>