{{--
  ============================================================
  VERSI RESPONSIF MOBILE-FIRST — create.blade.php (Jam Kerja)
  Ganti file resources/views/instansi/jam-kerja/create.blade.php
  ============================================================
--}}
<x-app-layout title="Tambah Jam Kerja">
@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
:root{
    --sky:#0284c7;--sky-d:#0369a1;--sky-l:#e0f2fe;
    --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);
    --p:#4f46e5;--pl:#eef2ff;
}
*,*::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:560px;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(--sky);border-color:rgba(2,132,199,.3);background:var(--sky-l);}
.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,#0284c7,#38bdf8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(2,132,199,.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;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.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[type="text"],.form-group input[type="number"]{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;width:100%;}
.form-group input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(2,132,199,.1);background:white;}
.error-message{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.hint-text{font-size:11px;color:var(--muted2);font-weight:500;margin-top:5px;}
.alert-error{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;}
.alert-error svg{width:15px;height:15px;stroke:#dc2626;flex-shrink:0;margin-top:1px;fill:none;}
.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(--sky-l);color:var(--sky);}
.btn-sky{background:linear-gradient(135deg,#0284c7,#0ea5e9);color:white;box-shadow:0 4px 14px rgba(2,132,199,.3);}
.btn-sky:hover{transform:translateY(-1px);}
.btn-sky svg{stroke:white;}
@media(max-width:600px){
    .form-wrap{padding:16px 14px 80px;}
    .form-row{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="{{ route('instansi.jam-kerja.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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div>
                <div class="form-card-title">Tambah Jam Kerja</div>
                <div class="form-card-sub">Atur jadwal shift kerja karyawan</div>
            </div>
        </div>

        <div class="form-card-body">
            @if($errors->any())
            <div class="alert-error">
                <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>
                {{ $errors->first() }}
            </div>
            @endif

            <form method="POST" action="{{ route('instansi.jam-kerja.store') }}" id="form-jamkerja">
                @csrf
                <div class="form-row">
                    <div class="form-group">
                        <label>Jam Masuk</label>
                        <input type="text" name="jam_masuk" id="jam_masuk"
                               value="{{ old('jam_masuk') }}" placeholder="07:00:00" required>
                        @error('jam_masuk')<span class="error-message">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group">
                        <label>Jam Pulang</label>
                        <input type="text" name="jam_pulang" id="jam_pulang"
                               value="{{ old('jam_pulang') }}" placeholder="16:00:00" required>
                        @error('jam_pulang')<span class="error-message">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="form-group">
                    <label>Toleransi Terlambat (Menit)</label>
                    <input type="number" name="toleransi_menit"
                           value="{{ old('toleransi_menit', 15) }}" min="0" max="120" required>
                    <p class="hint-text">Batas waktu keterlambatan yang masih diizinkan.</p>
                    @error('toleransi_menit')<span class="error-message">{{ $message }}</span>@enderror
                </div>
            </form>
        </div>

        <div class="form-card-ft">
            <a href="{{ route('instansi.jam-kerja.index') }}" class="btn btn-ghost">Batal</a>
            <button type="submit" form="form-jamkerja" class="btn btn-sky">
                <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 Jam Kerja
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
const fpCfg = { enableTime:true, noCalendar:true, dateFormat:"H:i:S", time_24hr:true };
flatpickr("#jam_masuk", fpCfg);
flatpickr("#jam_pulang", fpCfg);
</script>
@endpush
</x-app-layout>