@extends('admin.admin_master')
@section('admin')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="page-content">
<div class="container-fluid">

<div class="row">
<div class="col-12">
    <div class="card">
        <div class="card-body">

            <h4 class="card-title">Lipa mkopo Page </h4><br><br>


            <form method="post" action="{{ route('mkopopaid') }}" id="myForm" enctype="multipart/form-data">
                @csrf
                

            <div class="row mb-3">
                    <label class="col-sm-2 col-form-label"> Select Member Name</label>
                <div class="col-sm-10">
                    <select name="member_id" id="member_id" class="form-control select2" aria-label="Default select example">
                        <option selected="">Open this select menu</option>
                        @foreach($allusers as $all)
                        <option value="{{ $all->id }}">{{ $all->name." ".$all->sname. " ".$all->lname. "-".$all->membership_no }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Current loan </label>
                <div class="form-group col-sm-10">
                    <input name="current_loan" class="form-control" type="text" value=" {{ old('current_loan') }}" id="current_loan" value="" readonly>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Current balance(Loan + Interest) </label>
                <div class="form-group col-sm-10">
                    <input name="current_balance" class="form-control" type="text" value=" {{ old('current_balance') }}" id="current_balance" value="" readonly>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Current Loan Balance </label>
                <div class="form-group col-sm-10">
                    <input name="current_l_balance" class="form-control" type="text" value=" {{ old('current_l_balance') }}" id="current_l_balance" value="" readonly>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Loan Interest </label>
                <div class="form-group col-sm-10">
                    <input name="current_interest" class="form-control" type="text" value=" {{ old('current_interest') }}" id="current_interest" value="" readonly>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Current Interest Balance </label>
                <div class="form-group col-sm-10">
                    <input name="current_i_balance" class="form-control" type="text" value=" {{ old('current_i_balance') }}" id="current_i_balance" value="" readonly>
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Select Payment Method</label>
                <div class="col sm-10">
                    <select name="paymentmethod_id" id="paymentmethod_id" class="form-select" aria-label="Default select example">
                        <option selected="">Open this select menu</option>
                        @foreach($pmethod as $pm)
                        <option value="{{ $pm->id }}">{{ $pm->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- end row -->


            <div class="row mb-3">
                <label class="col-sm-2 col-form-label">Select Payment Type</label>
                   <div class="form-group col-sm-10">
                       <select id="paymenttype_id" name="paymenttype_id" class="form-select" aria-label="Default select example">
                        <option>Open this select menu</option></select>
                   </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Enter payment date </label>
                <div class="form-group col-sm-10">
                    <input name="pdate" class="form-control" type="date">
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Enter amount </label>
                <div class="form-group col-sm-10">
                    <input name="amount" class="form-control" type="text">
                </div>
            </div>
            <!-- end row -->

            <div class="row mb-3">
                <label for="example-text-input" class="col-sm-2 col-form-label">Submit risiti </label>
                <div class="col-sm-10">
       <input name="risit_image" class="form-control" type="file"  id="image">
                </div>
            </div>
            <!-- end row -->

             <div class="row mb-3">
                 <label for="example-text-input" class="col-sm-2 col-form-label">  </label>
                <div class="col-sm-10">
                    <img id="showImage" class="rounded avatar-lg" src="{{ url('upload/no_image.jpg') }}" alt="Card image cap">
                </div>
            </div>
            <!-- end row -->


<input type="submit" class="btn btn-info waves-effect waves-light" value="Lipa Mkopo">
            </form>



        </div>
    </div>
</div> <!-- end col -->
</div>



</div>
</div>

<!-- <script type="text/javascript">
    
    $(document).ready(function() {
        $('#myForm').validate({
            rules: {
                name: {
                    required : true,
                },

                supplier_id: {
                    required : true,
                },

                category_id: {
                    required : true,
                },

                unit_id: {
                    required : true,
                },
            },

            messages :{
                name: {
                    required : 'Product name is required',
                },

                supplier_id: {
                    required : 'Supplier name is mandatory',
                },

                category_id: {
                    required : 'Category name is mandatory',
                },

                unit_id: {
                    required : 'Unit name is mandatory',
                },
            },

            errorElement : 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },

            highlight : function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },

            unhighlight : function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
        });

    });

</script> -->

<script type="text/javascript">
    
    $(document).ready(function(){
        $('#image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage').attr('src',e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });

</script>



    <script type="text/javascript">
    $(function(){
        $(document).on('change','#paymentmethod_id',function(){
            var paymentmethod_id = $(this).val();
            $.ajax({
                url:"{{ route('get-paymentmethod') }}",
                type: "GET",
                data:{paymentmethod_id:paymentmethod_id},
                success:function(data){
                    var html = '<option value="">Select Payment type</option>';
                    $.each(data,function(key,v){
                        html += '<option value=" '+v.id+' "> '+v.name+'</option>';
                    });
                    $('#paymenttype_id').html(html);
                }
            })
        });
    });

</script>

<script type="text/javascript">
    $(function(){
        $(document).on('change','#member_id',function(){
            var member_id = $(this).val();
            $.ajax({
                url:"{{ route('get-loan') }}",
                type: "GET",
                data:{member_id:member_id},
                success:function(data){
                    $('#current_loan').val(parseFloat(data.current_loan.amount_given).toLocaleString('tz', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    })); 

                    $('#current_balance').val(parseFloat(data.current_balance).toLocaleString('tz', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    })); 

                    $('#current_l_balance').val(parseFloat(data.current_balance).toLocaleString('tz', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    })); 

                    $('#current_interest').val(parseFloat(data.current_interest.total_interest_tsh).toLocaleString('tz', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    })); 

                    $('#current_i_balance').val(parseFloat(data.current_i_balance).toLocaleString('tz', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    }));                 
                }
            })
        });
    });

</script>

@endsection