<x-app-layout title="Ajukan Lembur">
@push('styles')
<style>
.wrap{max-width:560px;margin:0 auto;padding:28px 16px 80px;}
.form-card{background:var(--white,#fff);border:1px solid var(--border,#e2e8f0);border-radius:20px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.form-hd{padding:18px 24px;border-bottom:1px solid var(--border,#e2e8f0);display:flex;align-items:center;gap:12px;}
.form-ico{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#3730a3);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(79,70,229,.25);}
.form-ico svg{width:18px;height:18px;stroke:white;}
.form-title{font-size:14px;font-weight:800;color:var(--text,#0f172a);}
.form-sub{font-size:12px;color:var(--muted,#64748b);font-weight:500;margin-top:2px;}
.form-body{padding:24px;}
.form-ft{padding:14px 24px;border-top:1px solid var(--border,#e2e8f0);background:#f8fafc;display:flex;justify-content:flex-end;gap:10px;}

.fg{display:flex;flex-direction:column;margin-bottom:16px;}
.fg label{font-size:11px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.fg input,.fg textarea,.fg select{padding:11px 14px;border:1.5px solid var(--border,#e2e8f0);border-radius:11px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--text,#0f172a);background:#f8fafc;outline:none;transition:all .15s;}
.fg input:focus,.fg textarea:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.1);background:white;}
.fg textarea{resize:vertical;min-height:80px;}
.ferr{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* durasi preview */
.dur-preview{background:#ede9fe;border:1.5px solid #ddd6fe;border-radius:11px;padding:11px 16px;margin-bottom:16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#3730a3;}
.dur-preview svg{width:15px;height:15px;stroke:#4f46e5;flex-shrink:0;}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;border:none;text-decoration:none;transition:all .18s;}
.btn svg{width:13px;height:13px;stroke:currentColor;}
.btn-primary{background:linear-gradient(135deg,#4f46e5,#3730a3);color:white;box-shadow:0 4px 14px rgba(79,70,229,.25);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-ghost{background:white;color:var(--muted,#64748b);border:1.5px solid var(--border,#e2e8f0);}
.btn-ghost:hover{background:#f8fafc;}
.btn-sm{padding:7px 16px;font-size:12.5px;}

@media(max-width:480px){.frow{grid-template-columns:1fr;}}
</style>
@endpush

<div class="wrap">
    <a href="{{ route('karyawan.lembur.index') }}" class="btn btn-ghost btn-sm" style="margin-bottom:18px;display:inline-flex;">
        <svg viewBox="0 0 24 24" fill="none" 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-hd">
            <div class="form-ico">
                <svg viewBox="0 0 24 24" fill="none" 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-title">Ajukan Lembur</div>
                <div class="form-sub">Isi detail pengajuan lembur kamu</div>
            </div>
        </div>

        <div class="form-body">
            @if($errors->any())
            <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:11px;padding:12px 16px;margin-bottom:16px;font-size:13px;font-weight:700;color:#dc2626;display:flex;align-items:center;gap:8px;">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;stroke:#dc2626;flex-shrink:0;"><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('karyawan.lembur.store') }}" id="form-lembur">
                @csrf

                <div class="fg">
                    <label>Tanggal Lembur</label>
                    <input type="date" name="tanggal" id="tgl"
                           value="{{ old('tanggal', today()->toDateString()) }}"
                           min="{{ today()->toDateString() }}" required>
                    @error('tanggal')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                <div class="frow">
                    <div class="fg">
                        <label>Jam Mulai</label>
                        <input type="time" name="jam_mulai" id="jam-mulai"
                               value="{{ old('jam_mulai', '17:00') }}" required
                               onchange="hitungDurasi()">
                        @error('jam_mulai')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Jam Selesai</label>
                        <input type="time" name="jam_selesai" id="jam-selesai"
                               value="{{ old('jam_selesai', '20:00') }}" required
                               onchange="hitungDurasi()">
                        @error('jam_selesai')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                </div>

                {{-- Durasi preview --}}
                <div class="dur-preview" id="dur-preview">
                    <svg viewBox="0 0 24 24" fill="none" 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>
                    <span id="dur-text">3 jam</span>
                </div>

                <div class="fg" style="margin-bottom:0;">
                    <label>Keterangan / Pekerjaan yang Dilakukan</label>
                    <textarea name="keterangan" placeholder="Jelaskan pekerjaan yang akan dilakukan saat lembur..." required>{{ old('keterangan') }}</textarea>
                    @error('keterangan')<span class="ferr">{{ $message }}</span>@enderror
                </div>
            </form>
        </div>

        <div class="form-ft">
            <a href="{{ route('karyawan.lembur.index') }}" class="btn btn-ghost btn-sm">Batal</a>
            <button type="submit" form="form-lembur" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Kirim Pengajuan
            </button>
        </div>
    </div>
</div>

@push('scripts')
<script>
function hitungDurasi() {
    const m = document.getElementById('jam-mulai').value;
    const s = document.getElementById('jam-selesai').value;
    if (!m || !s) return;
    const [mh, mm] = m.split(':').map(Number);
    const [sh, sm] = s.split(':').map(Number);
    let totalMenit = (sh * 60 + sm) - (mh * 60 + mm);
    if (totalMenit < 0) totalMenit += 24 * 60; // lewat tengah malam
    const jam   = Math.floor(totalMenit / 60);
    const menit = totalMenit % 60;
    let text = '';
    if (jam > 0 && menit > 0) text = `${jam} jam ${menit} menit`;
    else if (jam > 0) text = `${jam} jam`;
    else text = `${menit} menit`;
    document.getElementById('dur-text').textContent = text;
    const prev = document.getElementById('dur-preview');
    const tooShort = totalMenit < 30;
    prev.style.background = tooShort ? '#fef2f2' : '#ede9fe';
    prev.style.borderColor = tooShort ? '#fecaca' : '#ddd6fe';
    prev.style.color       = tooShort ? '#dc2626' : '#3730a3';
    prev.querySelector('svg').style.stroke = tooShort ? '#dc2626' : '#4f46e5';
    if (tooShort) document.getElementById('dur-text').textContent = text + ' (minimal 30 menit)';
}
hitungDurasi();
</script>
@endpush
</x-app-layout>