<?php
include "../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$invoices_res = $db->query("invoices", "SELECT * FROM invoices ORDER BY date_time DESC");

$table_data = "";

if ($invoices_res->num_rows > 0) {
    while ($invoice = $invoices_res->fetch_assoc()) {

        /* Calculate invoice total from items */
        $total_res  = $db->query("invoice_items",
            "SELECT SUM(total) as grand_total FROM invoice_items WHERE invoice_no = '{$invoice['invoice_no']}'"
        );
        $total_row   = $total_res->fetch_assoc();
        $grand_total = number_format((float)($total_row['grand_total'] ?? 0), 2);

        $status_class = $invoice['status'] === 'PAID' ? 'badge-paid' : 'badge-unpaid';

        $table_data .= "
            <tr>
                <td>{$invoice['invoice_no']}</td>
                <td>{$invoice['client_name']}</td>
                <td>{$invoice['invoice_date']}</td>
                <td>{$invoice['due_date']}</td>
                <td>R {$grand_total}</td>
                <td><span class='{$status_class}'>{$invoice['status']}</span></td>
                <td style='display:flex; gap:0.4vw;'>
                    <input type='button' class='submit_btn' value='EDIT'
                        onclick='window.location.href=\"edit_invoices.php?record_id={$invoice['record_id']}\"'>
                    <input type='button' class='pdf_btn' value='PDF'
                        onclick='window.open(\"invoice_pdf.php?record_id={$invoice['record_id']}\",\"_blank\")'>
                </td>
            </tr>
        ";
    }
} else {
    $table_data = "<tr><td colspan='7' class='no-data'>NO INVOICES FOUND</td></tr>";
}
?>

<style>
    :root {
        --blue: #1e3a8a;
        --light-blue: #eaf0ff;
        --orange: #f97316;
        --orange-soft: #fde7d6;
        --white: #ffffff;
        --border: #d1d5db;
        --text: #0f172a;
        --green: #16a34a;
        --green-light: #dcfce7;
        --red: #dc2626;
        --red-light: #fee2e2;
    }

    body { margin: 0; background: #f8fafc; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); }

    .form_down { width: 95%; margin: auto; padding-bottom: 3vw; }

    .page-header {
        display: flex; justify-content: space-between;
        align-items: center; margin: 2.5vw 0 1.5vw;
    }

    h1 { font-size: 2.5vw; color: var(--blue); margin: 0; }

    table {
        width: 100%; border-collapse: collapse; background: var(--white);
        border-radius: 12px; overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    thead th {
        background: var(--blue); color: var(--white);
        text-align: left; padding: 1vw;
        font-size: 1.1vw; letter-spacing: 0.05em;
    }

    tbody td { padding: 0.8vw 1vw; font-size: 1vw; border-bottom: 1px solid var(--border); }

    tbody tr:nth-child(even) td { background-color: var(--light-blue); }
    tbody tr:hover td { background-color: var(--orange-soft); transition: background 0.2s; }
    tbody tr:last-child td { border-bottom: none; }

    .no-data { text-align: center; padding: 2vw; font-weight: 600; color: var(--blue); }

    .submit_btn {
        background: var(--blue); color: var(--white); border: none;
        padding: 0.5vw 1vw; font-size: 0.9vw; font-weight: 700;
        border-radius: 6px; cursor: pointer;
    }
    .submit_btn:hover { background: var(--orange); }

    .pdf_btn {
        background: var(--orange); color: var(--white); border: none;
        padding: 0.5vw 1vw; font-size: 0.9vw; font-weight: 700;
        border-radius: 6px; cursor: pointer;
    }
    .pdf_btn:hover { background: #ea580c; }

    .add_btn {
        background: var(--orange); color: var(--white); border: none;
        padding: 0.6vw 1.4vw; font-size: 1vw; font-weight: 700;
        border-radius: 8px; cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: background 0.2s ease;
    }
    .add_btn:hover { background: #ea580c; }

    .badge-paid {
        background: var(--green-light); color: var(--green);
        border: 1px solid var(--green); border-radius: 20px;
        padding: 3px 12px; font-weight: 700; font-size: 0.85vw;
    }

    .badge-unpaid {
        background: var(--red-light); color: var(--red);
        border: 1px solid var(--red); border-radius: 20px;
        padding: 3px 12px; font-weight: 700; font-size: 0.85vw;
    }
</style>

<div class="form_down">
    <div class="page-header">
        <h1>INVOICES</h1>
        <button class="add_btn" onclick="window.location.href='add_invoices.php'">+ ADD INVOICE</button>
    </div>

    <table>
        <thead>
            <tr>
                <th>Invoice No</th>
                <th>Client</th>
                <th>Invoice Date</th>
                <th>Due Date</th>
                <th>Total</th>
                <th>Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <?php echo $table_data; ?>
        </tbody>
    </table>
</div>

<script>
    setInterval(function () { location.reload(); }, 30000);
</script>