<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel Petugas – Disnakertrans Prov. Kalbar</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <style>
        /* ─── RESET + FONT ─── */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

        body { 
            background: #F2F5FB; 
            color: #334155; 
        }

        /* ─── SCROLLBAR ─── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

        /* ─── VARIABLES ─── */
        :root {
            --primary: #1d4ed8;
            --primary-soft: #e0e7ff;
            --border: #e5e7eb;
            --text: #111827;
            --muted: #6b7280;
        }

        /* ─── CARD ─── */
        .card { 
            background: #fff; 
            border: 1px solid var(--border); 
            border-radius: 16px; 
            padding: 28px; 
            margin-bottom: 20px; 
        }

        /* ─── FORM GRID ─── */
        .form-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 16px; 
        }

        /* ─── LABEL ─── */
        .label { 
            font-size: 12px; 
            font-weight: 600; 
            color: var(--muted); 
            margin-bottom: 6px; 
            display: block;
            letter-spacing: 0.03em;
        }

        /* ─── INPUT ─── */
        .input { 
            width: 100%; 
            padding: 12px 14px; 
            border: 1px solid var(--border); 
            border-radius: 10px; 
            font-size: 14px; 
            font-family: 'Outfit', sans-serif;
            background: #fff;
            color: var(--text);
            transition: .2s;
        }
        .input:focus { 
            outline: none; 
            border-color: var(--primary); 
            box-shadow: 0 0 0 3px rgba(29,78,216,.1); 
        }
        .readonly { 
            background: #f3f4f6; 
            color: #6b7280; 
            cursor: not-allowed;
        }

        /* ─── TEXTAREA ─── */
        .textarea { 
            width: 100%; 
            padding: 14px; 
            border: 1px solid var(--border); 
            border-radius: 10px; 
            font-size: 14px; 
            font-family: 'Outfit', sans-serif;
            color: var(--text);
            min-height: 140px;
            resize: vertical;
            transition: .2s;
        }
        .textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(29,78,216,.1);
        }

        /* ─── UPLOAD BOX ─── */
        .upload-box { 
            border: 2px dashed var(--border); 
            padding: 30px; 
            text-align: center; 
            border-radius: 14px; 
            cursor: pointer; 
            display: block;
            transition: .2s;
        }
        .upload-box:hover { 
            background: #f9fafb;
            border-color: var(--primary);
        }

        /* ─── BUTTON ─── */
        .btn { 
            width: 100%; 
            padding: 14px; 
            border: none; 
            border-radius: 12px; 
            background: var(--primary); 
            color: #fff; 
            font-weight: 600; 
            font-size: 15px;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: .2s;
            letter-spacing: 0.02em;
        }
        .btn:hover { 
            background: #1e40af; 
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(29,78,216,.3);
        }
        .btn:active {
            transform: translateY(0);
        }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 768px) {
            .form-grid { 
                grid-template-columns: 1fr; 
            }
            main {
                padding: 20px 0 !important;
            }
            .card {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    @include('user.layouts.navbar')

    <main style="padding: 40px 0;">
        <div style="max-width: 860px; margin: auto; padding: 0 24px;">
            @yield('content')
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        lucide.createIcons();

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('[onclick^="return confirm"]').forEach(function(btn) {
                const match = btn.getAttribute('onclick').match(/confirm\('([^']+)'\)/);
                if (match) {
                    const message = match[1];
                    btn.removeAttribute('onclick');
                    
                    btn.addEventListener('click', function(e) {
                        e.preventDefault();
                        const form = btn.closest('form');
                        
                        Swal.fire({
                            title: 'Konfirmasi',
                            text: message,
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#3b82f6',
                            cancelButtonColor: '#64748b',
                            confirmButtonText: 'Ya, Lanjutkan',
                            cancelButtonText: 'Batal',
                            reverseButtons: true,
                            customClass: {
                                confirmButton: 'rounded-xl',
                                cancelButton: 'rounded-xl mr-2'
                            }
                        }).then((result) => {
                            if (result.isConfirmed) {
                                if (form) {
                                    form.submit();
                                } else if(btn.getAttribute('href')) {
                                    window.location.href = btn.getAttribute('href');
                                }
                            }
                        });
                    });
                }
            });
        });
    </script>
</body>
</html>