@extends('layouts.main')
@section('no_footer', true)

@push('styles')
<style>
    .committee-section {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #eef2f7;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        padding: 1.5rem;
        margin-left: 0;
        margin-right: 0;
        transition: box-shadow .2s ease, transform .2s ease;
    }
    
    .committee-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        background: linear-gradient(180deg, #ffffff, #f9fafb);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom: 1px solid #eef2f7;
    }
    
    .committee-table-container {
        overflow-x: auto;
    }
    
    .committee-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .committee-table thead {
        background: #e3f2fd;
    }
    
    .committee-table thead th {
        padding: 1rem;
        text-align: left;
        color: #1976d2;
        font-weight: 700;
        border-bottom: 2px solid #90caf9;
    }
    
    .committee-table tbody tr {
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s ease;
    }
    
    .committee-table tbody tr:hover {
        background: #f5f5f5;
    }
    
    .committee-table tbody td {
        padding: 1rem;
        vertical-align: middle;
    }

    .clean-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    .clean-table thead th {
        padding: 0.75rem 1rem;
        text-align: left;
        color: #111827;
        font-weight: 700;
        border: 0;
        background: #f8fafc;
    }
    .clean-table tbody tr {
        background: #ffffff;
        transition: background .2s ease, box-shadow .2s ease;
    }
    .clean-table tbody tr:hover {
        background: #f9fafb;
        box-shadow: 0 1px 6px rgba(17,24,39,.06);
    }
    .clean-table tbody td {
        padding: 0.75rem 1rem;
        border: 0;
        vertical-align: middle;
    }
    .clean-table tbody td:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
    .clean-table tbody td:last-child  { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

    .participants-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px;
    }
    .participants-table thead th {
        padding: 0.75rem 1rem;
        text-align: left;
        color: #374151;
        font-weight: 700;
        border-bottom: 0;
        background: transparent;
    }
    .participants-table tbody tr {
        background: #ffffff;
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .participants-table tbody tr:hover {
        background: #f9fafb;
        box-shadow: 0 1px 6px rgba(17, 24, 39, 0.06);
    }
    .participants-table tbody td {
        padding: 0.75rem 1rem;
        border: 0;
        vertical-align: middle;
    }
    .participants-table tbody td:first-child {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .participants-table tbody td:last-child {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    
    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    .badge-success {
        background-color: #4caf50;
        color: white;
    }
    
    .badge-warning {
        background-color: #ff9800;
        color: white;
    }
    
    .badge-danger {
        background-color: #f44336;
        color: white;
    }
    
    .searchable-select-wrapper {
        position: relative;
        overflow: visible;
    }
    
    .search-input-inside {
        display: none;
        position: absolute;
        top: -38px;
        left: 0;
        right: 0;
        z-index: 1000;
        border-bottom: 1px solid #ddd;
        border-radius: 4px 4px 0 0;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 0;
    }
    .searchable-select-wrapper select.open-list { position: relative; z-index: 999; width: 100%; }
    
    /* Pastikan modal dan form-group tidak memotong search input */
    .modal-body,
    .form-group {
        overflow: visible;
    }
    
    .modal-content {
        overflow: visible;
    }
    
    .rundown-section {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #eef2f7;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        padding: 1.5rem;
        margin-left: 0;
        margin-right: 0;
        transition: box-shadow .2s ease, transform .2s ease;
    }
    
    .rundown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        background: linear-gradient(180deg, #ffffff, #f9fafb);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom: 1px solid #eef2f7;
    }
    
    .rundown-table-container {
        overflow-x: auto;
    }
    
    .rundown-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .rundown-table thead {
        background: #e3f2fd;
    }
    
    .rundown-table thead th {
        padding: 1rem;
        text-align: left;
        color: #1976d2;
        font-weight: 700;
        border-bottom: 2px solid #90caf9;
    }
    
    .rundown-table tbody tr {
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s ease;
    }
    
    .rundown-table tbody tr:hover {
        background: #f5f5f5;
    }
    
    .rundown-table tbody td {
        padding: 1rem;
        vertical-align: top;
    }
    
    .preparation-container {
        display: flex;
        gap: 1rem;
        min-height: 70vh;
        margin-left: 0;
        margin-right: 0;
    }
    
    .divisi-sidebar {
        width: 300px;
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #eef2f7;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease, transform .2s ease;
    }
    
    .divisi-header {
        background: linear-gradient(180deg, #ffffff, #f9fafb);
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid #eef2f7;
    }
    
    .divisi-header h3 {
        margin: 0;
        color: #1976d2;
        font-weight: 700;
        font-size: 1.125rem;
    }
    
    .divisi-list {
        padding: 0.5rem;
        flex: 1;
        overflow-y: auto;
    }
    
    .divisi-item {
        padding: 0.75rem 1rem;
        background: #e3f2fd;
        border: 2px solid #90caf9;
        border-radius: 0.375rem;
        color: #1976d2;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0;
    }
    
    .divisi-item:hover {
        background: #bbdefb;
        border-color: #64b5f6;
        transform: translateX(4px);
    }
    
    .divisi-item.active {
        background: #1976d2;
        color: white;
        border-color: #1565c0;
    }
    
    .content-area {
        flex: 1;
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #eef2f7;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        display: flex;
        flex-direction: column;
        transition: box-shadow .2s ease, transform .2s ease;
    }
    
    .content-header {
        background: linear-gradient(180deg, #ffffff, #f9fafb);
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid #eef2f7;
    }
    
    .content-header h3 {
        margin: 0;
        color: #1976d2;
        font-weight: 700;
        font-size: 1.125rem;
    }
    
    .content-body {
        padding: 1.5rem;
        flex: 1;
    }
    
    .btn-add {
        background: #ff9800 !important;
        border: none !important;
        color: white !important;
        width: 36px;
        height: 36px;
        border-radius: 0.375rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.25rem;
        font-weight: bold;
        transition: all 0.2s ease;
        box-shadow: 0 2px 4px rgba(255, 152, 0, 0.3);
        flex-shrink: 0;
    }
    
    .btn-add:hover {
        background: #f57c00 !important;
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4);
    }
    
    #addTaskBtn {
        display: none !important;
    }
    
    #addTaskBtn.show {
        display: flex !important;
        visibility: visible !important;
    }
    
    .tasks-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .tasks-table thead {
        background: #e3f2fd;
    }
    
    .tasks-table thead th {
        padding: 1rem;
        text-align: left;
        color: #1976d2;
        font-weight: 700;
        border-bottom: 2px solid #90caf9;
    }
    
    .tasks-table tbody tr {
        border-bottom: 1px solid #e0e0e0;
        transition: background 0.2s ease;
    }
    
    .tasks-table tbody tr:hover {
        background: #f5f5f5;
    }
    
    .tasks-table tbody td {
        padding: 1rem;
        vertical-align: top !important;
    }
    
    .tasks-table tbody td:last-child {
        vertical-align: top !important;
        text-align: left !important;
    }
    
    .tasks-table tbody td:last-child .task-notes-editable,
    .tasks-table tbody td:last-child .notes-edit-input {
        text-align: left !important;
        vertical-align: top !important;
        display: block !important;
    }
    
    .tasks-table tbody td:first-child {
        vertical-align: top !important;
        text-align: left !important;
    }
    
    .task-checkbox {
        width: 20px;
        height: 20px;
        background: #1976d2;
        border: 2px solid #1565c0;
        border-radius: 3px;
        display: inline-block;
        margin-right: 0.5rem;
        vertical-align: middle;
        cursor: pointer;
    }
    
    .task-checkbox.checked {
        background: #1976d2;
        position: relative;
    }
    
    .task-checkbox.checked::after {
        content: '✓';
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        font-weight: bold;
    }
    
    .task-name {
        color: #333;
        font-weight: 500;
    }
    
    .task-name-editable {
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        display: inline-block;
        margin-left: 0.5rem;
    }
    
    .task-name-editable:hover {
        background-color: #f0f7ff;
        border: 1px dashed #90caf9;
    }
    
    .task-name-edit-input {
        padding: 0.375rem 0.75rem;
        margin-left: 0.5rem;
        display: inline-block;
    }
    
    .task-target {
        color: #666;
    }
    
    .task-notes {
        color: #888;
        font-style: italic;
    }
    
    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #999;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #ccc;
    }
    
    /* Action buttons - Simple icon only */
    .btn-action {
        padding: 0.5rem;
        border-radius: 0.375rem;
        border: none;
        cursor: pointer;
        margin-right: 0.5rem;
        transition: all 0.2s ease;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    
    .btn-edit {
        color: #f59e0b;
    }
    
    .btn-edit:hover {
        color: #d97706;
        background: #fef3c7;
    }
    
    .btn-delete {
        color: #ef4444;
    }
    
    .btn-delete:hover {
        color: #dc2626;
        background: #fee2e2;
    }
    
    .btn-action i {
        font-size: 1rem;
    }
    
    /* Modal improvements */
    .modal-dialog {
        margin: 1.75rem auto;
        max-width: 500px;
        display: flex;
        align-items: center;
        min-height: calc(100% - 3.5rem);
    }
    
    .modal-content {
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    /* Premium card visuals */
    .committee-list .bg-white,
    .rundown-section .bg-white,
    #participant-cards .bg-white {
        border: 1px solid #eef2f7;
        box-shadow: 0 6px 24px rgba(17, 24, 39, 0.06);
        transition: box-shadow .2s ease, transform .2s ease;
    }
    .committee-list .bg-white:hover,
    .rundown-section .bg-white:hover,
    #participant-cards .bg-white:hover {
        box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
        transform: translateY(-2px);
    }
    
    .modal-header {
        background: #e3f2fd;
        border-bottom: 2px solid #90caf9;
        color: #1976d2;
        padding: 1rem 1.5rem;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .modal-header .modal-title {
        margin: 0;
        font-weight: 700;
        color: #1976d2;
    }
    
    .modal-header .close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        opacity: 0.5;
    }
    
    .modal-header .close:hover {
        opacity: 1;
    }
    
    .modal-body {
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1 1 auto;
        max-height: calc(90vh - 150px);
    }
    
    .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-shrink: 0;
        background: #f8f9fa;
        border-radius: 0 0 0.5rem 0.5rem;
    }
    
    .modal-footer .btn {
        margin-left: 0.5rem;
        min-width: 80px;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group label {
        color: #333;
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .form-control {
        border: 1px solid #ddd;
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        width: 100%;
        font-size: 0.875rem;
    }
    
    .status-select {
        cursor: pointer;
        background-color: white;
    }
    
    .status-select:hover {
        border-color: #90caf9;
    }
    
    .status-select:focus {
        border-color: #90caf9;
        box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.2);
        outline: none;
    }
    
    .task-notes-editable {
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        display: inline-block;
        text-align: left;
        vertical-align: top;
    }
    
    .task-notes-editable:hover {
        background-color: #f0f7ff;
        border: 1px dashed #90caf9;
    }
    
    .task-notes-editable.notes-empty::before {
        content: '- Klik untuk menambah catatan';
        color: #999;
        font-style: italic;
    }
    
    .task-notes-editable.notes-empty {
        color: #999;
    }
    
    .notes-edit-input {
        width: auto;
        min-width: 200px;
        padding: 0.375rem 0.75rem;
        display: inline-block;
    }
    
    .task-target-editable {
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        display: inline-block;
        min-width: 100px;
    }
    
    .task-target-editable:hover {
        background-color: #f0f7ff;
        border: 1px dashed #90caf9;
    }
    
    .target-edit-input {
        padding: 0.375rem 0.75rem;
    }
    
    /* Status column width */
    .tasks-table th:nth-child(3),
    .tasks-table td:nth-child(3) {
        width: auto;
        min-width: 120px;
        max-width: 150px;
    }
    
    .form-control:focus {
        border-color: #90caf9;
        box-shadow: 0 0 0 3px rgba(144, 202, 249, 0.2);
        outline: none;
    }
    
    textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }
