1#@!#!123s

��JFIF�� 1#@!#!123s
: / www / wwwroot / nagalandsuperleague.co.in /
Filename : first_index.php
back
<?php
// Include database connection
require 'config.php'; 

// Fetch upcoming fixtures
$sql_upcoming = "SELECT * FROM fixtures WHERE status='Upcoming' ORDER BY fixture_date ASC, fixture_time ASC";
$result_upcoming = $conn->query($sql_upcoming);
$upcoming_fixtures = [];
if ($result_upcoming->num_rows > 0) {
    while ($row = $result_upcoming->fetch_assoc()) {
        $upcoming_fixtures[] = $row;
    }
}

// Fetch completed results
$sql_completed = "SELECT * FROM fixtures WHERE status='Completed' ORDER BY fixture_date DESC, fixture_time DESC";
$result_completed = $conn->query($sql_completed);
$completed_results = [];
if ($result_completed->num_rows > 0) {
    while ($row = $result_completed->fetch_assoc()) {
        $completed_results[] = $row;
    }
}

// Encode data for JavaScript
echo '<script>
    var upcomingFixtures = ' . json_encode($upcoming_fixtures) . ';
    var completedResults = ' . json_encode($completed_results) . ';
</script>';
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NSL</title>
  <link rel="icon" type="image/x-icon" href="img/NSL logo.png">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <!-- Bootstrap icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="./css/style.min.css">
  <link rel="stylesheet" href="./css/hero_mob.css">
  <link rel="stylesheet" href="./header/header_css/header.min.css">
  <link rel="stylesheet" href="./css/info.min.css">
  <link rel="stylesheet" href="./css/footer.min.css">
  <style>
    .section-title {
        text-align: center;
        font-size: 20px;
        margin: 20px 0;
        font-weight: bold;
    }
    .fixtures, .results {
        margin: 5px 0;
        height: auto;
        padding: 10px !important;
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #f9f9f9;
        border-radius: 5px;
    }
    .fixtures img, .results img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }
    .fixtures_details {
        font-size: 12px;
        flex-grow: 1;
        text-align: center;
    }
    .pagination {
        margin-top: 20px;
        text-align: center;
    }
    .pagination button {
        padding: 8px 12px;
        margin: 2px;
        background: #f2f2f2;
        color: #333;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }
    .pagination button.active {
        background: #001A6E;
        color: #fff;
    }
    .pagination button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }  
    /* Style for pagination container */
    #pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    
    /* Default button style */
    #pagination button {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 5px 10px;
        margin: 0 5px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s, color 0.3s, transform 0.2s;
        border-radius: 5px;
    }
    
    /* Hover effect */
    #pagination button:hover {
        background-color: #001A6E;
        color: white;
        transform: scale(1.1);
    }
    
    /* Active button */
    #pagination button.active-page {
        background-color: #001A6E;
        color: white;
        font-weight: bold;
        border-color: #0056b3;
    }

    .positive {
      color: green !important;
      font-weight: bold !important;
    }
    
    .negative {
      color: red !important;
      font-weight: bold !important;
    }    

    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    th, td {
        padding: 10px !important;
        border-bottom: 1px solid #ddd !important;
        text-align: left !important;
    }
    
    th {
        background-color: #f2f2f2 !important;
        font-size: 14px !important;
        font-weight: bold !important;
    }
    
    @media(max-width:412px){
        th, td {
            width: 50% !important;
        }   
        
        .spacing_top{
            margin-top: 20px !important;
        }
    }
    
    @media(min-width: 768px){
        .slider-main img {
            width: 100%;
            height: 100% !important;
            max-height: 570px !important;
            object-fit: cover;
        }
    }

  </style>
</head>
<body>

    <?php include('header.php');?>
    <!-- Hero Start -->
    <div class="slider-container">
    
    <?php
    $host = 'localhost';
    $user = 'nagalandsuperleague';
    $pass = 'nagalandsuperleague';
    $dbname = 'nagalandsuperleague';
    
    $conn = new mysqli($host, $user, $pass, $dbname);
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
    $query = "SELECT * FROM blogs ORDER BY date DESC";
    $result = $conn->query($query);
    
    // Fetch all blog entries into an array
    $blogs = [];
    while ($row = $result->fetch_assoc()) {
        $blogs[] = $row;
    }
    ?>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Slider-Left: Main Display -->
    <div class="slider-main" id="slider-main">
        <?php if (!empty($blogs)): ?>
            <img id="mainSlideImage" style="max-height:620px !important;" src="admin/uploads/<?php echo $blogs[0]['image']; ?>" 
                 alt="<?php echo htmlspecialchars($blogs[0]['title'], ENT_QUOTES); ?>" class="fade-in">
            <div class="slider-caption" id="mainSlideTitle"><?php echo $blogs[0]['title']; ?></div>
        <?php else: ?>
            <img id="mainSlideImage" src="admin/uploads/default.jpg" alt="Default Slide" class="fade-in">
            <div id="mainSlideTitle">Default Title</div>
        <?php endif; ?>
    </div>

    <!-- Slider-Right: Paginated Thumbnails -->
    <div class="slider-right">
        <div id="slider-right-items">
            <?php foreach ($blogs as $index => $row): ?>
                <div class="slider-right-item <?php echo $index === 0 ? 'active' : ''; ?>"
                     data-id="<?php echo $row['id']; ?>"
                     data-image="<?php echo $row['image']; ?>"
                     data-title="<?php echo htmlspecialchars($row['title'], ENT_QUOTES); ?>">
                    <img src="admin/uploads/<?php echo $row['image']; ?>" alt="<?php echo htmlspecialchars($row['title'], ENT_QUOTES); ?>">
                    <div>
                        <div class="slider-right-item-title"><?php echo $row['title']; ?></div>
                        <div class="slider-right-item-date"><?php echo date("F j, Y", strtotime($row['date'])); ?></div>
                    </div>
                    <a href="blog_content.php?id=<?php echo $row['id']; ?>" class="read-more">Read more...</a>
                </div>
            <?php endforeach; ?>
        </div>
        <!-- Pagination Buttons -->
        <div id="pagination-controls" class="pagination mx-auto gap-4">
            <button id="prevPage">Previous</button>
            <span id="pageInfo" class="my-auto"></span>
            <button id="nextPage">Next</button>
        </div>
    </div>
    <div class="clear"></div>

    <script>
    $(document).ready(function(){
        var currentPage = 1;
        var itemsPerPage = 5;
        var sliderItems = $('.slider-right-item');
        var totalItems = sliderItems.length;
        var totalPages = Math.ceil(totalItems / itemsPerPage);

        // Function to display items for a given page
        function showPage(page) {
            currentPage = page;
            sliderItems.hide().removeClass('active');
            var start = (page - 1) * itemsPerPage;
            var end = start + itemsPerPage;
            sliderItems.slice(start, end).show();
            $('#pageInfo').text('Page ' + currentPage + ' of ' + totalPages);
            // Auto-select the first visible item on the page
            var firstVisible = sliderItems.eq(start);
            firstVisible.addClass('active');
            changeSlide(firstVisible, true);
        }

        // Pagination control events
        $('#nextPage').click(function(){
            if(currentPage < totalPages){
                showPage(currentPage + 1);
            }
        });
        $('#prevPage').click(function(){
            if(currentPage > 1){
                showPage(currentPage - 1);
            }
        });

        // Click event for slider-right items
        $('#slider-right-items').on('click', '.slider-right-item', function(){
            changeSlide($(this));
        });

        // Function to update slider-left via AJAX using jQuery
        // "fromPagination" is an optional flag for auto-triggered changes
        function changeSlide($element, fromPagination) {
            // Remove active class from all visible slider-right items and add to the selected one
            $('#slider-right-items .slider-right-item').removeClass('active');
            $element.addClass('active');

            var blogId = $element.data('id');
            $.getJSON("get_blog.php", { id: blogId }, function(blog){
                var $mainImage = $('#mainSlideImage');
                var $mainTitle = $('#mainSlideTitle');

                // Apply fade-out effect
                $mainImage.removeClass('fade-in').addClass('fade-out');
                setTimeout(function(){
                    $mainImage.attr('src', "admin/uploads/" + blog.image);
                    $mainImage.attr('alt', blog.title);
                    $mainTitle.text(blog.title);
                    // Fade back in
                    $mainImage.removeClass('fade-out').addClass('fade-in');
                    setTimeout(function(){
                        $mainImage.removeClass('fade-in');
                    }, 500);
                }, 500);
            });
        }

        // On page load, show the first page of thumbnails
        showPage(1);
    });
    </script>
</div>
    <!-- hero end-->
