<?php
require "racs.php";
require "vtshowsBBB.php";
require "showshp.php";
session_start();

if(!isset($_SESSION['titles']) || !isset($_SESSION['positions'])|| !isset($_SESSION['usernames'])){
    header("location:index.php");
    exit;
}

$conn = mysqli_connect("localhost","primarysales","S5L7lF01EQZvQrGK","primarysales_diana");

// GET DATA
$dates = $_REQUEST['dates'] ?? date('Y-m-d');
$invoices = $_REQUEST['invoices'] ?? '';

// Fetch Invoice Header and Agent Details
$sql_head = "SELECT distinct agent_names, dates, invoice_number, zones, regions, rsm_names, executive_names, rep_names, territory_names, grand_values, discount_values FROM rc_invoices WHERE dates='$dates' AND invoice_number='$invoices'";
$qry_head = mysqli_query($conn, $sql_head);
$rst = mysqli_fetch_row($qry_head);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice #<?php echo $rst[2]; ?> | Diana Sales</title>
    <style>
        :root {
            --primary: #002b5c;
            --accent: #006699;
            --success: #28a745;
            --danger: #dc3545;
            --bg: #f4f7f6;
            --white: #ffffff;
            --border: #e2e8f0;
        }

        body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: var(--bg); margin: 0; color: #333; }

        /* Modern Top Navigation */
        .top-nav {
            background: var(--primary);
            color: white;
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .nav-brand { font-weight: bold; font-size: 1.2rem; }
        .nav-links { display: flex; gap: 20px; align-items: center; }
        .nav-links a { color: white; text-decoration: none; font-size: 0.9rem; opacity: 0.8; transition: 0.3s; }
        .nav-links a:hover { opacity: 1; color: #ffc107; }
        .user-tag { background: rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; }

        .main-container { padding: 20px; max-width: 1400px; margin: auto; }

        /* Responsive Grid for Summary Cards */
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .info-card {
            background: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--border);
        }
        .info-card h3 { margin: 0 0 15px 0; font-size: 1rem; color: var(--primary); border-bottom: 2px solid var(--bg); padding-bottom: 8px; }
        .row-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; }
        .label { color: #64748b; font-weight: 500; }
        .val { font-weight: 600; text-align: right; }

        /* Mobile Optimized Table Container */
        .table-responsive-wrapper {
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid var(--border);
        }
        .scroll-hint { display: none; padding: 10px; font-size: 0.75rem; color: #94a3b8; text-align: center; background: #fff; }
        .table-container { overflow-x: auto; width: 100%; }
        
        table { width: 100%; border-collapse: collapse; min-width: 800px; }
        thead th { background: #f8fafc; color: #475569; font-size: 0.75rem; text-transform: uppercase; padding: 15px 12px; border-bottom: 2px solid var(--border); text-align: left; }
        tbody td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size: 0.85rem; }
        tr:hover { background-color: #f1f5f9; }
        .num { text-align: right; font-family: 'JetBrains Mono', monospace; }

        @media (max-width: 768px) {
            .top-nav { padding: 0 10px; height: auto; padding: 10px 0; flex-direction: column; gap: 10px; }
            .nav-links { flex-wrap: wrap; justify-content: center; }
            .scroll-hint { display: block; } /* Visible only on mobile */
        }
    </style>
</head>
<body>

<nav class="top-nav">
    <div class="nav-brand">DIANA SALES DASHBOARD</div>
<div class="nav-links"><a href="vsregionalperfomanceteam.php">Home</a><a href="dashboard.php">Dashboard</a><a href="rpmpragentinvoicestn.php">Invoice</a><a href="index.php">Logout</a></div>
</nav>

<div class="main-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
        <h2 style="margin: 0; color: var(--primary);">Invoice View</h2>
        <button onclick="window.print()" style="background: var(--accent); color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer;">Print PDF</button>
    </div>

    <div class="summary-grid">
        <div class="info-card">
            <h3>Basic Details</h3>
            <div class="row-item"><span class="label">Date:</span><span class="val"><?php echo $rst[1]; ?></span></div>
            <div class="row-item"><span class="label">Invoice No:</span><span class="val"><?php echo $rst[2]; ?></span></div>
            <div class="row-item"><span class="label">Customer:</span><span class="val"><?php echo $rst[0]; ?></span></div>
        </div>

        <div class="info-card">
            <h3>Hierarchy</h3>
            <div class="row-item"><span class="label">Region:</span><span class="val"><?php echo $rst[4]; ?></span></div>
            <div class="row-item"><span class="label">RSM:</span><span class="val"><?php echo $rst[5]; ?></span></div>
            <div class="row-item"><span class="label">Territory:</span><span class="val"><?php echo $rst[8]; ?></span></div>
        </div>

        <div class="info-card" style="border-top: 4px solid var(--accent);">
            <h3>Financial Summary</h3>
            <div class="row-item"><span class="label">Gross Value:</span><span class="val"><?php echo number_format($rst[9], 2); ?></span></div>
            <div class="row-item"><span class="label">Discount:</span><span class="val" style="color:var(--danger);"><?php echo number_format($rst[10], 2); ?></span></div>
            <div class="row-item" style="border-top: 1px solid #eee; padding-top: 8px; margin-top: 5px; font-size: 1.1rem; color: var(--success);">
                <span class="label" style="color: var(--success);">NET VALUE:</span>
                <span class="val"><?php echo number_format($rst[9] + $rst[10], 2); ?></span>
            </div>
        </div>
    </div>

    <div class="table-responsive-wrapper">
        <div class="scroll-hint">← Swipe left/right to see full details →</div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Item Name</th>
                        <th class="num">Price/Box</th>
                        <th class="num">Box Qty</th>
                        <th class="num">Price/Pcs</th>
                        <th class="num">Pcs Qty</th>
                        <th class="num">Pcs/Box</th>
                        <th class="num">Line Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $sql_items = "SELECT item_names, box_price, box_qty, pcs_price, pcs_qty, (box_qty*box_price), packets_per_box FROM rc_invoices WHERE dates='$dates' AND invoice_number='$invoices'";
                    $qry_items = mysqli_query($conn, $sql_items);
                    $total_items = 0;
                    while($arst = mysqli_fetch_row($qry_items)){
                        $total_items++;
                        echo "<tr>";
                        echo "<td style='font-weight: 500;'>$arst[0]</td>";
                        echo "<td class='num'>".number_format($arst[1], 2)."</td>";
                        echo "<td class='num'>".number_format($arst[2], 0)."</td>";
                        echo "<td class='num'>".number_format($arst[3], 2)."</td>";
                        echo "<td class='num'>".number_format($arst[4], 0)."</td>";
                        echo "<td class='num'>".number_format($arst[6], 0)."</td>";
                        echo "<td class='num' style='font-weight:bold; color:var(--accent);'>".number_format($arst[5], 2)."</td>";
                        echo "</tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
        <div style="background: #f8fafc; padding: 15px; font-size: 0.8rem; font-weight: 600; color: #64748b; border-top: 1px solid var(--border);">
            Total Line Items: <?php echo $total_items; ?>
        </div>
    </div>
</div>

</body>
</html>