@extends('layouts.master')

@section('page_title', "{$display_term}")
@section('title', 'Target User Payments Edit')
@section('main_item', 'Target User Payments Edit')
@section('sub_item', 'User Payments Edit')

@section('content')
    <form action="{{ url('edit/payment/update') }}" method="POST">
        @csrf
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold">Select User</label>
                                <select class="form-control select2" id="user_id" name="user_id" required="">
                                    <option value="">Select User</option>
                                    @foreach ($users as $user)
                                        @if ($user_payment->user_id == $user->id)
                                            <option value="{{ $user->id }}" selected>
                                                {{ $user->username }}</option>
                                        @else
                                            <option value="{{ $user->id }}">
                                                {{ $user->username }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="ref_no" style="font-weight: bold">Payment Ref
                                    ID</label>
                                <input type="text" class="form-control" id="payment_ref_no" name="payment_ref_no"
                                    value="{{ $user_payment->payment_ref_no }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="paid_amount">Due Amount</label>
                                <input type="number" placeholder="Payment Due Amount" class="form-control" id="payment_due"
                                    name="payment_due" value="{{ $user_due }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="paid_amount">Balance</label>
                                <input type="number" placeholder="Payment Balance" class="form-control" id="balance"
                                    name="balance" value="{{ $user_due }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="paid_amount">Paid Amount</label>
                                <input type="number" placeholder="Paid Amount" class="form-control" id="paid_amount"
                                    name="paid_amount" value="{{ $user_payment->paid_amount }}" required="">
                                <span id="error" style="color: red;"><b>Paid Amount Exit.!</b></span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label style="font-weight: bold" for="re_reason">Payment Method</label>
                                <select class="form-control" id="payment_method" name="payment_method" required="">
                                    <option value="">Select</option>
                                    <option value="bank_transefer" @if ($user_payment->payment_method == 'bank_transefer') selected @endif>Bank
                                        Transfer</option>
                                    <option value="cash" @if ($user_payment->payment_method == 'cash') selected @endif>Cash</option>
                                    <option value="online" @if ($user_payment->payment_method == 'online') selected @endif>Online</option>
                                    <option value="other" @if ($user_payment->payment_method == 'other') selected @endif>Other</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" id="bank_account" @if ($user_payment->payment_method == 'bank_transefer') @else @endif>
                            <div class="form-group">
                                <label style="font-weight: bold" for="bank_account_no">Bank Account No</label>
                                <input type="number" placeholder="Bank Account No" class="form-control"
                                    id="bank_account_no" name="bank_account_no"
                                    value="{{ $user_payment->bank_account_no }}">
                            </div>
                        </div>
                        <div class="col-sm-12 text-right">
                            <input type="hidden" name="id" id="id" value="{{ $user_payment->id }}">
                            <button type="submit" class="btn btn-primary" id="save_btn">Update</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script>
        $('#bank_account').hide();
        $(document).on('change', '#payment_method', function() {
            var payment_method = $('#payment_method').val();
            if (payment_method == 'bank_transefer') {
                $('#bank_account').show();
            } else {
                $('#bank_account').hide();
            }
        });
        $(document).on('change', '#user_id', function() {
            var user_id = $('#user_id').val();
            $.ajax({
                method: 'POST',
                url: "{{ route('reseller.user_due') }} ",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'user_id': user_id,
                },
                success: function(response) {
                    $('#payment_due').val(response.user_due);
                    $('#balance').val(response.user_due);
                }
            })
        });
        $('#error').prop('hidden', true);
        $(document).on('keyup', '#paid_amount', function() {
            var balance = $('#balance').val();
            var payment_due = $('#payment_due').val();
            var paid_amount = $('#paid_amount').val();
            var new_balance = parseFloat(payment_due) - parseFloat(paid_amount);
            if (parseFloat(paid_amount) > parseFloat(payment_due)) {
                $('#error').prop('hidden', false);
                $('#save_btn').prop('disabled', true);
            } else {
                $('#error').prop('hidden', true);
                $('#save_btn').prop('disabled', false);
            }
            $('#balance').val(new_balance);
        });
        $(document).on('click', '#payment-edit', function() {
            $('#payment_modal').load($(this).data('href'), function() {
                $('#mdate').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#end_date').bootstrapMaterialDatePicker({
                    weekStart: 0,
                    time: false
                });
                $('#mdate').val(moment(new Date()).format("YYYY-MM-DD"));
                $('#payment_modal').modal('show');
            })
        });
    </script>
@endsection