{{-- resources/views/Admin/Invoices/create.blade.php --}}
@include('Admin.Includes.header')

@php
    use Illuminate\Support\Facades\Auth;
    use App\General\ProductClass;
    use App\General\UserClass;
    use App\Models\GeneralSettings;

    $logged_in_user   = Auth::user();

    
     $settings = \App\Models\GeneralSettings::where('option','_gst_percentage')->first();
     $GST_PERCENTAGE = $settings ? (float) $settings->value : 0;

    $GST_PERCENTAGE   = $GST_PERCENTAGE ?? 0;
@endphp

<style>
    /* Custom CSS styles for the widget */
    .membership-widget {
        border: 1px solid #ccc;
        padding: 5px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .membership-info {
        display: flex;
        align-items: center;
        margin-bottom: 0 !important;
    }
    .product-divider {
        border: 1px solid #ccc;
        margin: 10px 0;
    }
    .membership-title {
        flex-grow: 1;
        margin-left: 14px;
    }
    .product-detail-cell {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 6px;
    }
    .custom-icon {
        cursor: pointer;
        width: 20px;
    }
</style>

<!-- Page Inner Start -->
<div class="page-inner pd-0-force mg-0-force bg-white">
    <div class="row">
        <div class="col-xl-7 px-5 px-xl-2  pt-2">
            <form style="margin-left:30px" id="invoice_form">
                @csrf
                <div class="h4 row">
                    <div class="col-6">Create New Invoice</div>
                    <div class="col-6 text-right">#{{ $invoice->invoice_number }}</div>
                </div>

                <!-- Customer Section -->
                <div class="customer-section">
                    <div class="form-group">
                        <label>Select Customer Type</label><br>
                        <label>
                            <input type="radio" name="customer_type" value="existing" checked required>
                            Existing Customer
                        </label>
                        &nbsp;&nbsp;&nbsp;
                        <label class="d-none">
                            <input type="radio" name="customer_type" value="random" required>
                            Random Customer
                        </label>
                    </div>

                    <div class="form-group" id="existing-customer-section">
                        <label for="exampleFormControlSelect1">Select Customer</label>
                        <select class="form-control form-control-sm select2-demo" name="customer"
                                id="existingCustomerSelect" required>
                            @if (count($users) > 0)
                                <option>Select Customer</option>
                                @foreach ($users as $user)
                                    @if (UserClass::check_role($user->role_id, $roles) == 'Customer')
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endif
                                @endforeach
                            @else
                                <option>No Customer Found</option>
                            @endif
                        </select>
                        <div class="text-right mt-1">
                            @if (Session::has('permissions') && in_array('Add New Customer', Session::get('permissions')))
                                <span class="text-danger" data-toggle="modal" data-target="#add_customer_model"
                                      style="cursor:pointer;">Add New Customer</span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group" id="random-customer-section">
                        <label for="exampleFormControlSelect1">Customer Name</label>
                        <input type="text" class="form-control form-control-sm" name="customer" disabled
                               id="randomCustomerName">
                    </div>

                    <!-- Product Scanning Type -->
                    <div class="form-group">
                        <label>Product Selection</label><br>
                        <label>
                            <input type="radio" name="product_scanning_type" value="barcode"> Barcode Scanner
                        </label>
                        &nbsp;&nbsp;&nbsp;
                        <label>
                            <input type="radio" name="product_scanning_type" value="manual" checked> Manual
                        </label>
                    </div>

                    <!-- Manual Product Search -->
                    <div class="form-group manual_product_search">
                        <strong for="exampleFormControlSelect1">Select Product</strong>
                        <input type="search" class="form-control form-control-sm" id="manual_product_details">
                        <div class="my-2 searched_product_Section" style="max-height:150px !important; overflow-y:scroll;">
                            <!-- Search results appended here -->
                        </div>
                    </div>
                </div>
                <!-- /Customer Section -->

                <!-- Product Table Headers -->
                <div class="row mx-0 px-0">
                    <div class="col-4 px-0">
                        <label for="exampleFormControlSelect1">Product</label>
                    </div>
                    <div class="col-2 px-1">
                        <label for="exampleFormControlSelect1">Weight</label>
                    </div>
                    <div class="col-2 px-1">
                        <label for="exampleFormControlSelect1">Price (for Default Weight)</label>
                    </div>
                    <div class="col-2 px-1">
                        <label for="exampleFormControlSelect1">Total</label>
                    </div>
                </div>

                <!-- Dynamically-Added Products Go Here -->
                <div class="product-section">
                    <!-- Populated by JS when user selects a product -->
                </div>

                <!-- Invoice Summary Rows -->
                <div class="row mb-1 mx-0">
                    <div class="col-6 px-0 py-1 text-right">
                        <span style="font-weight:bold">Sub Total($): &nbsp;</span>
                    </div>
                    <div class="col-6 px-0">
                        <input type="number" value="0" name="sub_total" readonly
                               class="form-control form-control-sm rounded-0 invoice_sub_total">
                    </div>
                </div>

                <div class="row mb-1 mx-0">
                    <div class="col-6 px-0 py-1 text-right">
                        <span style="font-weight:bold">GST ({{ $GST_PERCENTAGE }}%): &nbsp;</span>
                    </div>
                    <div class="col-6 px-0">
                        <input type="number" value="0" name="gst" min="0" step="0.01"
                               class="form-control form-control-sm rounded-0 gst_input" readonly>
                    </div>
                </div>

                <div class="row mb-1 mx-0">
                    <div class="col-6 px-0 py-1 text-right">
                        <span style="font-weight:bold">Grand Total ($): &nbsp;</span>
                    </div>
                    <div class="col-6 px-0">
                        <input type="number" value="0" name="grand_total" min="0" step="0.01"
                               class="form-control form-control-sm rounded-0 grand_total_input" readonly>
                    </div>
                </div>

                <!-- Invoice Meta: Dates, Payment Status, etc. -->
                <div class="row my-3 mx-0">
                    <div class="col-4">
                        <label>Invoice Date: </label>
                        <input type="date" readonly name="invoice_date" id="invoice_date"
                               class="form-control form-control-sm"><br>

                        <label>Active Status: </label>
                        <select name="active" class="form-control form-control-sm" id="active_check" required>
                            <option value="0">Draft</option>
                            <option value="1">Public</option>
                        </select>
                    </div>
                    <div class="col-4">
                        <label>Invoice Due Date: </label>
                        <input type="date" name="due_date" id="due_date" class="form-control form-control-sm">
                    </div>
                    <div class="col-4">
                        <div class="text-right">
                            <label><input type="radio" name="payment_status" value="Un-Paid" checked> Un-Paid </label>
                            &nbsp;&nbsp;&nbsp;
                            <label><input type="radio" name="payment_status" value="Paid"> Paid </label>
                        </div>

                        <!-- Payment Method / Reference, shown if Paid -->
                        <div class="defualt_hide" style="display: none;">
                            <label>Payment Method: </label><br>
                            <div class="text-right">
                                <label><input type="radio" name="payment_method" value="Bank Transfer"> Bank Transfer</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio" name="payment_method" value="Cash" checked> Cash</label>
                                <label class="ml-2"><input type="radio" name="payment_method" value="Credit Card"> Credit Card</label>
                            </div>
                            <label>Payment Details or Note (Optional): </label>
                            <input type="text" class="form-control form-control-sm" name="payment_id"
                                   placeholder="Reference: #NBS-123SDNA231">
                        </div>
                    </div>
                </div>

                <hr>
                <div class="text-right mg-y-20">
                    @if (Session::has('permissions') && in_array('Cancel Invoice', Session::get('permissions')))
                        <button type="button" class="btn btn-danger mg-t-5 destroy-invoice"
                                action-url="{{ route('invoices.destroy', $invoice->id) }}">Cancel</button>
                    @endif
                    @if (Session::has('permissions') && in_array('Save Invoice', Session::get('permissions')))
                        <button type="submit" class="btn btn-success mg-t-5" id="submit_button">Save Changes</button>
                    @endif
                    <div class="alert alert-warning d-none" id="public_note">
                        This Invoice is Public, you cannot make changes to the Invoice but you can print Invoice 😃,
                        <a href="{{ url('/') }}/admin/invoices/create">Create New Invoice</a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Invoice Preview/Right Column -->
        <div class="col-xl-5 px-5 px-xl-2">
            <div class="card pd-10 wd-100p m-auto invoice_Area" style="zoom:70%">
                {{-- Render your invoice preview here --}}
                @php print($Invoice_review); @endphp
            </div>
            <div class="text-right mt-4 mx-2">
                @if (Session::has('permissions') && in_array('Print Invoice', Session::get('permissions')))
                    <button type="button" class="btn btn-warning mg-t-5" onclick="printInvoice();">
                        <i class="fa fa-print"></i> Print Invoice
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>
<!--/ Page Inner End -->

<!-- Modal: Add Customer -->
<div class="modal fade" id="add_customer_model" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="add_customer_modelLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Customer</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form id="create_user_account">
                    @csrf
                    <input type="hidden" name="created_by" value="{{ $logged_in_user->id }}">
                    <div class="form-layout form-layout-1">
                        <h4>Account Info</h4>
                        <div class="row mg-b-25">
                            <!-- Name -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label active">User Name: <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="text" name="name" placeholder="Enter User Name" required>
                                </div>
                            </div>
                            <!-- Email -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label active">User Email: <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="email" name="email" placeholder="Enter email address" required>
                                </div>
                            </div>
                            <!-- Password -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">User Password: <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="password" name="password" placeholder="Enter Password" required>
                                </div>
                            </div>
                            <!-- Phone -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">User Phone: <span class="tx-danger">*</span></label>
                                    <input class="form-control" type="tel" name="phone" placeholder="Enter Phone Number" required>
                                </div>
                            </div>
                            <!-- Role -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">User Role: <span class="tx-danger">*</span></label>
                                    <select class="form-control" required name="role_id" data-placeholder="Select User Role">
                                        <option label="Choose User Role" value=""></option>
                                        @foreach ($roles as $role)
                                            @if ($role->id == 1)
                                                @if ($logged_in_user->role_id == 1)
                                                    <option value="{{ $role->id }}" @if ($role->title == 'Customer') selected @endif>
                                                        {{ $role->title }}
                                                    </option>
                                                @endif
                                            @elseif($role->id != 1)
                                                <option value="{{ $role->id }}" @if ($role->title == 'Customer') selected @endif>
                                                    {{ $role->title }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h4>Business Info</h4>
                        <div class="row mg-b-25">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label active">Business Name:</label>
                                    <input class="form-control" type="text" name="_b_name" placeholder="WareHub Inc">
                                </div>
                            </div>
                            <!-- col-4 -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label active">Business Email:</label>
                                    <input class="form-control" type="email" name="_b_email" placeholder="stock@business.com.au">
                                </div>
                            </div>
                            <!-- col-4 -->
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label">Business Phone:</label>
                                    <input class="form-control" type="tel" name="_b_number" placeholder="6123456789">
                                </div>
                            </div>
                            <!-- Street Address -->
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-control-label">Business Street Address:</label>
                                    <input class="form-control address-input" type="address" name="_b_street_address"
                                           placeholder="123 Main Street, Sydney, NSW 2000">
                                    <div class="suggestions" style="background:white;"></div>
                                    <div class="details"></div>
                                </div>
                            </div>
                            <!-- Area Address -->
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-control-label">Business Area:</label>
                                    <input class="form-control address-input" type="address" name="_b_area_address"
                                           placeholder="Sydney, Australia">
                                    <div class="suggestions" style="background:white;"></div>
                                    <div class="details"></div>
                                </div>
                            </div>
                        </div>

                        <div class="form-layout-footer">
                            <hr>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="confirmation_email_sending" id="customCheck2">
                                <label class="custom-control-label" for="customCheck2">
                                    Would you like to send login details email to user?
                                </label>
                            </div>
                            <hr>
                            <button class="btn btn-primary" type="submit">Submit Form</button>
                            <div class="response_section"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@include('Admin.Includes.footer')

<script>
    $(document).ready(function() {
        @if(session('status'))
            toastr.success("{{ session('message') }}");
        @endif
    });
</script>
<script>
    // Initialize select2 for Customer dropdown
    $(function() {
        $('.select2-demo').each(function() {
            $(this)
                .wrap('<div class="position-relative"></div>')
                .select2({
                    placeholder: 'Select value',
                    dropdownParent: $(this).parent()
                });
        });
    });

    // Toggle Payment Method block if Payment Status = "Paid"
    $(document).ready(function() {
        $('input[name="payment_status"]').change(function() {
            if ($(this).val() === 'Paid') {
                $('.defualt_hide').slideDown();
            } else {
                $('.defualt_hide').slideUp();
            }
        });

        // Pre-fill Invoice Date + Due Date with current date
        var currentDate = new Date().toISOString().split('T')[0];
        document.getElementById('invoice_date').value = currentDate;
        document.getElementById('due_date').value = currentDate;

        // Show/hide random customer input
        $('#random-customer-section').hide();
        $('.manual_product_search').show();
        $('input[name="customer_type"]').change(function() {
            if ($(this).val() === 'existing') {
                $('#random-customer-section').hide();
                $('#randomCustomerName').prop('disabled', true);
                $('#existingCustomerSelect').prop('disabled', false);
                $('#existing-customer-section').fadeIn();
            } else if ($(this).val() === 'random') {
                $('#existing-customer-section').hide();
                $('#existingCustomerSelect').prop('disabled', true);
                $('#randomCustomerName').prop('disabled', false);
                $('#random-customer-section').fadeIn();
            }
        });

        // Show/hide manual product search
        $('input[name="product_scanning_type"]').change(function() {
            if ($(this).val() === 'barcode') {
                $('.manual_product_search').hide();
                $('#manual_product_details').prop('disabled', true);
            } else if ($(this).val() === 'manual') {
                $('.manual_product_search').fadeIn();
                $('#manual_product_details').prop('disabled', false);
            }
        });
    });

    // Product search (manual)
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('manual_product_details');
        const resultsSection = document.querySelector('.searched_product_Section');

        searchInput.addEventListener('input', function() {
            const search_query = searchInput.value.trim();
            if (search_query === '') {
                resultsSection.innerHTML = ''; // Clear results
                return;
            }

            // Make AJAX request
            fetch(`/admin/invoices/products/search?query=${search_query}`)
                .then(response => response.json())
                .then(data => {
                    const products = data.products;
                    resultsSection.innerHTML = ''; // Clear previous results

                    products.forEach(product => {
                        const productHtml = `
                            <div class="product-detail-cell">
                                <div class="back_image_icon mr-2"
                                     style="background: url({{ url('/') }}/${product.featured_image});
                                            background-size: contain;
                                            background-position: center;
                                            height: 35px; width: 35px;">
                                </div>
                                <span class="product-title">${product.title}</span>
                                <span class="product-title sku" style="width: 100px;">${product.sku}</span>
                                <img src="/AdminAssets/assets/images/plus-icon.png"
                                     class="custom-icon add-product-icon h1 ml-auto"
                                     onclick="add_to_invoice_method(${product.id})" />
                            </div>
                            <hr class="product-divider">
                        `;
                        resultsSection.insertAdjacentHTML('beforeend', productHtml);
                    });
                })
                .catch(error => console.error('Error fetching search results:', error));
        });
    });

    // Add product to invoice
    function add_to_invoice_method(product_id) {
    // Remove existing row if already added (to prevent duplicates)
    $(`[remove_it="${product_id}"]`).remove();

    // Fetch product details (with meta for price, weight, _gst, and discount_data)
    fetch(`/admin/invoices/products/select?product_id=${product_id}`)
        .then(response => response.json())
        .then(data => {
            console.log("Fetched product data:", data);

            // Get default price from meta, or fallback to 0
            let defaultPrice = data.meta ? parseFloat(data.meta.value) : 0;
            // Calculate discountedPrice from discount_data if available, else keep default
            let discountData  = data.discount_data;
            let discountedPrice = defaultPrice;
            if (discountData && discountData.discounted_price) {
                discountedPrice = parseFloat(discountData.discounted_price);
            }

            let defaultWeight = data.weight ? parseFloat(data.weight.value) : 1;
            let productTitle  = data.product.title;
            // GST boolean based on API response
            let hasGST      = data.gst;
            let per_kg_price = defaultPrice / defaultWeight;

            // Append new product row with discount info inside a wrapper
            $('.product-section').append(`
                <div class="invoice-item-wrapper" remove_it="${product_id}">
                    <div class="row mb-1 mx-0 invoice-item" data-gst="${hasGST}">
                        <!-- Hidden fields -->
                        <input type="hidden" name="default_weight[]" class="product_default_weight" value="${defaultWeight}">
                        <input type="hidden" name="gst_status[]" value="${hasGST}">
                        <input type="hidden" name="per_kg_price[]" class="per_kg_price" value="${per_kg_price}">

                        <div class="col-4 px-0">
                            <input type="hidden" name="product_id[]" value="${product_id}">
                            <input type="text" name="product_name[]" class="form-control form-control-sm"
                                   value="${productTitle}" readonly>
                        </div>

                        <div class="col-4 col-md-2 px-1">
                            <input type="number" step="0.01" name="weight[]"
                                   class="form-control form-control-sm product_weight_input"
                                   oninput="updateWeightPricing(this)" value="${defaultWeight}">
                        </div>

                        <div class="col-2 px-1">
                            <!-- Always show the default price in the input -->
                            <input type="number" step="0.01" name="price_for_entire_weight[]"
                                   class="form-control form-control-sm product_price_input"
                                   oninput="updateWeightPricing(this)" value="${discountedPrice}" readonly>
                        </div>

                        <div class="col-4 col-md-2 px-1">
                            <input type="number" step="0.01" name="total_price[]"
                                   class="form-control form-control-sm product_item_total"
                                   value="0" readonly>
                        </div>

                        <div class="col-4 col-md-2 px-1 text-right">
                            <button class="btn btn-sm btn-danger" type="button" onclick="remove_invoice_item(this)">
                                Remove
                            </button>
                        </div>
                    </div>
                    
                    
                </div>
            `);

            // Immediately update totals for the newly added product item
            updateWeightPricing($('.product_weight_input').last()[0]);
        })
        .catch(error => console.error('Error fetching product data:', error));
}



    // Recalculate the line totals when weight or price changes
    function updateWeightPricing(elem) {
        let row                = $(elem).closest('.invoice-item');
        let userWeight         = parseFloat(row.find('.product_weight_input').val()) || 0;
        let priceForDefaultWgt = parseFloat(row.find('.product_price_input').val()) || 0;
        let productDefWgt      = parseFloat(row.find('.product_default_weight').val()) || 1;

        if (productDefWgt <= 0) {
            alert("Invalid product default weight!");
            return;
        }

        let pricePerUnitWeight = priceForDefaultWgt / productDefWgt;
        let totalPrice         = userWeight * pricePerUnitWeight;
        row.find('.product_item_total').val(totalPrice.toFixed(2));
        row.find('.per_kg_price').val(pricePerUnitWeight.toFixed(2));

        updateInvoiceTotals();
    }

    // Remove product row
    function remove_invoice_item(button) {
        $(button).closest('.invoice-item').remove();
        updateInvoiceTotals();
    }

    // Calculate invoice totals
    function updateInvoiceTotals() {
        let taxableSubtotal    = 0;
        let nonTaxableSubtotal = 0;
        // Global GST % from PHP
        let gstRate            = parseFloat('{{ $GST_PERCENTAGE }}') || 0;

        // Loop over each invoice item
        $('.invoice-item').each(function() {
            let productTotal = parseFloat($(this).find('.product_item_total').val()) || 0;

            // data-gst attribute = "true" or "false"
            let productHasGST = $(this).data('gst');
            productHasGST = (productHasGST === true || productHasGST === "true");

            if (productHasGST) {
                taxableSubtotal += productTotal;
            } else {
                nonTaxableSubtotal += productTotal;
            }
        });

        // Overall Subtotal
        let subtotal = taxableSubtotal + nonTaxableSubtotal;
        $('.invoice_sub_total').val(subtotal.toFixed(2));

        // GST only on taxableSubtotal
        let gstAmount = 0;
        if (gstRate > 0) {
            gstAmount = (taxableSubtotal * gstRate) / 100;
        }
        $('.gst_input').val(gstAmount.toFixed(2));

        // Grand total
        let grandTotal = subtotal + gstAmount;
        $('.grand_total_input').val(grandTotal.toFixed(2));
    }

    // Delete entire invoice
    $('.destroy-invoice').click(function() {
        let action_url = $(this).attr('action-url');
        if (confirm("Are you sure you want to delete this invoice?")) {
            $.ajax({
                url: action_url,
                type: 'DELETE',
                data: { '_token': '{{ csrf_token() }}' },
                success: function(response) {
                    alert('Invoice deleted successfully');
                    window.location.href = '/admin/invoices';
                },
                error: function(xhr, textStatus, errorThrown) {
                    alert('Error deleting invoice: ' + errorThrown);
                }
            });
        }
    });

    // Submit invoice
    $('#invoice_form').submit(function(event) {
        event.preventDefault();

        if ($('.invoice-item').length === 0) {
            alert('Please add at least one product in the Invoice to save changes.');
            return;
        }

        var formData   = $(this).serialize();
        var invoiceId  = '{{ $invoice->id }}';
        var routeUrl   = '{{ route('invoices.update', ['invoice' => ':invoiceId']) }}'
            .replace(':invoiceId', invoiceId);

        if ($("#active_check").val() == "1") {
            if (!confirm("Are you sure you want to make this invoice public? It will update store stock and cannot be changed afterward.")) {
                return;
            }
        }

        $.ajax({
            url: routeUrl,
            type: 'PUT',
            data: formData,
            success: function(response) {
                // Update invoice preview
                $('.invoice_Area').html(response.invoice_review);

                if ($("#active_check").val() == "1") {
                    $("#invoice_form :input").prop("disabled", true);
                    $('.destroy-invoice, #submit_button').fadeOut();
                    $('#public_note').removeClass('d-none');
                }
                alert('Invoice saved successfully');
            },
            error: function(xhr, textStatus, errorThrown) {
                alert('Error saving invoice: ' + errorThrown);
            }
        });
    });

    // Print invoice
    function printInvoice() {
        var invoiceArea = document.querySelector('.invoice_Area');
        var printWindow = window.open('', '', 'width=1200,height=720');

        printWindow.document.open();
        printWindow.document.write(`
            <html>
                <head>
                    <title>Print Invoice - {{ $invoice->invoice_number }}</title>
                    <link href="{{ url('/') }}/AdminAssets/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
                </head>
                <body>
                    <div class="invoice_Area">${invoiceArea.innerHTML}</div>
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
    }
    $('#create_user_account').on('submit', function(e) {
        e.preventDefault();
        $('.response_section').html(`<div class="alert alert-info mt-1">Processing...</div>`);
        var formData = $(this).serialize();
        $.ajax({
            url: "{{ route('users.store') }}",
            type: "POST",
            data: formData,
            success: function(response) {
                $('#add_customer_model').hide();
                location.reload();
               
            },
            error: function(xhr, status, error) {
                
            }
        });
    });
</script>