</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Manajemen Persiapan Acara</h1>
                    <p class="text-gray-600 mt-1">{{ $activity->name }}</p>
                </div>
                <div class="flex gap-2"></div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <!-- Struktur Kepanitiaan Section -->
        <div class="committee-section mb-6">
            <div class="committee-header">
                <h2 class="text-2xl font-bold text-gray-900">Struktur Kepanitiaan</h2>
                @php
                    $canManage = auth()->user() && $activity->canManageRegistration(auth()->id());
                @endphp
                @if($canManage)
                    <button class="btn-add" onclick="openAddCommitteeModal()" title="Tambah Panitia">
                        +
                    </button>
                @endif
            </div>
            
            <div class="committee-table-container">
                @if($committeeStructure->count() > 0)
                    <table class="clean-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Posisi</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Telepon</th>
                                @if($canManage)
                                    <th>Aksi</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($committeeStructure as $index => $member)
                                @php
                                    $phone = $member->phone;
                                    if (!$phone && $member->user && $member->user->profile) {
                                        $phone = $member->user->profile->no_hp;
                                    }
                                @endphp
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $member->position }}</td>
                                    <td>{{ $member->name }}</td>
                                    <td>{{ $member->email ?? '-' }}</td>
                                    <td>{{ $phone ?? '-' }}</td>
                                    @if($canManage)
                                        <td style="white-space: nowrap;">
                                            <button class="btn-action btn-edit" 
                                                    onclick="editCommittee({{ $member->id }}, '{{ addslashes($member->position) }}', {{ $member->user_id ?? 'null' }}, '{{ addslashes($member->name) }}', '{{ addslashes($phone ?? '') }}', '{{ addslashes($member->email ?? '') }}', {{ $member->order }})"
                                                    title="Edit Panitia">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <form action="{{ route('activity.preparation.destroy-committee', [$activity->id, $member->id]) }}" 
                                                  method="POST" 
                                                  onsubmit="return confirm('Yakin ingin menghapus panitia ini?')"
                                                  style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete" title="Hapus Panitia">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="empty-state">
                        <i class="fas fa-users"></i>
                        <p>Belum ada struktur kepanitiaan</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Two Column Layout -->
        <div class="preparation-container">
            <!-- Left Sidebar - Divisi -->
            <div class="divisi-sidebar">
                <div class="divisi-header">
                    <h3>Divisi</h3>
                    <button class="btn-add" onclick="openAddDivisionModal()" title="Tambah Divisi">
                        +
                    </button>
                </div>
                <div class="divisi-list">
                    @if($divisions->count() > 0)
                        @foreach($divisions as $division)
                            <div class="divisi-item-wrapper" style="margin-bottom: 0.5rem;">
                                <div class="divisi-item {{ $loop->first ? 'active' : '' }}" 
                                     onclick="selectDivision({{ $division->id }})"
                                     id="divisi-{{ $division->id }}"
                                     style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                                    <div style="display:flex; flex-direction:column; align-items:flex-start;">
                                        <span style="font-weight:600;">{{ $division->name }}</span>
                                        @if(!empty($division->leader_name))
                                            <span style="font-size: 0.85rem; opacity: .8;">Ketua: {{ $division->leader_name }}</span>
                                        @endif
                                    </div>
                                    <div class="divisi-actions" onclick="event.stopPropagation();" style="display: flex; gap: 0.25rem;">
                                        <button class="btn-action btn-edit" 
                                                onclick="editDivision({{ $division->id }}, '{{ addslashes($division->name) }}', '{{ addslashes($division->description ?? '') }}', '{{ addslashes($division->leader_name ?? '') }}')"
                                                title="Edit Divisi">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <form action="{{ route('activity.preparation.destroy-division', [$activity->id, $division->id]) }}" 
                                              method="POST" 
                                              onsubmit="return confirm('Yakin ingin menghapus divisi ini?')"
                                              style="display: inline; margin: 0;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-action btn-delete" title="Hapus Divisi">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="empty-state">
                            <i class="fas fa-sitemap"></i>
                            <p>Belum ada divisi</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Right Content Area - Tugas Divisi -->
            <div class="content-area">
                <div class="content-header">
                    <h3 id="contentTitle">Kebutuhan Divisi <span id="selectedDivisionName">- Pilih Divisi</span></h3>
                    <div style="display:flex; gap:.5rem; align-items:center;">
                    <button class="btn-add" id="addTaskBtn" onclick="openAddTaskModal()" title="Tambah Kebutuhan" style="display: none; opacity: 1; visibility: hidden;">
                        +
                    </button>
                    </div>
                </div>
                <div class="content-body" id="tasksContent">
                    <div class="empty-state">
                        <i class="fas fa-clipboard-list"></i>
                        <p>Pilih divisi untuk melihat daftar tugas dan tambah kebutuhan per tugas</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Container untuk menyamakan lebar dengan Struktur Kepanitiaan -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Rundown Acara Section -->
    <div class="rundown-section mt-3 mb-4">
        <div class="rundown-header">
            <h2 class="text-2xl font-bold text-gray-900">Rundown Acara</h2>
            @php
                // Creator/Panitia yang terkait aktivitas boleh menambah tanpa syarat langganan
                $canManage = auth()->user() && $activity->canManageRegistration(auth()->id());
            @endphp
            @if($canManage)
                <button class="btn-add" onclick="openAddRundownModal()" title="Tambah Rundown">
                    +
                </button>
            @endif
        </div>
        
        <div class="rundown-table-container">
            @if($rundowns->count() > 0)
                <table class="clean-table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Waktu</th>
                            <th>Judul</th>
                            <th>Pembicara</th>
                            <th>Penanggung Jawab</th>
                            <th>Deskripsi</th>
                            @if($canManage)
                                <th>Aksi</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rundowns as $index => $rundown)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    {{ \Carbon\Carbon::parse($rundown->start_time)->format('H:i') }}
                                    @if($rundown->end_time)
                                        - {{ \Carbon\Carbon::parse($rundown->end_time)->format('H:i') }}
                                    @endif
                                </td>
                                <td>{{ $rundown->title }}</td>
                                <td>{{ $rundown->speaker ?? '-' }}</td>
                                <td>{{ $rundown->location ?? '-' }}</td>
                                <td>{{ $rundown->description ?? '-' }}</td>
                                @if($canManage)
                                    <td>
                                        <button class="btn-action btn-edit" 
                                                onclick="editRundown({{ $rundown->id }}, '{{ addslashes($rundown->title) }}', '{{ addslashes($rundown->description ?? '') }}', '{{ addslashes($rundown->speaker ?? '') }}', '{{ addslashes($rundown->location ?? '') }}', '{{ \Carbon\Carbon::parse($rundown->start_time)->format('H:i') }}', '{{ $rundown->end_time ? \Carbon\Carbon::parse($rundown->end_time)->format('H:i') : '' }}', {{ $rundown->order }})"
                                                title="Edit Rundown">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <form action="{{ route('activity.preparation.destroy-rundown', [$activity->id, $rundown->id]) }}" 
                                              method="POST" 
                                              onsubmit="return confirm('Yakin ingin menghapus rundown ini?')"
                                              style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-action btn-delete" title="Hapus Rundown">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="empty-state">
                    <i class="fas fa-clock"></i>
                    <p>Belum ada rundown acara</p>
                </div>
            @endif
        </div>
    </div>
    </div>