<div class="container-fluid py-2 px-lg-4">
    <div class="row">
        <!-- Fixtures and Results -->
        <div class="col-lg-8">
            <div class="row">
                <div class="col-md-6">
                    <div class="header">Fixtures</div>
                    <div id="fixturesContainer"></div>
                    <div class="pagination" id="fixturesPagination"></div>
                </div>
                <div class="col-md-6 spacing_top">
                    <div class="header">Results</div>
                    <div id="resultsContainer"></div>
                    <div class="pagination" id="resultsPagination"></div>
                </div>
            </div>
            <div class="table-container mt-2">
                <div class="header league_header">League Standings</div>
                <div class="table-responsive">
             <?php
// Database connection using PDO
$dsn = "mysql:host=localhost;dbname=nagalandsuperleague;charset=utf8mb4";
$username = "nagalandsuperleague";
$password = "nagalandsuperleague";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
    die("Database connection failed: " . $e->getMessage());
}

// Fetch league standings ordered by points descending then goal difference descending
$stmt = $pdo->query("SELECT * FROM league_standings ORDER BY p DESC, gd DESC");
$standings = $stmt->fetchAll();
?>

<div class="container mx-auto p-0">

  <div class="overflow-x-auto">
    <table class="min-w-full bg-white border border-gray-200">
      <thead class="bg-gray-200">
        <tr>
          <th class="px-4 py-2">Team Name</th>
     
          <th class="px-4 py-2">GP</th>
          <th class="px-4 py-2">W</th>
          <th class="px-4 py-2">D</th>
          <th class="px-4 py-2">L</th>
          <th class="px-4 py-2">GF</th>
          <th class="px-4 py-2">GA</th>
          <th class="px-4 py-2">GD</th>
          <th class="px-4 py-2">P</th>
        </tr>
      </thead>
      <tbody>
        <?php if (!empty($standings)): ?>
          <?php foreach ($standings as $team): ?>
            <tr class="text-center border-b">
              <td class="px-4 py-2">  <?php if (!empty($team['logo'])): ?>
                  <img src="admin/<?= htmlspecialchars($team['logo'], ENT_QUOTES) ?>" alt="Team Logo" width="20">
                <?php endif; ?><?= htmlspecialchars($team['team_name'], ENT_QUOTES) ?></td>
              
              <td class="px-4 py-2"><?= (int)$team['gp'] ?></td>
              <td class="px-4 py-2"><?= (int)$team['w'] ?></td>
              <td class="px-4 py-2"><?= (int)$team['d'] ?></td>
              <td class="px-4 py-2"><?= (int)$team['l'] ?></td>
              <td class="px-4 py-2"><?= (int)$team['f'] ?></td>
              <td class="px-4 py-2"><?= (int)$team['a'] ?></td>
              <td class="px-4 py-2 <?= $team['gd'] < 0 ? 'negative' : 'positive' ?>">
                <?= ($team['gd'] > 0 ? '+' : '') . (int)$team['gd'] ?>
              </td>
              <td class="px-4 py-2"><?= (int)$team['p'] ?></td>
            </tr>
          <?php endforeach; ?>
        <?php else: ?>
          <tr>
            <td colspan="10" class="px-4 py-2 text-center">No league standings available.</td>
          </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</div>

            </div>
            </div>
            <div class="gallery-container">
                <div class="header">NSL Extra Time</div>
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/SZWP1Cdl8XU?si=pBvoX9e3CER85iO9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
        </div>
        <div class="col-lg-4 spacing_top">
            <div class="countdown-container">
                <div class="header">Next Match</div>
               <?php
    // Step 1: Get the next upcoming match date
    $sql_next = "SELECT fixture_date FROM fixtures WHERE status='Upcoming' ORDER BY fixture_date ASC, fixture_time ASC LIMIT 1";
    $result_next = $conn->query($sql_next);
    
    if ($result_next && $result_next->num_rows > 0) {
        $row_next = $result_next->fetch_assoc();
        $nextMatchDate = $row_next['fixture_date']; // e.g., "2025-02-19"
        $formattedDate = date("F j, Y", strtotime($nextMatchDate)); // e.g., "February 19, 2025"

        // Step 2: Query all matches for that specific date
        $sql = "SELECT * FROM fixtures WHERE status='Upcoming' AND fixture_date = '$nextMatchDate' ORDER BY fixture_time ASC";
        $result = $conn->query($sql);

        if ($result && $result->num_rows > 0) {
            // Slider container: Adjust the class/id as needed for your slider library
            echo '<div id="match-slider" class="slider">';
            
            // Loop through all matches on the next match date
            while ($row = $result->fetch_assoc()) {
                $matchTime = date("g:i A", strtotime($row['fixture_time']));
                ?>
                <div class="slide">
                    <div class="match d-flex justify-content-between align-items-center px-3 py-4">
                        <img src="<?php echo $row['home_logo']; ?>" alt="<?php echo $row['home_team']; ?>" width="45px">
                        <div class="match-info text-center">
                            <div class="team-names" style="font-size:14px;">
                                <?php echo $row['home_team']; ?> vs <?php echo $row['away_team']; ?>
                            </div>
                            <div class="match-time" style="font-size:13px; color:#333;">
                                <?php echo $matchTime; ?>
                            </div>
                        </div>
                        <img src="<?php echo $row['away_logo']; ?>" alt="<?php echo $row['away_team']; ?>" width="60px">
                    </div>
                </div>
                <?php
            }
            
            echo '</div>';
            ?>
            <!-- Initialize your slider plugin. This example uses Slick Slider. -->
            <script>
                $(document).ready(function(){
                    $('#match-slider').slick({
                        dots: true,         // Show pagination dots
                        infinite: true,     // Enable infinite looping
                        speed: 500,
                        slidesToShow: 1,    // Display one slide at a time
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 3000
                    });
                });
            </script>
            <?php
        } else {
            echo "<p class='text-center'>No matches found for {$formattedDate}</p>";
        }
    } else {
        echo "<p class='text-center'>No upcoming matches</p>";
    }
