@extends('layouts.admin') @section('content')
<div class="card mb-3">
    <div class="card-header">
        <div class="row flex-between-end">
            <div class="col-auto align-self-center">
                <h5 class="mb-0" data-anchor="data-anchor">Additional Benefits</h5>
            </div>
        </div>
    </div>
    <div class="card-body bg-light">
        <form class="form-material" method="POST" action="{{ url ('/additional')}}">
            @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">
                <div class="col-sm-6">
                    <div> <strong>Current premium:</strong>
                        <input hidden id="prem" value="{{$premium->cover->monthly_pay}}" type="text">
                        <span>E {{$premium->cover->monthly_pay}}</span>
                    </div>
                </div>
                <input type="text" hidden name="member_id" value="{{$premium->member_id}}">

                <select name="" class="form-control" id="">
                    <option value="" disabled selected>-- Select Option --</option>
                    <option value="1">Member Only</option>
                    <option value="2">Member + Spouse</option>
                </select>

                <div class="col-sm-12">
                    What kind of benefits? <br>
                    Member Only
                    <input onclick="yesnoCheck(this);" required type="radio" required id="benefit" name="benefit" value="1"> &nbsp; &nbsp;
                    Member and Spouse
                    <input onclick="yesnoCheck(this);" required type="radio" required id="benefit" name="benefit" value="2">
                    <br>
                </div>


                <div id="ifYes" style="display: none;">
                    @if ($benefits->airtime != 0)
                    Airtime: E 1.34 <input value="1.34" name="airtime" data-benefice="1.34" checked type="checkbox"> <br>
                    @else
                    Airtime: E 1.34 <input value="1.34" name="airtime" data-benefice="1.34" type="checkbox"> <br>
                    @endif

                    @if ($benefits->cow != 0)
                    Cow: E 20 <input value="20" name="cow" data-benefice="20" checked type="checkbox"> <br>
                    @else
                    Cow: E 20 <input value="20" name="cow" data-benefice="20" type="checkbox"> <br>
                    @endif

                    @if ($benefits->grocery != 0)
                    <div class="col-sm-2">
                        Grocery: E 2.67 <input value="2.67" onchange="document.getElementById('grocery_num').disabled=!this.checked;" name="grocery" data-benefice="2.67" checked type="checkbox">
                        Value:
                        <select required disabled id="grocery_num" name="grocery_num">
                            <option>{{$benefits->grocery_num}}</option>
                            <option>2500</option>
                            <option>3500</option>
                            <option>4500</option>
                            <option>5500</option>
                            <option>6500</option>
                            <option>7500</option>
                        </select>
                    </div>
                    @else
                    <div class="col-sm-2">
                        Grocery: E 2.67 <input value="2.67" onchange="document.getElementById('grocery_num').disabled=!this.checked;" name="grocery" data-benefice="2.67" type="checkbox">
                        Value:
                        <select required disabled id="grocery_num" name="grocery_num">
                            <option></option>
                            
                        </select>
                    </div>
                    @endif
                </div>

                <div id="ifYes2" style="display: none;">
                    @if ($benefits->airtime != 0)
                    Airtime: E 1.94 <input value="1.94" name="airtime" data-benefice="1.94" checked type="checkbox"> <br>
                    @else
                    Airtime: E 1.94 <input value="1.94" name="airtime" data-benefice="1.94" type="checkbox"> <br>
                    @endif

                    @if ($benefits->cow != 0)
                    Cow: E 20 <input value="29" name="cow" data-benefice="29" checked type="checkbox"> <br>
                    @else
                    Cow: E 20 <input value="29" name="cow" data-benefice="29" type="checkbox"> <br>
                    @endif

                    @if ($benefits->grocery != 0)
                    <div class="col-sm-2">
                        Grocery: E 3.88 <input value="3.88" onchange="document.getElementById('grocery_num').disabled=!this.checked;" name="grocery" data-benefice="3.88" checked type="checkbox">
                        Value:
                        <select required disabled id="grocery_num" name="grocery_num">
                            <option>{{$benefits->grocery_num}}</option>
                            <option>2500</option>
                            <option>3500</option>
                            <option>4500</option>
                            <option>5500</option>
                            <option>6500</option>
                            <option>7500</option>
                        </select>
                    </div>
                    @else
                    <div class="col-sm-2">
                        Grocery: E 2.67 <input value="2.67" onchange="document.getElementById('grocery_num').disabled=!this.checked;" name="grocery" data-benefice="2.67" type="checkbox">
                        Value:
                        <select required disabled id="grocery_num" name="grocery_num">
                            <option></option>
                            <option>2500</option>
                            <option>3500</option>
                            <option>4500</option>
                            <option>5500</option>
                            <option>6500</option>
                            <option>7500</option>
                        </select>
                    </div>
                    @endif
                </div>

                <script>
                    function yesnoCheck(that) {
                        if (that.value == "1") {
                            document.getElementById("ifYes").style.display = "block";
                        }
                        if (that.value == "2") {
                            document.getElementById("ifYes2").style.display = "block";                     
                        } else {
                            document.getElementById("ifYes").style.display = "none";
                            document.getElementById("ifYes2").style.display = "none";
                        }
                    }
                </script>




                <hr>
                <strong>Total:</strong> <span id="totalSection">E {{$premium->cover->monthly_pay+$benefits->cow+$benefits->airtime+ ($benefits->grocery * ($benefits->grocery_num/1000))}}</span>

                <script>
                    /* const output = document.getElementById('totalSection');
                    const total_prem = document.getElementById('total').value;
                    const old_prem = document.getElementById("prem").value;
                    const totalBenefice = () => [...document.querySelectorAll('#benefices input[type=checkbox]:checked')]
                        .reduce((acc, {
                            dataset: {
                                benefice
                            }
                        }) => acc + +benefice, 0);
                    document.getElementById('benefices').addEventListener('change', () => output.textContent = (totalBenefice() + parseInt(old_prem)).toFixed(2));
                    document.getElementById('benefices').addEventListener('change', () => total.value = totalBenefice() + parseFloat(old_prem));*/
                </script>
            </div>

    </div>

    <div class="text-center">
        <br><button type="submit" class="btn btn-primary btn-sm"><i class="far fa-save"></i> Save</button>
        <br> &nbsp;
    </div>
    </form>
</div>
</div>
@endsection