<!-- Materi Acara Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="rundown-section mt-3 mb-4 w-full">
    <div class="rundown-header">
        <h2 class="text-2xl font-bold text-gray-900">Materi Acara</h2>
        @php
            // Sama seperti Rundown: cukup cek keterkaitan pengelolaan aktivitas
            $canManage = auth()->user() && $activity->canManageRegistration(auth()->id());
        @endphp
        @if($canManage)
            <button class="btn-add" onclick="openAddMaterialModal()" title="Upload Materi">
                +
            </button>
        @endif
    </div>
    
    <div class="rundown-table-container">
        @if($materials && $materials->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($materials as $material)
                    <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between mb-3">
                            <div class="flex items-center space-x-2 flex-1 min-w-0">
                                @if($material->isImage())
                                    <i class="fas fa-image text-blue-500 text-xl"></i>
                                @elseif($material->file_type === 'pdf')
                                    <i class="fas fa-file-pdf text-red-500 text-xl"></i>
                                @elseif($material->file_type === 'ppt')
                                    <i class="fas fa-file-powerpoint text-orange-500 text-xl"></i>
                                @elseif($material->file_type === 'doc')
                                    <i class="fas fa-file-word text-blue-600 text-xl"></i>
                                @elseif($material->isVideo())
                                    <i class="fas fa-file-video text-purple-500 text-xl"></i>
                                @elseif($material->isAudio())
                                    <i class="fas fa-file-audio text-green-500 text-xl"></i>
                                @elseif($material->file_type === 'link')
                                    <i class="fas fa-link text-blue-500 text-xl"></i>
                                @else
                                    <i class="fas fa-file text-gray-500 text-xl"></i>
                                @endif
                                <div class="flex-1 min-w-0">
                                    <h4 class="font-semibold text-sm text-gray-900 truncate" title="{{ $material->name }}">
                                        {{ $material->name }}
                                    </h4>
                                    <p class="text-xs text-gray-500">{{ $material->formatted_file_size }}</p>
                                </div>
                            </div>
                            @if($canManage)
                                <form action="{{ route('activity.preparation.destroy-material', [$activity->id, $material->id]) }}" 
                                      method="POST" 
                                      onsubmit="return confirm('Yakin ingin menghapus materi ini?')"
                                      class="ml-2">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700 transition-colors" title="Hapus">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                        
                        @if($material->description)
                            <p class="text-xs text-gray-600 mb-2 line-clamp-2">{{ $material->description }}</p>
                        @endif
                        
                        <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                            @php
                                $downloadHref = '';
                                if ($material->file_type === 'link') {
                                    $downloadHref = $material->file_path;
                                } elseif (\Illuminate\Support\Facades\Route::has('activity.preparation.download-material')) {
                                    $downloadHref = route('activity.preparation.download-material', [$activity->id, $material->id]);
                                } else {
                                    $path = $material->file_path;
                                    $materialUrl = '';
                                    if ($path) {
                                        $isAbsolute = \Illuminate\Support\Str::startsWith($path, ['http://','https://']);
                                        $isStoragePath = \Illuminate\Support\Str::startsWith($path, ['storage/']);
                                        $isAssetPath = \Illuminate\Support\Str::startsWith($path, ['assets/','public/assets/']);
                                        $publicPrefixed = \Illuminate\Support\Str::startsWith($path, ['public/']);
                                        if ($isAbsolute) {
                                            $materialUrl = $path;
                                        } elseif ($isAssetPath) {
                                            $materialUrl = asset($path);
                                        } elseif ($isStoragePath) {
                                            $materialUrl = asset($path);
                                        } else {
                                            $normalized = ltrim($path, '/');
                                            if ($publicPrefixed) {
                                                $normalized = \Illuminate\Support\Str::after($normalized, 'public/');
                                            }
                                            if (\Illuminate\Support\Facades\Storage::disk('public')->exists($normalized)) {
                                                $materialUrl = \Illuminate\Support\Facades\Storage::url($normalized);
                                            } else {
                                                $materialUrl = asset('storage/' . $normalized);
                                            }
                                        }
                                    }
                                    $downloadHref = $materialUrl;
                                }
                            @endphp
                            <a href="{{ $downloadHref }}" 
                                target="_blank" download="{{ $material->file_name }}"
                                class="text-blue-600 hover:text-blue-800 text-xs font-medium flex items-center">
                                <i class="fas fa-download mr-1"></i>
                                Download
                            </a>
                            <span class="text-xs text-gray-400">
                                {{ \Carbon\Carbon::parse($material->created_at)->format('d/m/Y') }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="empty-state">
                <i class="fas fa-folder-open"></i>
                <p>Belum ada materi acara</p>
            </div>
        @endif
    </div>
</div>

<!-- Add Division Modal -->

    @php $import = session('import_result'); @endphp
    @if($import)
    <div id="importResultBackdrop" style="position:fixed; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; z-index:10000;">
        <div class="modal-content" style="background:#fff; border-radius:16px; box-shadow:0 18px 50px rgba(15,23,42,0.25); width: 920px; max-width: 96vw; overflow:hidden;">
            <div class="modal-header" style="display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eef2f7;">
                <div style="display:flex; align-items:center; gap:12px;">
                    <div style="width:36px; height:36px; border-radius:10px; background:#4f46e5; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;">✓</div>
                    <div>
                        <div style="font-size:18px; font-weight:700; color:#0f172a;">Hasil Impor Peserta</div>
                        <div style="font-size:12px; color:#6b7280;">Ringkasan proses unggah data peserta</div>
                    </div>
                </div>
                <button type="button" onclick="document.getElementById('importResultBackdrop').remove();" style="border:none; background:#f3f4f6; color:#111827; width:36px; height:36px; border-radius:10px; font-size:20px;">×</button>
            </div>
            <div class="modal-body" style="padding:18px 20px;">
                <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;">
                    <div style="padding:8px 12px; border-radius:8px; background:#e8f5e9; color:#2e7d32; font-weight:600;">User baru: {{ data_get($import,'inserted',0) }}</div>
                    <div style="padding:8px 12px; border-radius:8px; background:#e3f2fd; color:#1565c0; font-weight:600;">Update: {{ data_get($import,'updated',0) }}</div>
                    <div style="padding:8px 12px; border-radius:8px; background:#fff3e0; color:#ef6c00; font-weight:600;">Ditautkan: {{ data_get($import,'linked',0) }}</div>
                    <div style="padding:8px 12px; border-radius:8px; background:#ede7f6; color:#5e35b1; font-weight:600;">Sudah tertaut: {{ data_get($import,'already_linked',0) }}</div>
                    <div style="padding:8px 12px; border-radius:8px; background:#ffebee; color:#c62828; font-weight:600;">Dilewati: {{ data_get($import,'skipped',0) }}</div>
                </div>
                <div style="background:#f9fafb; border:1px solid #e5e7eb; border-radius:12px; padding:14px; margin-bottom:18px;">
                    <div style="font-size:13px; color:#374151;">User baru telah dikirimkan email verifikasi. Peserta dengan email belum diverifikasi akan berstatus <strong>Sedang Verifikasi</strong> pada aktivitas hingga email terverifikasi.</div>
                </div>
                <div style="border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
                    <table style="width:100%; font-size:13px;">
                        <thead style="background:#f3f4f6;">
                            <tr>
                                <th style="text-align:left; padding:8px 10px;">Baris</th>
                                <th style="text-align:left; padding:8px 10px;">Email</th>
                                <th style="text-align:left; padding:8px 10px;">Status</th>
                                <th style="text-align:left; padding:8px 10px;">Alasan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $successes = data_get($import,'successes',[]);
                                $failures = data_get($import,'failures',[]);
                            @endphp
                            @forelse($successes as $s)
                                <tr>
                                    <td style="padding:8px 10px;">{{ data_get($s,'row') }}</td>
                                    <td style="padding:8px 10px;">{{ data_get($s,'email') }}</td>
                                    <td style="padding:8px 10px; color:#0f766e; font-weight:700;">Berhasil</td>
                                    <td style="padding:8px 10px;">Selamat</td>
                                </tr>
                            @empty
                            @endforelse
                            @forelse($failures as $f)
                                <tr>
                                    <td style="padding:8px 10px;">{{ data_get($f,'row') }}</td>
                                    <td style="padding:8px 10px;">{{ data_get($f,'email') }}</td>
                                    <td style="padding:8px 10px; color:#b91c1c; font-weight:700;">Gagal</td>
                                    <td style="padding:8px 10px;">{{ data_get($f,'reason') }}</td>
                                </tr>
                            @empty
                            @endforelse
                            @if(empty($successes) && empty($failures))
                                <tr><td style="padding:8px 10px;" colspan="4">Tidak ada data</td></tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer" style="display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #eef2f7;">
                <button type="button" onclick="copyImportSummary()" style="border:none; background:#f3f4f6; color:#111827; padding:10px 14px; border-radius:10px; font-weight:600;">Salin Ringkasan</button>
                <button type="button" onclick="downloadImportCsv()" style="border:none; background:#10b981; color:#fff; padding:10px 14px; border-radius:10px; font-weight:600;">Unduh CSV</button>
                <a href="{{ route('activity.preparation.download-import-result-excel', $activity->id) }}" style="text-decoration:none; border:none; background:#059669; color:#fff; padding:10px 14px; border-radius:10px; font-weight:600;">Unduh Excel</a>
                <button type="button" style="border:none; background:#4f46e5; color:#fff; padding:10px 14px; border-radius:10px; font-weight:600;" onclick="document.getElementById('importResultBackdrop').remove();">Tutup</button>
            </div>
        </div>
    </div>
    <script>
    function copyImportSummary(){
        var data = {{ json_encode($import) }};
        var lines = [];
        lines.push('Hasil Impor Peserta');
        lines.push('User baru: ' + (data.inserted||0));
        lines.push('Update: ' + (data.updated||0));
        lines.push('Ditautkan: ' + (data.linked||0));
        lines.push('Sudah tertaut: ' + (data.already_linked||0));
        lines.push('Dilewati: ' + (data.skipped||0));
        var failures = Array.isArray(data.failures) ? data.failures : [];
        if(failures.length){
            var reasonCount = {};
            failures.forEach(function(f){ var r = (f.reason||''); reasonCount[r] = (reasonCount[r]||0)+1; });
            lines.push('Ringkasan Alasan:');
            Object.keys(reasonCount).forEach(function(k){ lines.push('- ' + k + ': ' + reasonCount[k]); });
        }
        var txt = lines.join('\n');
        navigator.clipboard && navigator.clipboard.writeText(txt).then(function(){}, function(){});
    }

    function downloadImportCsv(){
        var data = {{ json_encode($import) }};
        var rows = [];
        rows.push(['Baris','Email','Status','Alasan']);
        var successes = Array.isArray(data.successes) ? data.successes : [];
        var failures = Array.isArray(data.failures) ? data.failures : [];
        successes.forEach(function(s){
            rows.push([s.row||'', s.email||'', 'Berhasil', 'Selamat']);
        });
        failures.forEach(function(f){
            rows.push([f.row||'', f.email||'', 'Gagal', f.reason||'']);
        });
        var csv = rows.map(function(r){
            return r.map(function(cell){
                var v = String(cell||'');
                if(v.includes(',') || v.includes('"') || v.includes('\n')){
                    v = '"' + v.replace(/"/g,'""') + '"';
                }
                return v;
            }).join(',');
        }).join('\n');
        var blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'hasil_impor_peserta_{{ $activity->id }}_{{ date('Ymd_His') }}.csv';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setTimeout(function(){ URL.revokeObjectURL(url); }, 1000);
    }
    </script>
    @endif
<div class="modal fade" id="addDivisionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Divisi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addDivisionForm" action="{{ route('activity.preparation.store-division', $activity->id) }}" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Divisi *</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Nama Ketua</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="addDivisionLeaderNameSearch" class="form-control search-input-inside" placeholder="Cari ketua...">
                            <select name="leader_name" id="addDivisionLeaderName" class="form-control searchable-select">
                                <option value="">-- Pilih Ketua dari Panitia --</option>
                            @foreach($committeeStructure as $cm)
                                @php
                                    $nm = trim(($cm->user->name ?? '') ?: ($cm->user->profile->name ?? ''));
                                @endphp
                                @if($nm)
                                    <option value="{{ $nm }}">{{ $nm }}</option>
                                @endif
                            @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
    </div>

    <!-- Edit Division Modal -->
<div class="modal fade" id="editDivisionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Divisi</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editDivisionForm" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Divisi *</label>
                        <input type="text" name="name" id="editDivisionName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea name="description" id="editDivisionDescription" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Nama Ketua</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="editDivisionLeaderNameSearch" class="form-control search-input-inside" placeholder="Cari ketua...">
                            <select name="leader_name" id="editDivisionLeaderName" class="form-control searchable-select">
                                <option value="">-- Pilih Ketua dari Panitia --</option>
                                @foreach($committeeStructure as $cm)
                                    @php
                                        $nm = trim(($cm->user->name ?? '') ?: ($cm->user->profile->name ?? ''));
                                    @endphp
                                    @if($nm)
                                        <option value="{{ $nm }}">{{ $nm }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Need Modal -->
<div class="modal fade" id="addNeedModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Kebutuhan untuk Tugas</h5>
                <button type="button" class="close" onclick="closeAddNeedModal()"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Nama Kebutuhan *</label>
                    <input type="text" id="needName" class="form-control" required placeholder="Contoh: Surat, Laptop, Spanduk">
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Jumlah</label>
                            <input type="number" id="needQuantity" class="form-control" min="1" value="1">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Satuan</label>
                            <input type="text" id="needUnit" class="form-control" placeholder="buah, unit, set">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeAddNeedModal()">Batal</button>
                <button type="button" class="btn btn-primary" onclick="submitAddNeed()">Simpan</button>
            </div>
        </div>
    </div>
    </div>

<!-- Add Requirement Modal -->
<div class="modal fade" id="addRequirementModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Kebutuhan</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addRequirementForm" method="POST" onsubmit="handleFormSubmit(event, selectedDivisionId);">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kebutuhan *</label>
                        <input type="text" name="name" class="form-control" required placeholder="Nama tugas/perlengkapan">
                    </div>
                    <div class="form-group">
                        <label>Jumlah</label>
                        <input type="number" name="quantity" class="form-control" value="1" min="1">
                    </div>
                    <div class="form-group">
                        <label>Target</label>
                        <input type="date" name="target_date" id="targetDate" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Catatan</label>
                        <textarea name="notes" class="form-control" rows="3" placeholder="Catatan tentang tugas ini"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="addRequirementStatusSearch" class="form-control search-input-inside" placeholder="Cari status...">
                            <select name="status" id="addRequirementStatus" class="form-control searchable-select">
                                <option value="pending">Belum Proses</option>
                                <option value="ready">Proses</option>
                                <option value="completed">Selesai</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Requirement Modal -->
<div class="modal fade" id="editRequirementModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Kebutuhan</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editRequirementForm" method="POST" onsubmit="handleFormSubmit(event, selectedDivisionId);">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kebutuhan *</label>
                        <input type="text" name="name" id="editRequirementName" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Jumlah</label>
                        <input type="number" name="quantity" id="editRequirementQuantity" class="form-control" min="1">
                    </div>
                    <div class="form-group">
                        <label>Target</label>
                        <input type="date" name="target_date" id="editRequirementTargetDate" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Catatan</label>
                        <textarea name="notes" id="editRequirementNotes" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Status</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="editRequirementStatusSearch" class="form-control search-input-inside" placeholder="Cari status...">
                            <select name="status" id="editRequirementStatus" class="form-control searchable-select">
                                <option value="pending">Belum Proses</option>
                                <option value="ready">Proses</option>
                                <option value="completed">Selesai</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let selectedDivisionId = null;
const divisionsData = @json($divisions);

function selectDivision(divisionId) {
    selectedDivisionId = divisionId;
    
    // Update active state
    document.querySelectorAll('.divisi-item').forEach(item => {
        item.classList.remove('active');
    });
    document.getElementById('divisi-' + divisionId).classList.add('active');
    
    // Find division data
    const division = divisionsData.find(d => d.id === divisionId);
    if (!division) return;
    
    // Update content header
    document.getElementById('selectedDivisionName').textContent = division.name;
    const addTaskBtn = document.getElementById('addTaskBtn');
            if (addTaskBtn) {
                addTaskBtn.classList.add('show');
                addTaskBtn.style.display = 'flex';
                addTaskBtn.style.visibility = 'visible';
                addTaskBtn.style.opacity = '1';
            }
            // Tombol Kelola dihapus: tambah kebutuhan dilakukan inline via modal
    
    // Load tasks/requirements
    loadDivisionRequirements(divisionId);
}

function openAddDivisionModal() {
    const modal = document.getElementById('addDivisionModal');
    if (!modal) {
        
        return;
    }
    
    // Reset form
    const form = document.getElementById('addDivisionForm');
    if (form) {
        form.reset();
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#addDivisionModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('addDivisionModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('addDivisionModal');
        };
    }
}

function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = 'none';
        modal.classList.remove('show');
        modal.setAttribute('aria-hidden', 'true');
    }
    document.body.classList.remove('modal-open');
    const backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) {
        backdrop.remove();
    }
    
    // Try jQuery if available
    if (typeof $ !== 'undefined' && $.fn.modal) {
        $('#' + modalId).modal('hide');
    }
}