?>

    </div>
    <div class="table-container">
        <div class="header">Upcoming Matches</div>
        <?php
            // Fetch only the next 5 upcoming matches
            $stmt = $conn->prepare("SELECT * FROM fixtures WHERE status = ? ORDER BY fixture_date ASC, fixture_time ASC LIMIT 3");
            $status = 'Upcoming';
            $stmt->bind_param("s", $status);
            $stmt->execute();
            $result_upcoming = $stmt->get_result();
            ?>
            
            <!-- Container for Upcoming Matches -->
            <div id="fixture-container">
            <?php
            if ($result_upcoming->num_rows > 0) {
                while ($row = $result_upcoming->fetch_assoc()) {
                    $formatted_date = date("F j, Y", strtotime($row['fixture_date']));
                    
                    // Ensure logo paths are correct
                    $home_logo = !empty($row['home_logo']) ? htmlspecialchars($row['home_logo']) : 'img/default.png';
                    $away_logo = !empty($row['away_logo']) ? htmlspecialchars($row['away_logo']) : 'img/default.png';
            
                    $home_team = htmlspecialchars($row['home_team']);
                    $away_team = htmlspecialchars($row['away_team']);
                    $venue = htmlspecialchars($row['venue'] ?? 'Unknown Venue');
                    ?>
        
                <!-- Each fixture wrapped in a .fixture-item for pagination control -->
                <div class="fixture-item fixtures px-4">
                    <!-- Home Team Logo -->
                    <img src="<?php echo $home_logo; ?>" 
                         alt="<?php echo $home_team; ?> Logo" 
                         width="80px">
        
                    <!-- Fixture Details -->
                    <div class="fixtures_details">
                        <div class="label"><?php echo $formatted_date; ?></div>
                        <div class="fixture-info" style="color: #CC0000; font-weight: bold;">
                            <?php echo $home_team . ' vs ' . $away_team; ?>
                        </div>
                        <div class="venue-league"><?php echo $venue; ?></div>
                    </div>
        
                    <!-- Away Team Logo -->
                    <img src="<?php echo $away_logo; ?>" 
                         alt="<?php echo $away_team; ?> Logo" 
                         width="80px">
                </div>
        
                <?php
                }
            } else {
                echo "<p class='no-fixtures'>No upcoming fixtures available.</p>";
            }
            ?>
            
            </div> <!-- End #fixture-container -->
            
            <!-- Pagination controls will go here -->
            <div id="pagination"></div>
            
            <!-- Close the statement and connection (if needed) -->
            <?php
            $stmt->close();
            $conn->close();
            ?>
    

                <div class="table-footer">
                  <a href="fixtures_results.php">View all matches</a>
                </div>
          </div>

            <div class="table-container spacing_top mt-2">
                <div class="header">Player Rankings</div>
                <div class="table-responsive">
                <table>
                    <thead>
                        <tr>
                            <th>Rank</th>
                            <th>Player</th>
                            <th>Team</th>
                            <th>Goals</th>
                        </tr>
                    </thead>
                    <tbody id="player_rankings"></tbody>
                </table>
                <div class="table-footer">
                    <a href="standings.php">View all rankings</a>
                </div>
                </div>
                <script>
                    document.addEventListener("DOMContentLoaded", function() {
                        fetch('fetch_players.php')
                            .then(response => response.json())
                            .then(data => {
                                let tableBody = document.getElementById("player_rankings");
                                tableBody.innerHTML = "";
                                data.slice(0, 8).forEach((player, index) => { // Limit to top 5 players
                                    tableBody.innerHTML += `
                                        <tr>
                                            <td>${index + 1}</td>
                                            <td>${player.player_name}</td>
                                            <td>${player.team}</td>
                                            <td>${player.goals}</td>
                                        </tr>`;
                                });
                            })
                            .catch(error => console.error("Error fetching data:", error));
                    });
                </script>
            </div>
            <div class="header mt-2">
                <h3>Trending News</h3>
            </div>
            
            <div class="table-container p-2">
                <div class="body widget p-0">
                    <?php
                    // Latest blogs widget
                    $conn = new mysqli($host, $user, $pass, $dbname);
                    if ($conn->connect_error) {
                        die("Connection failed: " . $conn->connect_error);
                    }
                    $query = "SELECT * FROM blogs ORDER BY RAND() LIMIT 5";
                    $result = $conn->query($query);
                    ?>
                    <div class="single_post">
                        <?php while ($row = $result->fetch_assoc()): ?>
                            <ul class="list-unstyled categories-clouds mb-0">
                                <li style="margin-bottom: 5px;">
                                    <a href="blog_content.php?id=<?php echo $row['id']; ?>"><?php echo $row['title']; ?></a>
                                </li>
                            </ul>
                        <?php endwhile; ?>
                    </div>
                    <?php $conn->close(); ?>
                </div>
            </div>
        </div>
    </div>
</div>
    <!-- Hero table end  -->
    <!-- Footer -->
    <?php include('footer.php');?>
  <!-- hero slider script start -->
  <script>
    function changeSlide(image, caption) {
      const sliderImage = document.getElementById('slider-image');
      const sliderCaption = document.getElementById('slider-caption');
      const rightItems = document.querySelectorAll('.slider-right-item');
      
      // Update main slider image and caption
      sliderImage.src = image;
      sliderCaption.textContent = caption;

      // Update active state
      rightItems.forEach(item => item.classList.remove('active'));
      event.currentTarget.classList.add('active');
    }
  </script> 
 <script>
    let fixtures = upcomingFixtures;
    let completed = completedResults;
    
    let currentPageFixtures = 1;
    let recordsPerPageFixtures = 5;

    let currentPageResults = 1;
    let recordsPerPageResults = 5;

    function displayFixtures() {
        let startIndex = (currentPageFixtures - 1) * recordsPerPageFixtures;
        let endIndex = startIndex + recordsPerPageFixtures;
        let paginatedFixtures = fixtures.slice(startIndex, endIndex);  // Limits per page
    
        let container = document.getElementById("fixturesContainer");
        container.innerHTML = "";
    
        if (paginatedFixtures.length === 0) {
            container.innerHTML = "<p class='text-center'>No upcoming fixtures available.</p>";
            return;
        }
    
        paginatedFixtures.slice(0, 8).forEach(fixture => {  // Ensure max 8 displayed
            let fixtureHTML = `
                <div class="fixtures">
                    <img src="${fixture.home_logo}" alt="${fixture.home_team}">
                    <div class="fixtures_details">
                        <div class="fixture-date">${new Date(fixture.fixture_date).toDateString()}</div>
                        <div class="fixture-venue">${fixture.venue}</div>
                        <div class="number" style="font-size: 12px;">${formatTime(fixture.fixture_time)}</div>
                        <div class="match-info">${fixture.home_team} vs ${fixture.away_team}</div>
                    </div>
                    <img src="${fixture.away_logo}" alt="${fixture.away_team}">
                </div>
            `;
            container.innerHTML += fixtureHTML;
        });
    
        displayPagination("fixturesPagination", currentPageFixtures, Math.ceil(fixtures.length / recordsPerPageFixtures), changePageFixtures);
    }

    // UPDATED: displayResults() now includes a 'View Stats' button for each fixture
    function displayResults() {
        let startIndex = (currentPageResults - 1) * recordsPerPageResults;
        let endIndex = startIndex + recordsPerPageResults;
        let paginatedResults = completed.slice(startIndex, endIndex);

        let container = document.getElementById("resultsContainer");
        container.innerHTML = "";

        if (paginatedResults.length === 0) {
            container.innerHTML = "<p class='text-center'>No completed results available.</p>";
            return;
        }

        paginatedResults.forEach(result => {
            let resultHTML = `
            <a  href="stats.php?id=${result.id}" class="text-dark">
                <div class="results">
                    <img src="${result.home_logo}" alt="${result.home_team}" width="80px">
                    <div class="fixtures_details">
                        <div class="fixture-date">${new Date(result.fixture_date).toDateString()}</div>
                        <div class="fixture-venue">${result.venue}</div>
                        <div class="number"><strong style="font-size: 12px;">${result.home_score} - ${result.away_score}</strong></div>
                        <div class="match-info">${result.home_team} vs ${result.away_team}</div>
                    </div>
                    <img src="${result.away_logo}" alt="${result.away_team}" width="80px">
                    <!-- View Stats button linking to stats.php with fixture's ID -->
                </div>  
            </a>
            `;
            container.innerHTML += resultHTML;
        });

        displayPagination("resultsPagination", currentPageResults, Math.ceil(completed.length / recordsPerPageResults), changePageResults);
    }
    
    function displayPagination(containerId, currentPage, totalPages, changePageFunction) {
        let paginationContainer = document.getElementById(containerId);
        paginationContainer.innerHTML = "";
    
        let maxVisiblePages = window.innerWidth <= 768 ? 6 : 7; // Show 5 in mobile, 7 in desktop
    
        let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
        let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
    
        if (endPage - startPage + 1 < maxVisiblePages) {
            startPage = Math.max(1, endPage - maxVisiblePages + 1);
        }
    
        let prevButton = `<button onclick="${changePageFunction.name}(${currentPage - 1})" ${currentPage === 1 ? "disabled" : ""}>Prev</button>`;
        paginationContainer.innerHTML += prevButton;
    
        for (let i = startPage; i <= endPage; i++) {
            paginationContainer.innerHTML += `<button class="${i === currentPage ? "active" : ""}" onclick="${changePageFunction.name}(${i})">${i}</button>`;
        }
    
        let nextButton = `<button onclick="${changePageFunction.name}(${currentPage + 1})" ${currentPage === totalPages ? "disabled" : ""}>Next</button>`;
        paginationContainer.innerHTML += nextButton;
    }
    
    window.addEventListener("resize", function() {
        displayPagination("resultsPagination", currentPageResults, Math.ceil(completed.length / recordsPerPageResults), changePageResults);
    });

    function changePageFixtures(page) {
        if (page < 1 || page > Math.ceil(fixtures.length / recordsPerPageFixtures)) return;
        currentPageFixtures = page;
        displayFixtures();
    }

    function changePageResults(page) {
        if (page < 1 || page > Math.ceil(completed.length / recordsPerPageResults)) return;
        currentPageResults = page;
        displayResults();
    }

    function formatTime(timeString) {
        let [hours, minutes] = timeString.split(":");
        let ampm = hours >= 12 ? "PM" : "AM";
        hours = hours % 12 || 12;
        return `${hours}:${minutes} ${ampm}`;
    }

    displayFixtures();
    displayResults();
</script>

<!-- JavaScript for pagination (backup for older fixture display, if needed) -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const itemsPerPage = 5; // Change this to show more/less fixtures per page
        const fixtureItems = document.querySelectorAll('.fixture-item');
        const totalItems = fixtureItems.length;
        const totalPages = Math.ceil(totalItems / itemsPerPage);
    
        function showPage(page) {
            page = parseInt(page, 10);
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
    
            fixtureItems.forEach((item, index) => {
                if (index >= start && index < end) {
                    item.style.display = "flex";
                } else {
                    item.style.display = "none";
                }
            });
        }
    
        function setupPagination() {
            const paginationContainer = document.getElementById('pagination');
            if (!paginationContainer) return;

            paginationContainer.innerHTML = '';
            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.innerText = i;
                button.addEventListener('click', function() {
                    showPage(i);
                    const allButtons = paginationContainer.querySelectorAll('button');
                    allButtons.forEach(btn => btn.classList.remove('active-page'));
                    this.classList.add('active-page');
                });
                paginationContainer.appendChild(button);
            }
        }
    
        if (totalItems > 0) {
            showPage(1);
            setupPagination();
        }
    });
</script>

  <!-- hero slider script end -->
  <script src="./js/scroller.js"></script>
  <!-- Counter js -->
  <script src="./js/counter.js"></script>  
  <script src="./header/header_js/header.js"></script>  
  <script src="./header/header_js/nav.js"></script>  
</body>
</html>