@extends('simaju.layouts.main')
@section('title', 'Jurnal Mengajar')
@section('page-title', 'Jurnal Mengajar')
@section('content')
<div class="flex justify-between items-center mb-6">
    <h2 class="text-lg font-semibold text-gray-800">Daftar Jurnal Mengajar</h2>
    <a href="{{ route('simaju.jurnal-mengajar.create') }}" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
        Tambah Jurnal
    </a>
</div>

<!-- Filter -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="grid grid-cols-2 md:grid-cols-5 gap-3">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Guru</label>
            <select name="guru_id" class="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">Semua Guru</option>
                @foreach($guruList as $g)
                <option value="{{ $g->id }}" {{ request('guru_id') == $g->id ? 'selected' : '' }}>{{ $g->nama }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Kelas</label>
            <select name="kelas_id" class="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">Semua Kelas</option>
                @foreach($kelasList as $k)
                <option value="{{ $k->id }}" {{ request('kelas_id') == $k->id ? 'selected' : '' }}>{{ $k->nama_kelas }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Mapel</label>
            <select name="mata_pelajaran_id" class="w-full px-3 py-2 border rounded-lg text-sm">
                <option value="">Semua Mapel</option>
                @foreach($mapelList as $m)
                <option value="{{ $m->id }}" {{ request('mata_pelajaran_id') == $m->id ? 'selected' : '' }}>{{ $m->nama_mapel }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal</label>
            <input type="date" name="tanggal" value="{{ request('tanggal') }}" class="w-full px-3 py-2 border rounded-lg text-sm">
        </div>
        <div class="flex items-end gap-2">
            <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-blue-600">Filter</button>
            <a href="{{ route('simaju.jurnal-mengajar.index') }}" class="px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">Reset</a>
        </div>
    </form>
</div>

<!-- Table -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full min-w-[900px]">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Guru</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Kelas</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Materi</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">File</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                    <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($jurnals as $j)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm">{{ $j->tanggal->format('d/m/Y') }}</td>
                    <td class="px-4 py-3 text-sm">{{ $j->guru->nama ?? '-' }}</td>
                    <td class="px-4 py-3 text-sm">{{ $j->kelas->nama_kelas ?? '-' }}</td>
                    <td class="px-4 py-3 text-sm max-w-xs truncate" title="{{ $j->materi }}">{{ Str::limit($j->materi, 25) }}</td>
                    <td class="px-4 py-3">
                        @if($j->kegiatan)
                            @php
                                $ext = strtolower(pathinfo($j->kegiatan, PATHINFO_EXTENSION));
                            @endphp
                            <div class="flex items-center gap-2">
                                @if(in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                    <a href="{{ asset('storage/kegiatan/' . $j->kegiatan) }}" target="_blank" class="flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828l-1.172 1.172m18.028 0l.586.586M6.586 6.586A2 2 0 018 8.586M8 12v6m4-6v6m4-4V10"></path></svg>
                                        <span class="text-xs">IMG</span>
                                    </a>
                                @elseif($ext == 'pdf')
                                    <a href="{{ asset('storage/kegiatan/' . $j->kegiatan) }}" target="_blank" class="flex items-center gap-1 px-2 py-1 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2H9a2 2 0 00-2-2V5a2 2 0 00-2-2h2.586a1 1 0 01.707-.293l.414-.414a2 2 0 012.828 0l4.243 4.243a2 2 0 010 2.828M14 8h.01"></path></svg>
                                        <span class="text-xs">PDF</span>
                                    </a>
                                @endif
                                <a href="{{ route('simaju.jurnal-mengajar.download', $j->id) }}" class="p-1.5 bg-emerald-100 text-emerald-700 rounded-lg hover:bg-emerald-200 transition-colors" title="Download">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4v-9"></path></svg>
                                </a>
                            </div>
                        @else
                            <span class="text-xs text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs rounded-full {{ $j->status_badge }}">{{ $j->status_label }}</span>
                    </td>
                    <td class="px-4 py-3">
                    <div class="flex items-center justify-center gap-1">
                
                        {{-- Lihat --}}
                        <a href="{{ route('simaju.jurnal-mengajar.show', $j->id) }}"
                           class="p-1.5 text-blue-600 hover:bg-blue-50 rounded-lg"
                           title="Lihat">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2"
                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                                </path>
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2"
                                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                </path>
                            </svg>
                        </a>
                
                        {{-- Download --}}
                        @if($j->kegiatan)
                            <a href="{{ route('simaju.jurnal-mengajar.download', $j->id) }}"
                               class="p-1.5 text-emerald-600 hover:bg-emerald-50 rounded-lg"
                               title="Unduh File">
                                <svg class="w-4 h-4"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4">
                                    </path>
                                </svg>
                            </a>
                        @endif
                
                        {{-- Edit --}}
                        <a href="{{ route('simaju.jurnal-mengajar.edit', $j->id) }}"
                           class="p-1.5 text-yellow-600 hover:bg-yellow-50 rounded-lg"
                           title="Edit">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2"
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                                </path>
                            </svg>
                        </a>
                
                        {{-- Hapus --}}
                        <form action="{{ route('simaju.jurnal-mengajar.destroy', $j->id) }}"
                              method="POST"
                              class="inline">
                            @csrf
                            @method('DELETE')
                
                            <button type="submit"
                                    onclick="return confirm('Hapus jurnal ini?')"
                                    class="p-1.5 text-red-600 hover:bg-red-50 rounded-lg"
                                    title="Hapus">
                                <svg class="w-4 h-4"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round"
                                          stroke-linejoin="round"
                                          stroke-width="2"
                                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3m-8 0h10">
                                    </path>
                                </svg>
                            </button>
                        </form>
                
                    </div>
                </td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-4 py-12 text-center text-gray-500">Tidak ada data jurnal mengajar</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@if($jurnals->hasPages())
<div class="mt-4">{{ $jurnals->links() }}</div>
@endif
@endsection