function openAddTaskModal() {
    if (!selectedDivisionId) {
        alert('Pilih divisi terlebih dahulu');
        return;
    }
    
    const form = document.getElementById('addRequirementForm');
    if (!form) {
        
        alert('Form tidak ditemukan. Silakan refresh halaman.');
        return;
    }
    
    form.action = '{{ route("activity.preparation.store-requirement", [$activity->id, ":divisionId"]) }}'.replace(':divisionId', selectedDivisionId);
    form.reset();
    // Set default date to activity date
    @if($activity->date)
        const targetDateInput = document.getElementById('targetDate');
        if (targetDateInput) {
            const activityDate = '{{ \Carbon\Carbon::parse($activity->date)->format("Y-m-d") }}';
            targetDateInput.value = activityDate;
        }
    @endif
    
    const modal = document.getElementById('addRequirementModal');
    if (!modal) {
        
        return;
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#addRequirementModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('addRequirementModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('addRequirementModal');
        };
    }
}

function prepareAddTask(divisionId) {
    selectedDivisionId = divisionId;
    openAddTaskModal();
}

function loadDivisionRequirements(divisionId) {
    fetch(`{{ route('activity.preparation.requirements', [$activity->id, ':divisionId']) }}`.replace(':divisionId', divisionId), {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            const content = document.getElementById('tasksContent');
            if (data.requirements && data.requirements.length > 0) {
                let html = '<table class="tasks-table"><thead><tr><th>Kebutuhan</th><th>Target</th><th>Status</th><th>Catatan</th><th>Item Kebutuhan</th></tr></thead><tbody>';
                data.requirements.forEach(req => {
                    let targetDate = '-';
                    if (req.target_date) {
                        const date = new Date(req.target_date);
                        targetDate = date.toLocaleDateString('id-ID', { 
                            day: '2-digit', 
                            month: '2-digit', 
                            year: 'numeric' 
                        });
                    }
                    // Checkbox removed - no longer needed
                    
                    // Map status untuk dropdown
                    const statusMap = {
                        'pending': 'belum proses',
                        'ready': 'proses',
                        'completed': 'selesai'
                    };
                    
                    const statusOptions = [
                        { value: 'pending', label: 'Belum Proses' },
                        { value: 'ready', label: 'Proses' },
                        { value: 'completed', label: 'Selesai' }
                    ];
                    
                    let statusSelectOptions = '';
                    statusOptions.forEach(opt => {
                        const selected = req.status === opt.value ? 'selected' : '';
                        statusSelectOptions += `<option value="${opt.value}" ${selected}>${opt.label}</option>`;
                    });
                    
                    // Pisahkan kebutuhan dari catatan: baris berisi '|' dianggap item kebutuhan
                    const fullNotes = req.notes || '';
                    const needs = parseNeedsFromNotes(fullNotes);
                    const textNotes = extractTextNotes(fullNotes);
                    const hasNotes = textNotes.trim() !== '';
                    const displayNotes = hasNotes ? textNotes : '';
                    
                    html += `
                        <tr>
                            <td style="vertical-align: top; text-align: left;">
                                <span id="task-name-display-${req.id}" 
                                      class="task-name-editable" 
                                      onclick="editTaskNameInPlace(${req.id}, ${divisionId})"
                                      title="Klik untuk edit tugas"
                                      style="display: inline-block; text-align: left; vertical-align: top;">
                                    ${req.name}${req.quantity > 1 ? ' (' + req.quantity + ')' : ''}
                                </span>
                                <input type="text" 
                                       id="task-name-edit-${req.id}" 
                                       class="form-control task-name-edit-input" 
                                       style="display:none; width: auto; min-width: 200px; text-align: left;" 
                                       value="${req.name}"
                                       onblur="saveTaskNameInPlace(${req.id}, ${divisionId})"
                                       onkeydown="handleTaskNameKeydown(event, ${req.id}, ${divisionId})">
                            </td>
                            <td>
                                <span id="target-display-${req.id}" 
                                      class="task-target-editable" 
                                      onclick="editTargetDateInPlace(${req.id}, ${divisionId})"
                                      title="Klik untuk edit tanggal target">
                                    ${targetDate}
                                </span>
                                <input type="date" 
                                       id="target-edit-${req.id}" 
                                       class="form-control target-edit-input" 
                                       style="display:none; width: auto; min-width: 150px;" 
                                       value="${req.target_date || ''}"
                                       data-original-date="${req.target_date || ''}"
                                       onblur="saveTargetDateInPlace(${req.id}, ${divisionId})"
                                       onchange="saveTargetDateInPlace(${req.id}, ${divisionId})">
                            </td>
                            <td style="width: auto;">
                                <select class="form-control status-select" 
                                        onchange="updateTaskStatus(${req.id}, ${divisionId}, this.value)"
                                        style="width: auto; min-width: 120px; max-width: 150px; padding: 0.375rem 0.75rem; display: inline-block;">
                                    ${statusSelectOptions}
                                </select>
                            </td>
                            <td style="vertical-align: top !important; text-align: left !important;">
                                <span id="notes-display-${req.id}" 
                                      class="task-notes-editable ${!hasNotes ? 'notes-empty' : ''}" 
                                      onclick="editNotesInPlace(${req.id}, ${divisionId})"
                                      title="Klik untuk edit catatan"
                                      style="display: inline-block !important; text-align: left; vertical-align: top;">
                                    ${hasNotes ? displayNotes : ''}
                                </span>
                                <input type="text" 
                                       id="notes-edit-${req.id}" 
                                       class="form-control notes-edit-input" 
                                       style="display: none !important; width: auto; min-width: 200px; text-align: left;" 
                                       value="${displayNotes}"
                                       onblur="saveNotesInPlace(${req.id}, ${divisionId})"
                                       onkeydown="handleNotesKeydown(event, ${req.id}, ${divisionId})">
                                <input type="hidden" id="needs-raw-${req.id}" value="${escapeHtml(stringifyNeedsToNotes(needs))}">
                            </td>
                            <td style="vertical-align: top; position: relative; padding-right: 40px;">
                                ${needs.length === 0 ? '<span class="text-gray-400">-</span>' : needs.map(n => `<span class=\"badge\" style=\"background:#eef2f7;color:#111827;margin-right:.25rem;\">${escapeHtml(n.name)}${n.quantity?` (${n.quantity}${n.unit?` ${escapeHtml(n.unit)}`:''})`:''}</span>`).join('')}
                                <button class="rounded-full bg-indigo-600 text-white shadow hover:bg-indigo-700" style="position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;" onclick="openAddNeedModal(${req.id}, ${divisionId})" title="Tambah kebutuhan">
                                    <i class="fas fa-plus" aria-hidden="true"></i>
                                </button>
                            </td>
                        </tr>
                    `;
                });
                html += '</tbody></table>';
                content.innerHTML = html;
            } else {
                content.innerHTML = '<div class="empty-state"><i class="fas fa-clipboard-list"></i><p>Belum ada tugas. Klik tombol + untuk menambahkan.</p></div>';
            }
        })
        .catch(error => {
            
            // Fallback: redirect to requirements page
            window.location.href = `{{ route('activity.preparation.requirements', [$activity->id, ':divisionId']) }}`.replace(':divisionId', divisionId);
        });
}

function updateTaskStatus(requirementId, divisionId, newStatus) {
    // Update via AJAX
    const formData = new FormData();
    formData.append('status', newStatus);
    formData.append('_method', 'PUT');
    formData.append('_token', '{{ csrf_token() }}');
    
    fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success || !data.errors) {
            // Update checkbox visual state based on new status
            loadDivisionRequirements(divisionId);
        } else {
            alert('Gagal mengupdate status');
            loadDivisionRequirements(divisionId); // Reload to reset
        }
    })
    .catch(error => {
        
        alert('Terjadi kesalahan saat mengupdate status');
        loadDivisionRequirements(divisionId); // Reload to reset
    });
}

// Checkbox removed - status is now managed via dropdown only

function editNotesInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`notes-display-${requirementId}`);
    const editInput = document.getElementById(`notes-edit-${requirementId}`);
    
    if (displaySpan && editInput) {
        displaySpan.style.setProperty('display', 'none', 'important');
        editInput.style.setProperty('display', 'inline-block', 'important');
        // Get actual text content (excluding ::before pseudo-element)
        const currentNotes = displaySpan.classList.contains('notes-empty') ? '' : displaySpan.textContent.trim();
        editInput.value = currentNotes;
        editInput.focus();
        editInput.select();
    }
}

function saveNotesInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`notes-display-${requirementId}`);
    const editInput = document.getElementById(`notes-edit-${requirementId}`);
    const needsHidden = document.getElementById(`needs-raw-${requirementId}`);
    
    if (!displaySpan || !editInput) return;
    
    const newNotesText = editInput.value.trim();
    const needsRaw = needsHidden ? needsHidden.value : '';
    const combinedNotes = needsRaw ? (newNotesText ? `${needsRaw}\n${newNotesText}` : needsRaw) : newNotesText;
    // Get current notes, handling empty state
    const currentNotes = displaySpan.classList.contains('notes-empty') ? '' : displaySpan.textContent.trim();
    
    // Hide input, show span
    editInput.style.setProperty('display', 'none', 'important');
    displaySpan.style.setProperty('display', 'inline-block', 'important');
    
    // Only update if notes actually changed
    if (newNotesText !== currentNotes) {
        // Show loading state
        displaySpan.textContent = 'Menyimpan...';
        displaySpan.style.color = '#999';
        
        // Update via AJAX
        const formData = new FormData();
        formData.append('notes', combinedNotes);
        formData.append('_method', 'PUT');
        formData.append('_token', '{{ csrf_token() }}');
        
        fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success || !data.errors) {
                if (newNotesText) {
                    displaySpan.textContent = newNotesText;
                    displaySpan.classList.remove('notes-empty');
                    displaySpan.style.color = '';
                    displaySpan.style.setProperty('display', 'inline-block', 'important');
                    editInput.style.setProperty('display', 'none', 'important');
                } else {
                    displaySpan.textContent = '';
                    displaySpan.classList.add('notes-empty');
                    displaySpan.style.color = '#999';
                    displaySpan.style.setProperty('display', 'inline-block', 'important');
                    editInput.style.setProperty('display', 'none', 'important');
                }
            } else {
                alert('Gagal memperbarui catatan: ' + (data.message || 'Terjadi kesalahan.'));
                if (currentNotes) {
                    displaySpan.textContent = currentNotes;
                    displaySpan.classList.remove('notes-empty');
                } else {
                    displaySpan.textContent = '';
                    displaySpan.classList.add('notes-empty');
                }
                displaySpan.style.color = '';
                displaySpan.style.setProperty('display', 'inline-block', 'important');
                editInput.style.setProperty('display', 'none', 'important');
            }
        })
        .catch(error => {
            
            alert('Terjadi kesalahan saat memperbarui catatan.');
            if (currentNotes) {
                displaySpan.textContent = currentNotes;
                displaySpan.classList.remove('notes-empty');
            } else {
                displaySpan.textContent = '';
                displaySpan.classList.add('notes-empty');
            }
            displaySpan.style.color = '';
            displaySpan.style.setProperty('display', 'inline-block', 'important');
            editInput.style.setProperty('display', 'none', 'important');
        });
    } else {
        // No change, just update display
        if (newNotesText) {
            displaySpan.textContent = newNotesText;
            displaySpan.classList.remove('notes-empty');
            displaySpan.style.color = '';
            displaySpan.style.setProperty('display', 'inline-block', 'important');
            editInput.style.setProperty('display', 'none', 'important');
        } else {
            displaySpan.textContent = '';
            displaySpan.classList.add('notes-empty');
            displaySpan.style.color = '#999';
            displaySpan.style.setProperty('display', 'inline-block', 'important');
            editInput.style.setProperty('display', 'none', 'important');
        }
    }
}

function handleNotesKeydown(event, requirementId, divisionId) {
    // Save on Enter
    if (event.key === 'Enter') {
        event.preventDefault();
        saveNotesInPlace(requirementId, divisionId);
    }
    // Cancel on Escape
    if (event.key === 'Escape') {
        const displaySpan = document.getElementById(`notes-display-${requirementId}`);
        const editInput = document.getElementById(`notes-edit-${requirementId}`);
        if (displaySpan && editInput) {
            const currentNotes = displaySpan.classList.contains('notes-empty') ? '' : displaySpan.textContent.trim();
            editInput.value = currentNotes;
            editInput.style.setProperty('display', 'none', 'important');
            displaySpan.style.setProperty('display', 'inline-block', 'important');
        }
    }
}

function editTaskNameInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`task-name-display-${requirementId}`);
    const editInput = document.getElementById(`task-name-edit-${requirementId}`);
    
    if (displaySpan && editInput) {
        displaySpan.style.display = 'none';
        editInput.style.display = 'inline-block';
        // Extract task name (remove quantity if exists)
        const fullText = displaySpan.textContent.trim();
        const taskName = fullText.replace(/\s*\(\d+\)\s*$/, ''); // Remove "(quantity)" at the end
        editInput.value = taskName;
        editInput.focus();
        editInput.select();
    }
}

function saveTaskNameInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`task-name-display-${requirementId}`);
    const editInput = document.getElementById(`task-name-edit-${requirementId}`);
    
    if (!displaySpan || !editInput) return;
    
    const newName = editInput.value.trim();
    const currentText = displaySpan.textContent.trim();
    const currentName = currentText.replace(/\s*\(\d+\)\s*$/, '');
    
    // Hide input, show span
    editInput.style.display = 'none';
    displaySpan.style.display = 'inline-block';
    
    // Only update if name actually changed
    if (newName !== currentName && newName) {
        // Show loading state
        displaySpan.textContent = 'Menyimpan...';
        
        // Update via AJAX
        const formData = new FormData();
        formData.append('name', newName);
        formData.append('_method', 'PUT');
        formData.append('_token', '{{ csrf_token() }}');
        
        fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success || !data.errors) {
                // Reload to get updated data with quantity
                loadDivisionRequirements(divisionId);
            } else {
                alert('Gagal memperbarui tugas: ' + (data.message || 'Terjadi kesalahan.'));
                displaySpan.textContent = currentText;
            }
        })
        .catch(error => {
            
            alert('Terjadi kesalahan saat memperbarui tugas.');
            displaySpan.textContent = currentText;
        });
    } else {
        displaySpan.textContent = currentText;
    }
}

function handleTaskNameKeydown(event, requirementId, divisionId) {
    // Save on Enter
    if (event.key === 'Enter') {
        event.preventDefault();
        saveTaskNameInPlace(requirementId, divisionId);
    }
    // Cancel on Escape
    if (event.key === 'Escape') {
        const displaySpan = document.getElementById(`task-name-display-${requirementId}`);
        const editInput = document.getElementById(`task-name-edit-${requirementId}`);
        if (displaySpan && editInput) {
            const currentText = displaySpan.textContent.trim();
            const currentName = currentText.replace(/\s*\(\d+\)\s*$/, '');
            editInput.value = currentName;
            editInput.style.display = 'none';
            displaySpan.style.display = 'inline-block';
        }
    }
}

function editTargetDateInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`target-display-${requirementId}`);
    const editInput = document.getElementById(`target-edit-${requirementId}`);
    
    if (displaySpan && editInput) {
        displaySpan.style.display = 'none';
        editInput.style.display = 'inline-block';
        
        // Focus and try to open date picker
        setTimeout(() => {
            editInput.focus();
            // Try to open native date picker (Chrome, Edge)
            if (typeof editInput.showPicker === 'function') {
                try {
                    editInput.showPicker();
                } catch (e) {
                    // Fallback to click if showPicker fails
                    editInput.click();
                }
            } else {
                // For browsers that don't support showPicker, just click
                editInput.click();
            }
        }, 10);
    }
}

function saveTargetDateInPlace(requirementId, divisionId) {
    const displaySpan = document.getElementById(`target-display-${requirementId}`);
    const editInput = document.getElementById(`target-edit-${requirementId}`);
    
    if (!displaySpan || !editInput) return;
    
    const newDate = editInput.value;
    const currentDate = editInput.dataset.originalDate || '';
    
    // Hide input, show span
    editInput.style.display = 'none';
    displaySpan.style.display = 'inline-block';
    
    // Format date for display
    let displayDate = '-';
    if (newDate) {
        const date = new Date(newDate);
        displayDate = date.toLocaleDateString('id-ID', { 
            day: '2-digit', 
            month: '2-digit', 
            year: 'numeric' 
        });
    }
    
    // Only update if date actually changed
    if (newDate !== currentDate) {
        // Show loading state
        displaySpan.textContent = 'Menyimpan...';
        displaySpan.style.color = '#999';
        
        // Update via AJAX
        const formData = new FormData();
        formData.append('target_date', newDate);
        formData.append('_method', 'PUT');
        formData.append('_token', '{{ csrf_token() }}');
        
        fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success || !data.errors) {
                displaySpan.textContent = displayDate;
                displaySpan.style.color = '';
                editInput.dataset.originalDate = newDate;
            } else {
                alert('Gagal memperbarui tanggal target: ' + (data.message || 'Terjadi kesalahan.'));
                // Revert to original
                if (currentDate) {
                    const date = new Date(currentDate);
                    displaySpan.textContent = date.toLocaleDateString('id-ID', { 
                        day: '2-digit', 
                        month: '2-digit', 
                        year: 'numeric' 
                    });
                } else {
                    displaySpan.textContent = '-';
                }
                displaySpan.style.color = '';
                editInput.value = currentDate;
            }
        })
        .catch(error => {
            
            alert('Terjadi kesalahan saat memperbarui tanggal target.');
            // Revert to original
            if (currentDate) {
                const date = new Date(currentDate);
                displaySpan.textContent = date.toLocaleDateString('id-ID', { 
                    day: '2-digit', 
                    month: '2-digit', 
                    year: 'numeric' 
                });
            } else {
                displaySpan.textContent = '-';
            }
            displaySpan.style.color = '';
            editInput.value = currentDate;
        });
    } else {
        displaySpan.textContent = displayDate;
        displaySpan.style.color = '';
    }
}

function editRequirement(id, divisionId) {
    // Load requirement data via AJAX
    fetch(`{{ route('activity.preparation.requirements', [$activity->id, ':divisionId']) }}`.replace(':divisionId', divisionId), {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(response => response.json())
        .then(data => {
            const req = data.requirements.find(r => r.id === id);
            if (req) {
                document.getElementById('editRequirementForm').action = `{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', id);
                document.getElementById('editRequirementName').value = req.name || '';
                document.getElementById('editRequirementQuantity').value = req.quantity || 1;
                document.getElementById('editRequirementTargetDate').value = req.target_date || '';
                document.getElementById('editRequirementNotes').value = req.notes || '';
                document.getElementById('editRequirementStatus').value = req.status || 'pending';
                $('#editRequirementModal').modal('show');
            }
        })
        .catch(error => {
            
            alert('Gagal memuat data tugas');
        });
}

function deleteRequirement(requirementId, divisionId) {
    if (confirm('Yakin ingin menghapus tugas ini?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `{{ route('activity.preparation.destroy-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId);
        
        const csrf = document.createElement('input');
        csrf.type = 'hidden';
        csrf.name = '_token';
        csrf.value = '{{ csrf_token() }}';
        form.appendChild(csrf);
        
        const method = document.createElement('input');
        method.type = 'hidden';
        method.name = '_method';
        method.value = 'DELETE';
        form.appendChild(method);
        
        document.body.appendChild(form);
        form.submit();
    }
}

function editDivision(id, name, description, leaderName) {
    $('#editDivisionForm').attr('action', '{{ route("activity.preparation.update-division", [$activity->id, ":id"]) }}'.replace(':id', id));
    $('#editDivisionName').val(name || '');
    $('#editDivisionDescription').val(description || '');
    $('#editDivisionLeaderName').val(leaderName || '');
    $('#editDivisionModal').modal('show');
}

function handleFormSubmit(event, divisionId) {
    event.preventDefault();
    const form = event.target;
    
    // Prevent double submission
    if (form.dataset.submitting === 'true') {
        return;
    }
    form.dataset.submitting = 'true';
    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) {
        submitBtn.disabled = true;
    }

    const formData = new FormData(form);
    
    fetch(form.action, {
        method: form.method,
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        // Ensure we only proceed on JSON success
        const contentType = response.headers.get('content-type') || '';
        if (!response.ok) {
            throw new Error('Network error');
        }
        if (contentType.includes('application/json')) {
            return response.json();
        }
        // Non-JSON response: treat as error to avoid duplicate fallback submissions
        throw new Error('Unexpected response');
    })
    .then(data => {
        if (data && data.success) {
            // Close modal and refresh tasks for selected division
            if (typeof $ !== 'undefined' && $.fn.modal) {
                $(form).closest('.modal').modal('hide');
            } else {
                const modal = form.closest('.modal');
                if (modal) {
                    modal.style.display = 'none';
                    modal.classList.remove('show');
                }
            }
            if (divisionId) {
                loadDivisionRequirements(divisionId);
            } else {
                location.reload();
            }
        } else {
            alert('Gagal menyimpan data.');
        }
    })
    .catch(error => {
        
        alert('Terjadi kesalahan jaringan saat menyimpan. Coba lagi.');
    })
    .finally(() => {
        form.dataset.submitting = 'false';
        if (submitBtn) {
            submitBtn.disabled = false;
        }
    });
}

// Ensure jQuery is loaded and initialize modals
$(document).ready(function() {
    // Initialize Bootstrap modals
    if (typeof $ !== 'undefined' && $.fn.modal) {
        // Handle modal close
        $('.modal .close, .modal [data-dismiss="modal"]').on('click', function() {
            $(this).closest('.modal').modal('hide');
        });
    }
    
    // Select first division by default if exists
    @if($divisions->count() > 0)
        selectDivision({{ $divisions->first()->id }});
    @endif
    
    // Ensure add task button is visible after selecting division
    setTimeout(function() {
        if (selectedDivisionId) {
            const addTaskBtn = document.getElementById('addTaskBtn');
            if (addTaskBtn) {
                addTaskBtn.classList.add('show');
                addTaskBtn.style.display = 'flex';
                addTaskBtn.style.visibility = 'visible';
                addTaskBtn.style.opacity = '1';
                
            }
        }
    }, 200);

    var s2ready=function(){
        if (typeof $.fn.select2 === 'function') {
            try {
                $('#addCommitteePosition').select2({ dropdownParent: $('#addCommitteeModal'), width: '100%', placeholder: '-- Pilih Posisi --' });
                $('#addCommitteeUserId').select2({ dropdownParent: $('#addCommitteeModal'), width: '100%', placeholder: '-- Pilih User --' });
                $('#editCommitteePosition').select2({ dropdownParent: $('#editCommitteeModal'), width: '100%', placeholder: '-- Pilih Posisi --' });
                $('#editCommitteeUserId').select2({ dropdownParent: $('#editCommitteeModal'), width: '100%', placeholder: '-- Pilih User --' });
                $('#addDivisionLeaderName').select2({ dropdownParent: $('#addDivisionModal'), width: '100%', placeholder: '-- Pilih Ketua --' });
                $('#editDivisionLeaderName').select2({ dropdownParent: $('#editDivisionModal'), width: '100%', placeholder: '-- Pilih Ketua --' });
                $('#addRequirementStatus').select2({ dropdownParent: $('#addRequirementModal'), width: '100%', placeholder: 'Pilih Status' });
                $('#editRequirementStatus').select2({ dropdownParent: $('#editRequirementModal'), width: '100%', placeholder: 'Pilih Status' });
            } catch($e) {}
        }
    };
    s2ready();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- Add Committee Modal -->
<div class="modal fade" id="addCommitteeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Panitia</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addCommitteeForm" action="{{ route('activity.preparation.store-committee', $activity->id) }}" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Posisi *</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="addCommitteePositionSearch" class="form-control search-input-inside" placeholder="Cari posisi...">
                            <select name="position" id="addCommitteePosition" class="form-control searchable-select" required onchange="handlePositionChange('add')">
                                <option value="">-- Pilih Posisi --</option>
                            <option value="Ketua Panitia">Ketua Panitia</option>
                            <option value="Wakil Ketua Panitia">Wakil Ketua Panitia</option>
                            <option value="Sekretaris">Sekretaris</option>
                            <option value="Wakil Sekretaris">Wakil Sekretaris</option>
                            <option value="Bendahara">Bendahara</option>
                            <option value="Wakil Bendahara">Wakil Bendahara</option>
                            <option value="Koordinator Acara">Koordinator Acara</option>
                            <option value="Anggota Acara">Anggota Acara</option>
                            <option value="Koordinator Logistik">Koordinator Logistik</option>
                            <option value="Anggota Logistik">Anggota Logistik</option>
                            <option value="Koordinator Dokumentasi">Koordinator Dokumentasi</option>
                            <option value="Anggota Dokumentasi">Anggota Dokumentasi</option>
                            <option value="Koordinator Konsumsi">Koordinator Konsumsi</option>
                            <option value="Anggota Konsumsi">Anggota Konsumsi</option>
                            <option value="Koordinator Perlengkapan">Koordinator Perlengkapan</option>
                            <option value="Anggota Perlengkapan">Anggota Perlengkapan</option>
                            <option value="Koordinator Humas">Koordinator Humas</option>
                            <option value="Anggota Humas">Anggota Humas</option>
                            <option value="Koordinator IT">Koordinator IT</option>
                            <option value="Anggota IT">Anggota IT</option>
                            <option value="custom">-- Lainnya (Input Kustom) --</option>
                            </select>
                        </div>
                        <input type="text" name="position_custom" id="addCommitteePositionCustom" class="form-control mt-2" style="display:none;" placeholder="Masukkan posisi kustom">
                    </div>
                    <div class="form-group">
                        <label>Pilih User dari Peserta Kegiatan *</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="addCommitteeUserIdSearch" class="form-control search-input-inside" placeholder="Cari peserta...">
                            <select name="user_id" id="addCommitteeUserId" class="form-control searchable-select" required>
                                <option value="">-- Pilih User --</option>
                            @foreach($participants as $participant)
                                @if($participant->user)
                                    <option value="{{ $participant->user->id }}">{{ $participant->user->name }}</option>
                                @endif
                            @endforeach
                        </select>
                        <small class="text-muted">Data nama dan email akan diambil otomatis dari profil user</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
    </div>

<!-- Edit Committee Modal -->
<div class="modal fade" id="editCommitteeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Panitia</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editCommitteeForm" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label>Posisi *</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="editCommitteePositionSearch" class="form-control search-input-inside" placeholder="Cari posisi...">
                            <select name="position" id="editCommitteePosition" class="form-control searchable-select" required onchange="handlePositionChange('edit')">
                                <option value="">-- Pilih Posisi --</option>
                            <option value="Ketua Panitia">Ketua Panitia</option>
                            <option value="Wakil Ketua Panitia">Wakil Ketua Panitia</option>
                            <option value="Sekretaris">Sekretaris</option>
                            <option value="Wakil Sekretaris">Wakil Sekretaris</option>
                            <option value="Bendahara">Bendahara</option>
                            <option value="Wakil Bendahara">Wakil Bendahara</option>
                            <option value="Koordinator Acara">Koordinator Acara</option>
                            <option value="Anggota Acara">Anggota Acara</option>
                            <option value="Koordinator Logistik">Koordinator Logistik</option>
                            <option value="Anggota Logistik">Anggota Logistik</option>
                            <option value="Koordinator Dokumentasi">Koordinator Dokumentasi</option>
                            <option value="Anggota Dokumentasi">Anggota Dokumentasi</option>
                            <option value="Koordinator Konsumsi">Koordinator Konsumsi</option>
                            <option value="Anggota Konsumsi">Anggota Konsumsi</option>
                            <option value="Koordinator Perlengkapan">Koordinator Perlengkapan</option>
                            <option value="Anggota Perlengkapan">Anggota Perlengkapan</option>
                            <option value="Koordinator Humas">Koordinator Humas</option>
                            <option value="Anggota Humas">Anggota Humas</option>
                            <option value="Koordinator IT">Koordinator IT</option>
                            <option value="Anggota IT">Anggota IT</option>
                            <option value="custom">-- Lainnya (Input Kustom) --</option>
                            </select>
                        </div>
                        <input type="text" name="position_custom" id="editCommitteePositionCustom" class="form-control mt-2" style="display:none;" placeholder="Masukkan posisi kustom">
                    </div>
                    <div class="form-group">
                        <label>Pilih User dari Peserta Kegiatan *</label>
                        <div class="searchable-select-wrapper">
                            <input type="text" id="editCommitteeUserIdSearch" class="form-control search-input-inside" placeholder="Cari peserta...">
                            <select name="user_id" id="editCommitteeUserId" class="form-control searchable-select" required>
                                <option value="">-- Pilih User --</option>
                            @foreach($participants as $participant)
                                @if($participant->user)
                                    <option value="{{ $participant->user->id }}">{{ $participant->user->name }}</option>
                                @endif
                            @endforeach
                        </select>
                        <small class="text-muted">Data nama dan email akan diambil otomatis dari profil user</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openAddCommitteeModal() {
    const modal = document.getElementById('addCommitteeModal');
    if (!modal) {
        
        return;
    }
    
    // Reset form
    const form = document.getElementById('addCommitteeForm');
    if (form) {
        form.reset();
        document.getElementById('addCommitteePositionCustom').style.display = 'none';
        document.getElementById('addCommitteePositionCustom').removeAttribute('name');
        document.getElementById('addCommitteePosition').setAttribute('name', 'position');
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#addCommitteeModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('addCommitteeModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('addCommitteeModal');
        };
    }
}

function editCommittee(id, position, userId, name, phone, email, order) {
    $('#editCommitteeForm').attr('action', '{{ route("activity.preparation.update-committee", [$activity->id, ":id"]) }}'.replace(':id', id));
    
    // Check if position is in the dropdown options
    const positionSelect = document.getElementById('editCommitteePosition');
    const positionCustom = document.getElementById('editCommitteePositionCustom');
    let positionFound = false;
    
    for (let i = 0; i < positionSelect.options.length; i++) {
        if (positionSelect.options[i].value === position) {
            positionFound = true;
            break;
        }
    }
    
    if (positionFound && position !== 'custom') {
        positionSelect.value = position || '';
        positionCustom.style.display = 'none';
        positionCustom.removeAttribute('name');
        positionSelect.setAttribute('name', 'position');
    } else {
        // Custom position
        positionSelect.value = 'custom';
        positionCustom.style.display = 'block';
        positionCustom.value = position || '';
        positionCustom.required = true;
        positionSelect.removeAttribute('name');
        positionCustom.setAttribute('name', 'position');
    }
    
    $('#editCommitteeUserId').val(userId || '');
    
    const modal = document.getElementById('editCommitteeModal');
    if (!modal) {
        
        return;
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#editCommitteeModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('editCommitteeModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('editCommitteeModal');
        };
    }
}

function handlePositionChange(mode) {
    const prefix = mode === 'add' ? 'add' : 'edit';
    const select = document.getElementById(`${prefix}CommitteePosition`);
    const customInput = document.getElementById(`${prefix}CommitteePositionCustom`);
    
    if (select.value === 'custom') {
        customInput.style.display = 'block';
        customInput.required = true;
        select.removeAttribute('name'); // Remove name so custom input is submitted
        customInput.setAttribute('name', 'position');
    } else {
        customInput.style.display = 'none';
        customInput.required = false;
        customInput.removeAttribute('name');
        select.setAttribute('name', 'position');
    }
}

// ====== Needs helper: serialize in notes as lines "name|qty|unit" ======
function parseNeedsFromNotes(notes) {
    if (!notes) return [];
    const lines = String(notes).split('\n').map(l => l.trim()).filter(Boolean);
    const items = [];
    lines.forEach(l => {
        if (!l.includes('|')) return;
        const parts = l.split('|');
        if (parts.length >= 1) {
            items.push({
                name: parts[0] || '',
                quantity: parts[1] ? parseInt(parts[1], 10) : '',
                unit: parts[2] || ''
            });
        }
    });
    return items;
}

function extractTextNotes(notes){
    if (!notes) return '';
    return String(notes).split('\n').filter(l => !l.includes('|')).join('\n');
}

function stringifyNeedsToNotes(needs) {
    return needs.map(n => `${(n.name||'').trim()}|${(n.quantity||'')}${n.unit?`|${n.unit.trim()}`:''}`).join('\n');
}

function escapeHtml(str){
    return String(str||'').replace(/[&<>"']/g, s=>({"&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#39;"}[s]));
}

function openAddNeedModal(requirementId, divisionId){
    const modal = document.getElementById('addNeedModal');
    if (!modal) return;
    modal.dataset.requirementId = requirementId;
    modal.dataset.divisionId = divisionId;
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden','false');
    document.body.classList.add('modal-open');
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
}

function closeAddNeedModal(){
    const modal = document.getElementById('addNeedModal');
    if (!modal) return;
    modal.style.display = 'none';
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden','true');
    document.body.classList.remove('modal-open');
    const backdrop = document.querySelector('.modal-backdrop');
    if (backdrop) backdrop.remove();
    const nameEl = document.getElementById('needName');
    const qtyEl = document.getElementById('needQuantity');
    const unitEl = document.getElementById('needUnit');
    if (nameEl) nameEl.value = '';
    if (qtyEl) qtyEl.value = '1';
    if (unitEl) unitEl.value = '';
}

function submitAddNeed(){
    const modal = document.getElementById('addNeedModal');
    const requirementId = parseInt(modal.dataset.requirementId, 10);
    const divisionId = parseInt(modal.dataset.divisionId, 10);
    const name = document.getElementById('needName').value.trim();
    const qty = document.getElementById('needQuantity').value;
    const unit = document.getElementById('needUnit').value.trim();
    if (!name){ alert('Nama kebutuhan wajib diisi'); return; }

    const needsRawEl = document.getElementById(`needs-raw-${requirementId}`);
    const currentNeedsRaw = needsRawEl ? needsRawEl.value : '';
    const needs = parseNeedsFromNotes(currentNeedsRaw);
    needs.push({name, quantity: qty, unit});
    const notes = stringifyNeedsToNotes(needs);

    const formData = new FormData();
    formData.append('notes', notes);
    formData.append('_method', 'PUT');
    formData.append('_token', '{{ csrf_token() }}');

    fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
        body: formData
    }).then(r=>r.json()).then(d=>{
        closeAddNeedModal();
        if (needsRawEl) needsRawEl.value = notes;
        loadDivisionRequirements(divisionId);
    }).catch(()=>{ alert('Gagal menambah kebutuhan'); });
}

function removeNeed(requirementId, divisionId, idx){
    const needsRawEl = document.getElementById(`needs-raw-${requirementId}`);
    const currentNeedsRaw = needsRawEl ? needsRawEl.value : '';
    const needs = parseNeedsFromNotes(currentNeedsRaw);
    if (idx<0 || idx>=needs.length) return;
    needs.splice(idx,1);
    const notes = stringifyNeedsToNotes(needs);

    const fd = new FormData();
    fd.append('notes', notes);
    fd.append('_method','PUT');
    fd.append('_token','{{ csrf_token() }}');
    fetch(`{{ route('activity.preparation.update-requirement', [$activity->id, ':divisionId', ':id']) }}`.replace(':divisionId', divisionId).replace(':id', requirementId), {
        method:'POST', headers:{'X-Requested-With':'XMLHttpRequest','Accept':'application/json'}, body:fd
    }).then(r=>r.json()).then(()=>{ if (needsRawEl) needsRawEl.value = notes; loadDivisionRequirements(divisionId); }).catch(()=>alert('Gagal menghapus kebutuhan'));
}

</script>

<!-- Add Rundown Modal -->
<div class="modal fade" id="addRundownModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Rundown Acara</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addRundownForm" action="{{ route('activity.preparation.store-rundown', $activity->id) }}" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Waktu Mulai *</label>
                        <input type="time" name="start_time" id="addRundownStartTime" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Waktu Selesai</label>
                        <input type="time" name="end_time" id="addRundownEndTime" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Judul *</label>
                        <input type="text" name="title" id="addRundownTitle" class="form-control" required placeholder="Contoh: Pembukaan">
                    </div>
                    <div class="form-group">
                        <label>Pembicara</label>
                        <input type="text" name="speaker" id="addRundownSpeaker" class="form-control" placeholder="Nama pembicara">
                    </div>
                    <div class="form-group">
                        <label>Penanggung Jawab</label>
                        <input type="text" name="location" id="addRundownLocation" class="form-control" placeholder="Nama penanggung jawab">
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea name="description" id="addRundownDescription" class="form-control" rows="3" placeholder="Deskripsi rundown"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Urutan</label>
                        <input type="number" name="order" id="addRundownOrder" class="form-control" value="0" min="0">
                        <small class="text-muted">Urutan tampil (0 = pertama)</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Rundown Modal -->
<div class="modal fade" id="editRundownModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Rundown Acara</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editRundownForm" method="POST" onsubmit="setTimeout(function(){location.reload();}, 1000);">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label>Waktu Mulai *</label>
                        <input type="time" name="start_time" id="editRundownStartTime" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Waktu Selesai</label>
                        <input type="time" name="end_time" id="editRundownEndTime" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Judul *</label>
                        <input type="text" name="title" id="editRundownTitle" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Pembicara</label>
                        <input type="text" name="speaker" id="editRundownSpeaker" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Penanggung Jawab</label>
                        <input type="text" name="location" id="editRundownLocation" class="form-control">
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea name="description" id="editRundownDescription" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Urutan</label>
                        <input type="number" name="order" id="editRundownOrder" class="form-control" min="0">
                        <small class="text-muted">Urutan tampil (0 = pertama)</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Material Modal -->
<div class="modal fade" id="addMaterialModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Materi Acara</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addMaterialForm" action="{{ route('activity.preparation.store-material', $activity->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Materi *</label>
                        <input type="text" name="name" class="form-control" required placeholder="Contoh: Slide Presentasi Sesi 1">
                    </div>
                    <div class="form-group">
                        <label>Jenis Materi *</label>
                        <select id="materialInputType" class="form-control" onchange="toggleMaterialInput(this.value)">
                            <option value="file" selected>Upload File</option>
                            <option value="link">Link</option>
                        </select>
                    </div>
                    <div class="form-group" id="fileInputGroup">
                        <label>File Materi *</label>
                        <input type="file" 
                               name="file" 
                               id="materialFile" 
                               class="form-control-file" 
                               accept="*/*"
                               onchange="previewMaterialFile(this)">
                        <small class="form-text text-muted">
                            Semua tipe file diperbolehkan. Contoh: Gambar (JPG, PNG, GIF), PDF, PowerPoint (PPT, PPTX), Word (DOC, DOCX), Video (MP4, AVI, MOV), Audio (MP3, WAV, M4A). Maksimal 50MB per file.
                        </small>
                        <div id="filePreview" class="mt-2" style="display: none;">
                            <div class="alert alert-info">
                                <i class="fas fa-file"></i> <span id="fileName"></span> (<span id="fileSize"></span>)
                            </div>
                        </div>
                        <div id="fileError" class="alert alert-danger" style="display: none;"></div>
                    </div>
                    <div class="form-group" id="linkInputGroup" style="display:none;">
                        <label>Link Materi *</label>
                        <input type="url" name="link_url" id="materialLink" class="form-control" placeholder="https://contoh.com/materi">
                        <small class="form-text text-muted">Masukkan URL valid. Contoh: Google Drive, YouTube, situs eksternal, dll.</small>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="Deskripsi singkat tentang materi ini"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Material Modal Functions
function openAddMaterialModal() {
    const modal = document.getElementById('addMaterialModal');
    if (!modal) {
        
        return;
    }
    
    // Reset form
    const form = document.getElementById('addMaterialForm');
    if (form) {
        form.reset();
        document.getElementById('filePreview').style.display = 'none';
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#addMaterialModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('addMaterialModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('addMaterialModal');
        };
    }
}

function previewMaterialFile(input) {
    const file = input.files[0];
    if (file) {
        const fileSize = (file.size / 1024 / 1024).toFixed(2) + ' MB';
        document.getElementById('fileName').textContent = file.name;
        document.getElementById('fileSize').textContent = fileSize;
        document.getElementById('filePreview').style.display = 'block';
    } else {
        document.getElementById('filePreview').style.display = 'none';
    }
}

function toggleMaterialInput(type) {
    var fileGroup = document.getElementById('fileInputGroup');
    var linkGroup = document.getElementById('linkInputGroup');
    var fileInput = document.getElementById('materialFile');
    var linkInput = document.getElementById('materialLink');
    if (type === 'link') {
        if (fileGroup) fileGroup.style.display = 'none';
        if (linkGroup) linkGroup.style.display = 'block';
        if (fileInput) fileInput.removeAttribute('required');
        if (linkInput) linkInput.setAttribute('required', 'required');
    } else {
        if (fileGroup) fileGroup.style.display = 'block';
        if (linkGroup) linkGroup.style.display = 'none';
        if (linkInput) linkInput.removeAttribute('required');
        if (fileInput) fileInput.setAttribute('required', 'required');
    }
}

function openAddRundownModal() {
    const modal = document.getElementById('addRundownModal');
    if (!modal) {
        
        return;
    }
    
    // Reset form
    const form = document.getElementById('addRundownForm');
    if (form) {
        form.reset();
        document.getElementById('addRundownOrder').value = 0;
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#addRundownModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('addRundownModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('addRundownModal');
        };
    }
}

