@extends('layouts.admin')


@push('styles')
<link rel="stylesheet" href="{{ asset('plugins/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">

<style>
    div.form-group {
        margin-bottom: 3px;
    }

    #unitname {
        position: relative;
        top: 11px;
    }

    #btn_looding {
        display: none;
    }

    /*    .is_advance{
                                                                                                                  display: none;
                                                                                                                }*/
</style>
@endpush

@section('content')
<!-- Main content -->
<section class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- left column -->
            <div class="col-md-12">
                <!-- jquery validation -->
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Supplier Bill Payment</h3>

                        <a href="{{ route('bill.billlist') }}" style="float: right;padding: 3px 26px;"
                            class="btn btn-outline-dark btn-flat">Bill List</a>

                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->



                    <form id="userform" class="form-horizontal" method="POST" action="{{ route('bill.suppayment') }}">

                        @csrf

                        <div class="card-body">

                            <div class="row">

                                <div class="col-sm-5">

                                    <div class="form-group row">
                                        <label for="payment_date" class="col-sm-4 col-form-label">Payment Date <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <div class="input-group date" id="payment_date" data-target-input="nearest">
                                                <input type="text"
                                                    class="form-control form-control-sm datetimepicker-input"
                                                    data-target="#payment_date" name="payment_date" id="payment_date"
                                                    value="" placeholder="Enter From Date" required />
                                                <div class="input-group-append" data-target="#payment_date"
                                                    data-toggle="datetimepicker">
                                                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                                </div>
                                            </div>

                                            @error('payment_date')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="supplier_id" class="col-sm-4 col-form-label">Supplier <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <select id="supplier_id" name="supplier_id"
                                                class="form-control form-control-sm select2"
                                                data-placeholder="Select a Supplier" value=""
                                                style="width: 100%;">
                                                <option value="">Select Suppliers</option>
                                                @foreach ($suppliers as $v)
                                                <option value="{{ $v->id }}"
                                                    data-adv="{{ $v->adv_balance }}">{{ $v->supplier_name }}
                                                </option>
                                                @endforeach

                                            </select>

                                            @error('supplier_id')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="method_id" class="col-sm-4 col-form-label">Pay. Method <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">

                                            <select id="method_id" name="method_id"
                                                class="form-control form-control-sm select2"
                                                data-placeholder="Select a Payment Method" value=""
                                                style="width: 100%;" required>
                                                <option value="">Select Payment Method</option>
                                                @foreach ($paymentmethods as $v)
                                                <option value="{{ $v->id }}">{{ $v->pmode_name }}</option>
                                                @endforeach

                                            </select>

                                            @error('method_id')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="sup_advance" class="col-sm-4 col-form-label">Advance Amt.</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm"
                                                name="sup_advance" id="sup_advance" value=""
                                                placeholder="Advance Amount" readonly>

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="dis_amt" class="col-sm-4 col-form-label">Discount Amt.</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm" name="dis_amt"
                                                id="dis_amt" value="" placeholder="Discount Amount">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="pay_amt" class="col-sm-4 col-form-label">Payment Amt. <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm" name="pay_amt"
                                                id="pay_amt" value="" placeholder="Payment Amount" required>

                                            @error('pay_amt')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="referance_no" class="col-sm-4 col-form-label">Referance No <span
                                                class="text-danger"> * </span></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control form-control-sm"
                                                name="referance_no" id="referance_no"
                                                value="{{ old('referance_no') }}" placeholder="Referance No"
                                                required>

                                            @error('referance_no')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="remarks" class="col-sm-4 col-form-label">Remarks</label>
                                        <div class="col-sm-8">

                                            <textarea class="form-control form-control-sm" id="remarks" rows="1" name="remarks" placeholder="Remarks"></textarea>

                                            @error('remarks')
                                            <span class="error invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror

                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-7">

                                    <div style="height: 480px;overflow-y: scroll;">
                                        <table class="table table-striped table-sm">
                                            <thead>
                                                <tr>
                                                    <th>SL</th>
                                                    <th>Bill Date</th>
                                                    <th>Purchase No</th>
                                                    <th>Due</th>
                                                    <th>Payment</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody id="due_payment_list">

                                            </tbody>
                                        </table>
                                    </div>
                                    <table class="table table-striped table-sm">
                                        <tfoot id="due_payment_total">

                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <!-- /.card-body -->
                            <div class="card-footer">

                                <button type="submit" class="btn btn-primary">Submit</button>

                            </div>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>
            <!--/.col (left) -->
            <!-- right column -->
            <div class="col-md-6">

            </div>
            <!--/.col (right) -->
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@push('scripts')
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
<script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('plugins/inputmask/jquery.inputmask.min.js') }}"></script>
<script type="text/javascript">
    $(function() {


        $('#payment_date').datetimepicker({
            format: 'DD-MM-YYYY'
        });

        $('#reservationdate2').datetimepicker({
            format: 'DD-MM-YYYY'
        });


        //Initialize Select2 Elements
        $('.select2').select2();
        $('.myselect2').select2();

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })


        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });




        $("#pay_amt").keyup(function() {


            var amount = $(this).val();


            if ($(this).val()) {


                if ($("#sup_advance").val()) {

                    var adv = $("#sup_advance").val();

                } else {

                    var adv = 0;

                }



                var balance = $(this).val();

                balance = +adv + +balance;

                var totalDue = 0;

                $(".payment_amount").each(function() {

                    var due = $(this).attr('data-due');

                    if (+balance > +due) {

                        balance -= due;

                        $(this).val(due);

                        $(this).parent("td").parent("tr").find("span.aft_pay").html('0');
                        $(this).parent("td").parent("tr").find("input.after_pay").val('0');

                    } else if (+balance > 0) {

                        var due_val = due - balance;

                        totalDue = totalDue + due_val;

                        $(this).parent("td").parent("tr").find(".aft_pay").html(due_val);
                        $(this).parent("td").parent("tr").find(".after_pay").val(due_val);

                        $(this).val(balance);
                        balance = 0;

                    } else {

                        $(this).val(0);

                        $(this).parent("td").parent("tr").find(".aft_pay").html(due);
                        $(this).parent("td").parent("tr").find(".after_pay").val(due);

                        totalDue = +totalDue + +due;

                    }



                });


                if (+balance > 0) {
                    $("#advance_amt").val(balance);
                } else {
                    $("#advance_amt").val('');
                }


                $(".total_due").html(totalDue);
                $(".totalDueVal").val(totalDue);

            } else {

                $(".payment_amount").val('');
                $("#advance_amt").val('');


                var balance = $(this).val();
                var totalDue = 0;

                $(".payment_amount").each(function() {

                    var due = $(this).attr('data-due');

                    totalDue = +totalDue + +due;

                    $(this).parent("td").parent("tr").find(".aft_pay").html(due);
                    $(this).parent("td").parent("tr").find(".after_pay").val(due);

                });


                $(".total_due").html(totalDue);
                $(".totalDueVal").val(totalDue);


            }


        });





        $("#supplier_id").change(function() {


            if ($(this).val()) {


                $("#due_payment_list").html('');

                var sup_id = $(this).val();

                var avd = $(this).find(':selected').data('adv');

                if (avd) {

                    $("#sup_advance").val(avd);

                } else {
                    $("#sup_advance").val('');
                }

                var url = "{{ route('bill.suppurinv', ':id') }}";
                url = url.replace(':id', sup_id);

                var jqxhr = $.get(url, function(data) {
                        if (!data) {
                            alert('No Due Purchase found!');
                        }
                    })
                    .done(function(data) {

                        $("#due_payment_list").html(data.row);
                        $("#due_payment_total").html(data.row2);

                    })
                    .fail(function() {

                    });

                jqxhr.always(function() {

                });

            } else {
                $("#sup_advance").val('');
            }

        });


    });
</script>
@endpush