@extends('layouts.layout1')
@section('title', 'Peraturan || KLINIK PKP JAWA 3')

@section('content')
    <style>
        /* CSS Custom Properties for better dark mode support */
        :root {
            --bg-primary: #f9fafb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f8fafc;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;
            --border-color: #e5e7eb;
            --border-hover: var(--judges-base);
        }

        [data-theme="dark"], 
        body.dark-mode {
            --bg-primary: #1f2937;
            --bg-secondary: #111827;
            --bg-card: #374151;
            --bg-card-hover: #4b5563;
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-muted: #9ca3af;
            --border-color: #4b5563;
            --border-hover: var(--judges-base);
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, var(--judges-base) 0%, var(--judges-base) 100%);
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 4rem 2rem;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            text-align: center;
            color: white;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            color: #f9fafb;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.95;
            line-height: 1.8;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-divider {
            width: 100px;
            height: 4px;
            background: white;
            margin: 2rem auto;
            border-radius: 2px;
        }

        /* Container Section */
        .regulation-section {
            padding: 4rem 2rem;
            background-color: var(--bg-primary);
            min-height: 60vh;
        }

        /* Force dark mode compatibility for all elements */
        [data-theme="dark"] *,
        body.dark-mode * {
            border-color: var(--border-color) !important;
        }

        [data-theme="dark"] .regulation-section,
        [data-theme="dark"] .regulation-section[style*="background"],
        body.dark-mode .regulation-section,
        body.dark-mode .regulation-section[style*="background"] {
            background: var(--bg-primary) !important;
            background-color: var(--bg-primary) !important;
        }

        [data-theme="dark"] .section-title,
        [data-theme="dark"] .hero-title,
        [data-theme="dark"] #main-title,
        [data-theme="dark"] #inherited-title,
        body.dark-mode .section-title,
        body.dark-mode .hero-title,
        body.dark-mode #main-title,
        body.dark-mode #inherited-title {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .section-subtitle,
        [data-theme="dark"] .hero-subtitle,
        [data-theme="dark"] #main-subtitle,
        [data-theme="dark"] #inherited-subtitle,
        body.dark-mode .section-subtitle,
        body.dark-mode .hero-subtitle,
        body.dark-mode #main-subtitle,
        body.dark-mode #inherited-subtitle {
            color: var(--text-secondary) !important;
        }

        [data-theme="dark"] .type-item,
        [data-theme="dark"] .regulation-card,
        [data-theme="dark"] .empty-state,
        [data-theme="dark"] .modal-detail,
        body.dark-mode .type-item,
        body.dark-mode .regulation-card,
        body.dark-mode .empty-state,
        body.dark-mode .modal-detail {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .type-name,
        [data-theme="dark"] .regulation-title,
        [data-theme="dark"] .modal-title,
        body.dark-mode .type-name,
        body.dark-mode .regulation-title,
        body.dark-mode .modal-title {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .type-description,
        [data-theme="dark"] .regulation-description,
        [data-theme="dark"] .empty-state-text,
        [data-theme="dark"] .modal-section-content,
        body.dark-mode .type-description,
        body.dark-mode .regulation-description,
        body.dark-mode .empty-state-text,
        body.dark-mode .modal-section-content {
            color: var(--text-secondary) !important;
        }

        /* Override inline styles for dark mode */
        [data-theme="dark"] div[style*="background"],
        body.dark-mode div[style*="background"] {
            background: var(--bg-card) !important;
            color: var(--text-primary) !important;
        }

        /* Force dark theme for hero section */
        [data-theme="dark"] .hero-section,
        body.dark-mode .hero-section {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
        }

        /* Container Section */
        .regulation-section {
            padding: 4rem 2rem;
            background-color: #f9fafb;
            min-height: 60vh;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: 1.125rem;
            color: #6b7280;
            margin-bottom: 3rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .container-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Type List */
        .type-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .type-item {
            background: white;
            padding: 2rem 1.5rem;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .type-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .type-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.2);
            border-color: var(--judges-base);
        }

        .type-item:hover::before {
            transform: scaleX(1);
        }

        .type-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            filter: grayscale(0.3);
            transition: all 0.3s ease;
        }

        .type-item:hover .type-icon {
            filter: grayscale(0);
            transform: scale(1.1);
        }

        .type-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
        }

        .type-description {
            font-size: 0.875rem;
            color: #6b7280;
            line-height: 1.6;
        }

        .type-count {
            display: inline-block;
            margin-top: 0.75rem;
            padding: 0.375rem 0.75rem;
            background: #f3f4f6;
            color: var(--judges-base);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Back Button */
        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: white;
            color: var(--judges-base);
            border: 2px solid var(--judges-base);
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 2rem;
        }

        .back-button:hover {
            background: var(--judges-base);
            color: white;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            color: white;
        }

        /* Regulation Cards */
        .regulation-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
        }

        .regulation-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .regulation-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
            border-color: var(--judges-base);
        }

        .regulation-card-header {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            color: white;
            padding: 1.5rem;
            position: relative;
        }

        .regulation-number {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.875rem;
        }

        .regulation-title {
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.6;
            margin-bottom: 0.5rem;
            padding-right: 4rem;
        }

        .regulation-type-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .regulation-card-body {
            padding: 1.5rem;
        }

        .regulation-description {
            color: #6b7280;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .regulation-actions {
            display: flex;
            gap: 0.75rem;
        }

        .btn-view-detail {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-view-detail:hover {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        }

        .btn-download-card {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: white;
            color: var(--judges-base);
            border: 2px solid var(--judges-base);
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .btn-download-card:hover {
            background: var(--judges-base);
            color: white;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
            color: white;
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .empty-state-icon {
            font-size: 4rem;
            color: #d1d5db;
            margin-bottom: 1rem;
        }

        .empty-state-text {
            font-size: 1.125rem;
            color: #6b7280;
        }

        /* Modal Detail */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 9998;
            animation: fadeIn 0.3s ease;
        }

        .modal-detail {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            z-index: 9999;
            max-width: 700px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            animation: slideUp 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translate(-50%, -40%);
            }

            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        .modal-header {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            color: white;
            padding: 2rem;
            border-radius: 20px 20px 0 0;
            position: relative;
        }

        .modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.5rem;
            line-height: 1;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.6;
            padding-right: 3rem;
        }

        .modal-body {
            padding: 2rem;
        }

        .modal-section {
            margin-bottom: 1.5rem;
        }

        .modal-section-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--judges-base);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .modal-section-content {
            font-size: 1rem;
            color: #1f2937;
            line-height: 1.7;
        }

        .modal-actions {
            padding: 1.5rem 2rem;
            background: #f9fafb;
            border-radius: 0 0 20px 20px;
            display: flex;
            gap: 1rem;
        }

        .btn-modal-download {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.875rem 1.5rem;
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-modal-download:hover {
            background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
        }

        /* Loading */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4rem;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 4px solid #e5e7eb;
            border-top-color: var(--judges-base);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Dark Mode Support */
        [data-theme="dark"] .hero-section,
        body.dark-mode .hero-section {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
        }

        [data-theme="dark"] .hero-title,
        [data-theme="dark"] .hero-subtitle,
        [data-theme="dark"] .hero-divider,
        body.dark-mode .hero-title,
        body.dark-mode .hero-subtitle,
        body.dark-mode .hero-divider {
            color: #f9fafb !important;
        }

        [data-theme="dark"] .regulation-section,
        body.dark-mode .regulation-section {
            background-color: #1f2937 !important;
            background: #1f2937 !important;
        }

        [data-theme="dark"] .section-title,
        body.dark-mode .section-title {
            color: #f9fafb !important;
        }

        [data-theme="dark"] .section-subtitle,
        body.dark-mode .section-subtitle {
            color: #d1d5db !important;
        }

        [data-theme="dark"] .type-item,
        body.dark-mode .type-item {
            background: #374151 !important;
            border-color: #4b5563 !important;
            color: #f9fafb !important;
        }

        [data-theme="dark"] .type-item:hover,
        body.dark-mode .type-item:hover {
            background: #4b5563 !important;
            border-color: #667eea !important;
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3) !important;
        }

        [data-theme="dark"] .type-name,
        body.dark-mode .type-name {
            color: #f9fafb !important;
        }

        [data-theme="dark"] .type-description,
        body.dark-mode .type-description {
            color: #d1d5db !important;
        }

        [data-theme="dark"] .type-count,
        body.dark-mode .type-count {
            background: #4b5563 !important;
            color: #93c5fd !important;
        }

        [data-theme="dark"] .back-button,
        body.dark-mode .back-button {
            background: #374151 !important;
            color: #93c5fd !important;
            border-color: #93c5fd !important;
        }

        [data-theme="dark"] .back-button:hover,
        body.dark-mode .back-button:hover {
            background: #93c5fd !important;
            color: #1f2937 !important;
        }

        [data-theme="dark"] .regulation-card,
        body.dark-mode .regulation-card {
            background: #374151 !important;
            border-color: #4b5563 !important;
        }

        [data-theme="dark"] .regulation-card:hover,
        body.dark-mode .regulation-card:hover {
            background: #4b5563 !important;
            border-color: #667eea !important;
        }

        [data-theme="dark"] .regulation-card-header,
        body.dark-mode .regulation-card-header {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
        }

        [data-theme="dark"] .regulation-title,
        body.dark-mode .regulation-title {
            color: #d1d5db !important;
        }

        body.dark-mode .type-item {
            background: #374151 !important;
            border-color: #4b5563 !important;
            color: #f9fafb !important;
        }

        body.dark-mode .type-item:hover {
            background: #4b5563 !important;
            border-color: #667eea !important;
            box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3) !important;
        }

        body.dark-mode .type-name {
            color: #f9fafb !important;
        }

        body.dark-mode .type-description {
            color: #d1d5db !important;
        }

        body.dark-mode .type-count {
            background: #4b5563 !important;
            color: #93c5fd !important;
        }

        body.dark-mode .back-button {
            background: #374151 !important;
            color: #93c5fd !important;
            border-color: #93c5fd !important;
        }

        body.dark-mode .back-button:hover {
            background: #93c5fd !important;
            color: #1f2937 !important;
        }

        body.dark-mode .regulation-card {
            background: #374151 !important;
            border-color: #4b5563 !important;
        }

        body.dark-mode .regulation-card:hover {
            background: #4b5563 !important;
            border-color: var(--judges-base) !important;
        }

        body.dark-mode .regulation-card-header {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
        }

        body.dark-mode .regulation-title {
            color: #f9fafb !important;
        }

        body.dark-mode .regulation-number,
        body.dark-mode .regulation-type-badge {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #f9fafb !important;
        }

        body.dark-mode .regulation-description {
            color: #d1d5db !important;
        }

        body.dark-mode .btn-download-card {
            background: #374151 !important;
            color: #93c5fd !important;
            border-color: #93c5fd !important;
        }

        body.dark-mode .btn-download-card:hover {
            background: #93c5fd !important;
            color: #1f2937 !important;
        }

        body.dark-mode .empty-state {
            background: #374151 !important;
            color: #f9fafb !important;
        }

        body.dark-mode .empty-state-text {
            color: #d1d5db !important;
        }

        body.dark-mode .empty-state-icon {
            color: #6b7280 !important;
        }

        /* Modal Dark Mode */
        body.dark-mode .modal-detail {
            background: #374151 !important;
        }

        body.dark-mode .modal-header {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
        }

        body.dark-mode .modal-title {
            color: #f9fafb !important;
        }

        body.dark-mode .modal-close {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #f9fafb !important;
        }

        body.dark-mode .modal-close:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }

        body.dark-mode .modal-body {
            background: #374151 !important;
        }

        body.dark-mode .modal-section-title {
            color: #93c5fd !important;
        }

        body.dark-mode .modal-section-content {
            color: #f9fafb !important;
        }

        body.dark-mode .modal-actions {
            background: #2d3748 !important;
        }

        body.dark-mode .loading-container {
            color: #f9fafb !important;
        }

        body.dark-mode .spinner {
            border-color: #4b5563 !important;
            border-top-color: #667eea !important;
        }

        /* Dark mode for second regulation section with inline style */
        body.dark-mode .regulation-section[style*="background: linear-gradient"] {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
        }

        /* Dark mode for special elements */
        body.dark-mode div[style*="background: linear-gradient(135deg, #f9fafb"] {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%) !important;
        }

        /* Dark mode for inline badge elements */
        body.dark-mode div[style*="background: linear-gradient(135deg, #667eea"] {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
            color: #f9fafb !important;
        }

        /* Dark mode for center text elements */
        body.dark-mode div[style*="text-align: center"] {
            color: #f9fafb !important;
        }

        /* Additional dark mode rules for dynamic content */
        body.dark-mode .regulation-card-header .regulation-title {
            color: #f9fafb !important;
        }

        body.dark-mode .regulation-card-body {
            background: #374151 !important;
        }

        body.dark-mode .regulation-card-body .regulation-description {
            color: #d1d5db !important;
        }

        body.dark-mode .btn-view-detail {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
            color: #f9fafb !important;
        }

        body.dark-mode .btn-view-detail:hover {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
        }

        /* SVG icons in dark mode */
        body.dark-mode .btn-view-detail svg,
        body.dark-mode .btn-download-card svg,
        body.dark-mode .back-button svg {
            fill: currentColor !important;
        }

        /* Dark mode for all inherited section elements */
        body.dark-mode #inherited-title,
        body.dark-mode #inherited-subtitle,
        body.dark-mode #main-title,
        body.dark-mode #main-subtitle {
            color: #f9fafb !important;
        }

        /* Force dark mode for all regulation sections */
        body.dark-mode section.regulation-section,
        body.dark-mode .regulation-section {
            background: #1f2937 !important;
            background-color: #1f2937 !important;
        }

        /* Force dark mode for specific inline styled section */
        body.dark-mode section[style*="background: linear-gradient(135deg, #f9fafb"] {
            background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
        }

        /* Dark mode for all text content in containers */
        body.dark-mode .container-content h2,
        body.dark-mode .container-content p,
        body.dark-mode .container-content .section-title,
        body.dark-mode .container-content .section-subtitle {
            color: #f9fafb !important;
        }

        body.dark-mode .container-content .section-subtitle {
            color: #d1d5db !important;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .type-list {
                grid-template-columns: 1fr;
            }

            .regulation-cards {
                grid-template-columns: 1fr;
            }

            .regulation-actions {
                flex-direction: column;
            }

            .modal-detail {
                width: 95%;
                max-height: 90vh;
            }

            .modal-header,
            .modal-body,
            .modal-actions {
                padding: 1.5rem;
            }

            .modal-actions {
                flex-direction: column;
            }
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content">
            <h1 class="hero-title">Peraturan</h1>
            <div class="hero-divider"></div>
            <p class="hero-subtitle">
                Kumpulan peraturan dan regulasi terkait perumahan yang dapat menjadi acuan
                dalam perencanaan dan pembangunan hunian. Pilih tipe peraturan untuk melihat
                detail lengkapnya.
            </p>
        </div>
    </section>

    <!-- Regulation Section -->
    <section class="regulation-section">
        <div class="container-content">
            <h2 class="section-title" id="main-title">Daftar Tipe Peraturan</h2>
            <p class="section-subtitle" id="main-subtitle">
                Pilih tipe peraturan untuk melihat daftar peraturan yang tersedia
            </p>

            <!-- Loading State -->
            <div id="loading-container" class="loading-container">
                <div class="spinner"></div>
            </div>

            <!-- Type List View -->
            <div id="type-list-view" style="display: none;">
                <div id="type-list" class="type-list">
                    <!-- Type items will be inserted here -->
                </div>
            </div>

            <!-- Regulation List View -->
            <div id="regulation-list-view" style="display: none;">
                <button class="back-button" onclick="showTypeList()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                    </svg>
                    Kembali ke Daftar Tipe
                </button>

                <div id="regulation-cards" class="regulation-cards">
                    <!-- Regulation cards will be inserted here -->
                </div>

                <!-- Empty State for Regulations -->
                <div id="empty-regulations" class="empty-state" style="display: none;">
                    <div class="empty-state-icon">📄</div>
                    <p class="empty-state-text">Tidak ada peraturan untuk tipe ini.</p>
                </div>
            </div>

            <!-- Empty State -->
            <div id="empty-state" class="empty-state" style="display: none;">
                <div class="empty-state-icon">📋</div>
                <p class="empty-state-text">Belum ada tipe peraturan yang tersedia saat ini.</p>
            </div>
        </div>
    </section>

    <!-- Inherited Regulations Section (Jawa III) -->
    <section class="regulation-section"
        style="background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%); padding-top: 3rem;">
        <div class="container-content">
            <div style="text-align: center; margin-bottom: 3rem;">
                <div
                    style="display: inline-block; background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%); color: white; padding: 0.5rem 1.5rem; border-radius: 20px; font-weight: 600; font-size: 0.875rem; margin-bottom: 1rem;">
                    Peraturan Turunan
                </div>
                <h2 class="section-title" id="inherited-title">Peraturan dari Jawa III</h2>
                <p class="section-subtitle" id="inherited-subtitle">
                    Peraturan yang diturunkan dari Kantor Jawa III
                </p>
            </div>

            <!-- Loading State for Inherited -->
            <div id="loading-inherited" class="loading-container" style="display: none;">
                <div class="spinner"></div>
            </div>

            <!-- Type List View for Inherited -->
            <div id="inherited-type-list-view" style="display: none;">
                <div id="inherited-type-list" class="type-list">
                    <!-- Type items will be inserted here -->
                </div>
            </div>

            <!-- Regulation List View for Inherited -->
            <div id="inherited-regulation-list-view" style="display: none;">
                <button class="back-button" onclick="showInheritedTypeList()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
                    </svg>
                    Kembali ke Daftar Tipe
                </button>

                <div id="inherited-regulation-cards" class="regulation-cards">
                    <!-- Inherited regulation cards will be inserted here -->
                </div>

                <!-- Empty State for Inherited Regulations -->
                <div id="empty-inherited-regulations" class="empty-state" style="display: none;">
                    <div class="empty-state-icon">📄</div>
                    <p class="empty-state-text">Tidak ada peraturan turunan untuk tipe ini.</p>
                </div>
            </div>

            <!-- Empty State for Inherited -->
            <div id="empty-inherited-state" class="empty-state" style="display: none;">
                <div class="empty-state-icon">📋</div>
                <p class="empty-state-text">Belum ada peraturan turunan dari Jawa III saat ini.</p>
            </div>
        </div>
    </section>

    <!-- Modal Detail -->
    <div class="modal-overlay" id="modal-overlay" onclick="closeModal()"></div>
    <div class="modal-detail" id="modal-detail">
        <div class="modal-header">
            <button class="modal-close" onclick="closeModal()">×</button>
            <h2 class="modal-title" id="modal-title"></h2>
        </div>
        <div class="modal-body">
            <div class="modal-section">
                <div class="modal-section-title">Deskripsi</div>
                <div class="modal-section-content" id="modal-description"></div>
            </div>
            <div class="modal-section">
                <div class="modal-section-title">Tipe Peraturan</div>
                <div class="modal-section-content" id="modal-type"></div>
            </div>
        </div>
        <div class="modal-actions">
            <a href="#" id="modal-download-btn" class="btn-modal-download" target="_blank" download>
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
                    <path
                        d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
                </svg>
                Download PDF
            </a>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // Add dynamic dark mode class detection
        function syncDarkMode() {
            const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }

        // Initial sync
        syncDarkMode();

        // Watch for theme changes
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
                    syncDarkMode();
                }
            });
        });

        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['data-theme']
        });

        // Your existing JavaScript code continues here...
        let allRegulations = [];
        let regulationTypes = [];
        let inheritedRegulations = [];
        let inheritedRegulationTypes = [];
        let grandparentName = '';

        $(document).ready(function() {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const DAERAH = "{{ env('DAERAH') }}";

            console.log('Fetching data from:', `${BASE_URL}/api/public/sites/${DAERAH}`);

            // Fetch regulations data
            $.ajax({
                url: `${BASE_URL}/api/public/sites/${DAERAH}`,
                method: 'GET',
                success: function(response) {
                    console.log('API Response:', response);

                    // Hide loading
                    $('#loading-container').hide();

                    // Get regulations from response
                    allRegulations = response.local?.regulations || [];
                    inheritedRegulations = response.inherited?.regulations || [];

                    // Get grandparent name
                    grandparentName = response.site?.grandparent?.name || 'Jawa III';

                    console.log('All Regulations:', allRegulations);
                    console.log('Inherited Regulations:', inheritedRegulations);
                    console.log('Grandparent Name:', grandparentName);

                    // Update inherited section title
                    $('#inherited-title').text(`Peraturan dari ${grandparentName}`);
                    $('#inherited-subtitle').text(`Peraturan yang diturunkan dari ${grandparentName}`);

                    // Handle local regulations
                    if (allRegulations.length > 0) {
                        // Extract unique types
                        extractTypes();

                        // Show type list
                        $('#type-list-view').show();
                        renderTypeList();
                    } else {
                        // Show empty state
                        $('#empty-state').show();
                    }

                    // Handle inherited regulations
                    if (inheritedRegulations.length > 0) {
                        // Extract unique types for inherited
                        extractInheritedTypes();

                        // Show inherited type list
                        $('#inherited-type-list-view').show();
                        renderInheritedTypeList();
                    } else {
                        // Show empty state for inherited
                        $('#empty-inherited-state').show();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);

                    // Hide loading
                    $('#loading-container').hide();

                    // Show empty state
                    $('#empty-state').show();
                    $('#empty-state .empty-state-text').text(
                        'Terjadi kesalahan saat memuat data. Silakan coba lagi nanti.');

                    // Show empty state for inherited
                    $('#empty-inherited-state').show();
                }
            });
        });

        function extractTypes() {
            const typeMap = new Map();

            allRegulations.forEach(regulation => {
                if (regulation.type) {
                    const typeId = regulation.type.id;
                    if (!typeMap.has(typeId)) {
                        typeMap.set(typeId, regulation.type);
                    }
                } else {
                    // Handle regulations without type
                    if (!typeMap.has(0)) {
                        typeMap.set(0, {
                            id: 0,
                            name: 'Tanpa Tipe',
                            description: 'Peraturan tanpa kategori tipe'
                        });
                    }
                }
            });

            regulationTypes = Array.from(typeMap.values());
            console.log('Extracted Types:', regulationTypes);
        }

        function renderTypeList() {
            const typeList = $('#type-list');
            typeList.empty();

            const icons = ['📋', '📄', '📑', '📃', '🗂️', '📰', '📜', '📝'];

            regulationTypes.forEach((type, index) => {
                const icon = icons[index % icons.length];

                // Count regulations for this type
                const count = allRegulations.filter(reg => {
                    if (type.id === 0) {
                        return reg.type === null || reg.type === undefined;
                    }
                    return reg.type && reg.type.id === type.id;
                }).length;

                const typeCard = `
                    <div class="type-item" onclick="showRegulationsByType(${type.id}, '${type.name.replace(/'/g, "\\'")}')">
                        <div class="type-icon">${icon}</div>
                        <h3 class="type-name">${type.name}</h3>
                        <p class="type-description">${type.description || 'Klik untuk melihat peraturan'}</p>
                        <span class="type-count">${count} Peraturan</span>
                    </div>
                `;
                typeList.append(typeCard);
            });
        }

        function showRegulationsByType(typeId, typeName) {
            console.log('Showing regulations for type:', typeId, typeName);

            // Filter regulations by type
            const filteredRegulations = allRegulations.filter(reg => {
                if (typeId === 0) {
                    return reg.type === null || reg.type === undefined;
                }
                return reg.type && reg.type.id === typeId;
            });

            console.log('Filtered Regulations:', filteredRegulations);

            // Update title
            $('#main-title').text(typeName);
            $('#main-subtitle').text(`${filteredRegulations.length} peraturan tersedia`);

            // Hide type list, show regulation list
            $('#type-list-view').hide();
            $('#regulation-list-view').show();

            if (filteredRegulations.length > 0) {
                $('#empty-regulations').hide();
                renderRegulationCards(filteredRegulations);
            } else {
                $('#empty-regulations').show();
                $('#regulation-cards').empty();
            }
        }

        function renderRegulationCards(regulations) {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const cardsContainer = $('#regulation-cards');
            cardsContainer.empty();

            regulations.forEach((regulation, index) => {
                const fileUrl = regulation.path_file ?
                    `${BASE_URL}/${regulation.path_file}` :
                    '';

                const typeName = regulation.type?.name || 'Tanpa Tipe';
                const description = regulation.description || 'Tidak ada deskripsi';
                const title = regulation.title || 'Tanpa Judul';

                const card = `
                    <div class="regulation-card">
                        <div class="regulation-card-header">
                            <span class="regulation-number">#${index + 1}</span>
                            <h3 class="regulation-title">${title}</h3>
                            <span class="regulation-type-badge">${typeName}</span>
                        </div>
                        <div class="regulation-card-body">
                            <p class="regulation-description">${description}</p>
                            <div class="regulation-actions">
                                <button class="btn-view-detail" onclick='showDetailModal(${JSON.stringify(regulation).replace(/'/g, "&#39;")})'>
                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                    Lihat Detail
                                </button>
                                ${fileUrl ? `
                                            <a href="${fileUrl}" target="_blank" class="btn-download-card" download>
                                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                                </svg>
                                            </a>
                                        ` : ''}
                            </div>
                        </div>
                    </div>
                `;

                cardsContainer.append(card);
            });
        }

        function showDetailModal(regulation) {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const fileUrl = regulation.path_file ? `${BASE_URL}/${regulation.path_file}` : '';

            $('#modal-title').text(regulation.title || 'Tanpa Judul');
            $('#modal-description').text(regulation.description || 'Tidak ada deskripsi');
            $('#modal-type').text(regulation.type?.name || 'Tanpa Tipe');

            if (fileUrl) {
                $('#modal-download-btn').attr('href', fileUrl).show();
            } else {
                $('#modal-download-btn').hide();
            }

            $('#modal-overlay').css('display', 'block');
            $('#modal-detail').css('display', 'block');
            $('body').css('overflow', 'hidden');
        }

        function closeModal() {
            $('#modal-overlay').css('display', 'none');
            $('#modal-detail').css('display', 'none');
            $('body').css('overflow', 'auto');
        }

        // Close modal with ESC key
        $(document).keydown(function(e) {
            if (e.key === "Escape") {
                closeModal();
            }
        });

        function showTypeList() {
            // Reset title
            $('#main-title').text('Daftar Tipe Peraturan');
            $('#main-subtitle').text('Pilih tipe peraturan untuk melihat daftar peraturan yang tersedia');

            // Show type list, hide regulation list
            $('#regulation-list-view').hide();
            $('#type-list-view').show();
        }

        // ============ INHERITED REGULATIONS FUNCTIONS ============

        function extractInheritedTypes() {
            const typeMap = new Map();

            inheritedRegulations.forEach(regulation => {
                if (regulation.type) {
                    const typeId = regulation.type.id;
                    if (!typeMap.has(typeId)) {
                        typeMap.set(typeId, regulation.type);
                    }
                } else {
                    // Handle regulations without type
                    if (!typeMap.has(0)) {
                        typeMap.set(0, {
                            id: 0,
                            name: 'Tanpa Tipe',
                            description: 'Peraturan tanpa kategori tipe'
                        });
                    }
                }
            });

            inheritedRegulationTypes = Array.from(typeMap.values());
            console.log('Extracted Inherited Types:', inheritedRegulationTypes);
        }

        function renderInheritedTypeList() {
            const typeList = $('#inherited-type-list');
            typeList.empty();

            const icons = ['📋', '📄', '📑', '📃', '🗂️', '📰', '📜', '📝'];

            inheritedRegulationTypes.forEach((type, index) => {
                const icon = icons[index % icons.length];

                // Count regulations for this type
                const count = inheritedRegulations.filter(reg => {
                    if (type.id === 0) {
                        return reg.type === null || reg.type === undefined;
                    }
                    return reg.type && reg.type.id === type.id;
                }).length;

                const typeCard = `
                    <div class="type-item" onclick="showInheritedRegulationsByType(${type.id}, '${type.name.replace(/'/g, "\\'")}')">
                        <div class="type-icon">${icon}</div>
                        <h3 class="type-name">${type.name}</h3>
                        <p class="type-description">${type.description || 'Klik untuk melihat peraturan'}</p>
                        <span class="type-count">${count} Peraturan</span>
                    </div>
                `;
                typeList.append(typeCard);
            });
        }

        function showInheritedRegulationsByType(typeId, typeName) {
            console.log('Showing inherited regulations for type:', typeId, typeName);

            // Filter regulations by type
            const filteredRegulations = inheritedRegulations.filter(reg => {
                if (typeId === 0) {
                    return reg.type === null || reg.type === undefined;
                }
                return reg.type && reg.type.id === typeId;
            });

            console.log('Filtered Inherited Regulations:', filteredRegulations);

            // Update title
            $('#inherited-title').text(typeName);
            $('#inherited-subtitle').text(`${filteredRegulations.length} peraturan tersedia dari ${grandparentName}`);

            // Hide type list, show regulation list
            $('#inherited-type-list-view').hide();
            $('#inherited-regulation-list-view').show();

            if (filteredRegulations.length > 0) {
                $('#empty-inherited-regulations').hide();
                renderInheritedRegulationCards(filteredRegulations);
            } else {
                $('#empty-inherited-regulations').show();
                $('#inherited-regulation-cards').empty();
            }
        }

        function renderInheritedRegulationCards(regulations) {
            const BASE_URL = "{{ env('BASE_URL') }}";
            const cardsContainer = $('#inherited-regulation-cards');
            cardsContainer.empty();

            regulations.forEach((regulation, index) => {
                const fileUrl = regulation.path_file ?
                    `${BASE_URL}/${regulation.path_file}` :
                    '';

                const typeName = regulation.type?.name || 'Tanpa Tipe';
                const description = regulation.description || 'Tidak ada deskripsi';
                const title = regulation.title || 'Tanpa Judul';

                const card = `
                    <div class="regulation-card">
                        <div class="regulation-card-header" style="background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);">
                            <span class="regulation-number">#${index + 1}</span>
                            <h3 class="regulation-title">${title}</h3>
                            <span class="regulation-type-badge">${typeName}</span>
                        </div>
                        <div class="regulation-card-body">
                            <p class="regulation-description">${description}</p>
                            <div class="regulation-actions">
                                <button class="btn-view-detail" onclick='showDetailModal(${JSON.stringify(regulation).replace(/'/g, "&#39;")})'>
                                    <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                    </svg>
                                    Lihat Detail
                                </button>
                                ${fileUrl ? `
                                            <a href="${fileUrl}" target="_blank" class="btn-download-card" download>
                                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
                                                    <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                                    <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                                </svg>
                                            </a>
                                        ` : ''}
                            </div>
                        </div>
                    </div>
                `;

                cardsContainer.append(card);
            });
        }

        function showInheritedTypeList() {
            // Reset title
            $('#inherited-title').text(`Peraturan dari ${grandparentName}`);
            $('#inherited-subtitle').text(`Peraturan yang diturunkan dari ${grandparentName}`);

            // Show type list, hide regulation list
            $('#inherited-regulation-list-view').hide();
            $('#inherited-type-list-view').show();
        }
    </script>
    <x-footer_one />
@endsection