{{-- @extends('invoices.layout')

@section('invoices.content')
    <div class="container">
        <div class="card">
            <div class="card-header d-flex flex-row align-items-center justify-content-between">
                <ol class="breadcrumb m-0 p-0">
                    <li class="breadcrumb-item"><a href="{{ implode('/', ['','invoices']) }}"> Invoices</a></li>
                    <li class="breadcrumb-item">@lang('Edit Invoice') #{{$invoice->id}}</li>
                </ol>
            </div>
            <div class="card-body">
                <form action="{{ route('invoices.update', compact('invoice')) }}" method="POST" class="m-0 p-0">
                    @method('PUT')
                    @csrf
                    <div class="card-body">
                        <div class="mb-3">
        <label for="type" class="form-label">Type:</label>
        <input type="text" name="type" id="type" class="form-control" value="{{@old('type', $invoice->type)}}" required/>
        @if($errors->has('type'))
			<div class='error small text-danger'>{{$errors->first('type')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="project_id" class="form-label">Project:</label>
        <input type="number" name="project_id" id="project_id" class="form-control" value="{{@old('project_id', $invoice->project_id)}}" />
        @if($errors->has('project_id'))
			<div class='error small text-danger'>{{$errors->first('project_id')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="invoice_no" class="form-label">Invoice No:</label>
        <input type="number" name="invoice_no" id="invoice_no" class="form-control" value="{{@old('invoice_no', $invoice->invoice_no)}}" required/>
        @if($errors->has('invoice_no'))
			<div class='error small text-danger'>{{$errors->first('invoice_no')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="customer_id" class="form-label">Customer:</label>
        <div class="d-flex flex-row align-items-center justify-content-between">
    <select name="customer_id" id="customer_id" class="form-control form-select flex-grow-1" required>
        <option value="" selected disabled>Select Customer</option>
        @foreach($customers as $customer)
            <option value="{{ $customer->id }}" {{ @old('customer_id', $invoice->customer_id) == $customer->id ? "selected" : "" }}>{{ $customer->name }}</option>
        @endforeach
    </select>

    <a class="btn btn-light text-nowrap" href="{{implode('/', ['','customers','create'])}}"><i class="fa fa-plus-circle"></i> New</a>
</div>
        @if($errors->has('customer_id'))
			<div class='error small text-danger'>{{$errors->first('customer_id')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="issue_date" class="form-label">Issue Date:</label>
        <input type="date" name="issue_date" id="issue_date" class="form-control" value="{{@old('issue_date', $invoice->issue_date)}}" required/>
        @if($errors->has('issue_date'))
			<div class='error small text-danger'>{{$errors->first('issue_date')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="subject" class="form-label">Subject:</label>
        <input type="text" name="subject" id="subject" class="form-control" value="{{@old('subject', $invoice->subject)}}" />
        @if($errors->has('subject'))
			<div class='error small text-danger'>{{$errors->first('subject')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="reference" class="form-label">Reference:</label>
        <input type="text" name="reference" id="reference" class="form-control" value="{{@old('reference', $invoice->reference)}}" />
        @if($errors->has('reference'))
			<div class='error small text-danger'>{{$errors->first('reference')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="due_date" class="form-label">Due Date:</label>
        <input type="date" name="due_date" id="due_date" class="form-control" value="{{@old('due_date', $invoice->due_date)}}" required/>
        @if($errors->has('due_date'))
			<div class='error small text-danger'>{{$errors->first('due_date')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="send_date" class="form-label">Send Date:</label>
        <input type="date" name="send_date" id="send_date" class="form-control" value="{{@old('send_date', $invoice->send_date)}}" />
        @if($errors->has('send_date'))
			<div class='error small text-danger'>{{$errors->first('send_date')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="ref_number" class="form-label">Ref Number:</label>
        <textarea name="ref_number" id="ref_number" class="form-control" >{{@old('ref_number', $invoice->ref_number)}}</textarea>
        @if($errors->has('ref_number'))
			<div class='error small text-danger'>{{$errors->first('ref_number')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="shipping_display" class="form-label">Shipping Display:</label>
        <input type="number" name="shipping_display" id="shipping_display" class="form-control" value="{{@old('shipping_display', $invoice->shipping_display)}}" required/>
        @if($errors->has('shipping_display'))
			<div class='error small text-danger'>{{$errors->first('shipping_display')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="discount_apply" class="form-label">Discount Apply:</label>
        <input type="number" name="discount_apply" id="discount_apply" class="form-control" value="{{@old('discount_apply', $invoice->discount_apply)}}" required/>
        @if($errors->has('discount_apply'))
			<div class='error small text-danger'>{{$errors->first('discount_apply')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="next_invoicing_date" class="form-label">Next Invoicing Date:</label>
        <input type="text" name="next_invoicing_date" id="next_invoicing_date" class="form-control" value="{{@old('next_invoicing_date', $invoice->next_invoicing_date)}}" />
        @if($errors->has('next_invoicing_date'))
			<div class='error small text-danger'>{{$errors->first('next_invoicing_date')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="paid" class="form-label">Paid:</label>
        <input type="text" name="paid" id="paid" class="form-control" value="{{@old('paid', $invoice->paid)}}" />
        @if($errors->has('paid'))
			<div class='error small text-danger'>{{$errors->first('paid')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="balance" class="form-label">Balance:</label>
        <input type="text" name="balance" id="balance" class="form-control" value="{{@old('balance', $invoice->balance)}}" />
        @if($errors->has('balance'))
			<div class='error small text-danger'>{{$errors->first('balance')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="net_amount" class="form-label">Net Amount:</label>
        <input type="text" name="net_amount" id="net_amount" class="form-control" value="{{@old('net_amount', $invoice->net_amount)}}" />
        @if($errors->has('net_amount'))
			<div class='error small text-danger'>{{$errors->first('net_amount')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="vat" class="form-label">Vat:</label>
        <input type="text" name="vat" id="vat" class="form-control" value="{{@old('vat', $invoice->vat)}}" />
        @if($errors->has('vat'))
			<div class='error small text-danger'>{{$errors->first('vat')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="gross_amount" class="form-label">Gross Amount:</label>
        <input type="text" name="gross_amount" id="gross_amount" class="form-control" value="{{@old('gross_amount', $invoice->gross_amount)}}" />
        @if($errors->has('gross_amount'))
			<div class='error small text-danger'>{{$errors->first('gross_amount')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="sales_person" class="form-label">Sales Person:</label>
        <input type="text" name="sales_person" id="sales_person" class="form-control" value="{{@old('sales_person', $invoice->sales_person)}}" required/>
        @if($errors->has('sales_person'))
			<div class='error small text-danger'>{{$errors->first('sales_person')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="customer_notes" class="form-label">Customer Notes:</label>
        <textarea name="customer_notes" id="customer_notes" class="form-control" >{{@old('customer_notes', $invoice->customer_notes)}}</textarea>
        @if($errors->has('customer_notes'))
			<div class='error small text-danger'>{{$errors->first('customer_notes')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="t_c" class="form-label">T C:</label>
        <textarea name="t_c" id="t_c" class="form-control" >{{@old('t_c', $invoice->t_c)}}</textarea>
        @if($errors->has('t_c'))
			<div class='error small text-danger'>{{$errors->first('t_c')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="payment_method_id" class="form-label">Payment Method:</label>
        <input type="number" name="payment_method_id" id="payment_method_id" class="form-control" value="{{@old('payment_method_id', $invoice->payment_method_id)}}" required/>
        @if($errors->has('payment_method_id'))
			<div class='error small text-danger'>{{$errors->first('payment_method_id')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="status" class="form-label">Status:</label>
        <input type="text" name="status" id="status" class="form-control" value="{{@old('status', $invoice->status)}}" required/>
        @if($errors->has('status'))
			<div class='error small text-danger'>{{$errors->first('status')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="created_by" class="form-label">Created By:</label>
        <input type="number" name="created_by" id="created_by" class="form-control" value="{{@old('created_by', $invoice->created_by)}}" required/>
        @if($errors->has('created_by'))
			<div class='error small text-danger'>{{$errors->first('created_by')}}</div>
		@endif
    </div>

                    </div>
                    <div class="card-footer">
                        <div class="d-flex flex-row align-items-center justify-content-between">
                            <a href="{{ route('invoices.index', []) }}" class="btn btn-light">Cancel</a>
                            <button type="submit" class="btn btn-primary">@lang('Update Invoice')</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
 --}}
@extends('layouts.app')

@section('content')
<div class="col-xxl-9">
    <div class="card">
        <form class="needs-validation repeater" action="{{ route('invoices.update', compact('invoice')) }}" method="POST" novalidate id="invoice_form">
            @method('PUT')
            @csrf
            <div class="card-body border-bottom border-bottom-dashed p-4">
                <div class="row">
                    <input type="hidden" name="invoice_id" value="{{ \Str::uuid() }}">
                    <div class="col-lg-4">
                        <div class="form-group  mb-3">
                            <select class="customers form-control" name="customer" required>
                                <option></option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ ($invoice->customer_id == $customer->id) ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                    Customer is required
                            </div>
                            {{-- <input id="profile-img-file-input" type="file" class="profile-img-file-input" />
                            <label for="profile-img-file-input" class="d-block" tabindex="0">
                                <span class="overflow-hidden border border-dashed d-flex align-items-center justify-content-center rounded" style="height: 60px; width: 256px;">
                                    <img src="{{ asset('assets/images/logo-dark.png') }}" class="card-logo card-logo-dark user-profile-image img-fluid" alt="logo dark">
                                    <img src="{{ asset('assets/images/logo-light.png') }}" class="card-logo card-logo-light user-profile-image img-fluid" alt="logo light">
                                </span>
                            </label> --}}
                        </div>
                       {{--  <div>
                            <div>
                                <label for="companyAddress">Address</label>
                            </div>
                            <div class="mb-2">
                                <textarea class="form-control bg-light border-0" id="companyAddress" rows="3" placeholder="Company Address" required></textarea>
                                <div class="invalid-feedback">
                                    Please enter a address
                                </div>
                            </div>
                            <div>
                                <input type="text" class="form-control bg-light border-0" id="companyaddpostalcode" minlength="5" maxlength="6" placeholder="Enter Postal Code" required />
                                <div class="invalid-feedback">
                                    The US zip code must contain 5 digits, Ex. 45678
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    <!--end col-->
                    <div class="col-lg-4 ms-auto">
                        <div class="mb-2">
                            <input type="text" class="form-control bg-light border-0" id="registrationNumber" maxlength="12" placeholder="Legal Registration No" value="WYKA Consulting Group" disabled  />
                        </div>
                        <div class="mb-2">
                            <input type="email" class="form-control bg-light border-0" id="companyEmail" placeholder="Email Address" value="finance@wykaconsults.com" disabled />
                            <div class="invalid-feedback">
                                Please enter a valid email, Ex., example@gamil.com
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="text" class="form-control bg-light border-0" id="companyWebsite" placeholder="Website" value="wykaconsults.com" required disabled />
                            <div class="invalid-feedback">
                                Please enter a website, Ex., www.example.com
                            </div>
                        </div>
                        <div>
                            <input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="compnayContactno" placeholder="Contact No" value="07888384" disabled required />
                            <div class="invalid-feedback">
                                Please enter a contact number
                            </div>
                        </div>
                    </div>
                </div>
                <!--end row-->
            </div>
            <div class="card-body p-4">
                <div class="row g-3">
                    <div class="col-lg-4 col-sm-6">
                        <label for="invoicenoInput">Invoice No</label>
                        <input type="text" class="form-control bg-light border-0" id="invoicenoInput" placeholder="Invoice No" value="#INV{{ sprintf("%05d",$invoice->invoice_no) }}" readonly="readonly" />
                    </div>
                    <!--end col-->
                    <div class="col-lg-4 col-sm-6">
                        <div>
                            <label for="date-field">Due Date</label>
                            <input type="text" class="form-control bg-light border-0" id="date-field" data-provider="flatpickr" name="due_date" value="{{ $invoice->due_date }}" data-time="true" placeholder="Select Date Invoice Due Date">
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-lg-4 col-sm-6">
                        <div>
                            <label for="totalamountInput">Total Amount</label>
                            <input type="text" class="form-control grand_total bg-light border-0" id="totalamountInput" placeholder="UGX 0.00" readonly />
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
            </div>
           {{--  <div class="card-body p-4 border-top border-top-dashed">
                <div class="row">
                    <div class="col-lg-4 col-sm-6">
                        <div>
                            <label for="billingName" class="text-muted text-uppercase fw-semibold">Billing Address</label>
                        </div>
                        <div class="mb-2">
                            <input type="text" class="form-control bg-light border-0" id="billingName" placeholder="Full Name" required />
                            <div class="invalid-feedback">
                                Please enter a full name
                            </div>
                        </div>
                        <div class="mb-2">
                            <textarea class="form-control bg-light border-0" id="billingAddress" rows="3" placeholder="Address" required></textarea>
                            <div class="invalid-feedback">
                                Please enter a address
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="billingPhoneno" placeholder="(123)456-7890" required />
                            <div class="invalid-feedback">
                                Please enter a phone number
                            </div>
                        </div>
                        <div class="mb-3">
                            <input type="text" class="form-control bg-light border-0" id="billingTaxno" placeholder="Tax Number" required />
                            <div class="invalid-feedback">
                                Please enter a tax number
                            </div>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="same" name="same" onchange="billingFunction()" />
                            <label class="form-check-label" for="same">
                                Will your Billing and Shipping address same?
                            </label>
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-sm-6 ms-auto">
                        <div class="row">
                            <div class="col-lg-8">
                                <div>
                                    <label for="shippingName" class="text-muted text-uppercase fw-semibold">Shipping Address</label>
                                </div>
                                <div class="mb-2">
                                    <input type="text" class="form-control bg-light border-0" id="shippingName" placeholder="Full Name" required />
                                    <div class="invalid-feedback">
                                        Please enter a full name
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <textarea class="form-control bg-light border-0" id="shippingAddress" rows="3" placeholder="Address" required></textarea>
                                    <div class="invalid-feedback">
                                        Please enter a address
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <input type="text" class="form-control bg-light border-0" data-plugin="cleave-phone" id="shippingPhoneno" placeholder="(123)456-7890" required />
                                    <div class="invalid-feedback">
                                        Please enter a phone number
                                    </div>
                                </div>
                                <div>
                                    <input type="text" class="form-control bg-light border-0" id="shippingTaxno" placeholder="Tax Number" required />
                                    <div class="invalid-feedback">
                                        Please enter a tax number
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
            </div> --}}
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="invoice-table table table-borderless table-nowrap mb-0">
                        <thead class="align-middle">
                            <tr class="table-active">
                                <th scope="col">
                                    Product Details
                                </th>
                                <th scope="col" style="width: 170px;">
                                    <div class="d-flex currency-select input-light align-items-center">
                                        Rate
                                        
                                    </div>
                                </th>
                                <th scope="col" style="width: 120px;">Quantity</th>
                                <th scope="col" class="text-end" style="width: 150px;">Amount</th>
                                <th scope="col" class="text-end" style="width: 105px;"></th>
                            </tr>
                        </thead>
                        <tbody data-repeater-list="items">
                            <tr id="1" class="product" data-repeater-item>
                                <td class="text-start">
                                    <div class="mb-2">
                                        <select class="form-control bg-light form-select items" name="item">
                                            <option value="" selected disabled>Please Select Item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <textarea class="form-control bg-light border-0" name="description" rows="2" placeholder="Item Details"></textarea>
                                </td>
                                <td>
                                    <input type="number" class="form-control unit_price bg-light border-0" id="productRate-1" name="unit_price" placeholder="0.00" required />
                                    <div class="invalid-feedback">
                                        Please enter a rate
                                    </div>
                                </td>
                                <td>
                                    <input type="number" name="quantity" class="form-control quantity bg-light border-0" id="productRate-1" placeholder="1" required />
                                    <div class="invalid-feedback">
                                        Please enter a quantity
                                    </div>
                                </td>
                                <td class="text-end">
                                    <div>
                                        <input type="text" class="form-control item_total bg-light border-0 product-line-price" name="item_total" id="productPrice-1" placeholder="UGX 0.00" readonly />
                                    </div>
                                </td>
                                <td class="product-removal">
                                    <a data-repeater-delete href="javascript:void(0)" class="btn btn-success">Delete</a>
                                </td>
                            </tr>
                        </tbody>
                        <tbody>
                            <tr id="newForm" style="display: none;"><td class="d-none" colspan="5"><p>Add New Form</p></td></tr>
                            <tr>
                                <td colspan="5">
                                    <a href="javascript:void(0)" id="add-item" class="btn btn-soft-secondary fw-medium" data-repeater-create><i class="ri-add-fill me-1 align-bottom"></i> Add Item</a>
                                </td>
                            </tr>
                            <tr class="border-top border-top-dashed mt-2">
                                <td colspan="3"></td>
                                <td colspan="2" class="p-0">
                                    <table class="table table-borderless table-sm table-nowrap align-middle mb-0">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Sub Total</th>
                                                <td style="width:150px;">
                                                    <input type="text" class="form-control bg-light border-0" id="cart-subtotal" placeholder="UGX 0.00" readonly />
                                                </td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Estimated Tax (0%)</th>
                                                <td>
                                                    <input type="text" class="form-control bg-light border-0" id="cart-tax" placeholder="UGX 0.00" readonly />
                                                </td>
                                            </tr>
                                           {{--  <tr>
                                                <th scope="row">Discount <small class="text-muted">(VELZON15)</small></th>
                                                <td>
                                                    <input type="text" class="form-control bg-light border-0" id="cart-discount" placeholder="$0.00" readonly />
                                                </td>
                                            </tr> 
                                            <tr>
                                                <th scope="row">Shipping Charge</th>
                                                <td>
                                                    <input type="text" class="form-control bg-light border-0" id="cart-shipping" placeholder="$0.00" readonly />
                                                </td>
                                            </tr>--}}
                                            <tr class="border-top border-top-dashed">
                                                <th scope="row">Total Amount</th>
                                                <td>
                                                    <input type="text" class="form-control grand_total bg-light border-0" id="cart-total" placeholder="UGX 0.00" readonly />
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!--end table-->
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!--end table-->
                </div>
                <div class="row mt-3">
                    <div class="col-lg-4">
                        <div class="mb-2">
                            <label for="choices-payment-type" class="form-label text-muted text-uppercase fw-semibold">Payment Details</label>
                            <div class="input-light">
                                <select class="form-control bg-light border-0" name="payment_method" data-choices data-choices-search-false data-choices-removeItem id="choices-payment-type" required>
                                    <option value="">Payment Method</option>
                                    @foreach($payment_methods as $payment_method)
                                        <option value="{{ $payment_method->id }}" {{ ($invoice->payment_method_id == $payment_method->id) ? 'selected' : '' }}>
                                            {{ $payment_method->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                        Please select a payment method
                                    </div>
                            </div>
                        </div>
                        <div class="mb-2">
                            <input class="form-control bg-light border-0" type="text" name="sales_person" placeholder="Sales Person" value="{{ old('sales_person',\Auth::user()->name) }}">
                        </div>
                        {{-- <div class="mb-2">
                            <input class="form-control bg-light border-0" type="text" id="cardNumber" placeholder="xxxx xxxx xxxx xxxx">
                        </div>
                        <div>
                            <input class="form-control  bg-light border-0" type="text" id="amountTotalPay" placeholder="$0.00" readonly />
                        </div> --}}
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
                <div class="mt-4">
                    <label for="exampleFormControlTextarea1" class="form-label text-muted text-uppercase fw-semibold">NOTES</label>
                    <textarea class="form-control alert alert-info" id="exampleFormControlTextarea1" placeholder="Notes" rows="2" required>All accounts are to be paid within 7 days from receipt of invoice. To be paid by cheque or credit card or direct payment online. If account is not paid within 7 days the credits details supplied as confirmation of work undertaken will be charged the agreed quoted fee noted above.</textarea>
                </div>
                <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                    <button type="submit" class="btn btn-success"><i class="ri-printer-line align-bottom me-1"></i> Save</button>
                    <a href="javascript:void(0);" class="btn btn-primary"><i class="ri-download-2-line align-bottom me-1"></i> Download Invoice</a>
                    <a href="javascript:void(0);" class="btn btn-danger"><i class="ri-send-plane-fill align-bottom me-1"></i> Send Invoice</a>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
@section('customjs')
<script src="{{ asset('assets/js/jquery.repeater.min.js') }}"></script>
<script>
    $(document).ready(function () {
        $(".items").select2({
            placeholder: "Select Invoice Item",
        });

        $(".customers").select2({
            placeholder: "Select Customer"
        })

        var $repeater = $('.repeater').repeater({
            initEmpty: false,
            show: function () {
                $(this).slideDown();
                $('.select2-container').remove();
                $('.items, .customers').select2();
            },
            hide: function (deleteElement) {
                if(confirm('Are you sure you want to delete this element?')) {
                    $(this).slideUp(deleteElement);
                    $(this).remove();
                    subtotal()
                }
            },
            isFirstItemUndeletable: true
        });

            $repeater.setList([
              @foreach ($invoice->invoice_items as $key => $invoice_item)
                {
                  'item' :{{ $invoice_item->item_id }},
                  'unit_price': {{ $invoice_item->unit_price }},
                  'quantity': {{ $invoice_item->quantity }},
                  'item_total': {{ $invoice_item->quantity * $invoice_item->unit_price }}
                },
              @endforeach
            ]);

            subtotal();

        $(document).on("change",'.items',function(){
            var item_id = $(this).val();
            var el = $(this);

            $.ajax({
                url: "{{ url('item_details') }}/"+item_id,
                type: "GET",

                success: function(data){
                    $(el.parent().parent().parent().find('.unit_price')).val(data.selling_price);
                    $(el.parent().parent().parent().find('.quantity')).val(1);
                    $(el.parent().parent().parent().find('.item_total')).val(data.selling_price);
                    subtotal()
                }
            })
        });

        $(document).on("keyup",".unit_price,.quantity",function(){
            var el = $(this).parent().parent();

            var quantity=$(el.find(".quantity")).val(),unit_price=$(el.find(".unit_price")).val();
            console.log(unit_price+" "+quantity)
            $(el.find('.item_total')).val(quantity * unit_price);
            subtotal()
        })
    });

    function subtotal(){
        var inputs_quantity = $(".quantity");

            var priceInput = $('.unit_price');
            var subtotal = 0;
            for (var j = 0; j < priceInput.length; j++) {
               subtotal  += (parseFloat(priceInput[j].value) * parseFloat(inputs_quantity[j].value));
            }

           $(".grand_total").val((subtotal))
    }
</script>
@endsection