236 lines
10 KiB
PHP
236 lines
10 KiB
PHP
@extends('layouts.bk')
|
||
@section('title',"Edit Info · {$jurusan->nama_jurusan}")
|
||
@section('page-title','Info Jurusan')
|
||
@section('page-sub','FR-BK-08/09 · Kelola fasilitas & prospek kerja jurusan kamu')
|
||
|
||
@push('styles')
|
||
<style>
|
||
/* ── HEADER JURUSAN RESPONSIVE ── */
|
||
.jurusan-header {
|
||
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
|
||
border-radius: 14px;
|
||
padding: 20px 24px;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.jurusan-header-icon {
|
||
width: 52px;
|
||
height: 52px;
|
||
border-radius: 12px;
|
||
background: rgba(255,255,255,.15);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.jurusan-header-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.jurusan-header-label {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
color: rgba(255,255,255,.6);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.jurusan-header-name {
|
||
font-family: 'Poppins', sans-serif;
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.jurusan-header-badge {
|
||
background: rgba(255,255,255,.15);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 5px 12px;
|
||
border-radius: 100px;
|
||
border: 1px solid rgba(255,255,255,.2);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.jurusan-header {
|
||
padding: 16px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.jurusan-header-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.jurusan-header-name {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.jurusan-header-badge {
|
||
/* Di mobile, badge pindah ke baris baru dan rata kiri */
|
||
width: 100%;
|
||
text-align: center;
|
||
order: 3;
|
||
}
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
|
||
{{-- HEADER JURUSAN --}}
|
||
<div class="jurusan-header">
|
||
<div class="jurusan-header-icon">🏫</div>
|
||
<div class="jurusan-header-info">
|
||
<div class="jurusan-header-label">Jurusan yang Kamu Kelola</div>
|
||
<div class="jurusan-header-name">{{ $jurusan->nama_jurusan }}</div>
|
||
</div>
|
||
<div>
|
||
<span class="jurusan-header-badge">✏️ Mode Edit</span>
|
||
</div>
|
||
</div>
|
||
|
||
@if(session('success'))
|
||
<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-left:3px solid #22c55e;border-radius:9px;padding:12px 16px;margin-bottom:16px;font-size:13px;color:#15803d;">
|
||
✅ {{ session('success') }}
|
||
</div>
|
||
@endif
|
||
|
||
<form method="POST" action="{{ route('bk.infojurusan.update', $jurusan->id) }}">
|
||
@csrf @method('PUT')
|
||
|
||
{{-- FASILITAS --}}
|
||
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;">
|
||
<span style="font-size:18px;">🏗️</span>
|
||
<div>
|
||
<div style="font-family:'Syne',sans-serif;font-size:13.5px;font-weight:800;color:#0d1117;">Fasilitas Jurusan</div>
|
||
<div style="font-size:11px;color:#94a3b8;">Deskripsikan fasilitas yang tersedia di jurusan ini</div>
|
||
</div>
|
||
</div>
|
||
<textarea name="fasilitas" rows="4"
|
||
placeholder="Contoh: Lab komputer 40 unit, peralatan praktik lengkap, ruang bengkel..."
|
||
style="width:100%;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-family:'DM Sans',sans-serif;font-size:13px;padding:10px 14px;outline:none;resize:vertical;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">{{ old('fasilitas', $info->fasilitas ?? '') }}</textarea>
|
||
</div>
|
||
|
||
{{-- PROSPEK UMUM --}}
|
||
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.05);">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;">
|
||
<span style="font-size:18px;">💼</span>
|
||
<div>
|
||
<div style="font-family:'Syne',sans-serif;font-size:13.5px;font-weight:800;color:#0d1117;">Prospek Kerja Umum</div>
|
||
<div style="font-size:11px;color:#94a3b8;">Peluang karir untuk lulusan jurusan ini</div>
|
||
</div>
|
||
</div>
|
||
<div id="prospek-umum">
|
||
@forelse($prospekUmum as $p)
|
||
<div style="display:flex;gap:8px;margin-bottom:8px;">
|
||
<input name="prospek_umum[]" value="{{ $p }}"
|
||
placeholder="Contoh: Network Engineer..."
|
||
style="flex:1;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13px;padding:9px 13px;outline:none;min-width:0;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
|
||
<button type="button" onclick="this.closest('div').remove()"
|
||
style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer;flex-shrink:0;">✕</button>
|
||
</div>
|
||
@empty
|
||
<div style="display:flex;gap:8px;margin-bottom:8px;">
|
||
<input name="prospek_umum[]"
|
||
placeholder="Contoh: Network Engineer..."
|
||
style="flex:1;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13px;padding:9px 13px;outline:none;min-width:0;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
|
||
<button type="button" onclick="this.closest('div').remove()"
|
||
style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer;flex-shrink:0;">✕</button>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
<button type="button" onclick="addRow('prospek-umum','prospek_umum','Contoh: Network Engineer...')"
|
||
style="background:#f8fafc;color:#374151;border:1.5px solid #e2e8f0;border-radius:9px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;margin-top:4px;">
|
||
＋ Tambah Prospek
|
||
</button>
|
||
</div>
|
||
|
||
{{-- PROSPEK ALUMNI --}}
|
||
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.05);">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f1f5f9;">
|
||
<span style="font-size:18px;">🎓</span>
|
||
<div>
|
||
<div style="font-family:'Syne',sans-serif;font-size:13.5px;font-weight:800;color:#0d1117;">Prospek Kerja Alumni</div>
|
||
<div style="font-size:11px;color:#94a3b8;">Pencapaian dan karir alumni jurusan ini</div>
|
||
</div>
|
||
</div>
|
||
<div id="prospek-alumni">
|
||
@forelse($prospekAlumni as $p)
|
||
<div style="display:flex;gap:8px;margin-bottom:8px;">
|
||
<input name="prospek_alumni[]" value="{{ $p }}"
|
||
placeholder="Contoh: Bekerja di PT Telkom..."
|
||
style="flex:1;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13px;padding:9px 13px;outline:none;min-width:0;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
|
||
<button type="button" onclick="this.closest('div').remove()"
|
||
style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer;flex-shrink:0;">✕</button>
|
||
</div>
|
||
@empty
|
||
<div style="display:flex;gap:8px;margin-bottom:8px;">
|
||
<input name="prospek_alumni[]"
|
||
placeholder="Contoh: Bekerja di PT Telkom..."
|
||
style="flex:1;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13px;padding:9px 13px;outline:none;min-width:0;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
|
||
<button type="button" onclick="this.closest('div').remove()"
|
||
style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer;flex-shrink:0;">✕</button>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
<button type="button" onclick="addRow('prospek-alumni','prospek_alumni','Contoh: Bekerja di PT Telkom...')"
|
||
style="background:#f8fafc;color:#374151;border:1.5px solid #e2e8f0;border-radius:9px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;margin-top:4px;">
|
||
＋ Tambah Alumni
|
||
</button>
|
||
</div>
|
||
|
||
{{-- ACTIONS --}}
|
||
<div style="display:flex;justify-content:flex-end;">
|
||
<button type="submit"
|
||
style="padding:11px 28px;border-radius:10px;font-size:13px;font-weight:700;background:linear-gradient(135deg,#0d1117,#1c2333);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);">
|
||
💾 Simpan Perubahan
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
function addRow(containerId, inputName, placeholder) {
|
||
const wrap = document.getElementById(containerId);
|
||
const div = document.createElement('div');
|
||
div.style.cssText = 'display:flex;gap:8px;margin-bottom:8px;';
|
||
div.innerHTML = `
|
||
<input name="${inputName}[]" placeholder="${placeholder}"
|
||
style="flex:1;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:9px;font-size:13px;padding:9px 13px;outline:none;min-width:0;"
|
||
onfocus="this.style.borderColor='#2563eb';this.style.background='#fff'"
|
||
onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
|
||
<button type="button" onclick="this.closest('div').remove()"
|
||
style="background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:9px;padding:8px 12px;font-size:12px;cursor:pointer;flex-shrink:0;">✕</button>
|
||
`;
|
||
wrap.appendChild(div);
|
||
}
|
||
</script>
|
||
@endpush |