@extends('layouts.main')

@section('title', 'Peserta Aktivitas')

@section('css')
    <!-- Tambahkan meta CSRF token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
      .attendance-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 32px;
        height: 32px;
        border: 2px solid #64748b;
        border-radius: 8px;
        background: #ffffff;
        display: inline-block;
        position: relative;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        vertical-align: middle;
      }
      .attendance-checkbox:checked {
        background-color: #2f7e68;
        border-color: #2f7e68;
      }
      .attendance-checkbox:checked::after {
        content: '\2713';
        color: #ffffff;
        font-weight: 900;
        font-size: 18px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 1;
      }

      /* Uniform small boxes */
      .stats-row .small-box {
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 140px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
      }
      .stats-row .small-box .inner {
        padding: 12px 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .stats-row .small-box .icon { opacity: .15; }
      .stats-row .small-box .small-box-footer {
        display: block;
        padding: 10px 12px;
        font-weight: 600;
        text-align: center;
        background: rgba(255,255,255,0.15);
        color: #fff;
      }

      /* Responsive adjustments for mobile */
      @media (max-width: 576px) {
        .participants-header { flex-wrap: wrap; gap: .5rem; }
        .participants-header .card-title { font-size: 1rem; margin-bottom: 0; }
        .participants-header .btn { width: 100%; margin-top: .25rem; }

        .stats-row .small-box { min-height: 120px; }

        .filter-search-row .search-container { width: 100%; }
        .search-input-group .input-group-text { padding: .5rem; }
        .search-input-group .form-control { font-size: .95rem; }

        /* Hide less critical columns to prevent horizontal overflow */
        .table-activity thead th:nth-child(2),
        .table-activity thead th:nth-child(3),
        .table-activity tbody td:nth-child(2),
        .table-activity tbody td:nth-child(3) { display: none; }

        .table-activity thead th,
        .table-activity tbody td { white-space: normal; }

        /* Compact paddings on cards */
        .card .card-body { padding: .75rem; }
        .list-group-item.attendance-card-item { padding: .5rem .75rem; }
      }
    </style>
@endsection

@section('content')
<section class="content">
    <div class="container-fluid">
        @php
            // Pastikan selectedAttendanceId hanya ada jika benar-benar ada nilai dan valid dari controller
            // Jangan auto-select, hanya gunakan nilai dari controller
            $selectedAttendanceId = isset($selectedAttendanceId) && $selectedAttendanceId ? (int) $selectedAttendanceId : null;
            $selectedAttendance = null;
            
            if ($selectedAttendanceId && isset($attendances)) {
                $selectedAttendance = $attendances->where('id', $selectedAttendanceId)->first();
                // Jika ID tidak ditemukan, reset ke null
                if (!$selectedAttendance) {
                    $selectedAttendanceId = null;
                }
            }
        @endphp
        @if(isset($selectedActivity))
            <!-- Activity Name Header (text-only, elegant) -->
            <div class="row mb-3">
                <div class="col-12">
                    <div>
                            <h2 class="mb-1" style="font-weight:800; font-size:1.6rem; color:#1f2937;">{{ $selectedActivity->name ?? 'Pilih Aktivitas' }}</h2>
                            <div class="text-muted" style="font-size:0.95rem;">
                                @if(isset($selectedActivity->date))
                                    <span><i class="fas fa-clock mr-1"></i>{{ \Carbon\Carbon::parse($selectedActivity->date)->format('d F Y') }}</span>
                                @endif
                                @if(isset($selectedActivity->location))
                                    <span class="ml-3"><i class="fas fa-map-marker-alt mr-1"></i>{{ $selectedActivity->location }}</span>
                                @endif
                            </div>
                    </div>
                </div>
            </div>

            <!-- Stats boxes -->
            <div class="row stats-row">
                <div class="col-lg-3 col-6">
                    <!-- Total Peserta Box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{ method_exists($participants, 'total') ? $participants->total() : $participants->count() }}</h3>
                            <p>Total Peserta</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="small-box-footer">{{ $selectedActivity->name ?? 'Pilih Aktivitas' }}</div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-6">
                    <!-- Total Jenis Absen Box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{ $attendances->count() ?? 0 }}</h3>
                            <p>Total Jenis Absen</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-clipboard-list"></i>
                        </div>
                        <span class="small-box-footer">Jumlah absen</span>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <!-- Peserta Hadir Box -->
                    <div class="small-box bg-warning">
                        <div class="inner">
                            @php
                            $presentCount = $presentCount ?? 0;
                            @endphp
                            <h3>{{ $presentCount }}</h3>
                            <p>Peserta Hadir</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <span class="small-box-footer">
                            {{ $selectedAttendance ? $selectedAttendance->name : 'Pilih Jenis Absen' }}
                        </span>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <!-- Peserta Tidak Hadir Box -->
                    <div class="small-box bg-danger">
                        <div class="inner">
                            @php
                            $presentCount = $presentCount ?? 0;
                            @endphp
                            <h3>{{ (method_exists($participants, 'total') ? $participants->total() : $participants->count()) - $presentCount }}</h3>
                            <p>Peserta Tidak Hadir</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-user-slash"></i>
                        </div>
                        <span class="small-box-footer">
                            {{ $selectedAttendance ? $selectedAttendance->name : 'Pilih Jenis Absen' }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Attendance Progress Bar -->
            @if($selectedAttendanceId && (method_exists($participants, 'total') ? $participants->total() : $participants->count()) > 0)
            <div class="row mt-2 mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body p-2">
                            @php
                                $totalParticipants = (method_exists($participants, 'total') ? $participants->total() : $participants->count());
                                $presentCount = $presentCount ?? 0;
                                $attendancePercentage = $totalParticipants > 0 ? ($presentCount / $totalParticipants) * 100 : 0;
                            @endphp
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <h6 class="mb-0">Progres Kehadiran: {{ number_format($attendancePercentage, 1) }}%</h6>
                                <span class="text-sm">{{ $presentCount }} dari {{ $totalParticipants }} peserta</span>
                            </div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $attendancePercentage }}%;" 
                                     aria-valuenow="{{ $attendancePercentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Management Buttons and List Absen Section -->
            <div class="row mt-4">
                <div class="col-md-4">

                    <!-- List Absen Card -->
                    <div class="card">
                        <div class="card-header bg-info">
                            <h3 class="card-title text-white">List Absen</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-3d btn-light btn-sm" data-toggle="modal" data-target="#addAttendanceModal">
                                    <i class="fas fa-plus"></i> Tambah Absen
                                </button>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            @if($attendances && $attendances->count() > 0)
                                <div class="list-group list-group-flush">
                                    @foreach($attendances as $index => $attendance)
                                        <div class="list-group-item attendance-card-item p-2 {{ $selectedAttendanceId == $attendance->id ? 'active-attendance' : '' }}" 
                                             style="cursor: pointer; transition: all 0.3s ease; border-left: 3px solid transparent;"
                                             data-attendance-id="{{ $attendance->id }}"
                                             data-activity-id="{{ $selectedActivity->id }}"
                                             onclick="handleAttendanceClick({{ $attendance->id }}, {{ $selectedActivity->id }})">
                                            <div class="d-flex justify-content-between align-items-center attendance-item-content">
                                                <div class="d-flex align-items-center flex-grow-1 attendance-item-left">
                                                    <span class="badge badge-secondary attendance-number">{{ $index + 1 }}</span>
                                                    <span class="attendance-name">{{ $attendance->name }}</span>
                                                    <span class="badge badge-info attendance-type">{{ $attendance->jenis_absen ?? '-' }}</span>
                                                </div>
                                                <div class="attendance-actions" onclick="event.stopPropagation();">
                                                    @php
                                                        $jenisAbsen = $attendance->jenis_absen ?? '';
                                                        $isMandiri = ($jenisAbsen === 'Mandiri');
                                                        $isQRMandiri = ($jenisAbsen === 'QR Mandiri');
                                                        $isManual = ($jenisAbsen === 'Manual');
                                                        $isQRManual = ($jenisAbsen === 'QR Manual');
                                                    @endphp
                                                    
                                                    @if($isMandiri)
                                                        <!-- Tombol On/Off untuk Aktifkan/Nonaktifkan Absen Mandiri -->
                                                        @php
                                                            // Baca status enabled dari description
                                                            $description = json_decode($attendance->description ?? '{}', true);
                                                            $isEnabled = isset($description['enabled']) ? (bool) $description['enabled'] : false; // Default disabled
                                                        @endphp
                                                        <button type="button" 
                                                                class="btn-toggle-mandiri {{ $isEnabled ? 'btn-toggle-active' : 'btn-toggle-inactive' }}"
                                                                data-attendance-id="{{ $attendance->id }}"
                                                                data-activity-id="{{ $selectedActivity->id }}"
                                                                data-is-enabled="{{ $isEnabled ? '1' : '0' }}"
                                                                title="{{ $isEnabled ? 'Aktif - Klik untuk Nonaktifkan' : 'Tidak Aktif - Klik untuk Aktifkan' }}">
                                                            <i class="fas fa-power-off"></i>
                                                        </button>
                                                    @elseif($isQRMandiri)
                                                        <!-- Icon QR untuk QR Mandiri (tanpa switch) -->
                                                        <button type="button"
                                                                class="btn btn-primary btn-sm show-qr-modal"
                                                                data-activity-id="{{ $selectedActivity->id }}"
                                                                data-attendance-id="{{ $attendance->id }}"
                                                                data-activity-name="{{ $selectedActivity->name }}"
                                                                data-attendance-name="{{ $attendance->name }}"
                                                                title="Tampilkan QR Code untuk Scan Mandiri">
                                                            <i class="fas fa-qrcode"></i>
                                                        </button>
                                                    @elseif($isManual)
                                                        <!-- Tombol Absen Semua untuk Manual -->
                                                        <button type="button"
                                                                class="btn btn-success btn-sm mark-all-present"
                                                                data-attendance-id="{{ $attendance->id }}"
                                                                data-activity-id="{{ $selectedActivity->id }}"
                                                                data-attendance-name="{{ $attendance->name }}"
                                                                title="Absen Semua Peserta">
                                                            <i class="fas fa-check-double"></i>
                                                        </button>
                                                    @elseif($isQRManual)
                                                        <!-- Icon QR untuk QR Manual (tanpa tombol absen semua) -->
                                                        <a href="{{ route('attendance.scan', ['activity' => $selectedActivity->id, 'attendance' => $attendance->id]) }}" 
                                                           class="btn btn-primary btn-sm"
                                                           title="Scan QR Code Peserta">
                                                            <i class="fas fa-camera"></i>
                                                        </a>
                                                    @endif
                                                    
                                                    <!-- Tombol untuk semua jenis absen -->
                                                    <a href="{{ route('attendance.results', ['attendance' => $attendance->id, 'activity_id' => $selectedActivity->id]) }}" 
                                                       class="btn btn-info btn-sm"
                                                       title="Hasil Absensi">
                                                        <i class="fas fa-chart-bar"></i>
                                                    </a>
                                                    
                                                    @if(auth()->user() && isset($selectedActivity) && $selectedActivity->canManageRegistration(auth()->id()))
                                                    <button type="button"
                                                            class="btn btn-danger btn-sm delete-attendance"
                                                            data-attendance-id="{{ $attendance->id }}"
                                                            data-activity-id="{{ $selectedActivity->id }}"
                                                            data-attendance-name="{{ $attendance->name }}"
                                                            data-delete-url="{{ route('attendance.destroy', $attendance->id) }}"
                                                            onclick="handleDeleteAttendance(this)"
                                                            title="Hapus Absen">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-info m-3">
                                    Belum ada jenis absen yang ditambahkan.
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Daftar Peserta Card -->
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header participants-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title mb-0">
                                {{ $selectedAttendance ? 'Daftar Absen: ' . $selectedAttendance->name : 'Daftar Peserta Aktivitas' }}
                            </h3>
                            @if(isset($selectedActivity))
                            <a
                                href="{{ route('attendance.download', [
                                    'activity_id' => $selectedActivity->id,
                                    'attendance_id' => $selectedAttendanceId,
                                    'search' => request()->query('search')
                                ]) }}"
                                class="btn btn-success btn-sm"
                                title="Download data yang ditampilkan"
                            >
                                <i class="fas fa-download mr-1"></i> Download
                            </a>
                            @endif
                        </div>
                        <div class="card-body">
                            <!-- Search Section -->
                            <div class="row mb-4 filter-search-row">
                                <div class="col-12">
                                    <div class="search-container">
                                        <label for="searchInput" class="sr-only">Cari Peserta</label>
                                        <div class="input-group search-input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                            <input type="search" 
                                                   class="form-control" 
                                                   id="searchInput" 
                                                   name="search"
                                                   autocomplete="off"
                                                   aria-label="Cari berdasarkan nama, NPA, ID, provinsi, atau kabupaten"
                                                   placeholder="Cari berdasarkan nama, NPA, ID, provinsi, atau kabupaten...">
                                            <div class="input-group-append">
                                                <button class="btn btn-clear-search" 
                                                        type="button" 
                                                        id="clearSearch" 
                                                        title="Hapus Pencarian">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Participants Table -->
                            <div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-sm table-activity" id="participantsTable">
                                    <thead>
                                        <tr>
                                            <th width="{{ $selectedAttendanceId ? '20%' : '25%' }}">Nama</th>
                                            <th width="{{ $selectedAttendanceId ? '15%' : '20%' }}">Provinsi</th>
                                            <th width="{{ $selectedAttendanceId ? '15%' : '25%' }}">Kabupaten</th>
                                            @if($selectedAttendanceId)
                                            <th width="15%">Status Kehadiran</th>
                                                @php
                                                    $selectedAttendanceForManual = $attendances->where('id', $selectedAttendanceId)->first();
                                                    $isManualType = $selectedAttendanceForManual && ($selectedAttendanceForManual->jenis_absen === 'Manual');
                                                @endphp
                                                @if($isManualType)
                                                <th width="20%" class="text-center">
                                                    <div class="d-flex flex-column align-items-center">
                                                        <span>Aksi</span>
                                                        <button type="button" 
                                                                class="btn btn-sm btn-secondary select-all-attendance mt-2"
                                                                title="Absen Semua Peserta"
                                                                data-attendance-id="{{ $selectedAttendanceId }}"
                                                                data-activity-id="{{ $selectedActivity->id }}">
                                                            <i class="fas fa-moon mr-1"></i>
                                                            Absen Semua
                                                        </button>
                                                    </div>
                                                </th>
                                                @endif
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($participants as $index => $participant)
                                            @php
                                                $attendanceStatus = [];
                                                if($attendances) {
                                                    foreach($attendances as $attendance) {
                                                        $isPresent = false;
                                                        if(isset($attendanceTableExists) && $attendanceTableExists) {
                                                            $isPresent = DB::table($attendanceTable)
                                                                ->where('activity_id', $selectedActivity->id)
                                                                ->where('user_id', $participant->user_id)
                                                                ->where('attendance_id', $attendance->id)
                                                                ->exists();
                                                        }
                                                        $attendanceStatus[$attendance->id] = $isPresent;
                                                    }
                                                }
                                            @endphp
                                            <tr>
                                                <td class="align-middle">
                                                    <strong>{{ $participant->user->name ?? '-' }}</strong>
                                                </td>
                                                <td class="align-middle">{{ optional($participant->user->profile)->province->name ?? '-' }}</td>
                                                <td class="align-middle">{{ optional($participant->user->profile)->regency->name ?? '-' }}</td>
                                                @if($selectedAttendanceId)
                                                <td class="text-center align-middle">
                                                    @php
                                                        $isPresent = false;
                                                        $timestamp = null;
                                                        if(isset($attendanceTableExists) && $attendanceTableExists) {
                                                            $isPresent = DB::table($attendanceTable)
                                                                ->where('activity_id', $selectedActivity->id)
                                                                ->where('user_id', $participant->user_id)
                                                                ->where('attendance_id', $selectedAttendanceId)
                                                                ->exists();
                                                            $timestamp = DB::table($attendanceTable)
                                                                ->where('activity_id', $selectedActivity->id)
                                                                ->where('user_id', $participant->user_id)
                                                                ->where('attendance_id', $selectedAttendanceId)
                                                                ->value('created_at');
                                                        }
                                                    @endphp
                                                    <div class="d-flex flex-column align-items-center attendance-status-wrapper">
                                                        <span class="badge badge-{{ $isPresent ? 'success' : 'danger' }} attendance-status px-3 py-2">
                                                            <i class="fas {{ $isPresent ? 'fa-check-circle' : 'fa-times-circle' }} mr-1"></i>
                                                            {{ $isPresent ? 'Hadir' : 'Tidak Hadir' }}
                                                        </span>
                                                        @if($isPresent && $timestamp)
                                                            <small class="text-muted mt-1 attendance-timestamp" style="display: none; font-size: 0.75rem;">
                                                                <i class="far fa-clock mr-1"></i>
                                                                {{ \Carbon\Carbon::parse($timestamp)->format('d/m/Y H:i:s') }}
                                                            </small>
                                                        @endif
                                                    </div>
                                                </td>
                                                @php
                                                    $selectedAttendanceForManual = $attendances->where('id', $selectedAttendanceId)->first();
                                                    $isManualType = $selectedAttendanceForManual && ($selectedAttendanceForManual->jenis_absen === 'Manual');
                                                @endphp
                                                @if($isManualType)
                                                <td class="text-center align-middle">
                                                    <input type="checkbox"
                                                           class="attendance-checkbox"
                                                           {{ $isPresent ? 'checked' : '' }}
                                                           data-user-id="{{ $participant->user_id }}"
                                                           data-activity-id="{{ $selectedActivity->id }}"
                                                           data-attendance-id="{{ $selectedAttendanceId }}"
                                                           data-is-present="{{ $isPresent ? '1' : '0' }}"
                                                           title="{{ $isPresent ? 'Hadir' : 'Tidak Hadir' }}">
                                                </td>
                                                @endif
                                                @endif
                                            </tr>
                                        @empty
                                            @php
                                                $selectedAttendanceForManual = isset($attendances) && $selectedAttendanceId ? $attendances->where('id', $selectedAttendanceId)->first() : null;
                                                $isManualType = $selectedAttendanceForManual && ($selectedAttendanceForManual->jenis_absen === 'Manual');
                                                $colspanCount = $selectedAttendanceId ? ($isManualType ? '6' : '5') : '4';
                                            @endphp
                                            <tr>
                                                <td colspan="{{ $colspanCount }}" class="text-center">Tidak ada peserta ditemukan.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            @if(!request('search') && $participants->hasPages())
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <div class="text-muted">
                                        Menampilkan {{ $participants->firstItem() ?? 0 }} - {{ $participants->lastItem() ?? 0 }} 
                                        dari {{ $participants->total() }} peserta
                                    </div>
                                    <div>
                                        {{ $participants->appends(request()->query())->links() }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="alert alert-info">
                Silakan pilih aktivitas untuk melihat data peserta.
            </div>
        @endif
    </div>
</section>

<!-- Add Attendance Modal -->
<div class="modal fade" id="addAttendanceModal" tabindex="-1" data-bs-backdrop="true" data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-white rounded-xl shadow-2xl border-0 overflow-hidden max-w-md mx-auto">
            <!-- Header dengan gradient -->
            <div class="bg-gradient-to-r from-blue-500 to-purple-600 px-6 py-4">
                <div class="flex items-center justify-between">
                    <h5 class="modal-title text-white font-bold text-xl mb-0">Tambah Jenis Absen</h5>
                    <button type="button" class="text-white hover:text-gray-200 transition-colors focus:outline-none" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
            
            <form id="addAttendanceForm" action="{{ route('attendance.store', ['activity' => $selectedActivity->id ?? '']) }}" method="POST">
                @csrf
                <!-- Body dengan spacing yang lebih baik -->
                <div class="modal-body p-6">
                    <!-- Nama Absen -->
                    <div class="mb-5">
                        <label for="attendance_name" class="block text-sm font-semibold text-gray-700 mb-2">
                            Nama Absen <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-gray-700 placeholder-gray-400"
                               id="attendance_name" 
                               name="name" 
                               placeholder="Masukkan nama absen" 
                               autocomplete="off" 
                               required>
                    </div>
                    
                    <!-- Jenis Absen -->
                    <div class="mb-5">
                        <label for="jenis_absen" class="block text-sm font-semibold text-gray-700 mb-2">
                            Jenis Absen <span class="text-red-500">*</span>
                        </label>
                        <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-gray-700 appearance-none cursor-pointer" 
                                id="jenis_absen" 
                                name="jenis_absen" 
                                required>
                            <option value="">Pilih Jenis Absen</option>
                            <option value="Mandiri">Mandiri</option>
                            <option value="Manual">Manual</option>
                            <option value="QR Mandiri">QR Mandiri</option>
                            <option value="QR Manual">QR Manual</option>
                        </select>
                        <small class="block mt-2 text-xs text-gray-500">
                            Pilih metode absensi yang akan digunakan
                        </small>
                    </div>
                    
                    <!-- Deskripsi -->
                    <div class="mb-4">
                        <label for="attendance_description" class="block text-sm font-semibold text-gray-700 mb-2">
                            Deskripsi
                        </label>
                        <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white text-gray-700 placeholder-gray-400 resize-none" 
                                  id="attendance_description" 
                                  name="description" 
                                  rows="3" 
                                  placeholder="Masukkan deskripsi absen (opsional)" 
                                  autocomplete="off"></textarea>
                    </div>
                </div>
                
                <!-- Footer dengan tombol Simpan di center -->
                <div class="modal-footer bg-gray-50 px-6 pt-4 pb-6 border-t border-gray-200 flex justify-center">
                    <button type="submit" 
                            class="px-8 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg font-medium focus:outline-none focus:ring-2 focus:ring-blue-400">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- QR Code Modal untuk QR Mandiri -->
<div class="modal fade" id="qrCodeModal" data-bs-backdrop="true" data-bs-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="qrCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-white rounded-xl shadow-2xl border-0 overflow-hidden">
            <div class="bg-gradient-to-r from-purple-500 to-pink-600 px-6 py-4">
                <div class="flex items-center justify-between">
                    <h5 class="modal-title text-white font-bold text-xl mb-0" id="qrCodeModalLabel">QR Code Absensi</h5>
                    <button type="button" class="text-white hover:text-gray-200 transition-colors focus:outline-none" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="modal-body p-6 text-center">
                <p class="mb-2 text-lg font-semibold text-gray-800" id="qrActivityName"></p>
                <p class="mb-4 text-sm text-gray-500" id="qrAttendanceName"></p>
                <div id="qrcode" class="flex justify-center items-center mb-4 min-h-[300px] bg-gray-50 rounded-lg p-4">
                    <img id="qrCodeImage" src="" alt="QR Code" class="max-w-[300px] max-h-[300px] hidden rounded-lg shadow-md">
                </div>
                <p class="text-sm text-gray-500 mb-0">Tampilkan QR code ini kepada peserta untuk di-scan</p>
            </div>
            <div class="modal-footer bg-gray-50 px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
                <button type="button" 
                        class="px-5 py-2.5 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg font-medium focus:outline-none focus:ring-2 focus:ring-gray-400"
                        data-dismiss="modal">
                    Tutup
                </button>
                <button type="button" 
                        class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 shadow-md hover:shadow-lg font-medium focus:outline-none focus:ring-2 focus:ring-blue-400"
                        id="downloadQR">
                    <i class="fas fa-download mr-2"></i> Download QR Code
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="{{ asset('js/attendance-management.js') }}"></script>
<script>
(function() {
    'use strict';
    
    if (typeof $ === 'undefined') return;
    
    // HAPUS PARAMETER attendance_filter SAAT REFRESH (hanya jika ada parameter tersebut)
    const attendanceClickFlag = sessionStorage.getItem('attendance_clicked');
    
    if (window.location.search.includes('attendance_filter')) {
        if (!attendanceClickFlag) {
            // Ini adalah refresh atau direct load, bukan dari klik
            // Hapus parameter attendance_filter dari URL
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.delete('attendance_filter');
            
            // Rebuild URL tanpa attendance_filter
            const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
            
            // Redirect tanpa parameter attendance_filter
            window.location.href = newUrl;
            return; // Stop execution, akan reload ke URL baru
        } else {
            // Ini adalah hasil klik, hapus flag setelah digunakan
            sessionStorage.removeItem('attendance_clicked');
        }
    }
    
    // Fungsi untuk handle klik item attendance
    window.handleAttendanceClick = function(attendanceId, activityId) {
        // Set flag bahwa user mengklik item attendance
        sessionStorage.setItem('attendance_clicked', 'true');
        // Navigasi ke URL dengan parameter attendance_filter
        // Route format: /attendance/management/{activity}
        const url = '/attendance/management/' + activityId + '?attendance_filter=' + attendanceId;
        window.location.href = url;
    };
    
    // ========== MEMASTIKAN SEMUA MODAL TIDAK AUTO-SHOW ==========
    // Pastikan semua modal hanya tampil ketika tombol diklik
    $('.modal').each(function() {
        if (!$(this).hasClass('show')) {
            $(this).removeClass('show').css({
                'display': 'none',
                'z-index': '1055'
            });
            $(this).attr('aria-hidden', 'true');
        }
    });
    
    // Pastikan backdrop dihapus saat halaman load (jika tidak ada modal terbuka)
    if (!$('.modal.show').length) {
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open');
    }
    
    // Initialize Bootstrap Modal (tanpa auto-show)
    $('#addAttendanceModal').modal({
        show: false,
        backdrop: true,
        keyboard: true
    });
    
    // Pastikan input fields bisa diisi setelah modal dibuka
    $('#addAttendanceModal').on('shown.bs.modal', function() {
        var $modal = $(this);
        
        // Hapus semua handler yang mungkin memblokir
        $modal.off('click.modal-block');
        
        // Pastikan modal content bisa diklik dengan mouse - GUNAKAN !important di CSS
        $modal.find('.modal-content').css({
            'pointer-events': 'auto !important',
            'z-index': '1058'
        });
        
        // Aktifkan semua input fields untuk mouse dan keyboard - GUNAKAN !important
        $modal.find('input, textarea, select, button').each(function() {
            var $field = $(this);
            $field.prop('disabled', false);
            $field.prop('readonly', false);
            
            // Hapus semua event handler yang mungkin memblokir
            $field.off('click.mouse-fix mousedown.mouse-fix');
            
            // Set CSS dengan !important via style attribute
            this.style.setProperty('pointer-events', 'auto', 'important');
            this.style.setProperty('cursor', 'text', 'important');
            this.style.setProperty('user-select', 'auto', 'important');
            this.style.setProperty('opacity', '1', 'important');
            this.style.setProperty('touch-action', 'manipulation', 'important');
        });
        
        // Pastikan backdrop tidak menangkap klik pada modal content
        $('.modal-backdrop').css({
            'pointer-events': 'auto',
            'z-index': '1050'
        });
        
        // Pastikan modal dialog bisa diklik
        $modal.find('.modal-dialog').css({
            'pointer-events': 'auto !important',
            'z-index': '1056'
        });
        
        // Pastikan modal sendiri bisa diklik
        $modal.css({
            'pointer-events': 'auto !important',
            'z-index': '1055'
        });
        
        // Focus pada input pertama setelah delay untuk memastikan animasi selesai
        setTimeout(function() {
            var $firstInput = $modal.find('#attendance_name');
            if ($firstInput.length) {
                $firstInput[0].focus();
                $firstInput[0].click();
            }
        }, 350);
    });
    
    // Pastikan tidak ada yang memblokir saat modal sedang muncul
    $('#addAttendanceModal').on('show.bs.modal', function() {
        var $modal = $(this);
        
        // Pastikan pointer-events aktif SEBELUM modal muncul
        $modal.css({
            'pointer-events': 'auto',
            'z-index': '1055'
        });
        
        $modal.find('.modal-dialog').css({
            'pointer-events': 'auto',
            'z-index': '1056'
        });
        
        $modal.find('.modal-content').css({
            'pointer-events': 'auto',
            'z-index': '1057'
        });
        
        // Aktifkan semua field SEBELUM modal muncul
        $modal.find('input, textarea, select, button').each(function() {
            this.style.setProperty('pointer-events', 'auto', 'important');
            this.style.setProperty('cursor', 'text', 'important');
        });
    });
    
    // Initialize QR Code Modal
    const qrModal = $('#qrCodeModal');
    
    if (qrModal.length === 0) {
        // Modal tidak ditemukan
    } else {
        qrModal.modal({
            show: false
        });
    }
    
    // Handler untuk menampilkan QR Code Modal
    const qrButtons = $('.show-qr-modal');
    
    // Register handler dengan prioritas tinggi (gunakan capture phase)
    // Hapus handler lama jika ada
    $(document).off('click', '.show-qr-modal');
    
    // Register handler baru
    $(document).on('click', '.show-qr-modal', function(e) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        
        const $btn = $(this);
        const activityId = $btn.data('activity-id');
        const attendanceId = $btn.data('attendance-id');
        const activityName = $btn.data('activity-name');
        const attendanceName = $btn.data('attendance-name');
        
        if (!activityId || !attendanceId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak lengkap'
            });
            return;
        }
        
        // Panggil fungsi showQRModal yang menggunakan API QR Server
        showQRModal(activityId, attendanceId, activityName, attendanceName);
    });
    
    // Handler untuk download QR Code (menggunakan image dari API)
    $('#downloadQR').on('click', function() {
        const qrCodeImage = $('#qrCodeImage');
        if (qrCodeImage.length > 0 && qrCodeImage.attr('src')) {
            // Download image langsung dari URL
            const link = document.createElement('a');
            link.download = 'qr-code-absensi.png';
            link.href = qrCodeImage.attr('src');
            link.click();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'QR Code belum tersedia'
            });
        }
    });
    
    // Handler untuk tombol yang membuka modal - pastikan tidak terblokir
    // Hapus handler lama dan buat yang baru dengan namespace terpisah
    $(document).off('click.modal-trigger', '[data-toggle="modal"], [data-bs-toggle="modal"]');
    $(document).on('click.modal-trigger', '[data-toggle="modal"], [data-bs-toggle="modal"]', function(e) {
        // Biarkan Bootstrap handle modal opening secara normal
        // Jangan stop propagation atau prevent default agar modal bisa terbuka
    });
    
    // HAPUS handler yang memblokir - ini menyebabkan mouse tidak berfungsi
    // $(document).off('click.modal-block').on('click.modal-block', '.modal-content, .modal-content *', function(e) {
    //     e.stopPropagation();
    // });
    
    // Debug: Log saat tombol modal diklik
    $(document).on('click', '[data-target="#addAttendanceModal"]', function(e) {
        // Pastikan modal bisa dibuka tanpa output debug
        $('#addAttendanceModal').modal('show');
    });

    // Check saat modal dibuka apakah sudah ada nilai yang dipilih

    // Reset saat modal ditutup

    // Pastikan modal di-reset dengan benar saat ditutup
    $('.modal').on('hidden.bs.modal hidden', function() {
        // Pastikan backdrop dihapus saat modal ditutup
        $('.modal-backdrop').remove();
        $('body').removeClass('modal-open');
        // Reset transform
        $(this).find('.modal-dialog').css('transform', '');
    });
    
    // Handle ESC key untuk menutup modal
    $(document).on('keydown', function(e) {
        if (e.key === 'Escape' && $('.modal.show').length) {
            $('.modal.show').modal('hide');
        }
    });
    
    // Register direct handler pada button (prioritas lebih tinggi)
    const qrButtonsDirect = $('.show-qr-modal');
    
    qrButtonsDirect.each(function(index) {
        const $btn = $(this);
        
        // Hapus handler lama dan register yang baru
        $btn.off('click.showQR').on('click.showQR', function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            
            const activityId = $btn.data('activity-id');
            const attendanceId = $btn.data('attendance-id');
            const activityName = $btn.data('activity-name');
            const attendanceName = $btn.data('attendance-name');
            
            // Panggil fungsi untuk menampilkan modal QR
            showQRModal(activityId, attendanceId, activityName, attendanceName);
        });
    });
    
    // Fungsi untuk menampilkan modal QR (menggunakan API QR Server seperti di kartu peserta)
    window.showQRModal = function(activityId, attendanceId, activityName, attendanceName) {
        if (!activityId || !attendanceId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak lengkap'
            });
            return;
        }
        
        // Cek apakah modal element ada
        const qrModal = $('#qrCodeModal');
        if (qrModal.length === 0) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Modal QR Code tidak ditemukan'
            });
            return;
        }
        
        // Set title modal
        $('#qrActivityName').text(activityName || '');
        $('#qrAttendanceName').text(attendanceName || '');
        
        // Generate QR code data (JSON format untuk di-scan)
        const qrData = JSON.stringify({
            type: 'attendance',
            activity_id: activityId,
            attendance_id: attendanceId,
            timestamp: Date.now()
        });
        
        // Gunakan API QR Server seperti di kartu peserta (tidak perlu library JavaScript)
        const qrSize = 300;
        const qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=' + qrSize + 'x' + qrSize + '&data=' + encodeURIComponent(qrData);
        
        // Set QR code image
        const qrCodeImage = $('#qrCodeImage');
        qrCodeImage.attr('src', qrUrl);
        qrCodeImage.css('display', 'block');
        qrCodeImage.on('error', function() {
            $('#qrcode').html('<p class="text-danger">Gagal memuat QR Code. Silakan coba lagi.</p>');
        });
        
        // Clear loading jika ada
        const qrcodeContainer = $('#qrcode');
        qrcodeContainer.find('.text-center.py-4').remove();
        
        // Show modal
        qrModal.modal('show');
    };
    
    // Handler yang tidak perlu library QRCode bisa di luar
    $(document).ready(function() {
    // Handler untuk tombol bulan (toggle attendance) - Manual attendance
    $(document).on('change', '.attendance-checkbox', function() {
        const checkbox = $(this);
        const userId = checkbox.data('user-id');
        const activityId = checkbox.data('activity-id');
        const attendanceId = checkbox.data('attendance-id');
        const isCurrentlyPresent = checkbox.data('is-present') === '1';
        const newStatus = checkbox.is(':checked');
        
        // Disable button sementara
        checkbox.prop('disabled', true);
        
        // Update status badge di kolom "Status Kehadiran"
        const row = checkbox.closest('tr');
        const statusBadge = row.find('.attendance-status');
        
        // Preview perubahan UI
        if (newStatus) {
            checkbox.data('is-present', '1');
            checkbox.attr('title', 'Hadir');
            statusBadge.removeClass('badge-danger').addClass('badge-success');
            statusBadge.html('<i class="fas fa-check-circle mr-1"></i>Hadir');
        } else {
            checkbox.data('is-present', '0');
            checkbox.attr('title', 'Tidak Hadir');
            statusBadge.removeClass('badge-success').addClass('badge-danger');
            statusBadge.html('<i class="fas fa-times-circle mr-1"></i>Tidak Hadir');
            row.find('.attendance-timestamp').hide();
        }
        
        // AJAX call untuk update status
        $.ajax({
            url: '/attendance/record-status',
            method: 'POST',
            data: {
                user_id: userId,
                activity_id: activityId,
                attendance_id: attendanceId,
                status: newStatus ? 1 : 0,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    // Update timestamp jika ada
                    if (newStatus && response.timestamp) {
                        const statusWrapper = row.find('.attendance-status-wrapper');
                        if (statusWrapper.find('.attendance-timestamp').length === 0) {
                            const timestampHtml = '<small class="text-muted mt-1 attendance-timestamp" style="display: none; font-size: 0.75rem;"><i class="far fa-clock mr-1"></i>' + response.timestamp + '</small>';
                            statusWrapper.append(timestampHtml);
                        } else {
                            statusWrapper.find('.attendance-timestamp').html('<i class="far fa-clock mr-1"></i>' + response.timestamp);
                        }
                    }
                } else {
                    // Revert button state on error
                    if (newStatus) {
                        checkbox.prop('checked', false);
                        checkbox.data('is-present', '0');
                        checkbox.attr('title', 'Tidak Hadir');
                        statusBadge.removeClass('badge-success').addClass('badge-danger');
                        statusBadge.html('<i class="fas fa-times-circle mr-1"></i>Tidak Hadir');
                    } else {
                        checkbox.prop('checked', true);
                        checkbox.data('is-present', '1');
                        checkbox.attr('title', 'Hadir');
                        statusBadge.removeClass('badge-danger').addClass('badge-success');
                        statusBadge.html('<i class="fas fa-check-circle mr-1"></i>Hadir');
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: response.message || 'Gagal mengupdate status kehadiran'
                    });
                }
            },
            error: function(xhr) {
                // Revert button state on error
                if (newStatus) {
                    checkbox.prop('checked', false);
                    checkbox.data('is-present', '0');
                    checkbox.attr('title', 'Tidak Hadir');
                    statusBadge.removeClass('badge-success').addClass('badge-danger');
                    statusBadge.html('<i class="fas fa-times-circle mr-1"></i>Tidak Hadir');
                } else {
                    checkbox.prop('checked', true);
                    checkbox.data('is-present', '1');
                    checkbox.attr('title', 'Hadir');
                    statusBadge.removeClass('badge-danger').addClass('badge-success');
                    statusBadge.html('<i class="fas fa-check-circle mr-1"></i>Hadir');
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat mengupdate status: ' + (xhr.responseJSON?.message || xhr.statusText)
                });
            },
            complete: function() {
            checkbox.prop('disabled', false);
            }
        });
    });
    
    // Handler untuk "Absen Semua"
    $(document).on('click', '.select-all-attendance', function() {
        const btn = $(this);
        let attendanceId = btn.data('attendance-id');
        let activityId = btn.data('activity-id');
        
        // Ambil dari button pertama di tabel jika tidak ada di button
        if (!attendanceId || !activityId) {
            const firstBox = $('.attendance-checkbox').first();
            if (firstBox.length) {
                attendanceId = firstBox.data('attendance-id');
                activityId = firstBox.data('activity-id');
            }
        }
        
        if (!attendanceId || !activityId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak ditemukan'
            });
            return;
        }
        
        Swal.fire({
            title: 'Absen Semua Peserta?',
            text: 'Anda yakin ingin mengabsensi semua peserta yang belum hadir?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Absen Semua',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                btn.prop('disabled', true);
                let originalHtml = btn.html();
                btn.html('<i class="fas fa-spinner fa-spin mr-1"></i>Memproses...');
                
                $.ajax({
                    url: '/attendance/mark-all-present',
                    method: 'POST',
                    data: {
                        attendance_id: attendanceId,
                        activity_id: activityId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message || 'Semua peserta berhasil diabsensi',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                // Reload halaman untuk update semua status
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: response.message || 'Gagal mengabsensi semua peserta'
                            });
                            btn.prop('disabled', false);
                            btn.html(originalHtml);
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = 'Gagal mengabsensi semua peserta';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                        btn.prop('disabled', false);
                        btn.html(originalHtml);
                    }
                });
            }
        });
    });
    
    // Simple search function - server-side search
    $('#searchInput').on('input', function() {
        let searchText = $(this).val();
        
        // Debounce search to avoid too many requests
        clearTimeout($(this).data('timeout'));
        $(this).data('timeout', setTimeout(function() {
            let currentUrl = new URL(window.location.href);
            
            if (searchText) {
                currentUrl.searchParams.set('search', searchText);
            } else {
                currentUrl.searchParams.delete('search');
            }
            
            // Reset to first page when searching
            currentUrl.searchParams.delete('page');
            
            window.location.href = currentUrl.toString();
        }, 500));
    });

    // Clear search
    $('#clearSearch').on('click', function() {
        $('#searchInput').val('');
        let currentUrl = new URL(window.location.href);
        currentUrl.searchParams.delete('search');
        currentUrl.searchParams.delete('page');
        window.location.href = currentUrl.toString();
    });

    // Setup AJAX CSRF token
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Handler untuk tombol On/Off absen Mandiri
    // Hapus handler lama dulu untuk hindari duplikat
    $(document).off('click', '.btn-toggle-mandiri');
    
    // Daftarkan handler baru dengan capture phase untuk memastikan terpanggil lebih dulu
    $(document).on('click', '.btn-toggle-mandiri', function(e) {
        // Stop propagation dan immediate propagation agar tidak trigger handleAttendanceClick di parent
        e.stopPropagation();
        e.stopImmediatePropagation();
        e.preventDefault();
        
        let button = $(this);
        
        // Ambil data
        let attendanceId = button.attr('data-attendance-id') || button.data('attendance-id');
        let activityId = button.attr('data-activity-id') || button.data('activity-id');
        
        // Validasi data
        if (!attendanceId || !activityId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak lengkap'
            });
            return false;
        }
        
        // Baca status saat ini dari class
        let isCurrentlyEnabled = button.hasClass('btn-toggle-active');
        let newStatus = !isCurrentlyEnabled;
        
        // Disable button sementara
        button.prop('disabled', true);
        
        // Update UI langsung
        if (newStatus) {
            button.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
            button.attr('data-is-enabled', '1');
            button.attr('title', 'Aktif - Klik untuk Nonaktifkan');
        } else {
            button.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
            button.attr('data-is-enabled', '0');
            button.attr('title', 'Tidak Aktif - Klik untuk Aktifkan');
        }
        
        // Simpan status awal untuk revert jika gagal
        let originalStatus = isCurrentlyEnabled;
        
        // Cek CSRF token
        let csrfToken = $('meta[name="csrf-token"]').attr('content');
        
        // AJAX request ke server
        $.ajax({
            url: '/attendance/toggle-mandiri',
            method: 'POST',
            data: {
                attendance_id: attendanceId,
                activity_id: activityId,
                enabled: newStatus ? 1 : 0
            },
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function(response) {
                button.prop('disabled', false);
                
                if(response && response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message || 'Status absen mandiri berhasil diubah',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    // Revert jika gagal
                    if (originalStatus) {
                        button.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
                        button.attr('data-is-enabled', '1');
                        button.attr('title', 'Aktif - Klik untuk Nonaktifkan');
                    } else {
                        button.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
                        button.attr('data-is-enabled', '0');
                        button.attr('title', 'Tidak Aktif - Klik untuk Aktifkan');
                    }
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: (response && response.message) ? response.message : 'Gagal mengubah status absen mandiri'
                    });
                }
            },
            error: function(xhr, status, error) {
                button.prop('disabled', false);
                
                // Revert jika error
                if (originalStatus) {
                    button.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
                    button.attr('data-is-enabled', '1');
                    button.attr('title', 'Aktif - Klik untuk Nonaktifkan');
                } else {
                    button.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
                    button.attr('data-is-enabled', '0');
                    button.attr('title', 'Tidak Aktif - Klik untuk Aktifkan');
                }
                
                let errorMessage = 'Gagal mengubah status absen mandiri';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (error) {
                    errorMessage += ': ' + error;
                }
                if (xhr.status) {
                    errorMessage += ' (Status: ' + xhr.status + ')';
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: errorMessage
                });
            }
        });
        
        return false;
    });
    
    // Juga daftarkan handler langsung pada elemen yang sudah ada (backup method)
    const btnCount = $('.btn-toggle-mandiri').length;
    if (btnCount > 0) {
        $('.btn-toggle-mandiri').off('click.toggleMandiri').on('click.toggleMandiri', function(e) {
            const $btn = $(this);
            
            // Ambil data
            const attendanceId = $btn.attr('data-attendance-id') || $btn.data('attendance-id');
            const activityId = $btn.attr('data-activity-id') || $btn.data('activity-id');
            const isCurrentlyEnabled = $btn.hasClass('btn-toggle-active');
            const newStatus = !isCurrentlyEnabled;
            
            // Panggil fungsi toggle langsung
            if (attendanceId && activityId) {
                e.stopPropagation();
                e.stopImmediatePropagation();
                e.preventDefault();
                
                // Disable button
                $btn.prop('disabled', true);
                
                // Update UI
                if (newStatus) {
                    $btn.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
                    $btn.attr('data-is-enabled', '1');
                } else {
                    $btn.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
                    $btn.attr('data-is-enabled', '0');
                }
                
                // AJAX call
                $.ajax({
                    url: '/attendance/toggle-mandiri',
                    method: 'POST',
                    data: {
                        attendance_id: attendanceId,
                        activity_id: activityId,
                        enabled: newStatus ? 1 : 0
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $btn.prop('disabled', false);
                        if(response && response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message || 'Status absen mandiri berhasil diubah',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        } else {
                            // Revert UI
                            if (isCurrentlyEnabled) {
                                $btn.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
                                $btn.attr('data-is-enabled', '1');
                            } else {
                                $btn.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
                                $btn.attr('data-is-enabled', '0');
                            }
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: response.message || 'Gagal mengubah status absen mandiri'
                            });
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false);
                        // Revert UI
                        if (isCurrentlyEnabled) {
                            $btn.removeClass('btn-toggle-inactive').addClass('btn-toggle-active');
                            $btn.attr('data-is-enabled', '1');
                        } else {
                            $btn.removeClass('btn-toggle-active').addClass('btn-toggle-inactive');
                            $btn.attr('data-is-enabled', '0');
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Gagal mengubah status absen mandiri'
                        });
                    }
                });
            }
        });
    }
    
    // Handler untuk mark all present (absen semua peserta untuk Manual) - sama dengan tombol di tabel
    $(document).on('click', '.mark-all-present', function(e) {
        // Stop propagation agar tidak trigger handleAttendanceClick di parent
        e.stopPropagation();
        e.stopImmediatePropagation();
        e.preventDefault();
        
        const btn = $(this);
        let attendanceId = btn.data('attendance-id');
        let activityId = btn.data('activity-id');
        
        // Ambil dari button pertama di tabel jika tidak ada di button
        if (!attendanceId || !activityId) {
            const firstBox = $('.attendance-checkbox').first();
            if (firstBox.length) {
                attendanceId = firstBox.data('attendance-id');
                activityId = firstBox.data('activity-id');
            }
        }
        
        if (!attendanceId || !activityId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak ditemukan'
            });
            return false;
        }
        
        Swal.fire({
            title: 'Absen Semua Peserta?',
            text: 'Anda yakin ingin mengabsensi semua peserta yang belum hadir?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Absen Semua',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                btn.prop('disabled', true);
                let originalHtml = btn.html();
                btn.html('<i class="fas fa-spinner fa-spin mr-1"></i>Memproses...');
                
                $.ajax({
                    url: '/attendance/mark-all-present',
                    method: 'POST',
                    data: {
                        attendance_id: attendanceId,
                        activity_id: activityId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message || 'Semua peserta berhasil diabsensi',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                // Reload halaman untuk update semua status
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: response.message || 'Gagal mengabsensi semua peserta'
                            });
                            btn.prop('disabled', false);
                            btn.html(originalHtml);
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = 'Gagal mengabsensi semua peserta';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                        btn.prop('disabled', false);
                        btn.html(originalHtml);
                    }
                });
            }
        });
        
        return false;
    });
    
    // Juga daftarkan handler langsung pada tombol mark-all-present yang sudah ada (backup method)
    $('.mark-all-present').off('click.markAllPresent').on('click.markAllPresent', function(e) {
        // Stop propagation agar tidak trigger handleAttendanceClick di parent
        e.stopPropagation();
        e.stopImmediatePropagation();
        e.preventDefault();
        
        const btn = $(this);
        let attendanceId = btn.data('attendance-id');
        let activityId = btn.data('activity-id');
        
        // Ambil dari button pertama di tabel jika tidak ada di button
        if (!attendanceId || !activityId) {
            const firstBox = $('.attendance-checkbox').first();
            if (firstBox.length) {
                attendanceId = firstBox.data('attendance-id');
                activityId = firstBox.data('activity-id');
            }
        }
        
        if (!attendanceId || !activityId) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Data absensi tidak ditemukan'
            });
            return false;
        }
        
        Swal.fire({
            title: 'Absen Semua Peserta?',
            text: 'Anda yakin ingin mengabsensi semua peserta yang belum hadir?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Absen Semua',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading state
                btn.prop('disabled', true);
                let originalHtml = btn.html();
                btn.html('<i class="fas fa-spinner fa-spin mr-1"></i>Memproses...');
                
                $.ajax({
                    url: '/attendance/mark-all-present',
                    method: 'POST',
                    data: {
                        attendance_id: attendanceId,
                        activity_id: activityId
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message || 'Semua peserta berhasil diabsensi',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                // Reload halaman untuk update semua status
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: response.message || 'Gagal mengabsensi semua peserta'
                            });
                            btn.prop('disabled', false);
                            btn.html(originalHtml);
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = 'Gagal mengabsensi semua peserta';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                        btn.prop('disabled', false);
                        btn.html(originalHtml);
                    }
                });
            }
        });
        
        return false;
    });

    // Update handler untuk delete attendance
    $(document).on('click', '.delete-attendance', function() {
        let btn = $(this);
        let attendanceId = btn.data('attendance-id');
        let activityId = btn.data('activity-id');
        let attendanceName = btn.data('attendance-name');
        let deleteUrl = btn.data('delete-url') || `/attendance/${attendanceId}`;

        Swal.fire({
            title: 'Hapus Jenis Absen?',
            text: `Anda yakin ingin menghapus jenis absen "${attendanceName}"?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        activity_id: activityId,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if(response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message || 'Jenis absen berhasil dihapus',
                                showConfirmButton: false,
                                timer: 1500
                            }).then(() => {
                                // Reload halaman setelah berhasil hapus
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: response.message || 'Gagal menghapus jenis absen'
                            });
                        }
                    },
                    error: function(xhr) {
                        let errorMessage = 'Gagal menghapus jenis absen';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: errorMessage
                        });
                    }
                });
            }
        });
    });
    
    // Fallback inline handler agar klik tetap berfungsi meski delegasi gagal
    window.handleDeleteAttendance = function(el) {
        try {
            var btn = $(el);
            var attendanceId = btn.data('attendance-id');
            var activityId = btn.data('activity-id');
            var attendanceName = btn.data('attendance-name');
            var deleteUrl = btn.data('delete-url') || '/attendance/' + attendanceId;

            Swal.fire({
                title: 'Hapus Jenis Absen?',
                text: 'Anda yakin ingin menghapus jenis absen "' + attendanceName + '"?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.ajax({
                        url: deleteUrl,
                        type: 'DELETE',
                        data: {
                            activity_id: activityId,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response && response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: (response.message || 'Jenis absen berhasil dihapus'),
                                    showConfirmButton: false,
                                    timer: 1500
                                }).then(function() { window.location.reload(); });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: (response && response.message) ? response.message : 'Gagal menghapus jenis absen'
                                });
                            }
                        },
                        error: function(xhr) {
                            var errorMessage = 'Gagal menghapus jenis absen';
                            if (xhr && xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; }
                            Swal.fire({ icon: 'error', title: 'Gagal', text: errorMessage });
                        }
                    });
                }
            });
        } catch (e) {
            // Jika terjadi error yang membatalkan eksekusi sebelumnya, pastikan tidak memblokir klik
            Swal.fire({ icon: 'error', title: 'Error', text: 'Terjadi kesalahan saat memproses penghapusan.' });
        }
    };
    }); // End of $(document).ready
})();
</script>
@endsection