@extends('layout.index')
@section('title', 'Verification Question')
<!-- Dashboard Ecommerce start -->
<style>
    * {
        font-size: 15px;
    }
</style>
@section('content')
    <section>

        <div class="content-body">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12 d-flex">
                            <h2 class="content-header-title float-start mb-0">Assign Verification Question</h2>
                        </div>
                    </div>
                </div>

                <div class="col-md-1">

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

        @if ($message = Session::get('success'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-check-circle" style="font-size:16px;" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @elseif ($message = Session::get('error'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                    {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif

        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" action="" method="post">
                                    <input type="hidden" name="form_type" value="assign_country_verification_question">
                                    {{ csrf_field() }}
                                    
                                    <div class="row justify-content-between mx-1">
                                      
                                        <div class="col-sm-6" >
                                            <div class="form-group mb-0">
                                                <label class="text-primary"> Country <span
                                                    style="color:red;">*</span></label> 
                                                <select class="text-primary form-control form-select" id="country_id" name='country' onchange="get_selected_question()">
                                                     <option value='0'>Select Country</option>
                                                                                                    </select>
                                                <small class="text-danger" id="country_id_err"></small> 
                                            </div>
                                        </div>

                                        <div class="col-sm-6" >
                                            <div class="form-group mb-0">
                                                <label class="text-primary">Season <span
                                                    style="color:red;">*</span></label>
                                                <select class="text-primary form-control form-select" id="season" name='season' onchange="get_selected_question()">
                                                    <option value='0'>Select Season</option>
                                                                                                    </select>
                                                <small class="text-danger" id="season_err"></small> 
                                            </div>
                                        </div> 
                                        <div class="col-sm-11 m-2 p-1">
                                            <div class="form-group">
                                                <table class="table" id="questionTable">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center">Checkbox</th>
                                                            <th class="text-left">Question</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                                                                            </tbody>
                                                </table>
                                                <h5 class="mt-3">
                                                    <small class="text-danger" id="checkbox_err"></small>
                                                </h5>
                                                @error('checkbox')
                                                <span class="error" style="color:red;">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="col-12 text-center mt-1">
                                            <button type="submit" class="btn btn-primary mr-1"
                                                onClick="return validation()" id="submitBtn">Submit</button>
                                            <a href="{{ url('/verification_season_question') }}" type="reset"
                                                class="btn btn-outline-secondary">Cancel</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

<script>
    var aSelectedQuestion = [];
    var currentSeason = ""; 
    $(document).ready(function() {
        get_selected_question(); 
        toggleSubmitButton();  
        toggleTable();
    });

    function get_selected_question() {
        var countryId = $('#country_id').val();
        var season = $('#season').val();
        
        // Clear all checkboxes
        $('.question-checkbox').prop('checked', false);
       $.each(aSelectedQuestion, function(index, item) {
            if (item.countryId == countryId && item.season === season) {
               
                $(`#question_${item.questionId}`).prop('checked', true);
            }
        });

        toggleSubmitButton();  
        toggleTable();
    }

    function toggleSubmitButton() {
        var selectedSeason = $('#season').val();
        
        if (selectedSeason === currentSeason) {
            $('#submitBtn').show();  
        } else {
            $('#submitBtn').hide();  
        }
    }

    function toggleTable(){
        questionTable

        var countryId = $('#country_id').val();
        var season = $('#season').val();
        if(countryId == null || countryId == 0 || season ==null|| season==0)
        {
            $('#questionTable').hide(); 
        }else{
            $('#questionTable').show(); 
        }
    }

</script>

<script>
    function validation() {
        let isValid = true;

        if ($('#country_id').val() == "0" || $('#country_id').val() == "") {
            $('#country_id').parent().addClass('has-error');
            $('#country_id_err').html('Please Select Country Name.');
            $('#country_id').focus();
            $('#country_id').on('click', function () {
                $('#country_id').parent().removeClass('has-error');
                $('#country_id_err').html('');
            });
            isValid = false;
        }
        
        if ($('#season').val() == "0" || $('#season').val() == "") {
            $('#season').parent().addClass('has-error');
            $('#season_err').html('Please Select Season.');
            $('#season').focus();
            $('#season').on('click', function () {
                $('#season').parent().removeClass('has-error');
                $('#season_err').html('');
            });
            isValid = false;
        }

        return isValid;
    }
</script>

@endsection