function editRundown(id, title, description, speaker, location, startTime, endTime, order) {
    $('#editRundownForm').attr('action', '{{ route("activity.preparation.update-rundown", [$activity->id, ":id"]) }}'.replace(':id', id));
    $('#editRundownTitle').val(title || '');
    $('#editRundownDescription').val(description || '');
    $('#editRundownSpeaker').val(speaker || '');
    $('#editRundownLocation').val(location || '');
    $('#editRundownStartTime').val(startTime || '');
    $('#editRundownEndTime').val(endTime || '');
    $('#editRundownOrder').val(order || 0);
    
    const modal = document.getElementById('editRundownModal');
    if (!modal) {
        
        return;
    }
    
    // Try jQuery Bootstrap modal first
    if (typeof $ !== 'undefined' && $.fn.modal) {
        try {
            $('#editRundownModal').modal('show');
            return;
        } catch($e) {}
    }
    
    // Fallback: show modal manually
    modal.style.display = 'block';
    modal.classList.add('show');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');
    
    // Add backdrop
    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade show';
    backdrop.style.zIndex = '1040';
    document.body.appendChild(backdrop);
    
    // Close on backdrop click
    backdrop.onclick = function() {
        closeModal('editRundownModal');
    };
    
    // Close button handler
    const closeBtn = modal.querySelector('.close, [data-dismiss="modal"]');
    if (closeBtn) {
        closeBtn.onclick = function() {
            closeModal('editRundownModal');
        };
    }
    }

    // Search functionality untuk daftar peserta
    document.addEventListener('DOMContentLoaded', function() {
        const participantSearch = document.getElementById('participant-search');
        const participantTable = document.getElementById('participant-table');
        const participantTbody = document.getElementById('participant-tbody');
        const participantCount = document.getElementById('participant-count');
        
        if (participantSearch) {
            participantSearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase().trim();
                const tableRows = participantTbody ? Array.from(participantTbody.querySelectorAll('tr')) : [];
                const cardItems = document.getElementById('participant-cards') ? Array.from(document.getElementById('participant-cards').children) : [];
                let visibleCount = 0;

                const filterItem = (el) => {
                    const data = (el.getAttribute('data-search') || '').toLowerCase();
                    const match = data.includes(searchTerm);
                    el.style.display = match ? '' : 'none';
                    if (match) visibleCount++;
                };

                tableRows.forEach(filterItem);
                cardItems.forEach(filterItem);

                if (participantCount) {
                    participantCount.textContent = visibleCount || (tableRows.length || cardItems.length);
                }
            });
        }

        // Search functionality untuk semua dropdown
        function initSearchableSelect(selectId, searchInputId) {
            const select = document.getElementById(selectId);
            const searchInput = document.getElementById(searchInputId);
            const wrapper = searchInput ? searchInput.closest('.searchable-select-wrapper') : null;
            
            if (!select || !searchInput) return;
            
            let hideTimeout = null;
            const defaultSize = select.size || 1;
            const openList = () => { select.size = Math.min(Math.max(8, 5), Math.max(8, select.options.length)); select.classList.add('open-list'); };
            const closeList = () => { select.size = defaultSize; select.classList.remove('open-list'); };
            
            // Tampilkan search input saat dropdown difokuskan
            select.addEventListener('focus', function() {
                // Delay kecil untuk memastikan dropdown sudah terbuka
                setTimeout(() => {
                    searchInput.style.display = 'block';
                    openList();
                }, 150);
                if (hideTimeout) {
                    clearTimeout(hideTimeout);
                    hideTimeout = null;
                }
            });
            
            // Sembunyikan search input saat dropdown kehilangan fokus (dengan delay)
            select.addEventListener('blur', function() {
                // Delay untuk memberi waktu user memilih option dari dropdown
                hideTimeout = setTimeout(() => {
                    const activeElement = document.activeElement;
                    // Cek apakah masih ada yang fokus ke search input
                    if (activeElement !== searchInput && activeElement !== select) {
                        searchInput.style.display = 'none';
                        searchInput.value = '';
                        filterSelectOptions(select, '');
                        closeList();
                    }
                }, 500);
            });
            
            // Jaga search input tetap terlihat saat fokus
            searchInput.addEventListener('focus', function() {
                this.style.display = 'block';
                if (hideTimeout) {
                    clearTimeout(hideTimeout);
                    hideTimeout = null;
                }
                openList();
            });
            
            searchInput.addEventListener('blur', function() {
                // Delay untuk memberi waktu user memilih option dari dropdown
                hideTimeout = setTimeout(() => {
                    const activeElement = document.activeElement;
                    // Jangan sembunyikan jika masih fokus ke select
                    if (activeElement !== select) {
                        this.style.display = 'none';
                        this.value = '';
                        filterSelectOptions(select, '');
                        closeList();
                    }
                }, 500);
            });
            
            // Cegah event bubbling yang bisa mengganggu dropdown
            searchInput.addEventListener('mousedown', function(e) {
                e.stopPropagation();
            });
            // Klik wrapper menjaga list tetap terbuka
            if (wrapper) {
                wrapper.addEventListener('mousedown', function(e){ e.stopPropagation(); });
            }
            
            // Reset saat dropdown berubah (user memilih option)
            select.addEventListener('change', function() {
                setTimeout(() => {
                    searchInput.style.display = 'none';
                    searchInput.value = '';
                    filterSelectOptions(select, '');
                    closeList();
                }, 200);
            });
            
            // Filter options saat mengetik
            searchInput.addEventListener('input', function() {
                filterSelectOptions(select, this.value);
            });
            
            // Handle keyboard untuk search input
            searchInput.addEventListener('keydown', function(e) {
                // Jika tekan Escape, sembunyikan search dan kembalikan fokus ke select
                if (e.key === 'Escape') {
                    e.preventDefault();
                    this.value = '';
                    filterSelectOptions(select, '');
                    this.blur();
                    select.focus();
                    closeList();
                }
                // Jika tekan Enter, jangan submit form
                if (e.key === 'Enter') {
                    e.preventDefault();
                }
            });
        }
        
        function filterSelectOptions(select, searchTerm) {
            const options = Array.from(select.querySelectorAll('option'));
            const searchLower = searchTerm.toLowerCase().trim();
            
            // Simpan semua options yang tersembunyi
            options.forEach(option => {
                const text = option.textContent.toLowerCase();
                if (searchLower === '' || text.includes(searchLower) || option.value === '') {
                    // Tampilkan option
                    option.style.display = '';
                    option.disabled = false;
                } else {
                    // Sembunyikan option (tidak semua browser mendukung, tapi kita coba)
                    option.style.display = 'none';
                    // Alternatif: disable option yang tidak cocok
                    option.disabled = true;
                }
            });
            
            // Jika tidak ada option yang terlihat, tampilkan pesan
            const visibleOptions = options.filter(opt => !opt.disabled && opt.value !== '');
            if (visibleOptions.length === 0 && searchLower !== '') {
                // Buat option temporary untuk menampilkan pesan
                const noResultOption = select.querySelector('option[value="__no_result__"]');
                if (!noResultOption) {
                    const opt = document.createElement('option');
                    opt.value = '__no_result__';
                    opt.textContent = 'Tidak ada hasil';
                    opt.disabled = true;
                    select.appendChild(opt);
                }
            } else {
                // Hapus option pesan jika ada
                const noResultOption = select.querySelector('option[value="__no_result__"]');
                if (noResultOption) {
                    noResultOption.remove();
                }
            }
        }
        
        // Inisialisasi search untuk semua dropdown
        initSearchableSelect('addCommitteePosition', 'addCommitteePositionSearch');
        initSearchableSelect('addCommitteeUserId', 'addCommitteeUserIdSearch');
        initSearchableSelect('editCommitteePosition', 'editCommitteePositionSearch');
        initSearchableSelect('editCommitteeUserId', 'editCommitteeUserIdSearch');
        initSearchableSelect('addDivisionLeaderName', 'addDivisionLeaderNameSearch');
        initSearchableSelect('editDivisionLeaderName', 'editDivisionLeaderNameSearch');
        initSearchableSelect('addRequirementStatus', 'addRequirementStatusSearch');
        initSearchableSelect('editRequirementStatus', 'editRequirementStatusSearch');
    });
