@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content supplierPageContainer">
        <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_noticedebt.registering_debt_note')</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="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('dashboard_noticedebt.registering_debt_note') </h4>
                        <p class="card-title-desc">
                            @lang('dashboard_noticedebt.Please_follow_the_steps_below_to_register_debit_note')</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_noticedebt.resource_and_data')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link" data-toggle="tab" href="#accounts-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_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.noticedebt.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <!-- 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_noticedebt.supplier_name')</label>
                                                <select class="form-control select2" id="supplierName" 
                                                    onchange="showSupplierEmail(this,{{ $suppliers->toJson() }}, $('#supplierEmail'))" required
                                                        name="supplier_id"  style="width: 100%">
                                                        <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-lg-3">
                                            <div class="form-group">
                                                <label for="noticeDate">@lang('dashboard_noticedebt.notice_date')</label>
                                                <input name="notice_date" type="date" class="form-control" id="noticeDate" required
                                                    placeholder="@lang('dashboard_noticedebt.notice_date')">
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label
                                                    for="notificationnum">@lang('dashboard_noticedebt.notice_number')</label>
                                                <input name="notice_number" type="text" class="form-control"
                                                    id="notificationnum"
                                                    placeholder="@lang('dashboard_noticedebt.notice_number')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label
                                                    for="notificationaddress">@lang('dashboard_noticedebt.notice_title')</label>
                                                <input name="notice_title" type="text" class="form-control"
                                                    id="notificationddress"
                                                    placeholder="@lang('dashboard_noticedebt.notice_title')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="supplierEmail">@lang('dashboard_noticedebt.email') </label>
                                                <input name="email" type="email" class="form-control" id="supplierEmail"
                                                    placeholder="@lang('dashboard_noticedebt.email')">
                                            </div>
                                        </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>
                                    </p>
                                </div>
                                <div class="tab-pane" id="accounts-1" role="tabpanel">
                                    <p class="mb-0">
                                        <input type="hidden" name="invoice_type" value="account">
                                    <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->whereIn('account_type_id',[12,13]) 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"
                                                                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="0" max="99999999" step="any" 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" disabled
                                                                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="0" 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"
                                                                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"
                                                    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_noticedebt.notice_notes')</label>
                                                <textarea name="notice_notes" class="form-control" id="notes"
                                                    rows="3"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="receipt"> @lang('dashboard_noticedebt.account_statement_notes')
                                                </label>
                                                <textarea name="account_statement_notes" class="form-control" id="receipt"
                                                    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="file" 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 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>
                </form>

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


        @section('custom_script')
            <script>
                $(document).ready(function() {

                    /* select the null option when load the page */
                    if ($('.accountName').val() == null) {
                        $('.accountName').val($('.accountName').children(0).val())
                    }

                    if ($('.productTax').val() == null) {
                        $('.productTax').val($('.productTax').children(0).val())
                    }

                    /* Hide the discount row if the accountName value changes */
                    $('.accountName').change(function() {
                        if ($(this).val() != null) {
                            hideDiscountRow()
                        } else {
                            showDiscountRow()
                        }
                    })
                    /* Hide the discount row if the productDescription value changes */
                    $('.productDescription').change(function() {
                        if ($(this).val() != "") {
                            hideDiscountRow()
                        } else {
                            showDiscountRow()
                        }
                    })
                    /* Hide the discount row if the productPrice value changes */
                    $('.productPrice').change(function() {
                        if ($(this).val() != "") {
                            hideDiscountRow()
                        } else {
                            showDiscountRow()
                        }
                    })
                    /* Hide the discount row if the productTax value changes */
                    $('.productTax').change(function() {
                        if ($(this).val() != null) {
                            hideDiscountRow()
                        } else {
                            showDiscountRow()
                        }
                    })
                    /* Hide the discount row if the productTotal value changes */
                    $('.productTotal').change(function() {
                        if ($(this).val() != "") {
                            hideDiscountRow()
                        } else {
                            showDiscountRow()
                        }
                    })
                })
                /* Helping functions */
                /* hide discount row in the product&tax tab */
                function hideDiscountRow() {
                    $('.supplierDebtDiscountRowContainer').addClass('d-none')
                    /* disable the discount select and the input */
                    $('#discount_type').prop('disabled', true)
                    $('#discount_number').prop('disabled', true)
                }
                /* show discount row in the product&tax tab */
                function showDiscountRow() {
                    $('.supplierDebtDiscountRowContainer').removeClass('d-none')
                    /* disable the discount select and the input */
                    $('#discount_type').prop('disabled', false)
                    $('#discount_number').prop('disabled', false)
                }

            </script>
        @endsection