@extends('dashboard.components.main')
@section('content')
    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content advancePaymentContainer">
            <!-- 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 allRequiredFieldsContainer mb-3 px-2 py-2">
                <div class="text-danger mx-4">
                    <div class="row">
                        <p class="text-danger mb-0">
                            @lang('dashboard_invoices.please_fill_all') : 
                        </p>
                        <br> 
                        <div class="mt-1 mb-3 text-danger">
                            <b class="my-1"> Client Name , Email , Batch Number , Date of Batch , Shipping Date , Due Date , Filter , Shipping Address , Sending Address , 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_the_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_invoices.customer_and_data')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link" data-toggle="tab" href="#profile-1" role="tab">
                                    <span class="d-block d-sm-none"><i class="mdi mdi-basket-outline"></i></span>
                                    <span class="d-none d-sm-block">@lang('dashboard_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_invoices.notes')</span>
                                </a>
                            </li>
                        </ul>
                        <form action="{{ route('dashboard.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  col-lg-12">@lang('dashboard_invoices.client_name')
                                                </label>
                                                <select class="form-control select2 col-lg-12" id="clientName"
                                                    required name="project_id"  style="width: 100%"
                                                    onchange="showClientEmail(this,{{ $clients->toJson() }}, $('#clientEmail') )">
                                                    <option disabled selected value="{{ null }}">@lang('dashboard_invoices.client_name')
                                                    </option>
                                                    @foreach ($clients as $client)
                                                        {{-- <optgroup label="{{ $client->name }}"> --}}
                                                            @foreach ($client->project as $project)
                                                                <option value="{{ $project->id }}">{{ $project->name }}
                                                                </option>
                                                            @endforeach
                                                        {{-- </optgroup> --}}
                                                    @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="clientEmail" 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 required type="text" name="advance_number" required
                                                    class="form-control" 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 required 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" required 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" required 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 col-lg-12">@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>
                                    <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 repeater" id="profile-1" role="tabpanel">
                                    <div 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="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.amount')</label>
                                                                <input type="number" min="1" max="99999999" step="any"
                                                                    required name="advance_single_total" onchange="advanceAmountChanged(this)"
                                                                    class="form-control advance_single_total total"
                                                                    id="total" />
                                                            </div>
                                                            <div class="col-lg-2 align-self-center mt-3">
                                                                <button type="button" data-repeater-delete
                                                                    class="btn btn-primary mx-4 " aria-label="Profile">
                                                                    <i class="mdi mdi-delete-alert " {{-- onclick="delBtn()" --}}
                                                                        aria-hidden="true"></i>
                                                                </button>
                                                            </div>
                                                            <div class="col-12">
                                                                <!-- 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>
                                                    <div class="mt-3 mt-lg-0">

                                                        <button type="button" onclick="btnAddTotalClicked(this)"
                                                        class="btn btn-success " aria-label="alltotal">
                                                        @lang('dashboard_payment.add_total') </button>
                                                        <input data-repeater-create type="button"
                                                        class="btn btn-success" onclick="addBtn()"
                                                        value="@lang('dashboard_payment.add')" />
                                                    </div>
                                                </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="border-0 text-right col-lg-4">
                                                                <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">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </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" class="custom-file-input" name="file"
                                                        id="customFile">
                                                    <label class="custom-file-label"
                                                        for="customFile">@lang('dashboard_invoices.import_file') </label>
                                                        <p hidden id="uploaded-file"></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title mb-4">@lang('dashboard_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>
                                <input type="hidden" name="remaining" id="remaining">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="submit" name="input_type" value="save" class="btn btn-info " id="save"
                                aria-label="save">
                                @lang('dashboard_invoices.save')<i class="mdi mdi-content-save-alert"></i>
                            </button>
                            <button type="submit" class="btn btn-success" id="saveAndSend" name="input_type"
                                value="save_send" aria-label="saveandsend">
                                @lang('dashboard_invoices.save_and_send')<i class="mdi mdi-arrange-send-to-back"></i>
                            </button>
                            <button type="submit" name="input_type" value="show_print" class="btn btn-primary "
                                aria-label="vieworprint" id="previewAndPrint">
                                @lang('dashboard_invoices.preview_and_print') <i class="mdi mdi-printer-check"></i>
                            </button>
                            {{-- <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>
        <!-- End Page-content -->
    @endsection
    @section('custom_script')
        <script>
            $('#closeAdddeposit').click(function() {
                $('#adddeposit .mfp-close').click()
            })
        </script>
        <script>
            function deleteButtonClicked() {
                setTimeout(() => {
                    //     var client = $("#invoice_client")[0];
                    // clientChanged(client);
                    calcamount();
                }, 1000);
            }
            /**************************
             * ADD DEPOSITE FUNCTIONS 
             * ***********************/
            function clientChanged(client) {
                /* get selected client Invoices */
                $.ajax({
                    url: "{{ route('dashboard.advance.payment.get.invoices') }}",
                    method: 'get',
                    data: {
                        id: client.value,
                    },
                    success: function(data) {
                        /* get invoicesCount for the selected client */
                        var invoicesCount = $(".invoices").length;
                        for (var invoiceIndex = 0; invoiceIndex < invoicesCount; invoiceIndex++) {
                            $('.invoices').each(function() {
                                console.log($(this).val());
                                if ($(this).val() < 0 || $("#invoice_client").bind('change',
                                () => {})) {
                                    $(this).html(
                                        "<option disabled selected>Select Invoice Number </option> "
                                        );
                                }
                            });
                            for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                                $('.invoices').each(function() {
                                    // console.log($(this).val());
                                    if ($(this).val() < 1 || $("#invoice_client").bind('change',
                                            () => {})) {
                                        $(this).append(
                                            "<option value='" + data[dataIndex].id + "'>" + data[
                                                dataIndex].number + "</option>"
                                        );
                                    }
                                    $(this).bind('change', () => {
                                        var invoiceObject = data.find(x => x.id == $(this)
                                        .val());
                                        var index = $(this).attr('name').split(
                                            '[invoice_number]')[0];
                                        // console.log(object);
                                        if (invoiceObject) {
                                            setTimeout(() => {
                                                $("input[name='" + index +
                                                    "[invoice_date]']").val(
                                                    invoiceObject.invoice_date);
                                                $("input[name='" + index +
                                                    "[invoice_total]']").val(
                                                    invoiceObject.invoice_total);
                                                $("input[name='" + index +
                                                    "[balance_due]']").val(
                                                    invoiceObject.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');
                                });
                            }
                        }
                    }
                });
                /* Handle if advanceamount input changed */
                $("input[name='advanceamount']").bind('change', function() {
                    if ($(this).val() > 0) {
                        /* enable amountadded element */
                        $('.amountadded').removeAttr('disabled');
                    } else {
                        /* disable amountadded element */
                       $('.amountadded').attr('disabled', true);
                    }
                    calcamount();
                }).trigger('change');
            }
            function calcamount() {
                $('.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');
                    }
                });
            }
            /* Calculate the total amounts entered i the accounts tab */
            function calc() {
                setTimeout(() => {
                    let singleAmountsCount = $(".advance_single_total").length;

                    if (singleAmountsCount == 0 ){
                        disableSaveButtons()
                        $("#total_p").html(0);
                        $("#total_id").html(0);
                        $("#balancedue").html(0);
                        $("#remaining").val(0);
                        $("#total_advance").val(0);
                    } else{
                        enableSaveButtons()        
                        let totalSum = 0;
                        let totalSumRounded= 0;
                        for (let currentAmountIndex = 0; currentAmountIndex <
                            singleAmountsCount; currentAmountIndex++) {
                            let currentAmountValue = $("input[name='prices[" + currentAmountIndex +
                                "][advance_single_total]']").val();
                            if (currentAmountValue > 0) {
                                currentAmountValue = parseFloat(currentAmountValue);
                            } else {
                                currentAmountValue = 0;
                            }
                            totalSum += currentAmountValue;
                            totalSumRounded = parseFloat(totalSum.toFixed(3))
                            $("#total_p").html(totalSumRounded);
                            $("#total_id").html(totalSumRounded);
                            $("#balancedue").html(totalSumRounded);
                            $("#remaining").val(totalSumRounded);
                            $("#total_advance").val(totalSumRounded);

                            
                        }
                    }
                    
                    
                }, 400);
            }
            /* Hide addtotal label if amount changed */
            function advanceAmountChanged(amountInput){ // prices[1][advance_single_total]
                let amountInputName = $(amountInput).attr("name").split("prices[")[1]
                let rowIndex = amountInputName.split("][advance_single_total]")[0]
                calc()
                hideAllTotalResultLabel(rowIndex)
            }


            function addBtn() {
                /* Salah */
                addButtonPressed() // fix select2 style
                setTimeout(() => {
                    calc();
                }, 1000);
            }
            /* function delBtn() {
                setTimeout(() => {
                    calc();
                }, 500);
            } */
            $(window).ready(() => {
                calc();
            });
        </script>
    @endsection