@extends('layouts.frontend')

@section('title', '| Vote')
@section('content')
@php
    $recaptchaActive = config('services.recaptcha.enabled')
        && config('services.recaptcha.site_key')
        && config('services.recaptcha.secret_key');
@endphp
<div id="vote">
<style>
    /* Temporarily hide all vote buttons and vote counts on this page
    .vote-btn,*/
    .vote-count-display {
        display: none !important;
    } 
</style>
    <section id="header">
    <div class="container">
        @include('layouts.inc.menu')
    </div>
</section>
    <section id="viewer-voting">
        <div class="container">
            <!--<h3 class="text-center pt-5">Voting is now closed.</h3>-->
            <h3 class="text-center pt-5 d-none">Voting has ended for Season 7.<br> Stay tuned to meet the finalists you’ve voted back in to the finale.</h3>
            <!--<div class="row">
                <div class="col-md-7">
                    <h2>Meet the Drapers Viewer Voting</h2>
                    <p>It’s time to have your say! Out of all the incredible entrepreneurs featured this season, you now have the power to bring back the most inspiring ones to the grand finale. The three startups with the most votes will re-enter the competition for a chance to win big.</p>
                    <p>Every vote counts and your favorite founder is counting on you. Don’t wait—cast your vote today and be part of their journey to success!</p>
                </div>
                <div class="col-md-5">
                  <div class="how-to-vote-box">
                    <p class="m0"><strong>How to Vote</strong></p>
                    <ul>
                        <li>Browse through the featured startups below.</li>
                        <li>Click the "Vote" button under your favorite startup’s description.</li>
                        <li>Enter your email address in the pop-up form.</li>
                        <li>Check your inbox for a confirmation email and click the link to finalize your vote.</li>
                    </ul>
                    <p class="m0"><strong>Rules</strong></p>
                    <ul>
                        <li>Voting is open until March 21, 2025, at 11:59 PM PST.</li>
                        <li>Each email address can vote once per startup.</li>
                        <li>Only confirmed votes will be counted, so don’t forget to check your inbox/spam too</li>
                    </ul>
                  </div>  
                </div>
            </div>-->
        </div>
    </section>
    
    <section id="episode-country-list">
        <div class="container">
            <h2 class="text-center">Episodes</h2>
            <div class="text-center mb-5">
                <a target="_blank" href="{{url('Meet_the_Drapers_Season_9_Voting_Guidelines_v3.pdf')}}" class="btn btn-custom">Voting Guidelines</a>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <ul>
                        @foreach ($countries  as $country)
                            <li><a class="country-link" data-country-id="{{ $country->id }}">{{$country->name}}</a>&nbsp;|&nbsp;</li>
                        @endforeach
                        <li><a class="country-link" data-country-id="0">All</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    
    <section id="episode-country">
        <div class="container">
            <h2 class="text-center">All Startups</h2>
            <div class="row justify-content-center" id="candidate-list">
                @foreach ($candidates  as $candidate)
                    <div class="col-lg-3 col-md-6 pb-3 candidate-item" data-country-id="{{ $candidate->country_id }}">
                        <div class="episode-country-box-wrap text-center">
                            <h5>{{$candidate->name}}</h5>
                            <div class="episode-country-box">
                                @if ($candidate->video_url)
                                    <video  poster="{{ $candidate->poster_image ? (config('app.cdn_enabled') ? config('app.cdn_url').$candidate->poster_image : url('').'/'.$candidate->poster_image) : url('images/vote/voting-01.png') }}" controls="controls" width="300" height="165" preload="none">
                                        <source src="{{ $candidate->video_url }}" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                @else
                                    <div class="video-embed d-none">
                                        {!! $candidate->video_embed ?? 'No video available' !!}
                                    </div>
                                @endif
                                <p class="pt-3">{{$candidate->description}}</p>
                                <a href="#" class="vote-btn d-none" data-bs-toggle="modal" data-bs-target="#voteModal" data-candidate-id="{{ $candidate->id }}" data-candidate-name="{{ $candidate->name }}">VOTE</a>
                                <div class="vote-count-display">
                                    <div class="vote-count-bar legitimate">
                                        <i class="fa fa-user" aria-hidden="true"></i>
                                        <span>{{ number_format($candidate->legitimate_votes_count ?? 0) }} Votes</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</div>

