<x-app-layout title="Edit Karyawan">

@push('styles')
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
    --ink:#0f172a;--ink-muted:#64748b;--ink-subtle:#94a3b8;
    --surface:#ffffff;--surface-raised:#f8fafc;--surface-hover:#f1f5f9;
    --border:#e2e8f0;--border-focus:#0f172a;
    --accent:#4f46e5;--accent-light:#eef2ff;
    --danger:#ef4444;--danger-light:#fef2f2;
    --ok:#059669;--ok-light:#ecfdf5;
    --radius:10px;
    --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-md:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0;}

.karyawan-wrapper{
    font-family:'Plus Jakarta Sans',sans-serif;
    min-height:100vh;background:#f1f5f9;
    background-image:radial-gradient(circle at 20% 10%,rgba(79,70,229,.06) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(99,102,241,.05) 0%,transparent 50%);
    display:flex;align-items:flex-start;justify-content:center;padding:32px 16px 80px;
}

.karyawan-card{background:var(--surface);border-radius:20px;width:100%;max-width:580px;box-shadow:var(--shadow-md),0 0 0 1px rgba(0,0,0,.04);overflow:hidden;animation:slideUp .4s cubic-bezier(.16,1,.3,1) both;}

/* ── Header ── */
.card-header{padding:28px 32px 24px;border-bottom:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden;}
.card-header::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(79,70,229,.08) 0%,transparent 70%);border-radius:50%;}
.header-badge{display:inline-flex;align-items:center;gap:6px;background:var(--accent-light);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:12px;}
.header-badge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.card-header h2{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-.4px;line-height:1.2;}
.card-header p{font-size:13.5px;color:var(--ink-muted);margin-top:5px;line-height:1.5;}
.header-av{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;background:var(--accent-light);border-radius:var(--radius);border:1px solid #c7d2fe;}
.header-av-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#818cf8);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:white;flex-shrink:0;}
.header-av-name{font-size:14px;font-weight:700;color:var(--ink);}
.header-av-nip{font-size:12px;color:var(--ink-muted);margin-top:2px;font-family:'DM Mono',monospace;}

/* ── Body ── */
.card-body{padding:28px 32px;}

/* Alert */
.alert-error{background:var(--danger-light);border:1px solid #fecaca;border-radius:var(--radius);padding:14px 16px;margin-bottom:24px;display:flex;gap:12px;align-items:flex-start;}
.alert-error-icon{width:18px;height:18px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--danger);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.alert-error ul{list-style:none;font-size:13px;color:#b91c1c;line-height:1.7;}
.alert-ok{background:var(--ok-light);border:1px solid #a7f3d0;border-radius:var(--radius);padding:13px 16px;margin-bottom:24px;display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:600;color:var(--ok);}
.alert-ok svg{width:15px;height:15px;stroke:var(--ok);fill:none;flex-shrink:0;}

/* Section */
.section-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-subtle);margin:24px 0 14px;display:flex;align-items:center;gap:10px;}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}
.section-label:first-child{margin-top:0;}

/* Form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{margin-bottom:16px;position:relative;}
.form-group:last-child{margin-bottom:0;}
.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:.01em;}
.form-group label .required{color:var(--danger);margin-left:2px;}
.form-group label .optional{color:var(--ink-subtle);font-size:11px;font-weight:400;margin-left:4px;}
.form-control{width:100%;height:42px;padding:0 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);outline:none;transition:border-color .18s,box-shadow .18s,background .18s;appearance:none;}
.form-control:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px rgba(15,23,42,.06);}
.form-control:hover:not(:focus){border-color:#cbd5e1;background:var(--surface-raised);}
.form-control::placeholder{color:var(--ink-subtle);}
textarea.form-control{height:auto;padding:12px 14px;resize:vertical;min-height:88px;line-height:1.5;}
.select-wrapper{position:relative;}
.select-wrapper select.form-control{padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.font-mono{font-family:'DM Mono',monospace;font-size:13.5px;letter-spacing:.03em;}

/* Password toggle */
.input-wrapper{position:relative;}
.input-wrapper .form-control{padding-right:44px;}
.toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink-subtle);padding:4px;transition:color .15s;}
.toggle-password:hover{color:var(--ink);}
.toggle-password svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.field-hint{font-size:11.5px;color:var(--ink-subtle);margin-top:5px;line-height:1.4;}

