@extends('dashboard-saksi.layouts.app')

@section('content')
    <h1 class="text-3xl font-bold mb-6 text-center">
        Input Suara
    </h1>


    <form id="electionForm" class="p-4 space-y-4" action="{{ route('user-saksi.input-suara.save') }}" method="POST">
        @csrf
        <div id="candidatesContainer"></div>

        <div class="space-y-2 pt-4 border-t">
            <label for="invalid-votes" class="font-medium">Tidak Sah</label>
            <div class="flex items-center space-x-2">
                <button type="button" class="border bg-red-500 rounded-md p-2" onclick="handleInvalidDecrement()"
                    aria-label="Decrease invalid votes">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 12h14" />
                    </svg>
                </button>
                <input id="invalid-votes" name="suara_tidak_sah"
                    value="{{ old('suara_tidak_sah', @$suara->suara_tidak_sah ?? 0) }}" type="number" value="0"
                    min="0" class="w-full text-center border rounded-md p-2"
                    onchange="handleInvalidVotesChange(this.value)">
                <button type="button" class="border bg-blue-500 rounded-md p-2" onclick="handleInvalidIncrement()"
                    aria-label="Increase invalid votes">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 12h14m-7-7v14" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="pt-4 border-t">
            <button type="button" id="summaryToggle"
                class="w-full flex justify-between items-center border rounded-md p-2">
                Summary
                <i class="lucide lucide-chevron-down"></i>
            </button>
            <div id="summaryContent" class="mt-2 space-y-2 hidden"></div>
        </div>

        <button type="submit"
            class="w-full bg-green-600 hover:bg-green-700 text-white rounded-md p-2">
            Submit Results
        </button>

        @if (isset($suara) && $suara->status == "reject")
            <p class="text-yellow-500">
                *Input suara anda ditolak, silahkan periksa kembali dan submit ulang
            </p>
        @endif
    </form>
@endsection

@push('scripts')
    <script>
        const candidates = @json($calons);
        let invalidVotes = {{ old('suara_tidak_sah', @$suara->suara_tidak_sah ?? 0) }};
        const saveData = debounce(saveSuara, 1000);

        function renderCandidates() {
            const container = document.getElementById('candidatesContainer');
            container.innerHTML = '';
            candidates.forEach((candidate, index) => {
                const div = document.createElement('div');
                div.className = 'space-y-2 mb-4';
                div.innerHTML = `
                <label for="candidate-${index}" class="font-medium">${candidate.name}</label>
                <div class="flex items-center space-x-2">
                    <button type="button" class="border bg-red-500 rounded-md p-2" onclick="handleDecrement(${index})" aria-label="Decrease votes for ${candidate.name}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"/></svg>
                    </button>
                    <input id="candidate-${index}" name="jumlah_suara[${candidate.id}]" type="number" value="${candidate.votes}" min="0" class="w-full text-center border rounded-md p-2" onchange="handleVoteChange(${index}, this.value)">
                    <button type="button" class="border bg-blue-500 rounded-md p-2" onclick="handleIncrement(${index})" aria-label="Increase votes for ${candidate.name}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/></svg>
                    </button>
                </div>
            `;
                container.appendChild(div);
            });
        }

        function handleVoteChange(index, votes) {
            candidates[index].votes = Math.max(0, parseInt(votes) || 0);
            updateSummary();
        }

        function handleIncrement(index) {
            candidates[index].votes++;
            document.getElementById(`candidate-${index}`).value = candidates[index].votes;
            updateSummary();
        }

        function handleDecrement(index) {
            candidates[index].votes = Math.max(0, candidates[index].votes - 1);
            document.getElementById(`candidate-${index}`).value = candidates[index].votes;
            updateSummary();
        }

        function handleInvalidVotesChange(votes) {
            invalidVotes = Math.max(0, parseInt(votes) || 0);
            updateSummary();
        }

        function handleInvalidIncrement() {
            invalidVotes++;
            document.getElementById('invalid-votes').value = invalidVotes;
            updateSummary();
        }

        function handleInvalidDecrement() {
            invalidVotes = Math.max(0, invalidVotes - 1);
            document.getElementById('invalid-votes').value = invalidVotes;
            updateSummary();
        }

        function updateSummary() {
            const summaryContent = document.getElementById('summaryContent');
            const totalValidVotes = candidates.reduce((sum, candidate) => sum + candidate.votes, 0);
            const totalVotes = totalValidVotes + invalidVotes;

            summaryContent.innerHTML =
                `
            <p class="font-medium">Total Votes: ${totalVotes}</p>
            <p>Valid Votes: ${totalValidVotes}</p>
            <p>Invalid Votes: ${invalidVotes}</p>
            ${candidates.map(candidate => `<p>${candidate.name}: ${totalValidVotes > 0 ? ((candidate.votes / totalValidVotes) * 100).toFixed(2) : '0'}%</p>`).join('')}`;
            saveData();
        }

        document.getElementById('summaryToggle').addEventListener('click', function() {
            const summaryContent = document.getElementById('summaryContent');
            const icon = this.querySelector('i');
            if (summaryContent.classList.contains('hidden')) {
                summaryContent.classList.remove('hidden');
                icon.classList.replace('lucide-chevron-down', 'lucide-chevron-up');
            } else {
                summaryContent.classList.add('hidden');
                icon.classList.replace('lucide-chevron-up', 'lucide-chevron-down');
            }
            debounce(saveSuara,500)();
        });

        function debounce(func, wait, immediate) {
            // 'private' variable for instance
            // The returned function will be able to reference this due to closure.
            // Each call to the returned function will share this common timer.
            var timeout;
            // Calling debounce returns a new anonymous function
            return function() {
                
                // reference the context and args for the setTimeout function
                var context = this,
                    args = arguments;

                // Should the function be called now? If immediate is true
                //   and not already in a timeout then the answer is: Yes
                var callNow = immediate && !timeout;

                // This is the basic debounce behaviour where you can call this
                //   function several times, but it will only execute once
                //   (before or after imposing a delay).
                //   Each time the returned function is called, the timer starts over.
                clearTimeout(timeout);

                // Set the new timeout
                timeout = setTimeout(function() {

                    // Inside the timeout function, clear the timeout variable
                    // which will let the next execution run when in 'immediate' mode
                    timeout = null;

                    // Check if the function already ran with the immediate flag
                    if (!immediate) {
                        // Call the original function with apply
                        // apply lets you define the 'this' object as well as the arguments
                        //    (both captured before setTimeout)
                        func.apply(context, args);
                    }
                }, wait);

                // Immediate mode and no wait timer? Execute the function...
                if (callNow) func.apply(context, args);
            }
        }

        async function saveSuara() {
            console.log("SAVE");
            try {
                const response = await fetch("{{ url('api/save-suara') }}", {
                    method: "POST",
                    headers: {
                        "Authorization": "Bearer {{ $token }}",
                        "Accept": "application/json"
                    },
                    body: JSON.stringify({
                        candidates: candidates,
                        invalidVotes: invalidVotes
                    })
                });
                if (!response.ok) {
                    throw new Error(`Response status: ${response.status}`);
                }

                const json = await response.json();
            } catch (error) {
                console.error(error.message);
            }
        }

        renderCandidates();
        updateSummary();
    </script>
@endpush