<x-app-layout title="Ajukan Cuti">
@push('styles')
<style>
.wrap{max-width:580px;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:var(--sh);}
.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,#7c3aed,#4f46e5);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(124,58,237,.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;}

.jatah-info{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:12px;padding:12px 16px;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.jatah-info svg{width:16px;height:16px;stroke:rgba(255,255,255,.8);flex-shrink:0;}
.jatah-info-text{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);}
.jatah-info-text span{color:white;font-size: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:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;}
.fg input,.fg select,.fg textarea{
    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 select:focus,.fg textarea:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.1);background:white;}
.fg textarea{resize:vertical;min-height:72px;}
.ferr{color:#dc2626;font-size:11.5px;font-weight:600;margin-top:5px;}
.hint{font-size:11px;color:#94a3b8;font-weight:500;margin-top:5px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* jenis cards */
.jenis-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;}
.jenis-card{border:2px solid var(--border,#e2e8f0);border-radius:12px;padding:12px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:9px;background:var(--white,#fff);}
.jenis-card:hover{border-color:#7c3aed;background:#ede9fe;}
.jenis-card input[type=radio]{display:none;}
.jenis-card.selected{border-color:#7c3aed;background:#ede9fe;}
.jenis-card-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.jenis-card-ico svg{width:15px;height:15px;}
.ji-violet{background:#ede9fe;} .ji-violet svg{stroke:#7c3aed;}
.ji-sky{background:#e0f2fe;} .ji-sky svg{stroke:#0284c7;}
.ji-pink{background:#fce7f3;} .ji-pink svg{stroke:#db2777;}
.ji-amber{background:#fef3c7;} .ji-amber svg{stroke:#d97706;}
.ji-slate{background:#f1f5f9;} .ji-slate svg{stroke:#64748b;}
.jenis-lbl{font-size:12.5px;font-weight:700;color:var(--text,#0f172a);}

.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,#7c3aed,#4f46e5);color:white;box-shadow:0 4px 14px rgba(124,58,237,.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;color:var(--text,#0f172a);}
.btn-sm{padding:7px 16px;font-size:12.5px;}

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

<div class="wrap">
    <a href="{{ route('karyawan.cuti.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"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            </div>
            <div>
                <div class="form-title">Ajukan Cuti</div>
                <div class="form-sub">Isi form pengajuan cuti dengan lengkap</div>
            </div>
        </div>

        <div class="form-body">
            {{-- Jatah info --}}
            <div class="jatah-info">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                <div class="jatah-info-text">
                    Sisa jatah cuti tahunan {{ now()->year }}: <span>{{ $jatah->sisa_hari }} hari</span> dari {{ $jatah->jatah_hari }} hari
                </div>
            </div>

            @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.cuti.store') }}" enctype="multipart/form-data" id="form-cuti">
                @csrf

                {{-- JENIS --}}
                <div class="fg">
                    <label>Jenis Cuti</label>
                    <div class="jenis-grid">
                        @foreach($jenisOptions as $val => $lbl)
                        @php
                            $icoClasses = ['tahunan'=>'ji-violet','besar'=>'ji-sky','melahirkan'=>'ji-pink','penting'=>'ji-amber','lainnya'=>'ji-slate'];
                            $icons = [
                                'tahunan'    => '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
                                'besar'      => '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
                                'melahirkan' => '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>',
                                'penting'    => '<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"/>',
                                'lainnya'    => '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>',
                            ];
                            $selected = old('jenis') === $val || (old('jenis') === null && $val === 'tahunan');
                        @endphp
                        <label class="jenis-card {{ $selected ? 'selected' : '' }}" id="jc-{{ $val }}">
                            <input type="radio" name="jenis" value="{{ $val }}" {{ $selected ? 'checked' : '' }} onchange="selectJenis('{{ $val }}')">
                            <div class="jenis-card-ico {{ $icoClasses[$val] ?? 'ji-slate' }}">
                                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $icons[$val] ?? '' !!}</svg>
                            </div>
                            <span class="jenis-lbl">{{ $lbl }}</span>
                        </label>
                        @endforeach
                    </div>
                    @error('jenis')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                {{-- TANGGAL --}}
                <div class="frow">
                    <div class="fg">
                        <label>Tanggal Mulai</label>
                        <input type="date" name="tanggal_mulai" id="tgl-mulai"
                               value="{{ old('tanggal_mulai', today()->addDay()->toDateString()) }}"
                               min="{{ today()->toDateString() }}" required
                               onchange="hitungDurasi()">
                        @error('tanggal_mulai')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                    <div class="fg">
                        <label>Tanggal Selesai</label>
                        <input type="date" name="tanggal_selesai" id="tgl-selesai"
                               value="{{ old('tanggal_selesai', today()->addDay()->toDateString()) }}"
                               min="{{ today()->toDateString() }}" required
                               onchange="hitungDurasi()">
                        @error('tanggal_selesai')<span class="ferr">{{ $message }}</span>@enderror
                    </div>
                </div>

                {{-- Durasi preview --}}
                <div id="durasi-preview" style="background:#ede9fe;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px;font-weight:700;color:#7c3aed;display:flex;align-items:center;gap:7px;">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;stroke:#7c3aed;"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    <span id="durasi-text">1 hari</span>
                </div>

                <div class="fg">
                    <label>Keterangan <span style="font-weight:500;text-transform:none;font-size:10px;color:#94a3b8;">(opsional)</span></label>
                    <textarea name="keterangan" placeholder="Jelaskan keperluan cuti kamu...">{{ old('keterangan') }}</textarea>
                    @error('keterangan')<span class="ferr">{{ $message }}</span>@enderror
                </div>

                <div class="fg" style="margin-bottom:0;">
                    <label>Lampiran <span style="font-weight:500;text-transform:none;font-size:10px;color:#94a3b8;">(opsional)</span></label>
                    <input type="file" name="bukti_file" accept=".jpg,.jpeg,.png,.pdf">
                    <span class="hint">Format: JPG, PNG, atau PDF. Maks 2MB.</span>
                    @error('bukti_file')<span class="ferr">{{ $message }}</span>@enderror
                </div>
            </form>
        </div>

        <div class="form-ft">
            <a href="{{ route('karyawan.cuti.index') }}" class="btn btn-ghost btn-sm">Batal</a>
            <button type="submit" form="form-cuti" 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 selectJenis(val) {
    document.querySelectorAll('.jenis-card').forEach(c => c.classList.remove('selected'));
    document.getElementById('jc-' + val)?.classList.add('selected');
}

function hitungDurasi() {
    const m = document.getElementById('tgl-mulai').value;
    const s = document.getElementById('tgl-selesai').value;
    const el = document.getElementById('durasi-text');
    const prev = document.getElementById('durasi-preview');
    if (!m || !s) return;
    const d1 = new Date(m), d2 = new Date(s);
    if (d2 < d1) {
        document.getElementById('tgl-selesai').value = m;
        el.textContent = '1 hari';
        return;
    }
    const hari = Math.round((d2 - d1) / 86400000) + 1;
    el.textContent = hari + ' hari';
    prev.style.background = hari > {{ $jatah->sisa_hari }} ? '#fef2f2' : '#ede9fe';
    prev.style.color = hari > {{ $jatah->sisa_hari }} ? '#dc2626' : '#7c3aed';
    prev.querySelector('svg').style.stroke = hari > {{ $jatah->sisa_hari }} ? '#dc2626' : '#7c3aed';
}
hitungDurasi();
</script>
@endpush
</x-app-layout>