</script>

    <!-- Daftar Peserta Section -->
    <div class="mx-auto px-3">
        <div class="committee-section mt-6 mb-6">
            <div class="committee-header">
                <h2 class="text-2xl font-bold text-gray-900">Daftar Peserta</h2>
                <span class="text-gray-600">Total: <span id="participant-count">{{ $participants->count() }}</span> peserta</span>
            </div>
            
            <!-- Search Box -->
            <div class="mb-4">
                <input type="text" id="participant-search" class="form-control" placeholder="Cari peserta (nama, email, provinsi)..." style="max-width: 400px;">
            </div>
            
            <div class="committee-table-container">
                @if($participants->count() > 0)
                    <table class="participants-table" id="participant-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Provinsi</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="participant-tbody">
                            @foreach($participants as $index => $participant)
                                @php
                                    $user = $participant->user;
                                    $province = optional(optional($user->profile)->province)->name ?? (optional($user->profile)->other_province ?? '-');
                                    $status = $participant->status;
                                    $statusText = '';
                                    $statusClass = '';
                                    
                                    if ($status == 1) {
                                        $statusText = 'Aktif';
                                        $statusClass = 'badge-success';
                                    } elseif ($status == 0) {
                                        $statusText = 'Pending';
                                        $statusClass = 'badge-warning';
                                    } else {
                                        $statusText = 'Nonaktif';
                                        $statusClass = 'badge-danger';
                                    }
                                @endphp
                                <tr data-search="{{ strtolower(($user->name ?? '') . ' ' . ($user->email ?? '') . ' ' . $province) }}">
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $user->name ?? '-' }}</td>
                                    <td>{{ $user->email ?? '-' }}</td>
                                    <td>{{ $province }}</td>
                                    <td>
                                        <span class="badge {{ $statusClass }}" style="padding: 4px 12px; border-radius: 4px; font-size: 0.875rem; font-weight: 500;">
                                            {{ $statusText }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <div class="empty-state">
                        <i class="fas fa-users"></i>
                        <p>Belum ada peserta terdaftar</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

@endsection
@section('scripts')
<script>
const MATERIAL_MAX_BYTES = 50 * 1024 * 1024;
function showStatusSelect(userId){
    var badge = document.getElementById('status-badge-' + userId);
    var select = document.getElementById('status-select-' + userId);
    if (badge && select){
        badge.style.display = 'none';
        select.style.display = 'inline-block';
        select.focus();
    }
}

document.addEventListener('DOMContentLoaded', function() {
    var form = document.getElementById('addMaterialForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            var typeSel = document.getElementById('materialInputType');
            var input = document.getElementById('materialFile');
            if (typeSel && typeSel.value === 'file' && input && input.files && input.files[0]) {
                if (input.files[0].size > MATERIAL_MAX_BYTES) {
                    var err = document.getElementById('fileError');
                    if (err) {
                        err.textContent = 'Ukuran file melebihi 50MB';
                        err.style.display = 'block';
                    }
                    e.preventDefault();
                }
            }
        });
    }
});

