<?php
$actual_link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$url_slug = basename($actual_link);

// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);
// error_reporting(E_ALL);
global $wpdb;
$TT_STATES = "sp_states";
// query to show all state
$stateDetail = $wpdb->get_results("SELECT state_id, state_name, state_slug, image_icon FROM $TT_STATES ORDER BY state_name asc");
?>

<!-- ALL PAGE HEADER SECTION -->

<section class="allPageheaderSection wow fadeInDown">
    <div class="allPageheaderSectionbg"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <h2>All States</h2>
                <h1>Check for updates on Government Exams, Jawahar Navodaya Vidyalaya (JNVST), Kendriya Vidyalaya Sangathan (KVS), and Top Colleges and Universities from each state of India.</h1>
                <p><a href="/">Home</a> / States</p>
            </div>
        </div>
    </div>
</section>

<!-- END ALL PAGE HEADER SECTION -->

<!-- NOTIFICATION PAGE SECTION -->

<section class="NotificationPageSection AllStatePageSection">
    <div class="container">
        <div class="row">

            <div class="SearchSarkariExamsFormFlex wow fadeInUp">
                    <div class="SearchSarkariExamsForm">
                        <h4>Search State Exams</h4>
                        <form action="">
                            <i class="fas fa-search"></i>
                            <input type="text" name="search_data" id="search_data" onkeyup="checkState()" placeholder="State Name...">
                        </form>
                    </div>
                </div>

            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="NotificationRightBox">

                    <div id="stateList">
                        <?php  foreach ($stateDetail as $state) { ?> 
                            <a href="/state/<?php echo $state->state_slug; ?>/">
                                <div class="AllStateExamBox wow fadeInUp">
                                    <?php if($state->image_icon != ''){  ?>
                                    <img src="/images/<?php echo $state->image_icon; ?>" alt="">
                                    <?php } ?>
                                    <h4><?php echo $state->state_name; ?></h4>
                                </div>
                            </a>
                        <?php  }  ?>
                    </div>

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

<script>
    // show data as per search value
    function checkState(){
        var search = document.getElementById('search_data');
        var search_val = search.value.toUpperCase();
        var mainDiv = document.getElementById('stateList');
        var a = mainDiv.getElementsByTagName('a');
        for( var i = 0; i < a.length; i++){
            var heading = a[i].getElementsByTagName("h4")[0];
            var txtValue = heading.textContent || heading.innerText;
            if (txtValue.toUpperCase().indexOf(search_val) > -1) {
                a[i].style.display = "";
            } else{
                a[i].style.display = "none";
            }
        }
    }
</script>
<!-- END NOTIFICATION PAGE SECTION -->