@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content supplierPageContainer editInvoiceSupplierPageContainer">
        <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_supplier_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 productsAllRequiredFieldsContainer mb-3 px-2 py-2">
                <div class="text-danger mx-4">
                    <div class="row d-flex flex-column">
                        <p class="text-danger mb-0">
                            @lang('dashboard_invoices.please_fill_all') : 
                        </p>
                        <div class="mt-1 mb-3 text-danger text-uppercase">
                            <b class="my-1">suppliers name , invoice date , invoice no. , due date, email , product /service  , sku  , quantity  , price  , warehouse
                            </b>
                        </div>
                        
                    </div>
                </div>
            </div>

            <div class="col-lg-12 d-none alert-danger accountsAllRequiredFieldsContainer mb-3 px-2 py-2">
                <div class="text-danger mx-4">
                    <div class="row d-flex flex-column">
                        <p class="text-danger mb-0">
                            @lang('dashboard_invoices.please_fill_all') : 
                        </p>
                        <div class="mt-1 mb-3 text-danger text-uppercase">
                            <b class="my-1">suppliers name , invoice date , invoice no. , due date, email , account name , amount 
                            </b>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <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 supplierInvoiceNumberDropdown"
                                name="invoice_number" style="width: 300px" required
                                onchange="supplierInvoiceChanged(this, {{ $invoices->toJson() }})"  >
                                <option disabled selected value="{{ null }}">
                                    @lang('dashboard_invoices.choose_invoice_number')
                                </option>
                                @foreach ($invoices->where('status_id',1) as $invoice)
                                    <option value="{{ $invoice->id }}" @if ($invoice->id == $id) selected
                                @endif>
                                {{ $invoice->number }}
                                </option>
                                @endforeach 
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('dashboard_invoices.edit_supplier_invoice')</h4>
                        <p class="card-title-desc">
                            @lang('dashboard_invoices.take_the_following_steps_to_edit_supplier_invoice')</p>
                        <!-- 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_refundsupplier.Resource_and_data')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light products-tab">
                                <a class="nav-link" data-toggle="tab" href="#products-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_service')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light accounts-tab">
                                <a class="nav-link" data-toggle="tab" href="#accounts-1" role="tab">
                                    <span class="d-block d-sm-none"><i class="mdi mdi-cash-usd-outline"></i></span>
                                    <span class="d-none d-sm-block">@lang('dashboard_addcashexpense.accounts')</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_addcashexpense.notes')</span>
                                </a>
                            </li>
                        </ul>
                        <form class="" action="{{ route('dashboard.suppliers.invoices.edit.invoice') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="invoice_id" id="invoice_id">
                            <input type="hidden" name="invoice_type" class="invoiceType" value="">
                            <!-- 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">@lang('dashboard_refundsupplier.supplier_name')</label>
                                                <select class="form-control select2 suppliersDropdown" 
                                                required
                                                        name="supplier_id"  style="width: 100%" 
                                                id="suppliersDropdown" onchange="showSupplierEmail(this,{{ $suppliers->toJson() }}, $('#supplierEmail'))">
                                                        <option disabled  selected>@lang('dashboard_payment.choose_supplier')</option>
                                                    @foreach ($suppliers as $supplier)
                                                        <option value="{{ $supplier->id }}" @if ($supplier->id == @$selectedSupplier->id) selected
                                                    @endif>{{ $supplier->company_name }}</option>
                                                    @endforeach 
                                                </select>
                                                
                                            </div>
                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_invoices.project_name')
                                                </label>
                                                <select class="form-control select2 projectsDropdown" style="width: 100%" name="project_id">
                                                    <option selected value="{{ null }}">@lang('dashboard_invoices.no_project')</option>
                                                    @foreach ($projects as $project)
                                                        <option value="{{ $project->id }}">{{ $project->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="invoiceDate">@lang('dashboard_invoices.invoice_date')</label>
                                                <input name="invoice_date" type="date" class="form-control" id="invoiceDate"
                                                    placeholder="@lang('dashboard_invoices.enter_invoice_date')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label
                                                    for="invoiceNumber">@lang('dashboard_refundsupplier.invoice_number')</label>
                                                <input name="invoice_number" type="text" class="form-control"
                                                    id="invoiceNumber" required
                                                    placeholder="@lang('dashboard_refundsupplier.invoice_number')">
                                            </div>
                                        </div>


                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="supplierEmail">@lang('dashboard_refundsupplier.email') </label>
                                                <input name="email" type="email" class="form-control" id="supplierEmail"
                                                    placeholder="@lang('dashboard_refundsupplier.email') ">
                                            </div>
                                        </div>
                                        {{-- <div class="col-lg-3">
                                            <div class="form-group">
                                                <label
                                                    class="control-label">@lang('dashboard_refundsupplier.push_to')</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">
                                                <label
                                                    class="control-label">@lang('dashboard_refundsupplier.payment_method')
                                                </label>
                                                <select name="payment_method_id" class="form-control select2"
                                                    style="width: 100%">
                                                    <option selected disabled value="{{ null }}">
                                                        @lang('dashboard_invoices.without')</option>
                                                    {{-- @foreach ($paymentMethods as $paymentMethod)
                                                        <option value="{{ $paymentMethod->id }}">
                                                            {{ $paymentMethod->name }}
                                                        </option>
                                                    @endforeach --}}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_vouchercash.filter')</label>
                                                <select class="form-control select2" id="invoiceFilter" 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>
                                    </p>
                                </div>
                            
                            <div class="tab-pane" id="products-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="col-12 repeater">
                                    <div class="card">
                                        <div class="card-body">
                                            <div data-repeater-list="products">
                                                <div data-repeater-item class="row">
                                                    <div class="form-group col-lg-3">
                                                        <label for="">@lang('dashboard_invoices.Product_or_service')</label>
                                                        <select class="form-control select2 supplierProductsDropdown"
                                                            style="width: 100%"
                                                            onchange="supplierProductChanged(this,'{{ route('dashboard.invoices.get.product') }}')"
                                                            id="" name="product_id">
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_invoices.Product_or_service')
                                                            </option>
                                                            @foreach ($products as $product)
                                                                <option value="{{ $product->id . ',' . $product->type }}">
                                                                    {{ $product->name . '(' . $product->type . ')' }}
                                                                </option>
                                                            @endforeach 
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="sku">@lang('dashboard_invoices.sku')</label>
                                                        <input type="text" name="sku" disabled id="sku"
                                                            class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label
                                                            for="productdesc">@lang('dashboard_invoices.product_description')</label>
                                                        <input type="text" disabled name="description" id="productdesc"
                                                            class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="qu">@lang('dashboard_invoices.quantity')</label>
                                                        <input type="number" min="1" name="quantity" disabled
                                                            onchange="quantityChanged(this)" id="qu" class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="price">@lang('dashboard_invoices.price') </label>
                                                        <input type="number" min="1" max="99999999" step="any" step="any" name="price"
                                                            onchange="supplierPriceChanged(this)" id="price"
                                                            class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2" hidden>
                                                        <label for="price">
                                                            @lang('dashboard_invoices.price_is_without_tax') </label>
                                                        <input type="number" min="1" max="99999999" step="any"name="price_out_of_tax" disabled
                                                            id="price" class="form-control" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label
                                                            for="product_total">@lang('dashboard_invoices.the_amount')</label>
                                                        <input type="number" min="1" step="any" max="99999999" disabled
                                                            name="total_price" id="product_total"
                                                            class="form-control product_total total" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="tax">@lang('dashboard_invoices.tax')</label>
                                                        <select class="form-control select2" oninput="taxChanged(this)"
                                                            style="width: 100%" name="product_tax">
                                                            <option selected value="{{ null }}">
                                                                @lang('dashboard_invoices.no_tax'){{ ' (' . '0' . ' ٪)' }}
                                                            </option>
                                                            @foreach ($taxes as $tax)
                                                                <option value="{{ $tax->id }}">
                                                                    {{ $tax->name . ' (' . $tax->percentage . ' ٪)' }}
                                                                </option>
                                                            @endforeach 
                                                            
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-3">
                                                        <label for="total">@lang('dashboard_invoices.warehouse')</label>
                                                        <select class="form-control select2 warehouseDropdown" name="warehouse_id"
                                                            style="width: 100%"
                                                            onchange="supplierProductWarehouseChanged(this)" required>
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_invoices.choose_warehouse')
                                                            </option>
                                                            @foreach ($warehouses as $warehouse)
                                                                <option value="{{ $warehouse->id }}">
                                                                    {{ $warehouse->name }}
                                                                </option>
                                                            @endforeach 
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-2">
                                                        <div class="form-group">
                                                            <label
                                                                class="control-label">@lang('dashboard_invoices.bear_to_client')</label>
                                                            <select class="form-control select2" style="width: 100%"
                                                                onchange="bearOnClientChanged(this)"
                                                                name="billable_product">
                                                                <option value="{{ null }}" selected>@lang("dashboard_invoices.choose_an_option")</option>
                                                                <option value="no">
                                                                    @lang('dashboard_invoices.not_bear')</option>
                                                                <option value="yes">@lang('dashboard_invoices.bear')
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 form-group" hidden>
                                                        <label
                                                            for="billable_percentage">@lang('dashboard_invoices.profit_ratio')</label>
                                                        <input type="number" min="1" max="99999999" step="any" class="form-control"
                                                            name="billable_product_percentage"
                                                            onchange="productProfitPercentageChanged(this)">
                                                    </div>
                                                    <div class="form-group col-lg-2" hidden>
                                                        <label for="qu">
                                                            @lang('dashboard_invoices.selling_price')</label>
                                                        <input type="number" min="1" max="99999999" step="any" id="qu"
                                                            name="selling_price" class="form-control"
                                                            onchange="productSellingPriceChanged(this)" />
                                                    </div>
                                                    <div class="col-md-3" hidden>
                                                        <div class="form-group">
                                                            <label class="control-label">
                                                                @lang('dashboard_invoices.client')</label>
                                                            <select class="form-control select2" style="width: 100%"
                                                                name="product_service_client_id"
                                                                onchange="productClientChanged(this)">
                                                                <option selected disabled value="{{ null }}">
                                                                    @lang('dashboard_invoices.choose_client_name')
                                                                </option>
                                                                @foreach ($clients as $client)
                                                                    <option value="{{ $client->id }}">
                                                                        {{ $client->name }}
                                                                    </option>
                                                                @endforeach 
                                                                
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                    </div>
                                                    <div class="col-lg-2 align-self-center">
                                                        <button type="button" data-repeater-delete class="btn btn-primary deleteProductsRow"
                                                            aria-label="Profile">
                                                            <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"
                                                    value="@lang('dashboard_invoices.add')"
                                                    onclick="supplierAddButtonPressed()" />
                                                    
                                            </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  d-none" id="addProductsNewRow"
                                            value="@lang('dashboard_invoices.add')" onclick="supplierAddButtonPressed()" />
                                        <button id="AddTotalButton" type="button" class="btn btn-success  mx-1  d-none"
                                            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 class="table-responsive mb-0" data-pattern="priority-columns">
                                        <table id="tech-companies-1" class="table table-striped">
                                            <tbody>
                                                <tr hidden>
                                                    <td colspan="2" class="text-right">
                                                        @lang('dashboard_invoices.total_sum')</td>
                                                    <td class="text-right">$ <p id="amount_added_total_p"
                                                            style="display: inline">0</p>
                                                    </td>
                                                    <input type="hidden" name="amount_added_total">
                                                </tr>
                                                <tr>
                                                    <td colspan="2" class="text-right">
                                                        <label
                                                            class="control-label">@lang('dashboard_addcashexpense.amounts')
                                                        </label>
                                                    </td>
                                                    <td class="border-0 text-right">
                                                        <div class="d-flex justify-content-start align-items-center">
                                                            <select class="form-control select2" onchange="taxTypeChanged()"
                                                                name="tax_type" style="width: 200px" required id="tax_type">
                                                                <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="supplierPricesTax" readonly 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">$<p id="products_total_p" style="display: inline">0
                                                            </p>
                                                        </h4>
                                                        <input type="hidden" name="products_total" id="products_total">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                                </p>
                            </div>
                            <div class="tab-pane" id="accounts-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="col-12">
                                    <div class="card repeater">
                                        <div class="card-body ">
                                            <div data-repeater-list="account">
                                                <div data-repeater-item class="row">
                                                    <div class="form-group col-lg-3">
                                                        <label
                                                            for="account">@lang('dashboard_addcashexpense.account_name')</label>
                                                        <select class="form-control select2 supplierAccountsDropdown"
                                                            name="account_name" style="width: 100%" required
                                                            onchange="accountChanged(this)">
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_addcashexpense.choose_account')
                                                            </option>
                                                            @foreach ($accounts as $account)
                                                                <option value="{{ $account->id }}">{{ $account->name }}
                                                                </option>
                                                            @endforeach 
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-lg-3">
                                                        <label
                                                            for="desc">@lang('dashboard_addcashexpense.description')</label>
                                                        <input type="product" name="account_description" id="desc" disabled
                                                            class="form-control" onchange="descriptionChanged(this)" />
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="money">@lang('dashboard_addcashexpense.money')</label>
                                                        <input type="number" min="1" max="99999999" step="any" name="account_amount" id="money"
                                                            class="form-control account_amount" required
                                                            onchange="supplierAmountChanged(this)" />
                                                    </div>
                                                    <div hidden class="form-group col-lg-2">
                                                        <label
                                                            for="">@lang('dashboard_invoices.price_is_without_tax')</label>
                                                        <input type="number" min="1" max="99999999" step="any" class="form-control" disabled name="price_out_of_tax">
                                                    </div>
                                                    <div class="form-group col-lg-2">
                                                        <label for="tax">@lang('dashboard_invoices.tax')</label>
                                                        <select class="form-control select2"
                                                            onchange="accountTaxChanged(this)" name="account_tax"
                                                            style="width: 100%">
                                                            <option selected value="{{ null }}">
                                                                @lang('dashboard_invoices.no_tax'){{ ' (' . '0' . ' ٪)' }}
                                                            </option>
                                                            @foreach ($taxes as $tax)
                                                                <option value="{{ $tax->id }}">
                                                                    {{ $tax->name . '( ' . $tax->percentage . ' )' }}
                                                                </option>
                                                            @endforeach 
                                                            
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <label
                                                                class="control-label">@lang('dashboard_invoices.bear_to_client')
                                                            </label>
                                                            <select class="form-control select2" style="width: 100%"
                                                                onchange="billableAccountChanged(this)"
                                                                name="billable_account">
                                                                <option value="{{ null }}" selected>@lang("dashboard_invoices.choose_an_option")</option>
                                                                <option value="no">
                                                                    @lang('dashboard_invoices.not_bear')</option>
                                                                <option value="yes"> @lang('dashboard_invoices.bear')
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group col-md-2" hidden>
                                                        <label for=""
                                                            class="form-label">@lang('dashboard_invoices.profit_ratio')</label>
                                                        <input type="number" min="1" max="99999999" step="any" name="billable_account_percentage"
                                                            class="form-control">
                                                    </div>
                                                    <div class="form-group col-md-2" hidden>
                                                        <label for=""
                                                            class="form-label">@lang('dashboard_invoices.selling_price')</label>
                                                        <input type="text" name="selling_price" class="form-control"
                                                            onchange="sellingPricechanged(this)">
                                                    </div>
                                                    <div class="col-md-2" hidden>
                                                        <div class="form-group">
                                                            <label class="control-label">
                                                                @lang('dashboard_invoices.client') </label>
                                                            <select class="form-control select2" style="width: 100%"
                                                                name="accounts_client_id" onchange="clientchanged(this)">
                                                                <option selected disabled value="{{ null }}">
                                                                    @lang('dashboard_invoices.client')</option>
                                                                @foreach ($clients as $client)
                                                                    <option value="{{ $client->id }}">
                                                                        {{ $client->name }}
                                                                    </option>
                                                                @endforeach
                                                                
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-2 align-self-center">
                                                        <button type="button" data-repeater-delete class="btn btn-primary deleteAccountsRow"
                                                            aria-label="Profile">
                                                            <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>
                                            <input data-repeater-create type="button" onclick="addAccountClicked()"
                                                class="btn btn-success mt-3 mt-lg-0" id="addAccountsNewRow"
                                                value="@lang('dashboard_invoices.add')" />
                                        </div>
                                    </div>
                                    <div class="table-responsive mb-0" data-pattern="priority-columns">
                                        <table id="tech-companies-1" class="table table-striped">
                                            <tbody>
                                                <input type="hidden" name="account_amount_total" id="account_amount_total">
                                                <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">$<p id="account_amount_total_p"
                                                                style="display: inline"> 0 </p>
                                                        </h4>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </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_invoices.invoice_notes')</label>
                                            <textarea name="invoice_notes" class="form-control" id="invoiceNotes"
                                                rows="3"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="notes">@lang('dashboard_refundsupplier.recovery_notes')</label>
                                            <textarea name="return_notes" class="form-control" id="refundNotes"
                                                rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label
                                                for="accoutnote">@lang('dashboard_refundsupplier.account_statement_notes')
                                            </label>
                                            <textarea name="account_notes" class="form-control" id="accountNotes"
                                                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 name="attachment" type="file" class="custom-file-input"
                                                    id="customFile">
                                                <label class="custom-file-label"
                                                    for="customFile">@lang('dashboard_invoices.import_file')</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">@lang('dashboard_invoices.quick_view_of_billing_information')</h4>
                </div>
                <div class="col-lg-3">
                    <div class="form-group">
                        <label for="total_balance_p"> @lang('dashboard_invoices.due_balance')</label>
                        <h1 id="">
                            <p id="total_balance_p" style="display: inline">0</p>$
                        </h1>
                        <input type="hidden" id="total_balance" name="total_balance">
                    </div>
                </div>
                <div class="col-lg-12 my-2">
                    <button type="submit" name="input_type" value="save" class="btn btn-info " id="supplierSave"
                        aria-label="save">
                        @lang('dashboard_invoices.save')<i class="mdi mdi-content-save-alert"></i>
                    </button>
                    <button type="submit" class="btn btn-success" id="supplierSaveAndSend" 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="supplierPreviewAndPrint">
                        @lang('dashboard_invoices.preview_and_print') <i class="mdi mdi-printer-check"></i>
                    </button>
                </div>
                </form>
            </div>
        </div>

        <!-- End Page-content -->
    @endsection


    @section('custom_script')
    <script>

        $(document).ready(function(){
            $('.supplierInvoiceNumberDropdown').change()
        })
        
function supplierInvoiceChanged(invoicesDropdown, allInvoices){
        

        // console.log("Invoice Val: ",$(invoicesDropdown).val());
         if ($(invoicesDropdown).val() == null) return

         /* get selected invoice data */
             let selectedInvoiceId = $(invoicesDropdown).val()
             let selectedInvoice = allInvoices.find(x=> x.id == selectedInvoiceId)
     
           //  console.log("selectedInvoice: ", selectedInvoice);
            // console.log("selectedInvoice: ", selectedInvoice);
             /* load clients Data */
             let invoiceId= selectedInvoice.id;
             let selectedSupplier= selectedInvoice.supplier_id;
             let selectedProject= selectedInvoice.project_id;

             let email= selectedInvoice.email; // loaded automatically
             let invoiceDate= selectedInvoice.invoice_date;
             let invoiceNumber= selectedInvoice.number;
             let shippingDate= selectedInvoice.shipping_date;
             let paymentMethod = selectedInvoice.payment_method_id
             let status_id = selectedInvoice.status_id;
             let deposit = selectedInvoice.deposit;
     
             /* invoice Total prices */
             let invoiceTotal = selectedInvoice.invoice_total
     
     
     
             /* Notes */
             let invoiceNotes = selectedInvoice.invoice_note
             let statementNotes = selectedInvoice.statement_notes
     
             /* set the email */
             $('#supplierEmail').val(email)
        
            $('#invoiceNotes').text(invoiceNotes)


             $('.statementNotes').text(statementNotes)
     
             /* choose client name */
             $('#invoice_id').val(invoiceId);
             $('.suppliersDropdown').val(selectedSupplier).change();
             $('.projectsDropdown').val(selectedProject).change();

             /* set invoice date */
             $('#invoiceDate').val(invoiceDate)
             /* set shipping date */
             $('#shippingDate').val(shippingDate)
             /* set invoice number */
             $('#invoiceNumber').val(invoiceNumber)
             /* choose payment method */
             $('#paymentMethod').val(paymentMethod).change()
             if (deposit > 0) {
                 $('#account').show();
             }else{
                 $('#account').hide();
             }
             $('#status_id').val(status_id)
             /* Get Product&Tax Data */
             let taxType = selectedInvoice.tax_type
             let taxesTotal= selectedInvoice.taxes_total
             $('#tax_type').val(taxType).change()
             $('#pricesTax').val(taxesTotal)
     
             /* filter */
             let invoiceFilter = selectedInvoice.filter_id;
             $('#invoiceFilter').val(invoiceFilter).change()
             /* get selected invoice all products */
             let invoiceProducts = $.merge( selectedInvoice.product, selectedInvoice.service)
             let invoiceAccounts =  selectedInvoice.account
     
             let invoiceProductsArray = []
             let invoiceAccountsArray = []
     
             let isInvoiceOfProducts;
             /* check if this invoice is for products or accounts */
             if (invoiceProducts.length > 0 ){
                 isInvoiceOfProducts = true
             }
     
             if (isInvoiceOfProducts){
                 hideAccountsTab()
                 showProductsTab()
             /* loop through the products then push data in invoiceProductsArray array */
             invoiceProducts.forEach(async (product, index)=> {
                 console.log("product: ", product);
                // console.log("Products Index:", 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
               //  console.log("productWarehouse: ",productWarehouse);
                 /* quantity */
                 let productQuantity =  product.pivot.quantity 
                 /* price */
                 let productPrice = product.pivot.purchase_price
                 /* SKU */
                 let productSku = product.sku
                 /* tax */
                 let productTax = product.pivot.tax_id
                 /* description */
                 let productDescription = product.description
                 
                 /* total */
                 let productTotal = product.pivot.total
                 
     
                 let productBillable = product.pivot.billable 
     
                 let productProfit = product.pivot.profit_ratio 
                 let productSellingPrice = product.pivot.selling_price
                 let productCientId = product.pivot.client_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.total = productTotal
                 newProduct.billable = productBillable
                 // newProduct.filter = productFilter
                 newProduct.profit = productProfit
                 newProduct.sellingPrice = productSellingPrice
                 newProduct.clientId = productCientId
     
     
                 /* push the product object to the array */
                 invoiceProductsArray.push(newProduct)
             });
             /* delete rows */
             deleteAllProductsRows()
             /* add new row */
             $('#addProductsNewRow').click()
             /* load all invoiceProductsArray products data */
             loadSupplierInvoiceProducts(invoiceProductsArray)
         }
             else {
                 hideProductsTab()
                 showAccountsTab()
     
                 /* invoice of accounts */
                 invoiceAccounts.forEach(async (account, index) => {
                    // console.log("account: ",account);
                 let newAccount={}
                 /* account data */
                 /* account option value */
                 let accountId = account.accounts_tree_id
                 let accountBillable = account.billable
                 let accountDescription = account.description
                 let accountProfitRation = account.profit_ratio
                 let accountTax = account.tax_id
                 let accountTotal = account.total
     
                 newAccount.id = accountId
                 newAccount.billable = accountBillable
                 newAccount.description = accountDescription
                 newAccount.profit = accountProfitRation
                 newAccount.tax = accountTax
                 newAccount.total = accountTotal
                
                // console.log("newAccount: ", newAccount);
     
                 /* push the account object to the array */
                 invoiceAccountsArray.push(newAccount)
                 });
     
     
                 /* delete rows */
                 deleteAllAccountsRows()
                 /* add new row */
                 $('#addAccountsNewRow').click()
                 /* load all invoiceProductsArray products data */
                 loadSupplierInvoiceAccounts(invoiceAccountsArray)
             }
         }
     
        async function loadSupplierInvoiceProducts(productsArray){
            /* loop through the array objects */
             await loadSupplierInvoiceRows(productsArray.length)
         for (let arrayIndex=0;arrayIndex<productsArray.length; arrayIndex++){
             await loadSupplierProductInRow(arrayIndex, productsArray[arrayIndex])
                
         }
         resetSupplierTotal()
         calculateProductsTotal()
         enableLastProductDropdown()
     }
     
        async function loadSupplierInvoiceAccounts(accountsArray){
            /* loop through the array objects */
             await loadSupplierInvoiceAccountsRows(accountsArray.length)
         for (let arrayIndex=0;arrayIndex<accountsArray.length; arrayIndex++){
             await loadSupplierAccountInRow(arrayIndex, accountsArray[arrayIndex])
         }
         resetSupplierTotal()
     
         sumAllAccountsAmounts()
     
         
     }
     
     function loadSupplierInvoiceRows(rowsCount){
         /* loop through the array objects */
         for (let arrayIndex=0;arrayIndex<rowsCount-1; arrayIndex++){       
             $('#addProductsNewRow').click()
         }    
     }
     function loadSupplierInvoiceAccountsRows(rowsCount){
         /* loop through the array objects */
         for (let arrayIndex=0;arrayIndex<rowsCount-1; arrayIndex++){       
             $('#addAccountsNewRow').click()
         }    
     }
     
        async function loadSupplierProductInRow(rowIndex ,product){
            // console.log("product: ", product);
            /* choose the product option value */
             await getSupplierProductsGroupDropdown(rowIndex , 'product_id').val(product.value).change()
             
                 
                 setTimeout(async () => {
                     /* select the warehouse  */
                     await getSupplierProductsGroupDropdown(rowIndex , 'warehouse_id').val(product.warehouse).change()            
             }, 500);
             setTimeout(async () => {
                 /* select the tax value that enterend in the product invoice create */
                 await getSupplierProductsGroupDropdown(rowIndex , 'product_tax').val(product.tax).change()
             }, 600);
             setTimeout(async () => {
                 /* set the quantity of the current product */
                 await setSupplierProductQuantity(rowIndex , product.quantity)
                 /* set the price */
                 await setSupplierProductPrice(rowIndex , product.price)
                 /* set the description */
                 await setSupplierProductDescription(rowIndex , product.description)
                 
                 /* set the total value of that product */
                 await setSupplierProductTotal(rowIndex, product.total)
     
                 /* billable */
                 await getSupplierProductsGroupDropdown(rowIndex ,'billable_product').val(product.billable).change()
                 /* profit % */
                 await getSupplierProductsGroupInput(rowIndex ,'billable_product_percentage').val(product.profit).change()
                 
                 /* selling price */
                 //await getSupplierProductsGroupInput(rowIndex ,'selling_price').val(product.sellingPrice)
                 /* client id */
                 await getSupplierProductsGroupDropdown(rowIndex ,'product_service_client_id')
                 .val(product.clientId).change()
                 
     
                 /* choose the filter entered in the creation of that product */
                 await getSupplierProductsGroupDropdown(rowIndex , 'filter_id').val(product.filter).change()
            
                 await getSupplierProductsGroupInput(rowIndex ,'quantity').change()
             }, 700);
        
     }
     
     
         function loadSupplierAccountInRow(rowIndex ,account){
             
             getSupplierAccountsGroupDropdown(rowIndex , 'account_name').val(account.id).change()
             getSupplierAccountsGroupInput(rowIndex , 'account_description').val(account.description)
             getSupplierAccountsGroupInput(rowIndex , 'account_amount').val(account.total)
             getSupplierAccountsGroupDropdown(rowIndex , 'account_tax').val(account.tax).change()
             getSupplierAccountsGroupDropdown(rowIndex , 'billable_account').val(account.billable).change()
             getSupplierAccountsGroupInput(rowIndex , 'billable_account_percentage').val(account.profit)
         }
     
         function deleteButtonPressed(button){
             setTimeout(() => {
                 /* recalculate the prices after deleting a product row */
                 taxTypeChanged()
             }, 700);
         }
         /* delete all current row before loading any product data */
         function deleteAllProductsRows(){
             /* empty products rows */
             $('.deleteProductsRow').each(function(){
                 $(this).parents('.row').remove()
             })
         }
     
         function deleteAllAccountsRows(){
             /* empty products rows */
             $('.deleteAccountsRow').each(function(){
                 $(this).parents('.row').remove()
             })
         }
     
     
         function refundSupplierDisableProductsEdit(){
             setTimeout(() => {
                 $('.supplierProductsDropdown').each(function(index, dropdown){
                     $(dropdown).attr('disabled', true)
                 })
             }, 600);
         }
         </script>
         @endsection