@extends('layout.master') @section('content')

<div class="main-content app-content">
    <div class="container-fluid">
        <div
            class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb"
        >
            <div>
                <h2 class="main-content-title fs-24 mb-1">Invoices</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)">Home</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        Invoice List
                    </li>
                </ol>
            </div>
           
        </div>
        @if(session('success'))
        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert"
        >
            {{ session("success") }}
            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
                aria-label="Close"
            ></button>
        </div>
        @endif
        <div class="row card custom-card">
            <div class="card-body">
                <h2>Create Invoice</h2>

                <form method="POST" action="{{ route('invoices.store') }}">
                    @csrf

                    <!-- Customer Name -->
                    <div class="mt-4">
                        <label for="customer_name" class="form-label"
                            >Customer Name</label
                        >
                        <input
                            type="text"
                            class="form-control"
                            id="customer_name"
                            name="customer_name"
                            required
                        />
                    </div>

                    <!-- Customer Email -->
                    <div class="mt-3">
                        <label for="customer_email" class="form-label"
                            >Customer Email</label
                        >
                        <input
                            type="email"
                            class="form-control"
                            id="customer_email"
                            name="customer_email"
                            required
                        />
                    </div>

                    <!-- Product Selection -->
                    <h4 class="mt-4">Select Products</h4>
                    <div id="products-container">
                        <div class="product-row d-flex mb-2 align-items-center">
                            <select
                                name="products[0][id]"
                                class="form-select product-select"
                                required
                            >
                                <option value="">Select Product</option>
                                @foreach ($products as $product)
                                <option
                                    value="{{ $product->id }}"
                                    data-price="{{ $product->unit_amount }}"
                                >
                                    {{ $product->name }}
                                </option>
                                @endforeach
                            </select>
                            <input
                                type="number"
                                name="products[0][quantity]"
                                class="form-control quantity-input mx-2"
                                placeholder="Qty"
                                min="1"
                                required
                            />
                            <span class="price-label">$0.00</span>
                            <button
                                type="button"
                                class="btn btn-danger btn-sm remove-product mx-2"
                            >
                                X
                            </button>
                        </div>
                    </div>

                    <button
                        type="button"
                        class="btn btn-secondary mt-2"
                        id="add-product"
                    >
                        + Add Product
                    </button>

                    <hr class="mt-3" />
                    <h4 class="mt-4">
                        Total Amount: <span id="total-amount">$0.00</span>
                    </h4>

                    <button type="submit" class="btn btn-primary mt-3">
                        Create Invoice
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let productIndex = 1;

        function updateTotalAmount() {
            let total = 0;
            document.querySelectorAll(".product-row").forEach((row) => {
                const price =
                    parseFloat(
                        row
                            .querySelector(".product-select")
                            .selectedOptions[0].getAttribute("data-price")
                    ) || 0;
                const quantity =
                    parseInt(row.querySelector(".quantity-input").value) || 1;
                const subtotal = price * quantity;
                row.querySelector(
                    ".price-label"
                ).textContent = `$${subtotal.toFixed(2)}`;
                total += subtotal;
            });
            document.getElementById(
                "total-amount"
            ).textContent = `$${total.toFixed(2)}`;
        }

        document
            .getElementById("add-product")
            .addEventListener("click", function () {
                const productRow = document
                    .querySelector(".product-row")
                    .cloneNode(true);
                productRow.querySelector(
                    "select"
                ).name = `products[${productIndex}][id]`;
                productRow.querySelector(
                    ".quantity-input"
                ).name = `products[${productIndex}][quantity]`;
                productRow.querySelector(".quantity-input").value = 1;
                productRow.querySelector(".price-label").textContent = "$0.00";
                productRow
                    .querySelector(".remove-product")
                    .addEventListener("click", function () {
                        productRow.remove();
                        updateTotalAmount();
                    });
                document
                    .getElementById("products-container")
                    .appendChild(productRow);
                productIndex++;
            });

        document
            .querySelectorAll(".product-select, .quantity-input")
            .forEach((el) => {
                el.addEventListener("change", updateTotalAmount);
            });

        document.querySelectorAll(".remove-product").forEach((button) => {
            button.addEventListener("click", function () {
                button.parentElement.remove();
                updateTotalAmount();
            });
        });
    });
</script>

@endsection