@extends('backend.admin.layouts.app')
@section('content')
    <div class="pagetitle">
        <h1>Order</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item">Tables</li>
                <li class="breadcrumb-item active">Purches</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="d-flex justify-content-center align-items-center me-5">
                        <div class="w-25 mt-5">
                            <h3 class="fw-5">Create Purches</h3>
                        </div>
                    </div>

                    <div class="card-body" id="printableArea">

                      <div style="width: 100%;" class="d-flex justify-content-between mb-3">
                                <div>
                                    <div class="input-icons">
                                        <i class="fa-solid fa-magnifying-glass icons"></i>
                                        <input id="psearch" class="form-control input-field" placeholder="Search product"
                                            type="search" required="">
                                    </div>
                                </div>

                                <div>
                                    <select id="supplier_id" class="form-select" name="supplier_id">
                                        <option value="-1">Select Supplier</option>
                                        {{-- @forelse ($supplier as $item)
                                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                                        @empty
                                        @endforelse --}}
                                    </select>
                                </div>
                            </div>

                        <h5 class="fw-bold">Order Details</h5>
                        <!-- Default Table -->
                        <table class="table border" >
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Quantity</th>
                                    <th scope="col">Product Code</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody id="dyn_tr">
                                
                                
                            </tbody>
                        </table>

                        <!-- End Default Table Example -->
                    </div>


                </div>

            </div>

        </div>
    </section>
@endsection
@push('style')
<style>
    .input-icons {
        position: relative;

    }
    .subtotaldiv{
        margin-left: -31px; 
    }
    .input-icons .icons {
        position: absolute;
        top: 37%;
        left: 10px;

    }

    .input-field {
        padding: 10px;
        padding-left: 30px;

    }
</style>
@endpush
@push('script')
    <script>
        $(document).ready(function(){

            $("#psearch").autocomplete({
                source: "{{ route('admin.product-search') }}",
                minLength: 1,
                select: function(event, ui) {
                    console.log(ui);

                    var data = `
                <tr>
                    <td class='product_id'>${ui.item.id}</td>
                    <td class='name'>${ui.item.label}</td>
                    <td><input value='${ui.item.stock}' class='form-control quantity' type='number'style='width: 100px;'></td>
                    <td class='price'>${ui.item.product_code}</td>
                    <td class='itemtotal'>${ui.item.price}</td>
                    <td><a href="#" class="deleteproduct btn" data-id="${ui.item.id}"><i class="fa-solid fa-trash"></i></a></td>
                </tr>
                     `;

                $('#dyn_tr').append(data);
                $("#psearch").val("").focus();
                // updateTotal();
                }

            });
        });

                    // $('#supplier_id').select2();
            // $('#dyn_tr').on('click', '.deleteproduct', function(){
            //     $(this).parent().parent().remove();
            //     updateTotal();
            // });
            // function updateTotal() {
            //     var total = 0;
            //     $('#dyn_tr tr').each(function(){
            //         total += parseFloat($(this).find('.itemtotal').text());
            //     });
            //     $('#total_price').text(total);
            // }
            // $('#add_product').click(function(){
            //     var id = $('#product_id').val();
            //     var name = $('#name').val();
            //     var quantity = $('#quantity').val();
            //     var price = $('#price').val();
            //     var itemtotal = price * quantity;
            
        // function printOrder() {
        //     var printContent = document.getElementById("printableArea").innerHTML;
        //     var originalContent = document.body.innerHTML;

        //     document.body.innerHTML = printContent;
        //     window.print();
        //     document.body.innerHTML = originalContent;
        //     location.reload(); 
        // }
    </script>
@endpush