@extends('layout.master' )

@section('header'  )
    <div class="container">
        <div class="row rt-breadcump-height align-items-center" style="height: 131px;">

        </div>
        <!-- /.row -->
    </div>
@endsection

@section('content' )

    <div class="container">
        <div class="row">
            <div class="col-md-4 col-12 text-left">
                <h5>Easy monthly payments</h5>
            </div>
            <div class="col-md-4 col-12 text-center">
                <h3 class="text-success">{{$domain->domain_name}}</h3>
            </div>
            <div class="col-md-4 col-12 text-right">
                <h5>Price: ${{$domain->price}}</h5>
            </div>
        </div>
        <hr>
        @forelse($plan as $item)
        <div class="row mt-55">
            <div class="col-md-12 text-center">
                @php
                $price =  number_format((float)$item->price / $item->selected_month, 2, '.', '');
                @endphp
                <h4>Own this domain for as low as <span class="text-success">${{$price}}</span> per month for <span class="text-success">{{$item->selected_month}}</span> months</h4>
            </div>
        </div>
            <form action="{{asset('subscription/checkout')}}" method="get">
                <input type="hidden" name="id" value="{{base64_encode($item->id)}}">
        <div class="row text-center mt-4">

            <div class="col-md-2"></div>
            <div class="col-md-8">

                <table class="table table-striped">
                    <thead class="plan-table-header">
                    <tr>
                        <th>Select a plan:  &nbsp;&nbsp;&nbsp;</th>
                        <th class="text-left">Monthly payment</th>
                        <th class="text-left">Fees/interest</th>
                    </tr>
                    </thead>

                    <tbody>

                    @if(!empty($item->month_3_price ))
                    <tr>
                        <td><span><input type="radio" name="month" onclick="calculation({{$item->month_3_price }}  ,'3' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(3)}}"  class="mr-5"></span> <span>3 months</span></td>
                        <td class="text-left">${{ $item->month_3_price}} / mo.</td>
                        <td class="text-left">APR {{$item->month_3_apr}} % / ${{$item->month_3_interest}} interest</td>
                    </tr>
                    @endif
                    @if(!empty($item->month_6_price ))
                    <tr>
                        <td><span><input type="radio" name="month" onclick="calculation({{$item->month_6_price }} , '6' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(6)}}" class="mr-5"></span> <span>6 months</span></td>
                        <td class="text-left">${{$item->month_6_price}} / mo.</td>
                        <td class="text-left">APR {{$item->month_6_apr}} % / ${{$item->month_6_interest}} interest</td>
                    </tr>
                    @endif
                    @if(!empty($item->month_9_price ))
                    <tr>
                        <td><span><input type="radio" name="month" onclick="calculation({{$item->month_9_price }} , '9' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(9)}}" class="mr-5"></span> <span>9 months</span></td>
                        <td class="text-left">${{$item->month_9_price}} / mo.</td>
                        <td class="text-left">APR {{$item->month_9_apr}} % / ${{$item->month_9_interest}} interest</td>
                    </tr>
                    @endif
                    @if(!empty($item->month_12_price ))
                    <tr>
                        <td><span><input type="radio" name="month" onclick="calculation({{$item->month_12_price }} ,'12' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(12)}}" class="mr-20"></span> <span>12 months</span></td>
                        <td class="text-left">${{$item->month_12_price}} / mo.</td>
                        <td class="text-left">APR {{$item->month_12_apr}} % / ${{$item->month_12_interest}} interest</td>
                    </tr>
                    @endif
                    @if(!empty($item->month_18_price ))
                        <tr>
                            <td><span><input type="radio" name="month" onclick="calculation({{$item->month_18_price }} ,'18' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(18)}}"class="mr-20"></span> <span>18 months</span></td>
                            <td class="text-left">${{$item->month_18_price}} / mo.</td>
                            <td class="text-left">APR {{$item->month_18_apr}} % / ${{$item->month_18_interest}} interest</td>
                        </tr>
                    @endif

                    @if(!empty($item->month_24_price ))
                        <tr>
                            <td><span><input type="radio" name="month" onclick="calculation({{$item->month_24_price }} ,'24' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(24)}}" class="mr-20"></span> <span>24 months</span></td>
                            <td class="text-left">${{$item->month_24_price}} / mo.</td>
                            <td class="text-left">APR {{$item->month_24_apr}} % / ${{$item->month_24_interest}} interest</td>
                        </tr>
                    @endif
                    @if(!empty($item->month_36_price ))
                        <tr>
                            <td><span><input type="radio" name="month" onclick="calculation({{$item->month_36_price }} ,'36' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(36)}}" class="mr-20"></span> <span>36 months</span></td>
                            <td class="text-left">${{$item->month_36_price}} / mo.</td>
                            <td class="text-left">APR {{$item->month_36_apr}} % / ${{$item->month_36_interest}} interest</td>
                        </tr>
                    @endif
                    @if(!empty($item->month_48_price ))
                        <tr>
                            <td><span><input type="radio" name="month" onclick="calculation({{$item->month_48_price }} ,'48' ,  {{$item->month_3_apr }} , {{$item->month_3_interest }} )" value="{{base64_encode(48)}}" class="mr-20"></span> <span>48 months</span></td>
                            <td class="text-left">${{$item->month_48_price}} / mo.</td>
                            <td class="text-left">APR {{$item->month_48_apr}} % / ${{$item->month_48_interest}} interest</td>
                        </tr>
                    @endif
                    </tbody>


                </table>

            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-success btn-lg"><span class="fa fa-caret-right mr-3"></span> Select this payment plan</button>
            </div>
        </div>
    </form>
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <h5>Today's payment: <span class="text-success" id="total">$0.00</span></h5>
            </div>

        </div>
        @empty
            <p>No plan yet</p>
        @endforelse
        <div class="row mt-55">
            <div class="col-md-12">
                <p>In most cases access to the domain will be available within one to two hours of purchase, however access to domain purchase after business <span><img
                                src="" alt=""></span> hours will be available within the next business day <a
                            href="" class="verifcation-text">How this works.</a> </p>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-md-12 text-center">
                <h4>Start using {{$domain->domain_name}} today</h4>
            </div>
        </div>
        <div class="row text-center mt-55">
            <div class="col-md-2"></div>
            <div class="col-md-4 col-6 text-right">
                <span class=""><i class="fa fa-check text-info mr-4" aria-hidden="true"></i></span> <span>No interest or finance charges</span>
            </div>
            <div class="col-md-5 col-6 text-left">
                <span class=""><i class="fa fa-check text-info mr-4" aria-hidden="true"></i></span> <span>You have full access to the domain</span>
            </div>
        </div>
        <div class="row text-center mt-4 mb-5">
            <div class="col-md-2"></div>
            <div class="col-md-4 col-6 text-right">
                <span class=""><i class="fa fa-check text-info mr-4" aria-hidden="true"></i></span> <span>No obligations/ Cancel anytime</span>
            </div>
            <div class="col-md-5 col-6 text-left">
                <span class=""><i class="fa fa-check text-info mr-4" aria-hidden="true"></i></span> <span>Own the domain when all payments are made</span>
            </div>
        </div>

        <hr>

        <div class="row mt-55">
            <div class="col-md-12">
                <h6 class="font-weight-bold">How payment plans work</h6>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <ul>
                        <li>You will have access to the domain quickly after making your first payment.</li>
                        <li>The domain will be managed by our partner registrar (zdomainname.com) and cannot be transferred until all payments have been completed.</li>
                        <li>Your payment method will be charged automatically every month until all payments are completed.</li>
                        <li>If you miss 3 payments, you forfiet the domain name and this contract will be rendered invalid.</li>
                        <li>After making all payments, you may transfer the domain to any registrar</li>
                        <li>Discounts don not apply to payment plans.</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p class="ml-5">Read the entire <a href="" class="verifcation-text">domain name sale agreement</a></p>
                </div>
            </div>
        </div>
        <hr>
        <div class="row mt-55">
            <div class="col-md-12 text-center">
                <h4 class="font-weight-bold">{{$domain->domain_name}}</h4>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12 text-center">
                <h4>Buy now:<span class="text-success"> ${{$domain->price}}</span></h4>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-md-12 text-center">
                <a href="{{asset('cart')}}?domain={{ base64_encode($domain->id) }}" class="btn btn-success btn-lg"><span class="fa fa-caret-right mr-3"></span>Buy now</a>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-md-12">
                <p>* All prices are in US Dollars (USD). zDomainName accepts payments from all parts of the globe. If you are making a purchase from outside the United States, you must do your own currency conversions</p>
            </div>

        </div>
        <div class="row mt-5">
            <div class="col-md-12">
                <p>** There are no shipping charges associated with zDomainName, however as a part of buying of domain name you will have to pay the yearly registration fees.
                These fees depend on the registrar you decide to keep your domain with, but typically run anywhere from $8.95 to $25.00 per year. IF YOU FAIL to pay these yearly
                    registration/renewal costs to your domain registrar, your domain will expire and you will no longer have ownership rights to the domain name.
                </p>
            </div>

        </div>
    </div>



@endsection
@section('script' )
    <script>
       function calculation(price , month ,apr , interest)
       {
            // alert(price)
            // alert(month)
            // alert(apr)
            // alert(interest)
           //permonth = price*month;
           //perinterest = (interest/100)*permonth;
           total = price + (interest/price*100) + (apr/price*100);
            // alert(total)
           var n = total.toFixed(2);
           $('#total').text('$'+n);

       }
    </script>
@endsection