@extends('layouts.main')

@section('title', "Mata Pelajaran | KelasMaju")

@section('content-header')
<style>
    select[multiple] {
        width: 100%;
        min-height: 100px;
        padding: 5px;
    }
</style>
<div class="container">
    <h2 class="mt-4">Kelola Pembelajaran</h2>

    {{-- Form Tambah Pembelajaran --}}
    <div class="card my-4">
        <div class="card-header">Tambah Pembelajaran</div>
        <div class="card-body">
            <form action="{{ route('pembelajaran.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <!-- Form Input Pembelajaran -->
                <div class="mb-3">
                    <label for="judul" class="form-label">Mata Pelajaran</label>
                    <input type="text" class="form-control" id="judul" name="judul" required>
                    @error('judul')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="deskripsi" class="form-label">Deskripsi</label>
                    <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3" required></textarea>
                    @error('deskripsi')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="video" class="form-label">Upload Video (Opsional)</label>
                    <input type="file" class="form-control" id="video" name="video" accept="video/*">
                    @error('video')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="audio" class="form-label">Upload Audio (Opsional, MP3/WAV)</label>
                    <input type="file" class="form-control" id="audio" name="audio" accept="audio/*">
                    @error('audio')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="bacaan" class="form-label">Bacaan (Opsional)</label>
                    <textarea class="form-control" id="bacaan" name="bacaan" rows="3"></textarea>
                    @error('bacaan')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            <div class="mb-3">
                <label for="users" class="form-label">Pilih User (Tahan Ctrl untuk memilih beberapa)</label>
                <select name="user_ids[]" id="users" class="form-control" multiple required>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">
                            {{ $user->name }} (Gaya Belajar: {{ $user->student ? $user->student->gaya_belajar : 'Tidak Diatur' }})
                        </option>
                    @endforeach
                </select>
                @error('user_ids')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </form>
        </div>
    </div>

    {{-- Daftar Pembelajaran --}}
    <div class="card">
        <div class="card-header">Daftar Pembelajaran</div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Mata Pelajaran</th>
                        <th>Deskripsi</th>
                        <th>Video</th>
                        <th>Audio</th>
                        <th>Bacaan</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                @foreach ($pembelajarans as $pembelajaran)
                    <tr>
                        <td>{{ $pembelajaran->judul }}</td>
                        <td>{{ $pembelajaran->deskripsi }}</td>
                        <td>
                            @if ($pembelajaran->video)
                            <video width="200" controls>
                                <source src="{{ asset('video/' . $pembelajaran->video) }}" type="video/mp4">
                            </video>
                            @else
                                <em>-</em>
                            @endif
                        </td>
                        <td>
                            @if ($pembelajaran->audio)
                            <audio controls>
                                <source src="{{ asset('audio/' . $pembelajaran->audio) }}" type="audio/mpeg">
                            </audio>
                            @else
                                <em>-</em>
                            @endif
                        </td>
                        <td>{{ $pembelajaran->bacaan ?? '-' }}</td>
                        <td>
                            <form action="{{ route('pembelajaran.destroy', $pembelajaran->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection