<?php
if ($_SERVER['HTTP_HOST'] === 'localhost') {
    // Localhost connection
    $host = "localhost";
    $user = "root";
    $pass = "";
    $db   = "sales_data";
} else {
    // Live server connection
    $host = "your_live_host";
    $user = "your_live_user";
    $pass = "your_live_password";
    $db   = "sales_data";
}

$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
    die("Database connection failed: " . $conn->connect_error);
}

// Filter logic
$where = "";
if (!empty($_GET['from_date']) && !empty($_GET['to_date'])) {
    $from = $conn->real_escape_string($_GET['from_date']);
    $to = $conn->real_escape_string($_GET['to_date']);
    $where = "WHERE Date BETWEEN '$from' AND '$to'";
}

// Fetch data
$sql = "SELECT * FROM data $where ORDER BY Date DESC";
$result = $conn->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sales Data Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="navbar">
    <div class="nav-container">
        <!-- <div class="logo">📊 Sales Panel</div> -->

        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>

        <ul class="nav-menu">
            <li><a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : ''; ?>">Dashboard</a></li>
            <li><a href="uploader.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'uploader.php' ? 'active' : ''; ?>">Uploader</a></li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <h2 class="text-center mb-4">📅 Sales Data Dashboard</h2>
    <p class="text-center text-muted">Filter and view your uploaded sales records.</p>

    <!-- Filter Form -->
    <form method="GET" class="row g-3 justify-content-center mb-4">
        <div class="col-md-3 col-sm-6">
            <label class="form-label fw-bold">From Date</label>
            <input type="date" name="from_date" class="form-control"
                   value="<?= isset($_GET['from_date']) ? $_GET['from_date'] : '' ?>">
        </div>
        <div class="col-md-3 col-sm-6">
            <label class="form-label fw-bold">To Date</label>
            <input type="date" name="to_date" class="form-control"
                   value="<?= isset($_GET['to_date']) ? $_GET['to_date'] : '' ?>">
        </div>
        <div class="col-md-2 col-sm-6 align-self-end">
            <button type="submit" class="btn btn-primary w-100">Filter</button>
        </div>
        <div class="col-md-2 col-sm-6 align-self-end">
            <a href="index.php" class="btn btn-secondary w-100">Reset</a>
        </div>
    </form>

    <!-- Data Table -->
    <div class="table-responsive">
        <table id="salesTable" class="table table-bordered table-striped align-middle">
            <thead class="table-primary">
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Phone</th>
                    <th>Disposition</th>
                </tr>
            </thead>
            <tbody>
                <?php
                if ($result && $result->num_rows > 0) {
                    $i = 1;
                    while ($row = $result->fetch_assoc()) {
                        echo "<tr>
                                <td>{$i}</td>
                                <td>{$row['Date']}</td>
                                <td>{$row['Phone']}</td>
                                <td>{$row['Disposition']}</td>
                              </tr>";
                        $i++;
                    }
                } else {
                    echo "<tr><td colspan='4' class='text-center text-muted'>No records found.</td></tr>";
                }
                ?>
            </tbody>
        </table>
    </div>
</div>

<!-- JS: Bootstrap + DataTables -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    // DataTable Initialization
    $(document).ready(function() {
        $('#salesTable').DataTable({
            "pageLength": 100,
            "lengthMenu": [[100, 200, 500, -1], [100, 200, 500, "All"]],
            "order": [[1, "desc"]],
            "language": {
                "search": "🔍 Search:"
            }
        });
    });

    // Mobile menu toggle
    const menu = document.querySelector('#mobile-menu');
    const navMenu = document.querySelector('.nav-menu');

    menu.addEventListener('click', () => {
        menu.classList.toggle('is-active');
        navMenu.classList.toggle('active');
    });
</script>

</body>
</html>
