@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-white py-4 px-4">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-4">
            <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-t-xl shadow-lg px-5 py-2">
                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-calendar-alt mr-2"></i>
                        List Aktivitas
                    </h2>
                    <div class="flex items-center gap-3">
                        <div class="relative">
                            <input type="text" 
                                   id="searchInput"
                                   class="pl-9 pr-3 py-1.5 rounded-lg border-0 focus:ring-2 focus:ring-white/50 text-gray-900 placeholder-gray-500"
                                   placeholder="Cari aktivitas..."
                                   autocomplete="off">
                            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300"></i>
                        </div>
                        @if(auth()->user() && (auth()->user()->isCreator() || auth()->user()->isAdmin() || auth()->user()->isSuperAdmin()))
                        <a href="{{ route('activity.create') }}" class="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg transition-all flex items-center">
                            <i class="fas fa-plus mr-2 text-sm"></i>
                            Tambah Aktivitas
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-green-800 font-medium">{{ session('success') }}</p>
                    </div>
                    <button type="button" class="text-green-500 hover:text-green-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if(session('deleted'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-triangle text-red-500 mr-3 text-xl"></i>
                    <div class="flex-1">
                        <p class="text-red-800 font-medium">{{ session('deleted') }}</p>
                    </div>
                    <button type="button" class="text-red-500 hover:text-red-700" onclick="this.parentElement.parentElement.remove()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        @endif

        @if(isset($manualLimitExceeded) && $manualLimitExceeded)
            <div class="mb-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4 shadow-sm">
                <div class="flex items-start">
                    <i class="fas fa-ban text-red-600 mr-3 text-xl mt-0.5"></i>
                    <div class="flex-1">
                        <p class="text-red-800 font-semibold">Kuota aktivitas metode manual berbayar telah tercapai.</p>
                        <p class="text-red-700 text-sm">{{ $currentManualPaidCount }} / {{ $manualLimit }} kegiatan. Upgrade paket atau nonaktifkan salah satu untuk menambah kegiatan manual berbayar.</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Table Card -->
        <div class="bg-white rounded-b-xl shadow-xl overflow-hidden">
            <div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 table-activity">
                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                        <tr>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">No</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nama Aktivitas</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Kategori</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tanggal</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Waktu</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Metode Pembayaran</th>
                            <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                            @if(auth()->user())
                                <th class="px-6 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Pendaftaran</th>
                                @if(auth()->user()->isCreator() || auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                                <th class="px-6 py-2 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">Aksi</th>
                                @endif
                            @endif
                        </tr>
                    </thead>
                    <tbody id="activity-list" class="bg-white divide-y divide-gray-200" data-edit-protected="true">
                        @forelse ($latestActivities as $index => $activity)
                            <tr class="activity-item hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
                                    {{ $latestActivities->firstItem() + $index }}
                                </td>
                                <td class="px-6 py-2">
                                    <div class="text-sm font-semibold text-gray-900 max-w-md truncate" title="{{ $activity->name }}">
                                        {{ $activity->name }}
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
                                        {{ $activity->category->name }}
                                    </span>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar-alt mr-1.5 text-gray-400 text-xs"></i>
                                        {{ \Carbon\Carbon::parse($activity->date)->format('d M Y') }}
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap text-sm text-gray-600">
                                    <div class="flex items-center">
                                        <i class="fas fa-clock mr-1.5 text-gray-400 text-xs"></i>
                                        @if($activity->start_time)
                                            {{ date('H:i', strtotime($activity->start_time)) }}
                                            @if($activity->end_time)
                                                - {{ date('H:i', strtotime($activity->end_time)) }}
                                            @endif
                                        @else
                                            -
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    @php
                                        $isAuto = method_exists($activity, 'isAutomaticPayment') ? $activity->isAutomaticPayment() : ($activity->payment_method_type === 'automatic');
                                    @endphp
                                    @if($isAuto)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-700">
                                            Otomatis
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">
                                            Manual
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-2 whitespace-nowrap">
                                    @if($activity->status === 'public')
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                            Public
                                        </span>
                                    @elseif($activity->status === 'pribadi')
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
                                            Pribadi
                                        </span>
                                    @else
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800">
                                            Private
                                        </span>
                                    @endif
                                </td>
                                @if(auth()->user())
                                <td class="px-6 py-2 whitespace-nowrap">
                                    @php
                                        $canManage = $activity->canManageRegistration();
                                        $registrationStatuses = [
                                            0 => ['label' => 'Belum Dibuka', 'class' => 'bg-gray-100 text-gray-800'],
                                            1 => ['label' => 'Dibuka', 'class' => 'bg-green-100 text-green-800'],
                                            2 => ['label' => 'Ditutup', 'class' => 'bg-red-100 text-red-800']
                                        ];
                                        $currentStatus = $activity->pendaftaran ?? 0;
                                        $statusInfo = $registrationStatuses[$currentStatus];
                                    @endphp
                                    @if($canManage)
                                        <button type="button" 
                                                class="toggle-registration inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold transition-all hover:opacity-80 cursor-pointer {{ $statusInfo['class'] }}"
                                                data-activity-id="{{ $activity->id }}"
                                                data-current-status="{{ $currentStatus }}"
                                                title="Klik untuk mengubah status pendaftaran">
                                            <i class="fas fa-door-open mr-1 text-xs"></i>
                                            {{ $statusInfo['label'] }}
                                        </button>
                                    @else
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusInfo['class'] }}">
                                            {{ $statusInfo['label'] }}
                                        </span>
                                    @endif
                                </td>
                                @endif
                                @if(auth()->user() && (auth()->user()->isCreator() || auth()->user()->isAdmin() || auth()->user()->isSuperAdmin()))
                                <td class="px-6 py-2 whitespace-nowrap text-center">
                                    @php
                                        $isOwner = auth()->user()->isCreator() ? ($activity->user_id == auth()->id()) : true;
                                        $canManage = auth()->user()->isAdmin() || auth()->user()->isSuperAdmin() || $isOwner;
                                    @endphp
                                    
                                    <div class="flex items-center justify-center gap-1.5">
                                        @if($canManage)
                                            <a href="{{ route('activity.dashboard', ['activity' => $activity->id]) }}" 
                                               class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-all duration-200 hover:scale-110"
                                               title="Seting">
                                                <i class="fas fa-cog text-xs"></i>
                                            </a>
                                        @endif

                                        @php $isPinned = (bool) ($activity->hero_pinned ?? false); @endphp
                                        <button type="button"
                                                class="toggle-hero-pin inline-flex items-center justify-center w-8 h-8 rounded-lg {{ $isPinned ? 'bg-amber-200 text-amber-700' : 'bg-gray-100 text-gray-600' }} hover:scale-110 transition-all duration-200"
                                                data-activity-id="{{ $activity->id }}"
                                                title="{{ $isPinned ? 'Unpin dari Hero' : 'Pin ke Hero' }}">
                                            <i class="fas fa-thumbtack text-xs"></i>
                                        </button>

                                        <a href="{{ route('activity.show', $activity->id) }}" 
                                           class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-cyan-100 hover:bg-cyan-200 text-cyan-600 transition-all duration-200 hover:scale-110"
                                           title="Detail">
                                            <i class="fas fa-eye text-xs"></i>
                                        </a>
                                        
                                        @if($canManage)
                                            <a href="{{ route('activity.edit', $activity->id) }}" 
                                               class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-100 hover:bg-yellow-200 text-yellow-600 transition-all duration-200 hover:scale-110"
                                               title="Edit">
                                                <i class="fas fa-edit text-xs"></i>
                                            </a>
                                        @endif
                                        
                                        @if(auth()->user() && (auth()->user()->isSuperAdmin() || (auth()->user()->isAdmin() && !auth()->user()->isCreator())))
                                        <form action="{{ route('activity.destroy', $activity->id) }}" 
                                              method="POST" 
                                              class="inline"
                                              onsubmit="return confirm('Apakah Anda yakin ingin menghapus aktivitas ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" 
                                                    class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-red-100 hover:bg-red-200 text-red-600 transition-all duration-200 hover:scale-110"
                                                    title="Hapus">
                                                <i class="fas fa-trash text-xs"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </td>
                                @endif
                            </tr>
                        @empty
                            <tr id="no-data">
                                @php
                                    $colspan = 7; // tambahan kolom Metode Pembayaran
                                    if (auth()->user()) {
                                        if (auth()->user()->isCreator() || auth()->user()->isAdmin() || auth()->user()->isSuperAdmin()) {
                                            $colspan = 9;
                                        } else {
                                            $colspan = 8;
                                        }
                                    }
                                @endphp
                                <td colspan="{{ $colspan }}" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center">
                                        <div class="bg-gray-100 rounded-full p-6 mb-4">
                                            <i class="fas fa-calendar-alt text-4xl text-gray-400"></i>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-900 mb-2">Tidak ada aktivitas</h3>
                                        <p class="text-gray-600 mb-4">Belum ada aktivitas yang ditambahkan</p>
                                        @if(auth()->user() && (auth()->user()->isCreator() || auth()->user()->isAdmin() || auth()->user()->isSuperAdmin()))
                                        <a href="{{ route('activity.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all">
                                            <i class="fas fa-plus mr-2"></i>
                                            Tambah Aktivitas Pertama
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($latestActivities->count() > 0)
                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div class="text-sm text-gray-600">
                            Menampilkan <span class="font-semibold text-gray-900">{{ $latestActivities->firstItem() }}</span> sampai 
                            <span class="font-semibold text-gray-900">{{ $latestActivities->lastItem() }}</span> dari 
                            <span class="font-semibold text-gray-900">{{ $latestActivities->total() }}</span> data
                        </div>
                        <div class="flex items-center">
                            {{ $latestActivities->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    const activityItems = document.querySelectorAll('.activity-item');
    const noData = document.getElementById('no-data');
    
    // Search functionality
    if (searchInput) {
        searchInput.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            let hasVisibleItems = false;

            activityItems.forEach(item => {
                const activityName = item.querySelector('td:nth-child(2)').textContent.toLowerCase();
                const categoryName = item.querySelector('td:nth-child(3)').textContent.toLowerCase();
                
                if (activityName.includes(searchTerm) || categoryName.includes(searchTerm)) {
                    item.style.display = '';
                    hasVisibleItems = true;
                } else {
                    item.style.display = 'none';
                }
            });

            // Show/hide no data message
            if (noData) {
                noData.style.display = hasVisibleItems ? 'none' : '';
            }
        });
    }

    // Toggle Registration Status
    document.querySelectorAll('.toggle-registration').forEach(button => {
        button.addEventListener('click', function() {
            const activityId = this.getAttribute('data-activity-id');
            const currentStatus = parseInt(this.getAttribute('data-current-status'));
            const buttonElement = this;

            // Disable button during request
            buttonElement.disabled = true;
            buttonElement.style.opacity = '0.5';

            fetch(`/activity/${activityId}/toggle-registration`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update button with new status
                    const registrationStatuses = {
                        0: { label: 'Belum Dibuka', class: 'bg-gray-100 text-gray-800' },
                        1: { label: 'Dibuka', class: 'bg-green-100 text-green-800' },
                        2: { label: 'Ditutup', class: 'bg-red-100 text-red-800' }
                    };
                    
                    const newStatus = data.new_status;
                    const statusInfo = registrationStatuses[newStatus];
                    
                    buttonElement.className = `toggle-registration inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold transition-all hover:opacity-80 cursor-pointer ${statusInfo.class}`;
                    buttonElement.setAttribute('data-current-status', newStatus);
                    buttonElement.innerHTML = `<i class="fas fa-door-open mr-1 text-xs"></i>${statusInfo.label}`;
                    
                    // Show success message
                    const alert = document.createElement('div');
                    alert.className = 'fixed top-4 right-4 bg-green-50 border-l-4 border-green-500 text-green-700 p-4 rounded-lg shadow-lg z-50 flex items-center gap-3';
                    alert.innerHTML = `
                        <i class="fas fa-check-circle"></i>
                        <span>${data.message || 'Status pendaftaran berhasil diperbarui'}</span>
                        <button type="button" class="ml-4 text-green-700 hover:text-green-900" onclick="this.parentElement.remove()">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    document.body.appendChild(alert);
                    
                    setTimeout(() => {
                        alert.remove();
                    }, 3000);
                } else {
                    alert(data.message || 'Gagal mengubah status pendaftaran');
                }
            })
            .catch(error => {
                
                alert('Terjadi kesalahan saat mengubah status pendaftaran');
            })
            .finally(() => {
                buttonElement.disabled = false;
                buttonElement.style.opacity = '1';
            });
        });
    });

    // Toggle Hero Pin
    document.querySelectorAll('.toggle-hero-pin').forEach(button => {
        button.addEventListener('click', function() {
            const activityId = this.getAttribute('data-activity-id');
            const btn = this;
            btn.disabled = true;
            btn.style.opacity = '0.6';

            fetch(`/activity/${activityId}/toggle-hero-pin`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const isPinned = !!data.new_status;
                    btn.className = `toggle-hero-pin inline-flex items-center justify-center w-8 h-8 rounded-lg ${isPinned ? 'bg-amber-200 text-amber-700' : 'bg-gray-100 text-gray-600'} hover:scale-110 transition-all duration-200`;
                    btn.title = isPinned ? 'Unpin dari Hero' : 'Pin ke Hero';

                    const alert = document.createElement('div');
                    alert.className = 'fixed top-4 right-4 bg-green-50 border-l-4 border-green-500 text-green-700 p-4 rounded-lg shadow-lg z-50 flex items-center gap-3';
                    alert.innerHTML = `
                        <i class="fas fa-check-circle"></i>
                        <span>${data.message || 'Berhasil memperbarui pin hero'}</span>
                        <button type="button" class="ml-4 text-green-700 hover:text-green-900" onclick="this.parentElement.remove()">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    document.body.appendChild(alert);
                    setTimeout(() => alert.remove(), 2500);
                } else {
                    alert(data.message || 'Gagal memperbarui pin hero');
                }
            })
            .catch(() => alert('Terjadi kesalahan saat memperbarui pin hero'))
            .finally(() => { btn.disabled = false; btn.style.opacity = '1'; });
        });
    });
});
</script>
@endpush