@extends('user.template-user')

@section('title', 'Kempen Disimpan')

@section('content')
    <div class="p-4">
        <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900 mb-2">Sumbangan yang ditanda akan dipaparkan disini.</h1>
            <p class="text-gray-600">Mulai simpan kempen yang menarik perhatian Anda untuk memudahkan akses di kemudian hari.
            </p>
        </div>

        @if ($savedKempen->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach ($savedKempen as $item)
                    <div
                        class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
                        <!-- Campaign Image -->
                        <div class="relative">
                            <img src="{{ asset($item->kempen->cover) }}" alt="{{ $item->kempen->judul }}"
                                class="w-full h-48 object-cover">

                            <!-- Remove Button -->
                            <button onclick="removeSavedKempen({{ $item->id }})"
                                class="absolute top-2 right-2 bg-red-500 hover:bg-red-600 text-white p-2 rounded-full transition-colors duration-200 shadow-lg">
                                <svg class="w-4 h-4" 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>

                            <!-- Category Badge -->
                            <div class="absolute bottom-2 left-2">
                                <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded-md text-xs font-medium">
                                    {{ $item->kempen->category->name }}
                                </span>
                            </div>
                        </div>

                        <!-- Campaign Info -->
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 mb-2 line-clamp-2">
                                {{ $item->kempen->judul }}
                            </h3>

                            <div class="text-sm text-gray-600 mb-3">
                                <div class="flex items-center gap-1">
                                    <i class="fa-solid fa-user text-gray-400"></i>
                                    <span>{{ $item->kempen->pengumpul_dana->name }}</span>
                                </div>
                            </div>

                            <!-- Progress Info -->
                            <div class="mb-3">
                                @php
                                    $percentage = ($item->kempen->derma_terkumpul / $item->kempen->target_derma) * 100;
                                    $percentage = min($percentage, 100);
                                @endphp

                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">Terkumpul</span>
                                    <span class="font-medium text-gray-900">{{ number_format($percentage, 1) }}%</span>
                                </div>

                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div class="bg-orange-400 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
                                </div>

                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                    <span>RM {{ number_format($item->kempen->derma_terkumpul, 2) }}</span>
                                    <span>RM {{ number_format($item->kempen->target_derma, 2) }}</span>
                                </div>
                            </div>

                            <!-- Time Info -->
                            @php
                                $now = now();
                                $endDate = \Carbon\Carbon::parse($item->kempen->tanggal_berakhir);
                                $remainingDays = $now->diffInDays($endDate, false);
                            @endphp

                            <div class="mb-4">
                                @if ($remainingDays > 0)
                                    <span class="text-xs text-gray-500">
                                        <i class="fa-regular fa-clock mr-1"></i>
                                        {{ $remainingDays }} hari tersisa
                                    </span>
                                @else
                                    <span class="text-xs text-red-500">
                                        <i class="fa-regular fa-clock mr-1"></i>
                                        Kempen telah berakhir
                                    </span>
                                @endif
                            </div>

                            <!-- Saved Date -->
                            <div class="text-xs text-gray-400 mb-3 border-t pt-3">
                                <i class="fa-regular fa-bookmark mr-1"></i>
                                Disimpan {{ $item->created_at->diffForHumans() }}
                            </div>

                            <!-- Action Button -->
                            <a href="/detail-kempen/{{ $item->kempen->id }}"
                                class="w-full bg-orange-400 hover:bg-orange-500 text-white text-center py-2 px-4 rounded-lg transition-colors duration-200 text-sm font-medium block">
                                Lihat Detail
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <!-- Empty State -->
            <div class="text-center py-12">
                <div class="mx-auto w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                    <i class="fa-regular fa-bookmark text-4xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">Belum Ada Kempen yang Disimpan</h3>
                <p class="text-gray-600 mb-6">Mulai simpan kempen yang menarik perhatian Anda untuk memudahkan akses di
                    kemudian hari.</p>
                <a href="/"
                    class="bg-orange-400 hover:bg-orange-500 text-white px-6 py-3 rounded-lg transition-colors duration-200 font-medium">
                    Jelajahi Kempen
                </a>
            </div>
        @endif
    </div>

    <!-- Remove Confirmation Modal -->
    <div id="removeModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fa-solid fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900 mt-2">Hapus dari Simpanan</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">
                        Apakah Anda yakin ingin menghapus kempen ini dari daftar simpanan?
                    </p>
                </div>
                <div class="flex gap-3 px-4 py-3">
                    <button id="cancelRemove"
                        class="flex-1 bg-white py-2 px-4 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                        Batal
                    </button>
                    <button id="confirmRemove"
                        class="flex-1 bg-red-600 py-2 px-4 border border-transparent rounded-md text-sm font-medium text-white hover:bg-red-700 transition-colors duration-200">
                        Hapus
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        let currentRemoveId = null;

        function removeSavedKempen(id) {
            currentRemoveId = id;
            document.getElementById('removeModal').classList.remove('hidden');
        }

        // Cancel remove
        document.getElementById('cancelRemove').onclick = function() {
            document.getElementById('removeModal').classList.add('hidden');
            currentRemoveId = null;
        };

        // Confirm remove
        document.getElementById('confirmRemove').onclick = function() {
            if (currentRemoveId) {
                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

                fetch(`/user/saved-kempen/remove/${currentRemoveId}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Remove the card from DOM
                            location.reload(); // Refresh to update the list
                        } else {
                            alert('Terjadi kesalahan: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan sistem');
                    });

                document.getElementById('removeModal').classList.add('hidden');
                currentRemoveId = null;
            }
        };

        // Close modal when clicking outside
        document.getElementById('removeModal').onclick = function(e) {
            if (e.target === this) {
                this.classList.add('hidden');
                currentRemoveId = null;
            }
        };
    </script>
@endpush

@push('style')
    <style>
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
@endpush