{{--
  ============================================================
  VERSI RESPONSIF MOBILE-FIRST — create.blade.php (Karyawan)
  Ganti file resources/views/instansi/karyawan/create.blade.php
  ============================================================
--}}
<x-app-layout title="Tambah Karyawan">
@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;
}
*,*::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:620px;margin:0 auto;padding:24px 20px 80px;}

/* ── BACK BUTTON ── */
.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;}

/* ── CARD ── */
.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 rgba(79,70,229,.25);}
.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;}

/* ── SECTION DIVIDER ── */
.sec-divider{font-size:10.5px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.1em;padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:18px;}

/* ── FORM ── */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fg{display:flex;flex-direction:column;margin-bottom:16px;}
.fg:last-child{margin-bottom:0;}
.fg label{font-size:11px;font-weight:800;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.fg label .req{color:#ef4444;margin-left:2px;}
.fg input,.fg textarea,.fg select{
    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;
    appearance:none;-webkit-appearance:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.1);background:white;}
.fg textarea{resize:vertical;min-height:72px;}
.fg select{
    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='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
}
.ferr{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.font-mono{font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.03em;}

/* ── PASSWORD ── */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted2);padding:4px;border-radius:4px;display:flex;align-items:center;}
.pw-eye:hover{color:var(--p);}
.pw-eye svg{width:15px;height:15px;stroke:currentColor;fill:none;display:block;}

/* ── ERROR BANNER ── */
.err-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;margin-bottom:18px;}
.err-banner svg{width:15px;height:15px;stroke:#dc2626;flex-shrink:0;margin-top:1px;fill:none;}
.err-banner ul{list-style:none;font-size:13px;font-weight:600;color:#dc2626;line-height:1.7;}

/* ── BUTTONS ── */
.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:13px;height:13px;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;}

/* ── RESPONSIVE ── */
@media(max-width:600px){
    .form-wrap{padding:16px 14px 80px;}
    .frow{grid-template-columns:1fr;}
    .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="{{ url()->previous() }}" 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>

    @if($errors->any())
    <div class="err-banner">
        <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><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

    <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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
            </div>
            <div>
                <div class="form-card-title">Tambah Karyawan</div>
                <div class="form-card-sub">Isi data identitas, akun, dan kontak karyawan</div>
            </div>
        </div>

        <div class="form-card-body">
            <form method="POST" action="{{ route('instansi.karyawan.store') }}" id="form-karyawan">
                @csrf

                <div class="sec-divider">Identitas</div>

                <div class="frow">
                    <div class="fg">
                        <label>NIP <span class="req">*</span></label>
                        <input type="text" name="nip" class="font-mono"
                               placeholder="1234567890" value="{{ old('nip') }}" required>
                        @error('nip')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Nama Lengkap <span class="req">*</span></label>
                        <input type="text" name="nama"
                               placeholder="Nama karyawan" value="{{ old('nama') }}" required>
                        @error('nama')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="frow">
                    <div class="fg">
                        <label>Jabatan <span class="req">*</span></label>
                        <select name="jabatan_id" required>
                            <option value="">Pilih jabatan</option>
                            @foreach($jabatans as $jabatan)
                                <option value="{{ $jabatan->id }}" {{ old('jabatan_id') == $jabatan->id ? 'selected' : '' }}>
                                    {{ $jabatan->nama_jabatan }}
                                </option>
                            @endforeach
                        </select>
                        @error('jabatan_id')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Jam Kerja <span class="req">*</span></label>
                        <select name="jam_kerja_id" required>
                            <option value="">Pilih jam kerja</option>
                            @foreach($jamKerjas as $jam)
                                <option value="{{ $jam->id }}" {{ old('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>
                        @error('jam_kerja_id')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="sec-divider" style="margin-top:4px;">Akun & Kontak</div>

                <div class="fg">
                    <label>Email <span class="req">*</span></label>
                    <input type="email" name="email"
                           placeholder="nama@instansi.go.id" value="{{ old('email') }}" required>
                    @error('email')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                <div class="fg">
                    <label>Password <span class="req">*</span></label>
                    <div class="pw-wrap">
                        <input type="password" name="password" id="pw-inp" placeholder="Minimal 8 karakter" required>
                        <button type="button" class="pw-eye" onclick="togglePw()">
                            <svg id="pw-ico" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <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>
                    @error('password')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                <div class="fg">
                    <label>No. HP <span class="req">*</span></label>
                    <input type="text" name="no_hp" class="font-mono"
                           placeholder="08xxxxxxxxxx" value="{{ old('no_hp') }}" required>
                    @error('no_hp')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                <div class="fg" style="margin-bottom:0;">
                    <label>Alamat <span class="req">*</span></label>
                    <textarea name="alamat" placeholder="Jalan, kelurahan, kecamatan, kota" required>{{ old('alamat') }}</textarea>
                    @error('alamat')<span class="ferr">{{ $message }}</span>@enderror
                </div>
            </form>
        </div>

        <div class="form-card-ft">
            <a href="{{ url()->previous() }}" class="btn btn-ghost">Batal</a>
            <button type="submit" form="form-karyawan" 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>
                Simpan Karyawan
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function togglePw() {
    const inp = document.getElementById('pw-inp');
    inp.type = inp.type === 'text' ? 'password' : 'text';
    document.getElementById('pw-ico').innerHTML = inp.type === 'text'
        ? '<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.94M9.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.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><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"/>';
}
</script>
@endpush
</x-app-layout>