@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content supplierAdvancePaymentContainer 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_payment.submit_an_advance_payment')</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 supplierAllRequiredFieldsContainer 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 , amount 
                            </b>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('dashboard_payment.submit_an_advance_payment') </h4>
                        <p class="card-title-desc">
                            @lang('dashboard_payment.please_take_following_steps_to_submit_an_advance_payment') </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_buyorder.resource_and_data')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link" data-toggle="tab" href="#profile-1" role="tab">
                                    <span class="d-block d-sm-none"><i class="mdi mdi-basket-outline"></i></span>
                                    <span class="d-none d-sm-block">@lang('dashboard_buyorder.amounts')</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="repeater" action="{{ route('dashboard.suppliers.advance.payment.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-lg-3">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_buyorder.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 @if ($selectedSupplier == null) selected
                                                    @endisset>@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="invoicenum">@lang('dashboard_invoices.email')</label>
                                            <input type="email" name="email" id="supplierEmail" value="{{ @$selectedSupplier->email }}"
                                                id="data_email" class="form-control" id="invoicenum"
                                                placeholder="@lang('dashboard_invoices.email')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="invoicenum">@lang('dashboard_payment.batch_number')</label>
                                            <input type="text" name="advance_number" class="form-control" required
                                                id="invoicenum" placeholder="@lang('dashboard_payment.batch_number')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="invoiceDate">@lang('dashboard_payment.date_of_batch')</label>
                                            <input type="date" name="advance_date" required class="form-control"
                                                id="invoiceDate" placeholder="@lang('dashboard_payment.date_of_batch')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="shippingDate">@lang('dashboard_invoices.shipping_date')</label>
                                            <input type="date" name="shipping_date" class="form-control"
                                                id="shippingDate" placeholder="@lang('dashboard_invoices.shipping_date')">
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="dueDate">@lang('dashboard_invoices.due_date')</label>
                                            <input type="date" name="due_date" class="form-control"
                                                id="dueDate" placeholder="@lang('dashboard_invoices.due_date')">
                                        </div>
                                    </div>
                                    <div class="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.filter')</option>
                                                @foreach ($filters as $filter)
                                                    <option value="{{ $filter->id }}">{{ $filter->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label
                                                for="shipaddress">@lang('dashboard_invoices.shipping_address')</label>
                                            <textarea class="form-control" name="shipping_address"
                                                id="shipaddress" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label for="shipaddress">@lang('dashboard_invoices.sending_address')</label>
                                            <textarea class="form-control" name="sending_address"
                                                id="shipaddress" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                </p>
                            </div>
                            <div class="tab-pane" id="profile-1" role="tabpanel">
                                <p class="mb-0">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div data-repeater-list="prices">
                                                <div data-repeater-item class="row">
                                                    <div class="d-flex custify-content-between" style="width: 100%">

                                                        <div class="form-group col-lg-4 align-self-center">
                                                            <label
                                                                for="productdesc">@lang('dashboard_payment.description')
                                                            </label>
                                                            <input type="product" name="description"
                                                                id="productdesc" class="form-control" />
                                                        </div>
                                                        <div class="form-group  col-lg-4 align-self-center">
                                                            <label for="total"
                                                                class="form-label">@lang('dashboard_payment.total')</label>
                                                            <input type="number" min="1" step="any" required name="advance_single_total"
                                                            onchange="sumAdvancePaymentTotals()"
                                                                class="form-control advance_single_total" id="total" />
                                                        </div>

                                                        <div class="col-lg-2 align-self-center mt-3">
                                                            <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>
                                                    </div>
                                                </div>
                                            </div>
                                            <input data-repeater-create type="button"
                                                class="btn btn-success mt-3 mt-lg-0" onclick="addBtn()"
                                                value="@lang('dashboard_payment.add')" />
                                        </div>
                                    </div>
                                    <div class="table-responsive mb-0" data-pattern="priority-columns">
                                        <table id="tech-companies-1" class="table table-striped">
                                            <tbody>
                                                {{-- <tr>
                                                    <td colspan="2" class="text-right">
                                                        @lang('dashboard_invoices.total_sum')</td>
                                                    <td class="text-right">$ <p id="total_before_tax_p"> 1397.00 </p>
                                                    </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="">$<p id="total_p" style="display: inline">0</p>
                                                        </h4>
                                                        <input type="hidden" name="total_advance" id="total_advance">
                                                        <input type="hidden" name="remaining" id="remaining">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    {{-- <div class="col-lg-6">
                                        <button type="button" class="btn btn-danger " aria-label="deleteall">
                                            مسح الكل
                                        </button> <button type="button" class="btn btn-success " aria-label="alltotal">
                                            اضافة اجمالى </button>
                                    </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="invoicenotes">@lang('dashboard_regcheck.Batch_notes') </label>
                                            <textarea class="form-control" name="advance_notes"
                                                id="invoicenotes" rows="3"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label class="control-label">@lang('dashboard_invoices.upload_file')
                                            </label>
                                            <div class="custom-file">
                                                <input type="file" name="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_payment.quick_view_of_batch_information')</h4>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="total">@lang('dashboard_invoices.total')</label>
                            <h1 id="">
                                <p id="total_id" style="display: inline"> 0</p>$
                            </h1>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="balancedue">@lang('dashboard_invoices.due_balance')</label>
                            <h1>
                                <p id="balancedue" style="display: inline"> 0</p>$
                            </h1>
                        </div>
                    </div>
                   
                    <div class="col-lg-12">
                        <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>
                        
                        {{-- <a class="popup-form" href="#adddeposit"><button type="button" class="btn btn-primary "
                        aria-label="zeonvalue">
                        @lang('dashboard_payment.batch_registration') <i class="mdi mdi-plus-thick"></i>
                        </i></button></a> --}}
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="card mfp-hide mfp-popup-form mx-auto" id="adddeposit">
            <div class="card-body">
                <h4 class="mt-0 mb-4">@lang('dashboard_payment.batch_recording')</h4>
                <form class="" action="{{ route('dashboard.suppliers.advance.payment.assign.invoice') }}"
                    method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">@lang('dashboard_buyorder.supplier_name')</label>
                                <select class="form-control select2" onchange="selectedSupplierChanged(this)"
                                    id="invoice_supplier" name="supplier_id"  style="width: 100%" required>
                                    <option disabled selected value="{{ null }}">@lang('dashboard_payment.choose_supplier')</option>
                                    @foreach ($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}">{{ $supplier->company_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="depositdate">@lang('dashboard_payment.batch_number')</label>
                                <input type="text" class="form-control" name="advancenumber" id="depositdate"
                                    placeholder="@lang('dashboard_payment.batch_number')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="batchDate">@lang('dashboard_payment.date_of_batch')</label>
                            <input type="date" class="form-control" id="batchDate" name="advancedate"
                                placeholder="@lang('dashboard_payment.date_of_batch')">
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group mb-0">
                                <label for="depositdate">@lang('dashboard_payment.amount')</label>
                                <input type="text" class="form-control" name="advanceamount" id="depositdate"
                                    placeholder=" @lang('dashboard_payment.amount')">
                                <p class="mt-2 mb-0"
                                    style="color: red;font-size: 12px;line-height: 15px;">@lang('dashboard_payment.please_enter_desired_amount_to_complete_process')</p>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">@lang('dashboard_payment.payment_method') </label>
                                <select class="form-control select2" name="payment_method">
                                    <option value="AK">paypal</option>
                                    <option value="HI">creditcard</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="control-label">@lang('dashboard_invoices.deposit_in') </label>
                                <select class="form-control select2" name="insert_in" required>
                                    <option value="AK">cib bank</option>
                                    <option value="HI">cairo bank</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="repeater">

                    <div data-repeater-list="moves">
                        <div data-repeater-item class="row">
                            {{-- <div class="row"> --}}
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label class="control-label">@lang('dashboard_invoices.invoice_number') </label>
                                        <select class="form-control select2 invoices" name="invoice_number"  style="width: 100%">
                                            <option selected disabled value="{{ null }}">@lang('dashboard_invoices.invoice_number') </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="addDepositInvoicedate">@lang('dashboard_invoices.invoice_date')</label>
                                        <input type="date" disabled class="form-control" id="addDepositInvoicedate"
                                            placeholder="@lang('dashboard_invoices.invoice_date')" name="invoice_date">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="invoiceamount">@lang('dashboard_payment.amount_of_invoice')</label>
                                        <input type="text" name="invoice_total" disabled class="form-control"
                                            id="invoiceamount"
                                            placeholder="@lang('dashboard_payment.enter') @lang('dashboard_payment.amount_of_invoice')"
                                            name="invoice_balance">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="invoicebalance">@lang('dashboard_payment.invoice_balance')</label>
                                        <input type="text" name="balance_due" disabled class="form-control"
                                            id="invoicebalance"
                                            placeholder="@lang('dashboard_payment.enter') @lang('dashboard_payment.invoice_balance')"
                                            name="invoice_balance_due">
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="form-group">
                                        <label for="amountadded">@lang('dashboard_payment.amount_added')</label>
                                        <input type="text" class="form-control amountadded" disabled name="amount"
                                            id="amountadded" required
                                            placeholder="@lang('dashboard_payment.enter') @lang('dashboard_payment.amount_added') ">
                                    </div>
                                </div>
                                {{--
                            </div> --}}
                            <div class="col-lg-1 align-self-center">
                                <input data-repeater-delete type="button" class="btn btn-primary btn-block"
                                    value="@lang('buttons.delete')" onblur="removeDepositRow()" />
                            </div>
                        </div>
                    </div>
                    <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" id="add_button"
                        onclick="addNewDepositRow()" value="@lang('buttons.add')" />
                    
                    </div>
                    
                        <div class="row mt-2">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="notes">@lang('dashboard_invoices.notes') </label>
                                <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">@lang('dashboard_invoices.upload_file') </label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" name="attchment" id="customFile">
                                    <label class="custom-file-label"
                                        for="customFile">@lang('dashboard_invoices.import_file')</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <b>Remain : </b>
                        <p id="remain"></p>
                        <b>Total : </b>
                        <p id="total_to_confirm"></p>
                    </div>
                    <div class="row ml-1">
                        <h5 style="color:red">@lang('dashboard_regcheck.any_tax_added_to_quotation_will_be_canceled')
                        </h5>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="text-right">
                                <button type="submit" class="btn btn-primary" id="submit_modale"
                                    disabled>@lang('dashboard_regcheck.execute')</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Page-content -->
@endsection
@section('custom_script')
<script>

function sumAdvancePaymentTotals() {
        setTimeout(() => {
            var length = $(".advance_single_total").length;
            let amount =0;
            
            for (var it = 0; it < length; it++) {
                var val = $("input[name='prices[" + it + "][advance_single_total]']").val();
                if (val > 0) {val = parseFloat(val);}
                else {val = 0;}
                amount += val;
            }
        if (parseFloat(amount) <= 0) {
            disableSupplierSaveButtons()
        } else {
            enableSupplierSaveButtons()
        }
            $("#total_p").html(amount);
            $("#total_id").html(amount);
            $("#balancedue").html(amount);
            $("#total_advance").val(amount);
            $("#remaining").val(amount);
            
        }, 400);
    }

    function addBtn() {
        /* Salah */
        supplierAddButtonPressed() // fix select2 style
    }
    


    /********************
     * Add Deposit Modal
     ********************/
    function addNewDepositRow() {
        /* Salah */
        supplierAddButtonPressed() // fix select2 style

        setTimeout(function() {
            var supplier = $("#invoice_supplier")[0];
            selectedSupplierChanged(supplier);
            setTimeout(function() {
                $(".select2").select2({
                   // placeholder: "Select",
                    allowClear: true
                });
            }, 100);
            calculateAddDepositAmounts();
        }, 1000);
    }

    function removeDepositRow() {
        setTimeout(() => {
            //     var supplier = $("#invoice_supplier")[0];
            // selectedSupplierChanged(supplier);
            calculateAddDepositAmounts();
        }, 1000);
    }

    function selectedSupplierChanged(supplier) {
        $.ajax({
            url: "{{ route('dashboard.suppliers.advance.payment.get.invoices') }}",
            method: 'get',
            data: {
                id: supplier.value,
            },
            success: function(data) {
                console.log(data);
                var length = $(".invoices").length;
                for (var i = 0; i < length; i++) {
                    $('.invoices').each(function() {
                        // console.log($(this).val());
                        if ($(this).val() < 0 || $("#invoice_supplier").bind('change', () => {})) {
                            $(this).html(
                                "<option disabled selected>Select Invoice Number </option> ");
                        }
                    });
                    for (var it = 0; it < data.length; it++) {
                        $('.invoices').each(function() {
                            // console.log($(this).val());
                            if ($(this).val() < 1 || $("#invoice_supplier").bind('change',
                                    () => {})) {
                                $(this).append(
                                    "<option value='" + data[it].id + "'>" + data[it]
                                    .invoice_number + "</option>"
                                );
                            }
                            $(this).bind('change', () => {
                                var object = data.find(x => x.id == $(this).val());
                                var index = $(this).attr('name').split('[invoice_number]')[0];
                                // console.log(object);
                                if (object) {
                                    setTimeout(() => {
                                        $("input[name='" + index +
                                            "[invoice_date]']").val(object
                                            .invoice_date);
                                        $("input[name='" + index +
                                            "[invoice_total]']").val(object
                                            .total);
                                        $("input[name='" + index +
                                            "[balance_due]']").val(object
                                            .balance_due);
                                    }, 400);
                                } else {
                                    $("input[name='" + index + "[invoice_total]']").val("");
                                    $("input[name='" + index + "[invoice_date]']")
                                        .removeAttr('disabled').val('mm /dd /yyyy').attr(
                                            'disabled', true);
                                    $("input[name='" + index + "[balance_due]']").val("");
                                }
                            }).trigger('change');
                        });
                    }
                }
            }
        });

        $("input[name='advanceamount']").bind('change', function() {
            if ($(this).val() > 0) {
                $('.amountadded').removeAttr('disabled');
            } else {
                $('.amountadded').attr('disabled', true);
            }
            calculateAddDepositAmounts();
        }).trigger('change');
        
    }
    
    function calculateAddDepositAmounts() {
        $('.amountadded').bind('change', () => {
            var amount = 0;
            for (var i = 0; i < $('.amountadded').length; i++) {
                amount += parseFloat(($(".amountadded")[i]).value);
            }
            var advanceval = $("input[name='advanceamount']").val();
            // console.log(advanceval);
            if (amount == advanceval) {
                $("#submit_modale").removeAttr('disabled');
                $("#total_to_confirm").html(advanceval);
                $("#remain").html(advanceval - amount).css('color', 'green');
            } else {
                $('#submit_modale').attr('disabled', true);
                $("#total_to_confirm").html(advanceval);
                $("#remain").html(advanceval - amount).css('color', 'red');
            }
        });
    }
    

 /*************************
 * XX Add Deposit Modal XX
 *************************/
    

</script>
@endsection