@extends('guru.layout')
@section('title','Pelatihan')
@section('content')
    <div style="max-width:900px;margin:0 auto">
        <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.04);padding:16px">
            <div class="card" style="border:0;background:transparent">
                <div class="card-header" style="background:transparent;border-bottom:0;padding:0;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-direction:column;align-items:flex-start">
                    <h3 style="margin:0">Pelatihan Kompetensi Guru</h3>
                    <p style="margin:8px 0 0;color:#666">Daftar Pelatihan yang telah diikut beserta dokumen bukti dukung pelatihan</p>
                </div>

                <form action="{{ url()->current() }}" method="POST" enctype="multipart/form-data" style="margin-bottom:14px">
                    @csrf
                    <div style="display:flex;flex-direction:column;gap:8px">
                        <label style="font-weight:600;color:#333">No. Dokumen
                            <input type="text" name="no_dokumen" placeholder="Masukkan nomor dokumen" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-top:6px">
                        </label>

                        <label style="font-weight:600;color:#333">Jenis Dokumen
                            <input type="text" name="jenis_dokumen" placeholder="Contoh: Sertifikat, Surat Tugas" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-top:6px">
                        </label>

                        <label style="font-weight:600;color:#333">Deskripsi
                            <textarea name="deskripsi" rows="3" placeholder="Deskripsi singkat" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;margin-top:6px"></textarea>
                        </label>

                        <label style="font-weight:600;color:#333">Upload Dokumen Pelatihan
                            <input type="file" name="dokumen_pelatihan" accept=".pdf,.jpg,.jpeg,.png" style="display:block;margin-top:6px">
                        </label>

                        <div>
                            <button type="submit" style="background:#0d6efd;color:#fff;border:0;padding:8px 12px;border-radius:6px;cursor:pointer">Upload Dokumen</button>
                        </div>
                    </div>
                </form>

                <div class="card-body">
                    @if(isset($items) && count($items))
                        <h4 style="margin:0 0 8px 0">Daftar Dokumen Pelatihan Guru</h4>
                        <div style="overflow:auto">
                            <table style="width:100%;border-collapse:collapse">
                                <thead>
                                    <tr style="background:#f8f9fa;text-align:left">
                                        <th style="padding:8px;border:1px solid #eee">No</th>
                                        <th style="padding:8px;border:1px solid #eee">No. Dokumen</th>
                                        <th style="padding:8px;border:1px solid #eee">Jenis Dokumen</th>
                                        <th style="padding:8px;border:1px solid #eee">Deskripsi</th>
                                        <th style="padding:8px;border:1px solid #eee">File</th>
                                        <th style="padding:8px;border:1px solid #eee">Tanggal</th>
                                        <th style="padding:8px;border:1px solid #eee">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($items as $it)
                                        <tr>
                                            <td style="padding:8px;border:1px solid #eee">{{ $loop->iteration }}</td>
                                            <td style="padding:8px;border:1px solid #eee">{{ $it->no_dokumen ?? ($it->no ?? '') }}</td>
                                            <td style="padding:8px;border:1px solid #eee">{{ $it->jenis_dokumen ?? ($it->jenis ?? '') }}</td>
                                            <td style="padding:8px;border:1px solid #eee">{{ $it->deskripsi ?? '' }}</td>
                                            <td style="padding:8px;border:1px solid #eee">
                                                @php $path = $it->file_path ?? ($it->file ?? null); @endphp
                                                @if($path)
                                                    <a href="{{ asset($path) }}" target="_blank">Lihat</a>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td style="padding:8px;border:1px solid #eee">{{ isset($it->created_at) ? $it->created_at : (isset($it['created_at']) ? $it['created_at'] : '') }}</td>
                                            <td style="padding:8px;border:1px solid #eee">
                                                <form action="{{ url('/guru/pelatihan/' . ($it->id ?? ($it['id'] ?? '')) . '/delete') }}" method="POST" style="display:inline" onsubmit="return confirm('Hapus dokumen ini?')">
                                                    @csrf
                                                    <button type="submit" style="background:#dc3545;color:#fff;border:0;padding:6px 10px;border-radius:6px;cursor:pointer">Hapus</button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p>Belum ada data pelatihan.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection