1#@!#!123s

��JFIF�� 1#@!#!123s
: / www / wwwroot / nagalandsuperleague.co.in /
Filename : fixtures_results.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>Fixtures & Results</title>
    <link rel="icon" type="image/x-icon" href="img/NSL logo.png">
    <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>    
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="stylesheet" href="./header/header_css/header.min.css">
    <!--<link rel="stylesheet" href="./css/fixtures_results.css">-->
    <link rel="stylesheet" href="./css/fixtures_results.min.css">
    <style>
        .section-title {
            text-align: center;
            font-size: 20px;
            margin: 20px 0;
            font-weight: bold;
        }
        .fixtures, .results {
            margin: 5px 0;
            height: auto !important;
            padding: 10px;
            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;
        }
        
        .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){
            .goals_col{
                width: 50%;
            }
            .custom_spacer{
                margin-top: 20px !important;
            }
        }
    </style>
</head>
<body>

<!-- Include header -->
<?php include('header.php'); ?>

<div class="container-fluid py-4 px-lg-5 px-sm-2">
    <div class="row">
        <!-- Left Column (Fixtures, Results, Standings) -->
        <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 custom_spacer">
                    <div class="header">Results</div>
                    <div id="resultsContainer"></div>
                    <div class="pagination" id="resultsPagination"></div>
                </div>
            </div>

            <!-- League Standings -->
            <div class="table-container mt-3">
                <div class="header leauge_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 my-6 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 hover:bg-gray-50">
                                                <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>
        
        <!-- Right Column-->
        <div class="col-lg-4">
            <!-- Next Match Countdown -->
                       <div class="countdown-container custom_spacer">
                        <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-2">
                                <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="45px">
                            </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>
            <!-- Player Rankings -->
            <div class="table-container mt-3">
                <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.forEach((player, index) => {
                                    tableBody.innerHTML += `
                                        <tr>
                                            <td>${index + 1}</td>
                                            <td>${player.player_name}</td>
                                            <td>${player.team}</td>
                                            <td>${player.goals}</td>
                                        </tr>`;
                                });
                            });
                    });
                </script>

            <!-- NSL Extra Time Video -->
            <div class="gallery-container mt-2 custom_spacer">
                <div class="header">NSL Extra Time</div>
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/v1WoEnSTuEQ?si=H5eYmKI-6AKy5JPW" 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>
</div>
</div>

<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);

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

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

        paginatedFixtures.forEach(fixture => {
            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 ? 7 : 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>

<!-- Footer -->
<?php include('footer.php'); ?>
<script src="countdown.js"></script>
<script src="./header/header_js/header.js"></script>  
<script src="./header/header_js/nav.js"></script>  
</body>
</html>