{{--
  ============================================================
  VERSI RESPONSIF MOBILE-FIRST — edit.blade.php (Jabatan)
  Ganti file resources/views/instansi/jabatan/edit.blade.php
  ============================================================
--}}
<x-app-layout title="Edit Jabatan">
@push('styles')
<style>
:root{
    --p:#4f46e5;--pd:#3730a3;--pl:#eef2ff;
    --text:#0f172a;--muted:#64748b;--muted2:#94a3b8;
    --border:#e2e8f0;--bg:#f0f4ff;--white:#ffffff;
    --sh:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.05);
    --violet:#7c3aed;--primary-m:rgba(79,70,229,.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);}
.form-wrap{max-width:520px;margin:0 auto;padding:24px 20px 80px;}
.btn-back{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:none;margin-bottom:18px;padding:8px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:10px;transition:all .15s;width:100%;justify-content:center;}
.btn-back:hover{color:var(--p);border-color:rgba(79,70,229,.3);background:var(--pl);}
.btn-back svg{width:14px;height:14px;stroke:currentColor;fill:none;}
.form-card{background:var(--white);border:1px solid var(--border);border-radius:20px;box-shadow:var(--sh);overflow:hidden;}
.form-card-hd{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;}
.form-card-ico{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--p),var(--violet));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px var(--primary-m);}
.form-card-ico svg{width:20px;height:20px;stroke:white;fill:none;}
.form-card-title{font-size:1rem;font-weight:800;color:var(--text);}
.form-card-sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;}
.form-card-body{padding:24px;}
.form-card-ft{padding:16px 24px;border-top:1px solid var(--border);background:#f8fafc;display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 20px 20px;}
.form-group{display:flex;flex-direction:column;margin-bottom:16px;}
.form-group:last-child{margin-bottom:0;}
.form-group label{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.form-group input{padding:11px 14px;border:1.5px solid var(--border);border-radius:11px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text);background:var(--bg);outline:none;transition:all .15s;}
.form-group input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.1);background:white;}
.error-message{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;text-decoration:none;border:none;transition:all .15s;}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;}
.btn-ghost{background:var(--white);color:var(--muted);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--pl);color:var(--p);}
.btn-primary{background:linear-gradient(135deg,var(--p),var(--violet));color:white;box-shadow:0 4px 14px rgba(79,70,229,.25);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-primary svg{stroke:white;}
@media(max-width:600px){
    .form-wrap{padding:16px 14px 80px;}
    .form-card-body{padding:18px;}
    .form-card-ft{flex-direction:column-reverse;}
    .btn{width:100%;justify-content:center;}
}
</style>
@endpush

<div class="form-wrap">
    <a href="{{ route('instansi.jabatan.index') }}" class="btn-back">
        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
        Kembali
    </a>

    <div class="form-card">
        <div class="form-card-hd">
            <div class="form-card-ico">
                <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
            </div>
            <div>
                <div class="form-card-title">Edit Jabatan</div>
                <div class="form-card-sub">Perbarui informasi jabatan</div>
            </div>
        </div>

        <div class="form-card-body">
            @if($errors->any())
            <div style="display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;margin-bottom:16px;font-size:13px;font-weight:600;color:#dc2626;">
                {{ $errors->first() }}
            </div>
            @endif

            <form action="{{ route('instansi.jabatan.update', $jabatan->id) }}" method="POST" id="form-jabatan">
                @csrf
                @method('PUT')
                <div class="form-group">
                    <label>Nama Jabatan</label>
                    <input type="text" name="nama_jabatan"
                           value="{{ old('nama_jabatan', $jabatan->nama_jabatan) }}"
                           placeholder="Nama jabatan..." required autofocus>
                    @error('nama_jabatan')<span class="error-message">{{ $message }}</span>@enderror
                </div>
            </form>
        </div>

        <div class="form-card-ft">
            <a href="{{ route('instansi.jabatan.index') }}" class="btn btn-ghost">Batal</a>
            <button type="submit" form="form-jabatan" class="btn btn-primary">
                <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Update Jabatan
            </button>
        </div>
    </div>
</div>
</x-app-layout>