@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto px-6 mt-6">

    <!-- Compliance Progress Section -->
    <div class="bg-white border border-gray-100 shadow-sm rounded-xl p-6 mb-8 relative">

        <div class="flex items-center justify-between mb-3">
            <h2 class="text-lg font-semibold text-gray-700">Compliance Progress</h2>
            <span class="text-sm text-gray-500">
                {{ $completedForms ?? 0 }} of {{ $totalForms ?? 0 }} forms submitted
            </span>
        </div>

        @php
            $percentage = $totalForms > 0 ? round(($completedForms / $totalForms) * 100, 1) : 0;

            if ($percentage < 50) $barColor = 'bg-red-500';
            elseif ($percentage < 100) $barColor = 'bg-yellow-400';
            else $barColor = 'bg-green-500';
        @endphp

        <!-- Progress Bar -->
        <div class="w-full bg-gray-200 rounded-full h-3 mb-2 overflow-hidden">
            <div class="{{ $barColor }} h-3 rounded-full transition-all duration-700 ease-out"
                style="width: {{ $percentage }}%;"></div>
        </div>

        <div class="flex justify-between items-center">
            <p class="text-sm text-gray-600">{{ $percentage }}% compliance achieved</p>

            <!-- Dropdown Toggle Button 
            <button id="toggleIncomplete" type="button"
                class="text-xs text-indigo-600 hover:text-indigo-800 font-medium flex items-center gap-1">
                View incomplete borang
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>-->
        </div>

        <!-- Incomplete Borang List -->
        <div id="incompleteList" class="hidden mt-3 bg-gray-50 rounded-lg border border-gray-200 p-4">
            @if (!empty($incompleteForms))
                <ul class="list-disc list-inside text-sm text-gray-700 space-y-1">
                    @foreach ($incompleteForms as $borang)
                        <li>{{ $borang }}</li>
                    @endforeach
                </ul>
            @else
                <p class="text-sm text-gray-500 italic">All forms completed ✅</p>
            @endif
        </div>
    </div>

    <!-- JS for Dropdown Toggle -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const toggleBtn = document.getElementById('toggleIncomplete');
            const list = document.getElementById('incompleteList');
            toggleBtn.addEventListener('click', () => {
                list.classList.toggle('hidden');
            });
        });
    </script>

    <h1 class="text-3xl font-bold text-gray-800 mb-1">Borang</h1>
    <p class="text-gray-500 mb-6">Senarai borang koperasi anda. Sila lengkapkan setiap borang di bawah.</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach ($borangs as $borang)
            @include('borang.card_layout', ['borang' => $borang])
        @endforeach
    </div>

    <!-- ✅ Checkbox Status Script -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const baseUrl = document.querySelector('meta[name="base-url"]').content;
            const checkboxes = document.querySelectorAll('input[type="checkbox"][data-borang-id]');

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', async (e) => {
                    const borangId = e.target.dataset.borangId;
                    const isChecked = e.target.checked;

                    try {
                        const response = await fetch(`${baseUrl}/borang/${borangId}/update-status`, {
                            method: 'PUT',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                'Accept': 'application/json',
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                status: isChecked ? 'completed' : 'pending'
                            }),
                        });

                        if (!response.ok) throw new Error('Network error');

                        const data = await response.json();

                        if (data.success) {
                            const card = e.target.closest('.borang-card');
                            const badge = card.querySelector('.status-badge');

                            badge.textContent = isChecked ? 'Completed' : 'Pending';
                            badge.className =
                                `px-3 py-1 text-xs rounded-full whitespace-nowrap status-badge ${
                                    isChecked
                                        ? 'bg-green-100 text-green-700 border border-green-200'
                                        : 'bg-yellow-100 text-yellow-700 border border-yellow-200'
                                }`;

                            alert('✅ Berjaya mengemas kini status!');
                        } else {
                            alert('⚠️ Gagal mengemas kini status.');
                        }

                    } catch (error) {
                        alert('⚠️ Ralat pelayan. Sila cuba lagi.');
                    }
                });
            });
        });
    </script>

</div>
@endsection