@extends('layout.user')

@section('content')
<main id="main" class="main">
    <div class="pagetitle d-flex justify-content-between align-items-center">
        <div>
            <h1>Riwayat Pendidikan & Pengalaman Kerja</h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/dashboard">Home</a></li>
                    <li class="breadcrumb-item active">Riwayat Pendidikan & Pekerjaan</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="section mt-3">
        <div class="row">
            <div class="col-lg-12">
                @include('User.components.rpl-stepper')

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <p class="text-muted">Lengkapi riwayat pendidikan dan pengalaman kerja Anda sebelumnya. Anda dapat menambahkan lebih dari satu entri untuk masing-masing kategori.</p>

                @if($isLocked ?? false)
                    <div class="alert alert-warning d-flex align-items-center border-0 shadow-sm" role="alert">
                        <i class="bi bi-lock-fill me-2"></i>
                        <div>Data tidak dapat diubah karena self-assessment sudah dikirim.</div>
                    </div>
                @endif

                <!-- RIWAYAT PENDIDIKAN -->
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title fw-bold m-0"><i class="bi bi-mortarboard me-2 text-primary"></i>Riwayat Pendidikan</h5>
                            @if(!($isLocked ?? false))
                                <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addPendidikanModal">
                                    <i class="bi bi-plus-lg me-1"></i> Tambah Pendidikan
                                </button>
                            @endif
                        </div>

                        @forelse($riwayat_pendidikan as $item)
                            <div class="border rounded-4 p-3 mb-3 d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="fw-bold mb-1">{{ $item->nama_institusi }}</h6>
                                    <div class="text-muted small mb-1">
                                        {{ $item->jenjang ?? '-' }} @if($item->jurusan) &middot; {{ $item->jurusan }} @endif
                                    </div>
                                    <div class="text-muted small">
                                        {{ $item->tahun_masuk ?? '-' }} &ndash; {{ $item->tahun_lulus ?? '-' }}
                                    </div>
                                    @if($item->deskripsi)
                                        <p class="small mt-2 mb-0">{{ $item->deskripsi }}</p>
                                    @endif
                                    @if($item->bukti)
                                        <a href="{{ route('riwayat-camaba-file', ['filename' => basename($item->bukti)]) }}" target="_blank" class="btn btn-sm btn-outline-info mt-2">
                                            <i class="bi bi-file-earmark-check me-1"></i> Lihat Bukti
                                        </a>
                                    @endif
                                </div>
                                @if(!($isLocked ?? false))
                                    <form action="{{ route('riwayat-camaba-delete', $item->id) }}" method="POST" onsubmit="return confirm('Hapus riwayat ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        @empty
                            <div class="text-center text-muted py-3">Belum ada riwayat pendidikan yang ditambahkan.</div>
                        @endforelse
                    </div>
                </div>

                <!-- RIWAYAT PEKERJAAN -->
                <div class="card border-0 shadow-sm rounded-4 mb-4">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title fw-bold m-0"><i class="bi bi-briefcase me-2 text-primary"></i>Riwayat Pekerjaan</h5>
                            @if(!($isLocked ?? false))
                                <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#addPekerjaanModal">
                                    <i class="bi bi-plus-lg me-1"></i> Tambah Pekerjaan
                                </button>
                            @endif
                        </div>

                        @forelse($riwayat_pekerjaan as $item)
                            <div class="border rounded-4 p-3 mb-3 d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="fw-bold mb-1">{{ $item->posisi_jabatan ?? '-' }} @if($item->nama_perusahaan) &middot; {{ $item->nama_perusahaan }} @endif</h6>
                                    <div class="text-muted small mb-1">
                                        {{ $item->tahun_mulai ?? '-' }} &ndash; {{ $item->masih_bekerja ? 'Sekarang' : ($item->tahun_selesai ?? '-') }}
                                    </div>
                                    @if($item->deskripsi)
                                        <p class="small mt-2 mb-0">{{ $item->deskripsi }}</p>
                                    @endif
                                    @if($item->bukti)
                                        <a href="{{ route('riwayat-camaba-file', ['filename' => basename($item->bukti)]) }}" target="_blank" class="btn btn-sm btn-outline-info mt-2">
                                            <i class="bi bi-file-earmark-check me-1"></i> Lihat Bukti
                                        </a>
                                    @endif
                                </div>
                                @if(!($isLocked ?? false))
                                    <form action="{{ route('riwayat-camaba-delete', $item->id) }}" method="POST" onsubmit="return confirm('Hapus riwayat ini?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-danger btn-sm rounded-pill">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        @empty
                            <div class="text-center text-muted py-3">Belum ada riwayat pekerjaan yang ditambahkan.</div>
                        @endforelse
                    </div>
                </div>

                <!-- Stepper Navigation buttons -->
                <div class="d-flex justify-content-between mt-4 pt-3 border-top">
                    <a href="{{ route('profile-view-camaba') }}" class="btn btn-outline-secondary rounded-pill px-4 py-2">
                        <i class="bi bi-arrow-left me-2"></i> Sebelumnya
                    </a>
                    @php
                        $next_enabled = $riwayat_pendidikan->count() > 0 || $riwayat_pekerjaan->count() > 0;
                    @endphp
                    @if($next_enabled)
                        <a href="{{ route('bukti-alih-jenjang-view') }}" class="btn btn-primary rounded-pill px-4 py-2">
                            Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                        </a>
                    @else
                        <button type="button" class="btn btn-primary rounded-pill px-4 py-2" disabled data-bs-toggle="tooltip" data-bs-placement="top" title="Tambahkan minimal 1 riwayat pendidikan atau pekerjaan untuk melanjutkan">
                            Selanjutnya <i class="bi bi-arrow-right ms-2"></i>
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Modal Tambah Pendidikan -->
<div class="modal fade" id="addPendidikanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <form action="{{ route('riwayat-camaba-add') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="jenis" value="pendidikan">
                <div class="modal-header px-4 pt-4 border-0">
                    <h5 class="modal-title fw-bold">Tambah Riwayat Pendidikan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Nama Institusi / Sekolah / Kampus</label>
                        <input type="text" class="form-control rounded-3" name="nama_institusi" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Jenjang</label>
                            <select class="form-select rounded-3" name="jenjang">
                                <option value="">Pilih Jenjang</option>
                                <option>SD</option>
                                <option>SMP</option>
                                <option>SMA/SMK</option>
                                <option>D1</option>
                                <option>D2</option>
                                <option>D3</option>
                                <option>D4/S1</option>
                                <option>S2</option>
                                <option>S3</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Jurusan</label>
                            <input type="text" class="form-control rounded-3" name="jurusan">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Tahun Masuk</label>
                            <input type="text" class="form-control rounded-3" name="tahun_masuk" placeholder="Contoh: 2018">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Tahun Lulus</label>
                            <input type="text" class="form-control rounded-3" name="tahun_lulus" placeholder="Contoh: 2022">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Deskripsi (opsional)</label>
                        <textarea class="form-control rounded-3" name="deskripsi" rows="2"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Bukti Pendukung (opsional)</label>
                        <input type="file" class="form-control rounded-3" name="bukti" accept=".pdf,.jpg,.jpeg,.png">
                        <small class="text-muted" style="font-size: 0.75rem;">Maksimal 2MB, format PDF/JPG/PNG.</small>
                    </div>
                </div>
                <div class="modal-footer px-4 pb-4 border-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Tambah Pekerjaan -->
<div class="modal fade" id="addPekerjaanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <form action="{{ route('riwayat-camaba-add') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="jenis" value="pekerjaan">
                <div class="modal-header px-4 pt-4 border-0">
                    <h5 class="modal-title fw-bold">Tambah Riwayat Pekerjaan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-4 py-3">
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Nama Perusahaan / Instansi</label>
                        <input type="text" class="form-control rounded-3" name="nama_perusahaan" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Posisi / Jabatan</label>
                        <input type="text" class="form-control rounded-3" name="posisi_jabatan">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Tahun Mulai</label>
                            <input type="text" class="form-control rounded-3" name="tahun_mulai" placeholder="Contoh: 2020">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small">Tahun Selesai</label>
                            <input type="text" class="form-control rounded-3 tahun-selesai-input" name="tahun_selesai" placeholder="Contoh: 2023">
                        </div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input masih-bekerja-check" name="masih_bekerja" value="1" id="masihBekerja">
                        <label class="form-check-label small" for="masihBekerja">Masih bekerja di sini sampai sekarang</label>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Deskripsi Pekerjaan (opsional)</label>
                        <textarea class="form-control rounded-3" name="deskripsi" rows="2"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small">Bukti Pendukung (opsional)</label>
                        <input type="file" class="form-control rounded-3" name="bukti" accept=".pdf,.jpg,.jpeg,.png">
                        <small class="text-muted" style="font-size: 0.75rem;">Maksimal 2MB, format PDF/JPG/PNG. Contoh: SK Kerja, Surat Pengalaman Kerja.</small>
                    </div>
                </div>
                <div class="modal-footer px-4 pb-4 border-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const masihBekerja = document.getElementById('masihBekerja');
    const tahunSelesaiInput = document.querySelector('.tahun-selesai-input');
    if (masihBekerja && tahunSelesaiInput) {
        masihBekerja.addEventListener('change', function () {
            tahunSelesaiInput.disabled = this.checked;
            if (this.checked) tahunSelesaiInput.value = '';
        });
    }
});
</script>
@endpush