/* ── Footer ── */
.card-footer{padding:18px 32px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border);background:var(--surface-raised);}
.btn-back{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink-muted);text-decoration:none;padding:10px 16px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .18s;}
.btn-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.btn-back:hover{background:var(--surface-hover);border-color:#cbd5e1;color:var(--ink);}
.btn-submit{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;color:#fff;background:var(--accent);border:1.5px solid var(--accent);padding:10px 24px;border-radius:var(--radius);cursor:pointer;transition:all .18s;letter-spacing:-.01em;flex:1;justify-content:center;}
.btn-submit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.btn-submit:hover{background:#3730a3;border-color:#3730a3;box-shadow:0 4px 12px rgba(79,70,229,.3);}
.btn-submit:hover svg{transform:translateX(2px);}
.btn-submit:active{transform:scale(.98);}

@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Responsive ── */
@media(max-width:600px){
    .karyawan-wrapper{padding:14px 12px 80px;}
    .card-header{padding:20px 18px;}
    .card-body{padding:20px 18px;}
    .card-footer{padding:14px 18px 20px;flex-direction:column-reverse;}
    .btn-submit,.btn-back{width:100%;justify-content:center;}
    .form-row{grid-template-columns:1fr;}
    .card-header h2{font-size:18px;}
}
</style>
@endpush

<div class="karyawan-wrapper">
    <div class="karyawan-card">

        {{-- Header --}}
        <div class="card-header">
            <div class="header-badge">
                <svg viewBox="0 0 24 24"><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>
                Edit Karyawan
            </div>
            <h2>Perbarui Data Karyawan</h2>
            <p>Ubah informasi yang diperlukan, lalu simpan perubahan.</p>

            <div class="header-av">
                <div class="header-av-icon">{{ strtoupper(substr($karyawan->nama, 0, 2)) }}</div>
                <div>
                    <div class="header-av-name">{{ $karyawan->nama }}</div>
                    <div class="header-av-nip">NIP: {{ $karyawan->nip }}</div>
                </div>
            </div>
        </div>

        {{-- Body --}}
        <div class="card-body">

            @if(session('success'))
                <div class="alert-ok">
                    <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                    {{ session('success') }}
                </div>
            @endif

            @if($errors->any())
                <div class="alert-error">
                    <svg class="alert-error-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <ul>
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('instansi.karyawan.update', $karyawan->id) }}" method="POST" id="formEdit">
                @csrf
                @method('PUT')

                <div class="section-label">Identitas</div>

                <div class="form-row">
                    <div class="form-group">
                        <label>NIP <span class="required">*</span></label>
                        <input type="text" name="nip" class="form-control font-mono"
                               placeholder="1234567890"
                               value="{{ old('nip', $karyawan->nip) }}" required>
                    </div>
                    <div class="form-group">
                        <label>Nama Lengkap <span class="required">*</span></label>
                        <input type="text" name="nama" class="form-control"
                               placeholder="Nama karyawan"
                               value="{{ old('nama', $karyawan->nama) }}" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>Jabatan <span class="required">*</span></label>
                        <div class="select-wrapper">
                            <select name="jabatan_id" class="form-control" required>
                                <option value="">Pilih jabatan</option>
                                @foreach($jabatans as $jabatan)
                                    <option value="{{ $jabatan->id }}"
                                        {{ old('jabatan_id', $karyawan->jabatan_id) == $jabatan->id ? 'selected' : '' }}>
                                        {{ $jabatan->nama_jabatan }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Jam Kerja <span class="required">*</span></label>
                        <div class="select-wrapper">
                            <select name="jam_kerja_id" class="form-control" required>
                                <option value="">Pilih jam kerja</option>
                                @foreach($jamKerjas as $jam)
                                    <option value="{{ $jam->id }}"
                                        {{ old('jam_kerja_id', $karyawan->jam_kerja_id) == $jam->id ? 'selected' : '' }}>
                                        {{ \Carbon\Carbon::parse($jam->jam_masuk)->format('H:i') }} –
                                        {{ \Carbon\Carbon::parse($jam->jam_pulang)->format('H:i') }}
                                        (±{{ $jam->toleransi_menit }}m)
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="section-label">Akun & Kontak</div>

                <div class="form-group">
                    <label>Email <span class="required">*</span></label>
                    <input type="email" name="email" class="form-control"
                           placeholder="nama@instansi.go.id"
                           value="{{ old('email', $karyawan->user->email ?? '') }}" required>
                </div>

                <div class="form-group">
                    <label>
                        Password Baru
                        <span class="optional">(kosongkan jika tidak diubah)</span>
                    </label>
                    <div class="input-wrapper">
                        <input type="password" name="password" class="form-control"
                               id="passwordField" placeholder="Minimal 6 karakter">
                        <button type="button" class="toggle-password" onclick="togglePassword()">
                            <svg id="eyeIcon" viewBox="0 0 24 24">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                <circle cx="12" cy="12" r="3"/>
                            </svg>
                        </button>
                    </div>
                    <div class="field-hint">Biarkan kosong jika tidak ingin mengubah password.</div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>No. HP <span class="required">*</span></label>
                        <input type="text" name="no_hp" class="form-control font-mono"
                               placeholder="08xxxxxxxxxx"
                               value="{{ old('no_hp', $karyawan->no_hp) }}" required>
                    </div>
                    <div class="form-group" style="grid-column:1 / -1;">
                        <label>Alamat <span class="required">*</span></label>
                        <textarea name="alamat" class="form-control"
                                  placeholder="Jalan, kelurahan, kecamatan, kota" required>{{ old('alamat', $karyawan->alamat) }}</textarea>
                    </div>
                </div>

            </form>
        </div>

        {{-- Footer --}}
        <div class="card-footer">
            <a href="{{ route('instansi.karyawan.index') }}" class="btn-back">
                <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
                Kembali
            </a>
            <button type="submit" form="formEdit" class="btn-submit" id="btnSubmit">
                <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                Simpan Perubahan
            </button>
        </div>

    </div>
</div>

@push('scripts')
<script>
function togglePassword() {
    const field = document.getElementById('passwordField');
    const icon  = document.getElementById('eyeIcon');
    const show  = field.type === 'password';
    field.type  = show ? 'text' : 'password';
    icon.innerHTML = show
        ? `<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
           <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
           <line x1="1" y1="1" x2="23" y2="23"/>`
        : `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`;
}

document.getElementById('formEdit').addEventListener('submit', function () {
    const btn = document.getElementById('btnSubmit');
    btn.disabled = true;
    btn.innerHTML = `
        <svg viewBox="0 0 24 24" style="animation:spin .7s linear infinite;width:15px;height:15px;fill:none;stroke:white;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;">
            <circle cx="12" cy="12" r="10" stroke-opacity=".25"/>
            <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round"/>
        </svg>
        Menyimpan…`;
});
</script>
@endpush

</x-app-layout>