<!-- Modal -->
<div class="modal fade" id="voteModal" tabindex="-1" aria-labelledby="voteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-black" id="voteModalLabel">Vote for <span id="candidateName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <!-- Email input form -->
                <div id="emailForm">
                    <form id="emailFormSubmit" action="{{ url('/vote') }}" method="POST">
                        @csrf
                        <input type="hidden" id="candidateId" name="candidate_id">
                        <div class="mb-3">
                            <label for="email" class="form-label text-black">Enter your email to vote</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        @if ($recaptchaActive)
                            <div class="mb-3">
                                <div class="g-recaptcha"
                                     data-sitekey="{{ config('services.recaptcha.site_key') }}"
                                     data-callback="onRecaptchaSuccess"
                                     data-expired-callback="onRecaptchaExpired"
                                     data-error-callback="onRecaptchaError"></div>
                            </div>
                        @endif
                        <button type="submit" class="btn btn-primary" id="submitEmailBtn" @if($recaptchaActive) disabled @endif>
                            Submit
                        </button>
                        <div id="emailErrorMessage" class="text-danger mt-2" style="display: none;"></div>
                    </form>
                </div>

                <!-- OTP input form (hidden initially) -->
                <div id="otpForm" style="display: none;">
                    <form id="otpFormSubmit" action="{{ url('/vote/verify') }}" method="POST">
                        @csrf
                        <input type="hidden" id="email" name="email"> <!-- Hidden email field -->
                        
                        <div class="mb-3">
                            <label for="otp" class="form-label text-black">Enter Verification Code</label>
                            <input type="text" class="form-control" id="otp" name="otp" required>
                        </div>
                        
                        <button type="submit" class="btn btn-success" id="verifyOtpBtn">
                            Verify
                        </button>
                        <div id="otpMessage" class="mt-2 text-black" style="display: none;"></div>
                        <div id="otpErrorMessage" class="text-danger mt-2" style="display: none;"></div>
                    </form>
                </div>

                {{-- Thank You Message --}}
                <div id="finalthankmsg" style="display: none;">
                    <div class="thank-you-circle">
                        <i class="fa fa-check" aria-hidden="true"></i>
                    </div>
                    <div class="thank-you-message text-black">
                        <h3>Thank You!</h3>
                        <p>Your vote has been successfully submitted. <br> We appreciate your feedback!</p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@endsection

