@include('Admin.Includes.header')
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\ProductClass;
    use App\General\UserClass;
    $logged_in_user = Auth::user();
    $GST_PERCENTAGE = 10;
    use App\Models\GeneralSettings;
    use App\General\GeneralSettingsClass;
    $settings = GeneralSettings::get();
    $pos_invoice_note = GeneralSettingsClass::getOptionValue('_pos_invoice_note', $settings);
@endphp

<!-- Page Inner Start -->
<div class="page-inner pd-0-force mg-0-force bg-white">
    <div class="row">
        <div class="col-md-7 px-0 pt-2">
            <form style="margin-left:30px">
                <div class="h3">Create New Invoice</div>
                <div class="customer-section">
                    <div class="form-group">
                        <label>Select Customer Type</label><br>
                        <label><input type="radio" name="customer_type" value="existing" checked> Existing
                            Customer</label>
                        &nbsp;&nbsp;&nbsp;<label><input type="radio" name="customer_type" value="random"> 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" id="existingCustomerSelect">

                            @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>
                    <div class="form-group" id="random-customer-section">
                        <label for="exampleFormControlSelect1">Customer Name</label>
                        <input type="text" class="form-control form-control-sm" disabled id="randomCustomerName">
                    </div>
                    <div class="form-group">
                        <label>Product Selection</label><br>
                        <label><input type="radio" name="product_scanning_type" value="barcode" checked> Barcode
                            Scanner</label>
                        &nbsp;&nbsp;&nbsp;<label><input type="radio" name="product_scanning_type" value="manual">
                            Mannual</label>
                    </div>
                    <div class="form-group manual_product_search">
                        <label for="exampleFormControlSelect1">Select Product</label>
                        <input type="search" class="form-control form-control-sm" disabled id="manual_product_details">
                        <div class="my-2 searched_product_Section"
                            style="max-height:150px !important;overflow-y:scroll;">

                        </div>
                    </div>
                </div>
                <div class="row mx-0 px-0">
                    <div class="col-6 px-0">
                        <label for="exampleFormControlSelect1">Product</label>
                    </div>
                    <div class="col-1 px-1">
                        <label for="exampleFormControlSelect1">Units</label>
                    </div>
                    <div class="col-2 px-1">
                        <label for="exampleFormControlSelect1">Price</label>
                    </div>
                    <div class="col-2 px-1">
                        <label for="exampleFormControlSelect1">Total</label>
                    </div>
                </div>
                <div class="product-section">

                </div>
                <div class="row mb-1 mx-0">
                    <div class="col-6 px-0 py-1 text-right">
                        <span style="font-weight:bold">Total Unites: &nbsp;</span>
                    </div>
                    <div class="col-1 px-0">
                        <input type="number" value="0" min="1"
                            class="form-control form-control-sm rounded-0 total_invoice_items" readonly>
                    </div>
                    <div class="col-2 px-0 py-1 text-right">
                        <span style="font-weight:bold">Sub Total($): &nbsp;</span>
                    </div>
                    <div class="col-3 px-0">
                        <input type="number" value="0" readonly
                            class="form-control form-control-sm rounded-0 invoice_sub_total">
                    </div>

                </div>
                <div class="row mb-1 mx-0">
                    <div class="col-9 px-0 py-1 text-right">
                        <span style="font-weight:bold">Discount(%): &nbsp;</span>
                    </div>
                    <div class="col-3 px-0 pb-2 border-bottom">
                        <input type="number" value="0" min="0" step="0.01"
                            class="form-control form-control-sm rounded-0 invoice_discount_amont">
                    </div>
                </div>
                <div class="row mb-1 mt-2 mx-0">
                    <div class="col-9 px-0 py-1 text-right">
                        <span style="font-weight:bold">Discounted Total($): &nbsp;</span>
                    </div>
                    <div class="col-3 px-0 pb-2 border-bottom">
                        <input type="number" value="0" min="0" step="0.01"
                            class="form-control form-control-sm rounded-0 discounted_total_input" readonly>
                    </div>
                </div>
                <div class="row mb-1 mx-0">
                    <div class="col-9 px-0 py-1 text-right">
                        <span style="font-weight:bold">GST ({{ $GST_PERCENTAGE }}%): &nbsp;</span>
                    </div>
                    <div class="col-3 px-0">
                        <input type="number" value="0" 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-9 px-0 py-1 text-right">
                        <span style="font-weight:bold">Grand Total ($): &nbsp;</span>
                    </div>
                    <div class="col-3 px-0">
                        <input type="number" value="0" min="0" step="0.01"
                            class="form-control form-control-sm rounded-0 grand_total_input" readonly>
                    </div>
                </div>
                <hr>
                <div class="text-right mg-y-20">
                    <button type="submit" class="btn btn-primary mg-t-5"><i class="fa fa-dollar"></i> Proceed to
                        payment</button>
                    <button type="button" class="btn btn-primary mg-t-5" onclick="javascript:window.print();"><i
                            class="fa fa-print"></i> Print</button>
                </div>
            </form>
        </div>
        <div class="col-md-5">
            <!--================================-->
            <div class="card pd-10 wd-100p m-auto" style="zoom:70%">
                <h5 class="card-title bd-b pd-y-20">Invoice <a href="" class="tx-dark">#2577861</a></h5>
                <div class="card-body pd-0 printing-area">
                    <div class="row">
                        <div class="col-md-3">
                            <address>
                                <img src="{{ url('/') }}/AdminAssets/assets/images/auslogo.png"
                                    style="filter: invert(1); !important;" class="img-fluid" alt="logo"><br><br>
                                <strong>Sydney Quality Meat, Inc.</strong><br>
                                1355 Market St, Suite 900<br>
                                Sydney, AU 2000<br>
                                <abbr title="Email">E:</abbr> billing@example.com
                                <br>
                                <abbr title="Phone">P:</abbr> (123) 456-7890
                                <br>
                                <abbr title="Fax">F:</abbr> (123) 456-0987
                            </address>
                        </div>
                        <div class="col-md-3 ml-md-auto text-md-right">
                            <h4 class="text-dark">To:</h4>
                            <address>
                                <strong>Customer Name, LLC.</strong><br>
                                1355 Market St, Suite 900<br>
                                San Francisco, CA 94103<br>
                                <abbr title="Email">E:</abbr> info@customer-llc.com
                                <br>
                                <abbr title="Phone">P:</abbr> (123) 456-7890
                            </address>
                            <br><br>
                            <span><strong>Invoice Date:</strong> July 26, 2016</span>
                            <br>
                            <span><strong>Due Date:</strong> August 03, 2016</span>
                            <br><br><br><br><br>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Description</th>
                                    <th>Quantity</th>
                                    <th>Unit Cost</th>
                                    <th class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Samsung 64G SD Card</td>
                                    <td>12</td>
                                    <td>$26</td>
                                    <td class="text-right">$312</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Apple iPhone 64G</td>
                                    <td>2</td>
                                    <td>$699</td>
                                    <td class="text-right">$1,398</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Bluetooth headphone</td>
                                    <td>6</td>
                                    <td>$63</td>
                                    <td class="text-right">$396</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Selfie stick</td>
                                    <td>4</td>
                                    <td>$31</td>
                                    <td class="text-right">$124</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Stick</td>
                                    <td>5</td>
                                    <td>$25</td>
                                    <td class="text-right">$125</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Notes</h5>
                            <p>{{ $pos_invoice_note }}</p>
                        </div>
                        <div class="col-md-4 ml-md-auto text-right">
                            <span class="d-inline-block">
                                Sub - Total amount: $2,230
                                <p class="tx-gray-500 tx-12">VAT (10%): $22.3</p>
                            </span>
                            <br><br>
                            <p class="tx-bold">Grand Total: <span class="tx-20 tx-gray-900">$2,252</span></p>
                            <br>
                        </div>
                    </div>

                </div>
            </div>
            <!--/ Invoice End -->
        </div>
    </div>
