@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;
    }
</style>
@endpush

@section('content')
<section class="content">
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-info">
                    <div class="card-header">
                        <h3 class="card-title">Edit Supplier Bill Payment</h3>
                        <a href="{{ route('supplierbill.billlist') }}"
                            class="btn btn-outline-dark btn-flat"
                            style="float:right;padding:3px 26px;">Bill List</a>
                    </div>

                    <form id="editForm" class="form-horizontal" method="POST"
                        action="{{ route('supplierbill.billupdate', $billInfo->payId) }}">
                        @csrf
                        @method('PUT')

                        <div class="card-body">
                            <div class="row">
                                {{-- Left Column --}}
                                <div class="col-sm-5">

                                    {{-- Payment Date --}}
                                    <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"
                                                    value="{{ old('payment_date', \Carbon\Carbon::parse($billInfo->payDate)->format('d-m-Y')) }}"
                                                    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>
                                        </div>
                                    </div>

                                    {{-- Supplier --}}
                                    <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 Supplier" required>
                                                <option value="">Select Supplier</option>
                                                @foreach($suppliers as $v)
                                                <option value="{{ $v->id }}"
                                                    data-adv="{{ $v->adv_balance }}"
                                                    {{ $v->id == $billInfo->supplier_id ? 'selected' : '' }}>
                                                    {{ $v->supplier_name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Payment Method --}}
                                    <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 Payment Method" required>
                                                <option value="">Select Payment Method</option>
                                                @foreach($paymentmethods as $v)
                                                <option value="{{ $v->id }}" {{ $v->id == $billInfo->methodId ? 'selected' : '' }}>
                                                    {{ $v->pmode_name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    {{-- Advance --}}
                                    <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" id="sup_advance" class="form-control form-control-sm"
                                                value="{{ $supplierAdvance ?? 0 }}" readonly>
                                        </div>
                                    </div>

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

                                    {{-- Remarks --}}
                                    <div class="form-group row">
                                        <label for="remarks" class="col-sm-4 col-form-label">Remarks</label>
                                        <div class="col-sm-8">
                                            <textarea id="remarks" name="remarks" rows="1"
                                                class="form-control form-control-sm">{{ old('remarks', $billInfo->remarks) }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                {{-- Right Column --}}
                                <div class="col-sm-7">
                                    <table class="table table-striped table-sm">
                                        <tbody id="due_payment_list">
                                            {!! $duePaymentList ?? '' !!}
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th>Payment Amt. <span class="text-danger">*</span></th>
                                                <th>:</th>
                                                <th><input type="number" id="pay_amt" name="pay_amt"
                                                        class="form-control form-control-sm payment_amount"
                                                        value="{{ old('payAmt', $billInfo->payAmt) }}" required></th>
                                            </tr>
                                            <tr>
                                                <th>After Payment</th>
                                                <th>:</th>
                                                <th>
                                                    <span class="aft_pay">{{ $billInfo->after_pay ?? '' }}</span>
                                                    <input type="hidden" name="after_pay"
                                                        class="after_pay"
                                                        value="{{ old('after_pay', $billInfo->after_pay) }}">
                                                </th>
                                            </tr>
                                            <tr>
                                                <th>Discount Amt.</th>
                                                <th>:</th>
                                                <th><input type="number" id="discount_amt" name="discount_amt"
                                                        class="form-control form-control-sm"
                                                        value="{{ old('discount_amt', $billInfo->discount_amt) }}"></th>
                                            </tr>
                                            <tr>
                                                <th>Total Due</th>
                                                <th>:</th>
                                                <th>
                                                    <input type="hidden" id="totalDueVal" name="total_due"
                                                        value="{{ old('total_due', $billInfo->total_due) }}">
                                                    <span class="total_due">{{ $billInfo->total_due ?? '' }}</span>
                                                </th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <div class="card-footer">
                                <button type="submit" class="btn btn-success">Update</button>
                                <a href="{{ route('supplierbill.billlist') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@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>
    $(function() {

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

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

        // Supplier change event
        $("#supplier_id").change(function() {
            if ($(this).val()) {
                $("#due_payment_list").html('');

                var sup_id = $(this).val();
                var adv = $(this).find(':selected').data('adv');
                $("#sup_advance").val(adv ? adv : '');

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

                $.get(url, function(data) {
                    if (!data) {
                        alert('No Due Purchase found!');
                    } else {
                        $("#due_payment_list").html(data);
                    }
                });
            } else {
                $("#sup_advance").val('');
                $("#due_payment_list").html('');
            }
        });

        // Payment calculation
        $(".payment_amount, #discount_amt").on('keyup change', function() {
            var payment_amount = parseFloat($("#pay_amt").val()) || 0;
            var discount_amt = parseFloat($("#discount_amt").val()) || 0;
            var due_amount = parseFloat($(".due_amount").val()) || 0;

            var total_paid = payment_amount + discount_amt;
            var after_due = due_amount - total_paid;

            $(".aft_pay, .total_due").html(after_due.toFixed(2));
            $(".after_pay").val(after_due.toFixed(2));
            $("#totalDueVal").val(after_due.toFixed(2));
        });
    });
</script>
@endpush