@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="page-title mb-0 font-size-18">@lang('dashboard_invoices.edit_client_invoice')
                        </h4>
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item active"> @lang('dashboard_clients.welcome_platform')</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <!-- Errors -->
            @include('dashboard.components.errors')
            <!-- Success Message -->
            @if (session()->has('message'))
                <p class="alert alert-success text-center">
                    {{ session()->get('message') }}
                </p>
            @endif

            <div class="col-lg-12 d-none alert-danger allRequiredFieldsContainer mb-3 px-2 py-2">
                <div class="text-danger mx-4">
                    <div class="row">
                        <p class="text-danger mb-0">
                            @lang('dashboard_invoices.please_fill_all') : 
                        </p>
                        <br> 
                        <div class="mt-1 mb-3 text-danger">
                            <b class="my-1"> INVOICE DATE , INVOICE NUMBER , DUE DATE , SHIPPING DATE , SHIPPING ADDRESS, product/service, SKU , Quantity , Price , Discount Percentage , Tax , warehouse , Total </b>
                        </div>
                        
                    </div>
                </div>
            </div>
            <form class="repeater" action="{{ route('dashboard.invoices.edit.invoice') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="invoice_id" id="invoice_id">
            <div class="card">
                <div class="card-body py-4">
                    <div class="row">
                        <!-- Invoice Number -->
                        <div class="form-group mb-0 mx-0 px-0 d-flex flex-row justify-content-start align-items-center">
                            <label class="text-dark col-lg-5 h5 mb-0" for="tax"><b>@lang('dashboard_invoices.invoice_number')</b></label>
                            <select required class="form-control select2 col-lg-4 invoicesDropdown" name="invoice_number"
                                style="width: 300px" onchange="invoiceNumberChanged(this, {{ $invoices->toJson() }})">
                                <option disabled selected value="{{ null }}">
                                    @lang('dashboard_invoices.choose_invoice_number')
                                </option>
                                @foreach ($invoices->where('is_refunded',false) as $invoice)
                                    <option value="{{ $invoice->id }}" @if($invoice->id == $id) selected @endif>
                                        {{ $invoice->number }}
                                    </option>
                                @endforeach 
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="">
                            <h4 class="card-title">@lang('dashboard_invoices.edit_client_invoice') </h4>
                            <p class="card-title-desc">
                                @lang('dashboard_invoices.take_the_following_steps_to_edit_client_invoice') </p>
                        </div>
                        <a class="popup-form d-none" href="#addinvoicetooffer"><button type="button" class="btn btn-success"
                                aria-label="zeonvalue">
                                @lang('dashboard_refundclient.convert_to_invoice') <i class="mdi mdi-plus-thick"></i>
                                </i></button></a>
                    </div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-pills nav-justified" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link active" data-toggle="tab" href="#home-1" role="tab">
                                <span class="d-block d-sm-none"><i class="mdi mdi-account"></i></span>
                                <span class="d-none d-sm-block">@lang('dashboard_invoices.customer_and_data')</span>
                            </a>
                        </li>
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link" data-toggle="tab" href="#profile-1" role="tab">
                                <span class="d-block d-sm-none"><i class="mdi mdi-basket-outline"></i></span>
                                <span class="d-none d-sm-block">@lang('dashboard_invoices.Product_and_tax')</span>
                            </a>
                        </li>
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link" data-toggle="tab" href="#messages-1" role="tab">
                                <span class="d-block d-sm-none"><i class="mdi mdi-note-outline"></i></span>
                                <span class="d-none d-sm-block">@lang('dashboard_invoices.notes')</span>
                            </a>
                        </li>
                    </ul>
                    
                        <!-- Tab panes -->
                        <div class="tab-content p-3 text-muted">
                            <div class="tab-pane active" id="home-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label
                                                class="control-label col-md-12 px-0">@lang('dashboard_invoices.client_name')
                                            </label>
                                            <select required class="form-control select2" id="project_id" name="project_id"
                                                style="width: 100%"
                                                {{-- onchange="showClientEmail(this,{{ $clients->toJson() }}, $('#clientEmail') )" --}}>
                                                <option selected disabled value="{{ null }}">
                                                    @lang('dashboard_invoices.choose_client_name')</option>
                                                 @foreach ($clients as $clien)
                                                    {{-- <optgroup label="{{ $clien->name }}"> --}}
                                                        @foreach ($clien->project as $projectIndex)
                                                            <option value="{{ $projectIndex->id }}" @if ($projectIndex->id == @$project->id)
                                                                selected
                                                        @endif>{{ $projectIndex->name }}
                                                        </option>
                                                @endforeach
                                                {{-- </optgroup> --}}
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="invoiceDate">@lang('dashboard_priceoffer.receipt_date')</label>
                                            <input required type="date" class="form-control" id="invoiceDate" name="invoice_date"
                                                placeholder="@lang('dashboard_priceoffer.receipt_date')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="invoiceNumber">@lang('dashboard_priceoffer.receipt_number')</label>
                                            <input required   type="text" class="form-control" id="invoiceNumber" name="number"
                                                placeholder="@lang('dashboard_priceoffer.receipt_number')">
                                        </div>
                                    </div>

                                    
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="invoicedue">@lang('dashboard_invoices.due_date')</label>
                                            <input type="date" name="due_date" class="form-control" id="dueDate"
                                                placeholder="@lang('dashboard_invoices.due_date')">
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="shippingDate">@lang('dashboard_invoices.shipping_date')</label>
                                            <input  type="date" class="form-control" id="shippingDate" name="shipping_date"
                                                placeholder="@lang('dashboard_invoices.shipping_date')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="clientEmail">@lang('dashboard_invoices.email') </label>
                                            <input type="email" class="form-control" id="clientEmail" name="email"
                                                placeholder="@lang('dashboard_invoices.email')">
                                        </div>
                                    </div>

                                         <div class="col-lg-3" id="status_id">
                                        <div class="form-group">
                                            <label
                                                class="control-label col-md-12 px-0">@lang('dashboard_refundclient.push_from')</label>
                                            <select class="form-control select2" name="account_id"
                                                style="width: 100%">
                                                <option selected disabled value="{{ null }}">
                                                    @lang('dashboard_invoices.choose_account')</option>
                                                 @foreach ($accounts->whereIn('account_type_id',[1,2]) as $account)
                                                    <option value="{{ $account->id }}">
                                                        {{ $account->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> 

                                  
                                    <div class="col-lg-3">
                                        <div class="form-group" id="paymentMethodDropdown">
                                            <label
                                                class="control-label col-md-12 px-0">@lang('dashboard_refundclient.payment_method')
                                            </label>
                                            <select class="form-control select2 mx-0" name="payment_method_id" id="paymentMethod"
                                                style="width: 100%">
                                                <option selected disabled value="{{ null }}">
                                                    @lang('dashboard_invoices.choose_payment_method')</option>
                                               @foreach ($paymentMethods as $paymentMethod)
                                                    <option value="{{ $paymentMethod->id }}">
                                                        {{ $paymentMethod->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label
                                                for="recoverAddress">@lang('dashboard_refundclient.return_address')</label>
                                            <textarea class="form-control" id="recoverAddress" name="recover_address" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                </p>
                            </div>
                            <div class="tab-pane" id="profile-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body px-0 py-0">
                                            <div data-repeater-list="products">
                                                <div data-repeater-item class="row">
                                                    <div class="form-group col-lg-4">
                                                        <label
                                                            for="productname">@lang('dashboard_invoices.Product_or_service')</label>
                                                        <select required class="form-control select2 products-dropdown" name="product"
                                                            style="width: 100%"
                                                            onchange="productChanged(this, '{{ route('dashboard.invoices.get.product') }}')" >
                                                            <label
                                                                for="productname">@lang('dashboard_invoices.choose_service_or_product')</label>
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_invoices.Product_or_service')</option>
                                                            @foreach ($products as $index => $product)
                                                                <option value="{{ $product->id . ',' . $product->type }}"
                                                                    id="product{{ $index }}">
                                                                    {{ $product->name . '( ' . $product->type . ' )' }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label
                                                            for="productdesc">@lang('dashboard_invoices.product_description')</label>
                                                        <input type="text" name="description" disabled id="productdesc"
                                                            class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="sku">@lang('dashboard_invoices.sku')</label>
                                                        <input type="text" id="sku" name="sku" disabled
                                                            class="form-control sku" />
                                                    </div>
                                                    <div class="form-group col-lg-3">
                                                        <label for="stock">@lang('dashboard_invoices.warehouse')</label>
                                                        <select class="form-control select2" style="width: 100%"
                                                            onchange="warehouseChanged(this)" name="warehouse_id">
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_invoices.choose_warehouse')</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="qu">@lang('dashboard_invoices.quantity')</label>
                                                        <input required type="number" min="1" max="99999999" id="qu"
                                                            name="quantity"
                                                            onchange="quantity(this, {{ $products->toJson() }})"
                                                            class="form-control" disabled />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="price">@lang('dashboard_invoices.price')</label>
                                                        <input required type="number" disabled min="0" max="99999999"
                                                            step="any" id="price" name="price"
                                                            class="form-control product-price" onchange="priceChanged(this)" />
                                                    </div>
                                                    <div class="form-group col-lg-2" hidden>
                                                        <label
                                                            for="">@lang('dashboard_invoices.product_without_tax')</label>
                                                        <input type="text" disabled name="product_without_tax"
                                                            class="form-control">
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label
                                                            for="qu">@lang('dashboard_invoices.discount')</label>
                                                        <input type="number" min="0" max="99999999"  step="any" id="qu"
                                                            name="product_discount" onchange="discountProduct(this)"
                                                            class="form-control" disabled />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="tax">@lang('dashboard_invoices.tax')</label>
                                                        <select class="form-control select2" name="taxes"
                                                            style="width: 100%" oninput="taxTotal()">
                                                            <option selected value="{{ null }}">
                                                                @lang('dashboard_invoices.no_tax'){{ ' (' . '0' . ' ٪)' }}
                                                            </option>
                                                           @foreach ($taxes as $index => $tax)
                                                                <option value="{{ $tax->id }}">
                                                                    {{ $tax->name . ' (' . $tax->percentage . ' ٪)' }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                   {{--  <div class="col-lg-3">
                                                        <div class="form-group">
                                                            <label
                                                                for="serviceDate">@lang('dashboard_priceoffer.service_date')</label>
                                                            <input type="date" class="form-control" id="serviceDate"
                                                                placeholder="@lang('dashboard_priceoffer.service_date')">
                                                        </div>
                                                    </div> --}}
                                                    <div class="form-group col-lg-2">
                                                        <label for="total">@lang('dashboard_invoices.total')</label>
                                                        <input type="text" name="total" disabled="disabled"
                                                            class="total form-control" />
                                                    </div>
                                                    
                                                    <div class="form-group col-lg-2">
                                                        <div class="form-group">
                                                            <label
                                                                class="control-label">@lang('dashboard_vouchercash.filter')
                                                            </label>
                                                            <select class="form-control select2 " name="filter_id" style="width: 100%">
                                                                <option selected value="{{ null }}">@lang('dashboard_vouchercash.no_filter')</option>
                                                                @foreach ($filters as $index => $filter)
                                                                    <option value="{{ $filter->id }}">
                                                                        {{ $filter->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 align-self-center" class="deleteButtonContainer" onclick="">
                                                        <button type="button" data-repeater-delete class="btn btn-primary deleteRow"
                                                            aria-label="Profile"  onclick="deleteButtonPressed(this)">
                                                            <i class="mdi mdi-delete-alert" aria-hidden="true"></i>
                                                        </button>
                                                    </div>
                                                    <!-- Add Total Label -->
                                                    <div class="col-lg-12 flex-row text-center my-1 d-none">
                                                        <div class="d-flex flex-row justify-content-center"
                                                            style="width: 100%"><span class="h4 inline-block">$ </span>
                                                            <p class="h4 addTotalLabel" name="addTotalResult">0</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-2 d-flex flex-row align-items-center">
                                                <input data-repeater-create type="button" class="btn btn-success mx-1 " id="addNewRow"
                                                    value="@lang('dashboard_invoices.add')" onclick="editInvoiceAddButtonPressed()" />
                                                <button id="AddTotalButton" type="button" class="btn btn-success  mx-1 "
                                                    onclick="btnAddTotalClicked(this)" aria-label="alltotal">
                                                    @lang('dashboard_invoices.add_total')</button>
                                                <p class="h3 mb-0 mx-auto d-none" id="addTotalResult"></p>
                                            </div>
                                        </div> <!-- End of card body-->
                                    </div> <!-- End of card-->
                                    <div class="table-responsive mb-0" data-pattern="priority-columns">
                                        <table id="tech-companies-1" class="table table-striped">
                                            <tbody>
                                                <tr>
                                                    <td colspan="2" class="text-right">
                                                        @lang('dashboard_invoices.total_sum')</td>
                                                    <td class="text-right"> $ <p style="display: inline" id="tax_total">
                                                            0</p> <input type="hidden" name="tax_total"
                                                            id="tax_total_input"></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-right">
                                                        @lang('dashboard_invoices.tax_type') </td>
                                                    <td class="border-0 text-right">
                                                        <div class="d-flex justify-content-start">
                                                            <select class="select2 mx-1" name="tax_type" id="tax_type"
                                                                style="width: 200px"  onchange="taxTotal()">
                                                                <option value="inclusive">
                                                                    @lang('dashboard_invoices.included_tax')
                                                                </option>
                                                                <option value="exclusive">
                                                                    @lang('dashboard_invoices.out_of_tax')
                                                                </option>
                                                                <option value="out">
                                                                    @lang('dashboard_invoices.without_tax')</option>
                                                            </select>
                                                            <input id="pricesTax" name="taxes_total" type="text"
                                                                class="form-control ml-2" style="width: auto !important">
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td colspan="2" class="border-0 text-right">
                                                        <strong>@lang('dashboard_invoices.total')</strong>
                                                    </td>
                                                    <td class="border-0 text-right">
                                                        <h4 class="m-0"> $ <span id="invoice_total" style="display:inline">
                                                                0 </span>
                                                        </h4>
                                                        <input type="hidden" name="invoice_total" id="invoice_total_input">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="outappend">
                                        <div id="prodstodiscount">
                                        </div>
                                    </div>
                                </div>
                                </p>
                            </div>
                            <div class="tab-pane" id="messages-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="notes"> @lang('dashboard_refundclient.receipt_notes') </label>
                                            <textarea class="form-control invoiceNotes" id="notes" name="invoice_notes" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="receipt">
                                                @lang('dashboard_refundclient.account_statement_notes') </label>
                                            <textarea class="form-control statementNotes" id="receipt" name="statement_notes" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="control-label">@lang('dashboard_invoices.upload_file')
                                            </label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" name="file"
                                                    id="customFile">
                                                <label class="custom-file-label"
                                                    for="customFile">@lang('dashboard_invoices.import_file') </label>
                                                    <p hidden id="uploaded-file"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">@lang('dashboard_refundclient.quick_view_of_receipt_information')</h4>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="final_invoice">@lang('dashboard_invoices.total')</label>
                            <br>
                            <h1 id="final_invoice" style="display: inline">0</h1>
                            <h1 style="display: inline">$</h1>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label for="balancedue">@lang('dashboard_invoices.due_balance')</label>
                            <br>
                            <h1 id="balancedue" style="display: inline">0</h1>
                            <h1 style="display: inline">$</h1>
                            <input type="hidden" name="balancedue" id="balancedue_input">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <button type="submit" name="input_type" value="save" class="btn btn-info " id="save"
                            aria-label="save">
                            @lang('dashboard_invoices.save')<i class="mdi mdi-content-save-alert"></i>
                        </button>
                        <button type="submit" class="btn btn-success" id="saveAndSend" name="input_type"
                            value="save_send" aria-label="saveandsend">
                            @lang('dashboard_invoices.save_and_send')<i class="mdi mdi-arrange-send-to-back"></i>
                        </button>
                        <button type="submit" name="input_type" value="show_print" class="btn btn-primary "
                            aria-label="vieworprint" id="previewAndPrint">
                            @lang('dashboard_invoices.preview_and_print') <i class="mdi mdi-printer-check"></i>
                        </button>
                    </div>
                </div>
            </div>
            </form>
        </div>
        <div class="card mfp-hide mfp-popup-form mx-auto" id="addinvoicetooffer">
            <div class="card-body">
                <h4 class="mt-0 mb-4">@lang('dashboard_refundclient.convert_matter_into_an_invoice')</h4>
                <form action="#" method="POST">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mt-4 mt-lg-0">
                                <h5 class="font-size-14 mb-4">
                                    @lang('dashboard_refundclient.choose_how_to_create_invoice')</h5>
                                <div class="custom-control custom-radio mb-2">
                                    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                                    <label class="custom-control-label" for="customRadio1"> $1410.00
                                        @lang('dashboard_refundclient.an_invoice_for_each_current_amount')</label>
                                </div>
                                <div class="custom-control custom-radio">
                                    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"
                                        checked>
                                    <label class="custom-control-label"
                                        for="customRadio2">@lang('dashboard_refundclient.invoice_for_each_order_separately')
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="text-right">
                                <button type="submit"
                                    class="btn btn-primary">@lang('dashboard_refundclient.execute')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Page-content -->
    @endsection
    
    @section('custom_script')
    <script>

        /* select the selected invoice id then trigger change  */
        $(document).ready(function (){
            $('.invoicesDropdown').change()
        })
        function invoiceNumberChanged(invoicesDropdown, allInvoices){
        

        /* get selected invoice data */
        let selectedInvoiceId = $(invoicesDropdown).val()
        let selectedInvoice = allInvoices.find(x=> x.id == selectedInvoiceId)
       // console.log("selectedInvoice: ", selectedInvoice);
        /* load clients Data */
        let invoiceId= selectedInvoice.id;
        let selectedClient= selectedInvoice.project_id;
        let email= selectedInvoice.email; // loaded automatically
        let invoiceDate= selectedInvoice.invoice_date;
        let invoiceNumber= selectedInvoice.number;
        let dueDate= selectedInvoice.due_date;

        let shippingDate= selectedInvoice.shipping_date;
        let paymentMethod = selectedInvoice.payment_method_id
        let status_id= selectedInvoice.status_id;

        /* invoice Total prices */
        let invoiceTotal = selectedInvoice.invoice_total


        /* Notes */
        let invoiceNotes = selectedInvoice.invoice_notes
        let statementNotes = selectedInvoice.statement_notes


        /* set the email */
        $('#clientEmail').val(email)
        $('.invoiceNotes').text(invoiceNotes)
        $('.statementNotes').text(statementNotes)

        
        /* choose client name */
        $('#invoice_id').val(invoiceId);
        $('#project_id').val(selectedClient).change();
        /* set invoice date */
        $('#invoiceDate').val(invoiceDate)
        /* set shipping date */
        $('#shippingDate').val(shippingDate)
        /* due date */
        $('#dueDate').val(dueDate)

        /* set invoice number */
        $('#invoiceNumber').val(invoiceNumber)
        /* choose payment method */
        $('#paymentMethod').val(paymentMethod).change()
        if (status_id == 1) {
            $('#status_id').hide();
            $('#paymentMethodDropdown').hide();
        }else{
            $('#status_id').show();
            $('#paymentMethodDropdown').show();

        }
        /* Get Product&Tax Data */
        let taxType = selectedInvoice.tax_type
        let taxesTotal= selectedInvoice.taxes_total
        $('#tax_type').val(taxType).change()
        $('#pricesTax').val(taxesTotal)

        
        /* get selected invoice all products */
        let invoiceProducts = $.merge( selectedInvoice.product, selectedInvoice.service)

        let invoiceProductsArray = []
        /* loop through the products then push data in invoiceProductsArray array */
        invoiceProducts.forEach(async (product, index)=> {
            let newProduct={}
            /* product data */
            /* product option value */
            let productId = product.id
            let productType = product.pivot.service_id != null ? 'service' : 'product'
            let productValue = productId+','+productType
            /* warehouse */
            let productWarehouse = product.pivot.warehouse_id
            /* quantity */
            let productQuantity =  product.pivot.quantity 
            /* price */
            let productPrice = product.pivot.price
            /* SKU */
            let productSku = product.sku
            /* tax */
            let productTax = product.pivot.tax_id
            /* description */
            let productDescription = product.description
            /* discount */
            let productDiscount = product.pivot.discount
            /* total */
            let productTotal = product.pivot.total
            /* filter */
            let productFilter = product.pivot.filter_id;

            /* Set data in the newProduct object */
            newProduct.value =  productValue
            newProduct.warehouse = productWarehouse
            newProduct.quantity = productQuantity
            newProduct.price = productPrice
            newProduct.sku = productSku
            newProduct.tax = productTax
            newProduct.description = productDescription
            newProduct.discount = productDiscount
            newProduct.total = productTotal
            newProduct.filter = productFilter

            /* push the product object to the array */
            invoiceProductsArray.push(newProduct)
        });
        /* delete rows */
        deleteAllRows()
        /* add new row */
        $('#addNewRow').click()
        /* load all invoiceProductsArray products data */
        loadInvoiceProducts(invoiceProductsArray)
    }

   async function loadInvoiceProducts(productsArray){
       /* loop through the array objects */
        for (let arrayIndex=0;arrayIndex<productsArray.length; arrayIndex++){
            /* check if there is another product to add new row */
            if (arrayIndex <productsArray.length -1){
                $('#addNewRow').click()
            }
            /* load each product in the equivilant row index */
            loadProductInRow(arrayIndex, productsArray[arrayIndex])
        }    
    }

   async function loadProductInRow(rowIndex ,product){
       // console.log("product: ", product);
       /* choose the product option value */
        await getProductsGroupDropdown(rowIndex , 'product').val(product.value).change()

        setTimeout(async () => {
            /* select the warehouse  */
            await getProductsGroupDropdown(rowIndex , 'warehouse_id').val(product.warehouse).change()            
        }, 400);
        setTimeout(async () => {
            /* select the tax value that enterend in the product invoice create */
            await getProductsGroupDropdown(rowIndex , 'taxes').val(product.tax).change()
        }, 500);
        setTimeout(async () => {
            /* set the quantity of the current product */
            await setProductQuantity(rowIndex , product.quantity)
            /* set the price */
            await setProductPrice(rowIndex , product.price)
            /* set the discount value */
            await getProductsGroupInput(rowIndex, 'product_discount').val(product.discount)
            /* set the total value of that product */
            await setProductTotal(rowIndex, product.total)
            /* choose the filter entered in the creation of that product */
            await getProductsGroupDropdown(rowIndex , 'filter_id').val(product.filter).change()
        }, 600);
    }

    function deleteButtonPressed(button){
        setTimeout(() => {
            /* recalculate the prices after deleting a product row */
            taxTotal()
        }, 600);
    }
    /* delete all current row before loading any product data */
    function deleteAllRows(){
        /* empty products rows */
        $('.deleteRow').each(function(){
            $(this).parents('.row').remove()
        })
    }
    </script>
    @endsection