</div>

<!--/ Page Inner End -->

@include('Admin.Includes.footer')
<script>
    $(document).ready(function() {
        $('#random-customer-section').hide();
        $('.manual_product_search').hide();
        $('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();
            }
        });
        $('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_quantity_input').change(function() {
            alert();
            $current_quantity = $(this).val();
            $current_price = $(this).parent().siblings('.price_section').children(
                '.product_price_input').val();
            $(this).val(parseFloat($current_quantity) * parseFloat($current_price));
        });
    });
</script>
<script>
    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/search-products?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" onclick="add_to_invoice_method(${product.id})">
                            <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>
                                <a class="product-title" target="_blank">${product.title}</a>
                            </div>
                            <div class="product-title sku" style="width: 100px;">${product.sku}</div>
                            </div>
                        `;
                        resultsSection.insertAdjacentHTML('beforeend', productHtml);
                    });
                })
                .catch(error => console.error('Error fetching search results:', error));
        });
    });

    function add_to_invoice_method(product_id) {
        if ($('.invoie_item_number_' + product_id).length > 0) {
            var current_quantity = parseFloat($('.invoie_item_number_' + product_id).val()) + 1;
            $('.invoie_item_number_' + product_id).val(current_quantity)
            var current_price = $('.invoie_item_number_' + product_id).parent().siblings('.price_section').children(
                '.product_price_input').val();
            $('.invoie_item_number_' + product_id).parent().siblings('.item_total_section').children(
                '.product_item_total').val(parseFloat(current_quantity) * parseFloat(current_price));
            count_total_items();
        } else {
            fetch(`/admin/invoices/select-product?product_id=${product_id}`)
                .then(response => response.json())
                .then(data => {
                    $('.product-section').append(`
                    <div class="row mb-1 mx-0">
                        <div class="col-6 px-0">
                        <input type="hidden" name="product_i" value="${product_id}">
                                <input type="text" class="form-control form-control-sm" value="${data.product.title}" readonly>
                        </div>
                        <div class="col-1 px-0">
                                <input type="number" value="1" min="1" class="form-control form-control-sm rounded-0 product_quantity_input invoie_item_number_${product_id}" onchange="quanity_change_product(this)">
                        </div>
                        <div class="col-2 px-0 price_section">
                                <input type="number" readonly class="form-control form-control-sm rounded-0 product_price_input" value="${parseFloat(data.meta.value)}"">
                        </div>
                        <div class="col-2 px-0 item_total_section">
                                <input type="number" value="${parseFloat(data.meta.value)}" readonly class="form-control form-control-sm rounded-0 product_item_total">
                        </div>
                        <div class="col-1 px-0 text-right">
                                <button class="btn badge" style="margin-top:3px" type="button" onclick="remove_invoice_item(this)">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                        </div>
                    </div>
                `);
                    play_beep();
                    count_total_items();
                })
                .catch(error => console.error('Error fetching search results:', error));
        }
    }

    function quanity_change_product(row_obj) {
        var current_quantity = $(row_obj).val();
        var current_price = $(row_obj).parent().siblings('.price_section').children('.product_price_input').val();
        $(row_obj).parent().siblings('.item_total_section').children('.product_item_total').val(parseFloat(
            current_quantity) * parseFloat(current_price));
        count_total_items();
    }

    function remove_invoice_item(row_obj) {
        $(row_obj).parent().parent().remove();
        count_total_items();
    }

    function count_total_items() {
        var sum = 0;

        $('.product_quantity_input').each(function() {
            var value = parseFloat($(this).val());
            if (!isNaN(value)) {
                sum += value;
            }
        });
        $('.total_invoice_items').val(sum);
        sum_subtotal();
    }

    function sum_subtotal() {
        var sum = 0;

        $('.product_item_total').each(function() {
            var value = parseFloat($(this).val());
            if (!isNaN(value)) {
                sum += value;
            }
        });
        $('.invoice_sub_total').val(sum);
        calculate_dicount();

        GST_Calculate();
    }

    function play_beep() {
        var beepSound = document.getElementById("beepSound");
        beepSound.play();
    }

    function calculate_dicount() {
        var current_sub_total = $('.invoice_sub_total').val();
        var discount = $('.invoice_discount_amont').val();

        var discount_amount = (parseFloat(current_sub_total) / 100) * parseFloat(discount);
        var discounted_total = current_sub_total - discount_amount;
        $('.discounted_total_input').val(discounted_total);
        GST_Calculate();
    }
    $('.invoice_discount_amont').change(function() {
        calculate_dicount();
    });

    function GST_Calculate() {
        var discounted_amount = $('.discounted_total_input').val();
        var GST = (parseFloat(discounted_amount) / 100) * parseFloat('{{ $GST_PERCENTAGE }}');
        $('.gst_input').val(GST);
        Grand_Total();
    }

    function Grand_Total() {
        var discounted_amount = $('.discounted_total_input').val();
        var GST_amount = $('.gst_input').val();
        $('.grand_total_input').val(parseFloat(discounted_amount) + parseFloat(GST_amount));

    }
</script>


<audio id="beepSound" preload="auto">
    <source src="{{ url('/') }}/sounds/beep.wav" type="audio/mpeg">
</audio>