document.addEventListener('click', function(e){
    var badge = e.target.closest('.status-badge-editable');
    if (!badge) return;
    var uid = badge.getAttribute('data-user-id');
    var select = document.getElementById('status-select-' + uid);
    if (select){
        badge.style.display = 'none';
        select.style.display = 'inline-block';
        select.focus();
    }
});

document.addEventListener('keydown', function(e){
    if (e.key !== 'Escape') return;
    var openSelect = document.querySelector('.status-select[style*="display: block"], .status-select:not([style])');
    if (!openSelect) return;
    var uid = openSelect.getAttribute('data-user-id');
    var badge = document.getElementById('status-badge-' + uid);
    openSelect.style.display = 'none';
    if (badge) badge.style.display = '';
});

document.addEventListener('blur', function(e){
    var select = e.target.closest('.status-select');
    if (!select) return;
    setTimeout(function(){
        if (document.activeElement !== select){
            var uid = select.getAttribute('data-user-id');
            var badge = document.getElementById('status-badge-' + uid);
            select.style.display = 'none';
            if (badge) badge.style.display = '';
        }
    }, 100);
}, true);

function updateParticipantStatus(userId, status){
    try{
        var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        var url = `{{ route('activity.preparation.update-participant-status', [$activity->id, ':userId']) }}`.replace(':userId', userId);
        fetch(url, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({ status: String(status) })
        }).then(function(res){ return res.json(); })
        .then(function(data){ 
            if(data && data.success){
                var badge = document.getElementById('status-badge-' + userId);
                var select = document.getElementById('status-select-' + userId);
                if (badge && select){
                    var s = parseInt(status, 10);
                    var cls = s === {{ \App\Models\ActivityUser::STATUS_ACTIVE }} ? 'badge-success' : (s === {{ \App\Models\ActivityUser::STATUS_VERIFICATION }} ? 'badge-warning' : 'badge-danger');
                    var txt = s === {{ \App\Models\ActivityUser::STATUS_ACTIVE }} ? 'Aktif' : (s === {{ \App\Models\ActivityUser::STATUS_VERIFICATION }} ? 'Sedang Verifikasi' : 'Ditolak');
                    badge.className = 'badge ' + cls;
                    badge.textContent = txt;
                    select.style.display = 'none';
                    badge.style.display = '';
                }
            } else {
                alert('Gagal memperbarui status peserta');
            }
        })
        .catch(function(){ alert('Terjadi kesalahan saat memperbarui status peserta'); });
    }catch($e) {}
}
</script>
@endsection