@section('js')
@if ($recaptchaActive)
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endif
<script>
    const recaptchaEnabled = {{ $recaptchaActive ? 'true' : 'false' }};
    let recaptchaSolved = false;

    function recaptchaUpdateSubmitButton() {
        const submitButton = $('#submitEmailBtn');

        if (!submitButton.length) {
            return;
        }

        if (!recaptchaEnabled) {
            submitButton.prop('disabled', false);
            return;
        }

        submitButton.prop('disabled', !recaptchaSolved);
    }

    function resetRecaptchaState() {
        if (!recaptchaEnabled) {
            return;
        }

        recaptchaSolved = false;
        recaptchaUpdateSubmitButton();

        if (typeof grecaptcha !== 'undefined') {
            try {
                grecaptcha.reset();
            } catch (error) {
                console.warn('Unable to reset reCAPTCHA widget.', error);
            }
        }
    }

    window.onRecaptchaSuccess = function () {
        recaptchaSolved = true;
        recaptchaUpdateSubmitButton();
        $('#emailErrorMessage').hide();
    };

    window.onRecaptchaExpired = function () {
        recaptchaSolved = false;
        recaptchaUpdateSubmitButton();
    };

    window.onRecaptchaError = function () {
        recaptchaSolved = false;
        recaptchaUpdateSubmitButton();
        $('#emailErrorMessage').text('Unable to load reCAPTCHA. Please refresh the page and try again.').show();
    };

    $(document).ready(function() {
        recaptchaUpdateSubmitButton();

        // Handle country link click
        $('.country-link').on('click', function(e) {
            e.preventDefault();

            var countryId = $(this).data('country-id');

            $.ajax({
                url: '/get-candidates',  // Your route to get filtered candidates
                method: 'GET',
                data: { country_id: countryId },
                success: function(response) {
                    $('#candidate-list').html('');

                    $.each(response.candidates, function(index, candidate) {

                        var posterImageUrl = candidate.poster_image ? 
                            ("{{ config('app.cdn_enabled') }}" ? "{{ config('app.cdn_url') }}" + candidate.poster_image : "{{ url('') }}/" + candidate.poster_image) : 
                            "{{ url('images/vote/voting-01.png') }}";

                        var videoHtml = '';
                        // Check if video URL is available, otherwise use a fallback
                        if (candidate.video_url) {
                            videoHtml = `
                                <video poster="${posterImageUrl}" controls="controls" width="300" height="165" preload="none">
                                    <source src="${candidate.video_url}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            `;
                        } else {
                            videoHtml = `
                                <div class="video-embed d-none">
                                    ${candidate.video_embed || 'No video available'}
                                </div>
                            `;
                        }


                        var candidateHtml = `
                            <div class="col-lg-3 col-md-6 pb-3 candidate-item" data-country-id="${candidate.country_id}">
                                <div class="episode-country-box-wrap text-center">
                                    <h5>${candidate.name}</h5>
                                    <div class="episode-country-box">
                                        ${videoHtml}
                                        <p class="pt-3">${candidate.description}</p>
                                        <a href="#" class="vote-btn" data-bs-toggle="modal" data-bs-target="#voteModal" data-candidate-id="${candidate.id}" data-candidate-name="${candidate.name}">VOTE</a>
                                        <div class="vote-count-display">
                                                <div class="vote-count-bar legitimate">
                                                    <i class="fa fa-user" aria-hidden="true"></i>
                                                <span>${candidate.legitimate_votes_count ? candidate.legitimate_votes_count.toLocaleString() : '0'} Votes</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#candidate-list').append(candidateHtml);
                    });
                },
                error: function() {
                    alert('Error fetching candidates.');
                }
            });
        });

        // Pass candidate name and ID to modal when the vote button is clicked

        // $('#voteModal').on('show.bs.modal', function (e) {
        //     var button = $(e.relatedTarget);
        //     var candidateName = button.data('candidate-name');
        //     var candidateId = button.data('candidate-id');
            
        //     $('#candidateName').text(candidateName);
        //     $('#candidateId').val(candidateId);
        // });

        $('#voteModal').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var candidateName = button.data('candidate-name');
            var candidateId = button.data('candidate-id');

            // Reset modal fields
            $('#candidateName').text(candidateName);
            $('#candidateId').val(candidateId);

            // Reset form and messages
            $('#emailForm').show();
            $('#otpForm').hide();
            $('#email').val('');
            $('#otp').val('');
            $('#emailErrorMessage').hide();
            $('#otpErrorMessage').hide();
            $('#otpMessage').hide();
            $('#finalthankmsg').hide();
            $('#submitEmailBtn').html('Submit');

            if (recaptchaEnabled) {
                resetRecaptchaState();
            } else {
                $('#submitEmailBtn').prop('disabled', false);
            }

        }).on('hidden.bs.modal', function () {
            // Optional: Clean up when modal is closed
            $('#candidateName').text('');
            $('#candidateId').val('');

            if (recaptchaEnabled) {
                resetRecaptchaState();
            } else {
                $('#submitEmailBtn').prop('disabled', false);
            }
        });

        $('#emailFormSubmit').on('submit', function(e) {
            e.preventDefault();
            var email = $('#email').val();
            var candidateId = $('#candidateId').val();
            var submitButton = $('#submitEmailBtn');
            var errorMessage = $('#emailErrorMessage');
            var otpMessage = $('#otpMessage');
            var recaptchaResponse = '';
            
            // Disable button and clear previous messages
            submitButton.prop('disabled', true);
            submitButton.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...');
            errorMessage.hide();
            
            if (recaptchaEnabled) {
                if (typeof grecaptcha === 'undefined') {
                    submitButton.html('Submit');
                    errorMessage.text('reCAPTCHA is not ready yet. Please reload the page and try again.').show();
                    recaptchaUpdateSubmitButton();
                    return;
                }

                recaptchaResponse = grecaptcha.getResponse();
                if (!recaptchaResponse) {
                    submitButton.html('Submit');
                    errorMessage.text('Please complete the reCAPTCHA challenge before submitting.').show();
                    recaptchaUpdateSubmitButton();
                    return;
                }
            }

            $.ajax({
                url: '/vote/' + candidateId, // POST request to submit the vote with the candidate ID
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    email: email,
                    'g-recaptcha-response': recaptchaResponse
                },
                success: function(response) {
                    if (response.otpSent) {
                        // Show OTP form and success message
                        $('#emailForm').hide();
                        $('#otpForm').show();
                        otpMessage.show();
                        $('#otpMessage').text('Verification code has been sent to your email address.');
                        
                        // Set the email field in the OTP form
                        $('#otpFormSubmit #email').val(email);
                    } else {
                        // Show error message for email
                        errorMessage.text('Error submitting the vote. Please try again.').show();
                    }
                    submitButton.html('Submit');
                    if (recaptchaEnabled) {
                        resetRecaptchaState();
                    } else {
                        submitButton.prop('disabled', false);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle AJAX error
                    var errorMsg = 'There was an error submitting the vote.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMsg = xhr.responseJSON.error;
                    }
                    errorMessage.text(errorMsg).show();
                    submitButton.html('Submit');
                    if (recaptchaEnabled) {
                        resetRecaptchaState();
                    } else {
                        submitButton.prop('disabled', false);
                    }
                }
            });
        });

        $('#otpFormSubmit').on('submit', function(e) {
            e.preventDefault();
            var otp = $('#otp').val();  // Get OTP entered by user
            var email = $('#otpFormSubmit #email').val(); // Get email from hidden field
            var candidateId = $('#candidateId').val(); // Get candidate ID
            var otperrMessage = $('#otpErrorMessage');
            var otpMessage = $('#otpMessage');
            var finalthankmsg = $('#finalthankmsg');
            
            var verifyOtpBtn = $('#verifyOtpBtn');
            // Disable button 
            verifyOtpBtn.prop('disabled', true);
            
  
            $.ajax({
                url: '/vote/verify/' + candidateId,  // Correct URL for OTP verification
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),  // CSRF token
                    otp: otp,
                    email: email  // Include email for verification
                },
                success: function(response) {
                    if (response.success) {
                        verifyOtpBtn.prop('disabled', false);
                        otperrMessage.hide();
                        $('#otpForm').hide();
                        finalthankmsg.show();
                        // $('#otpMessage').text(response.message);
                        setTimeout(function() {
                            $('#voteModal').modal('hide');
                        }, 3000);
                    } else {
                        verifyOtpBtn.prop('disabled', false);
                        otpMessage.hide();
                        otperrMessage.show()
                        $('#otpErrorMessage').text(response.message);
                        // alert(response.message); 
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error during verification:', status, error);
                    verifyOtpBtn.prop('disabled', false);
                    //alert('There was an error verifying the OTP.');
                    otpMessage.hide();
                    otperrMessage.show();
                    $('#otpErrorMessage').text('The verification code could not be verified. Please try again');
                }
            });
        });

});
</script>

@endsection