@extends('layouts.admin') @section('content')
<div class="row mb-3">
    <div class="col-6">
        <div class="card mb-3">
            <div class="card-header">
                <div class="row flex-between-end">
                    <div class="col-auto align-self-center">
                    <div>  
                    <a href='{{ url("/memberpayments", $member->id)}}' class="btn btn-primary btn-sm"><i class="fas fa-money-check"></i> Payments</a>
                      
                        <br><strong> Policy: {{$premium->cover->monthly_pay}}</strong><br>
                        <br> Total Dependents: {{$totaldependents}} 
                        <br> Total Children: {{$totalchildren}} 
                        <br> Total Spouses: {{$totalspouses}} <br>

                        <strong>Additional Benefits</strong>
                        <br> Airtime: {{$benefits->airtime}} 
                        <br> Cow: {{$benefits->cow}} 
                        <br> Grocery: {{$benefits->grocery}} <br>
                        <strong>
                        Monthly Payment: {{ round ($monthly_payment, 2)}}
                        </strong>
                        <br><br>
                        </div>
                        <h5 class="mb-0" data-anchor="data-anchor">New payment</h5>
                    </div>
                </div>
            </div>
            <div class="card-body bg-light">
                <form class="form-material" method="POST" action="{{ url ('/payment')}}">
                    @csrf
                    @if(count($errors->all()))
                    @foreach ($errors->all() as $error)
                    <div class="alert alert-danger alert-dismissable"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <strong>Alert!</strong> {{ $error }} </div> @endforeach @endif
                    <div class="row">
                        <br>
                        <div class="col-sm-12">
                            Last payment Date:
                            <input type="text" hidden name = "monthly_payment" value="{{$monthly_payment}}">
                            <input type="date" class="form-control" id="month_covered" name="month_covered" value="{{$last_cover}}" placeholder="Paid Amount">
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <input hidden type="number" name="member_id" id="member_id" value="{{$member->id}}">
                        <div class="col-sm-12">
                            Payment method:
                            <select required name="payment_method" class="form-control">
                                <option disabled selected>--Select--</option>
                                @foreach ($modes as $mode)
                                <option value="{{$mode->id}}">{{$mode->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <br>
                        <div class="col-sm-12">
                            <input type="number" hidden required class="form-control"  step="0.01" id="cash_tendered" name="cash_tendered" value="" placeholder="Paid Amount">
                            <br>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <input type="text" required onmousemove ="myFunction()" class="form-control" id="months" name="months" value="" placeholder="# of months">
                            <br>
                        </div>                        
                        <strong id="amount_display"></strong>
                    </div>

             
                    <div class="row">
                        <div class="col-sm-12">
                            Cash Collected? <br>
                            Yes <small>(Click here to specify the date)</small>
                            <input onclick="yesnoCheck(this);" required type="radio" checked required id="cash" name="cash" value="1"> &nbsp; &nbsp;
                            <div @if (Auth::user()->role!= 3)
                    hidden
                    @endif >
                            No 
                            <input onclick="yesnoCheck(this);" required type="radio" required id="cash" name="cash" value="0">
                            </div>
                            <br>
                        </div>

                        <div class="col-sm-12" id="ifYes" style="display: none;">                    
                            Collection Date:                       
                            <input type="date" class="form-control" id="cash_date" name="cash_date" value="<?php echo date('Y-m-d'); ?>" placeholder="Paid Amount">
                            <br>                    
                    </div>
                    <div id="ifYes2" style="display: none;">
                       
                    </div>
                    </div>
                
                    <script>
                        function yesnoCheck(that) {
                                                if (that.value == "1") {
                                                    document.getElementById("ifYes").style.display = "block";
                                                    document.getElementById("ifYes2").style.display = "block";
                                                } else {
                                                    document.getElementById("ifYes").style.display = "none";
                                                    document.getElementById("ifYes2").style.display = "none";
                                                }
                                            }
                    </script>
                    <script>
                       /* function myFunction () {                          
                          var cash = document.getElementById("cash_tendered").value;
                          var payment = {{$monthly_payment}};
                          var months = cash / payment;
                            document.getElementById('months').value= parseInt(months); 
                        }*/

                        function myFunction() {
  var months = parseInt(document.getElementById('months').value); // Get the number of months
  var payment = {{$monthly_payment}}; // Monthly payment value from PHP variable
  var amount = months * payment; // Calculate the amount
  
  document.getElementById('cash_tendered').value = amount.toFixed(2); // Update the "Paid Amount" input field with the calculated amount

  var amountDisplay = document.getElementById('amount_display'); // Get the <p> element
  amountDisplay.textContent = "Total Amount: " + amount.toFixed(2); // Update the text content of the <p> element

}

                                                
                    </script>

                    <div class="text-center">
                        <br><button type="submit" class="btn btn-primary btn-sm"><i class="far fa-save"></i>Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-xxl-3">
        <div class="card h-md-100">
            <div class="card-body">
                <div class="row h-100 justify-content-between g-0">
                    <div class="col-5 col-sm-6 col-xxl pe-2">
                        <h6 class="mt-1">Months Covered</h6>
                        <div class="fs--2 mt-3">
                            @foreach ($covers as $cover)
                            <div class="d-flex flex-between-center mb-1">
                                <div class="d-flex align-items-center"><span class="dot bg-300"></span><span class="fw-semi-bold">{{$cover->months}}</span></div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-xxl-3">
        <div class="card h-md-100">
            <div class="card-body">
                <div class="row h-100 justify-content-between g-0">
                    <div class="col-5 col-sm-6 col-xxl pe-2">
                        <h6 class="mt-1">Arrears</h6>
                        <div class="fs--2 mt-3">
                            @foreach ($arrears as $arrear)
                            <div class="d-flex flex-between-center mb-1">
                                <div class="d-flex align-items-center"><span class="dot bg-300"></span><span class="fw-semi-bold">{{$arrear->months}}</span></div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection