<?php
require_once "../config/auth.php";
require_once "../config/db.php";
require_once "../config/helpers.php";

$pageTitle = "Create Invoice";

require_once "../includes/header.php";
require_once "../includes/sidebar.php";
require_once "../includes/topbar.php";

// Customers
$customers = $conn->query("SELECT id, name FROM customers ORDER BY name ASC");
?>

<div class="main-content">
<div class="col-lg-12">

<div class="topbar">
    <h5>Create Invoice</h5>
</div>

<div class="p-4">

<form method="POST" action="../actions/save_invoice.php" id="invoiceForm">

<!-- ================= CUSTOMER ================= -->
<div class="mb-3">
<label>Customer *</label>
<select name="customer_id" id="customerSelect" class="form-control" required>
<option value="">Select Customer</option>
<?php while($c = $customers->fetch_assoc()){ ?>
<option value="<?= $c['id'] ?>">
<?= e($c['name']) ?>
</option>
<?php } ?>
</select>
</div>

<!-- ================= INVOICE DATE ================= -->
<div class="mb-3">
<label>Invoice Date *</label>
<input type="date" name="invoice_date" class="form-control"
value="<?= date('Y-m-d') ?>" required>
</div>

<!-- ================= DUE DATE ================= -->
<div class="mb-3">
<label>Due Date *</label>
<input type="date" name="due_date" class="form-control" required>
</div>

<!-- ================= SERVICES ================= -->
<div class="mb-3">
<label>Select Services *</label>

<div id="servicesBox" class="border p-3 rounded bg-light">
<small class="text-muted">Select customer to load services</small>
</div>

</div>

<!-- ================= TOTAL ================= -->
<div class="mb-3 text-end">
<h5>Total: ₹<span id="totalAmount">0.00</span></h5>
</div>

<!-- ================= SUBMIT ================= -->
<button class="btn btn-primary" id="saveBtn">
Create Invoice
</button>

</form>

</div>
</div>
</div>

<!-- ================= TOAST ================= -->
<?php if(isset($_GET['success'])){ ?>
<div id="successToast" class="toast position-fixed top-0 end-0 m-3 text-bg-success">
<div class="toast-body">Invoice created successfully!</div>
</div>
<?php } ?>

<!-- ================= AJAX ================= -->
<script>
document.getElementById('customerSelect').addEventListener('change', function(){

    let customer_id = this.value;

    if(!customer_id){
        document.getElementById('servicesBox').innerHTML =
        "<small>Select customer to load services</small>";
        return;
    }

    fetch('../actions/get_services.php?customer_id=' + customer_id)
    .then(res => res.text())
    .then(data => {
        document.getElementById('servicesBox').innerHTML = data;
        calculateTotal();
    });

});

// ================= TOTAL CALC =================
function calculateTotal(){

    let total = 0;

    document.querySelectorAll('.serviceCheck:checked').forEach(el => {
        total += parseFloat(el.getAttribute('data-amount'));
    });

    document.getElementById('totalAmount').innerText = total.toFixed(2);
}

// dynamic event
document.addEventListener('change', function(e){
    if(e.target.classList.contains('serviceCheck')){
        calculateTotal();
    }
});

// ================= LOADING BUTTON =================
document.getElementById("invoiceForm").addEventListener("submit", function(){
    let btn = document.getElementById("saveBtn");
    btn.innerText = "Saving...";
    btn.disabled = true;
});
</script>

<?php require_once "../includes/footer.php"; ?>