@extends('layout.master')

@section('header')
    <div class="container">
        <div class="row align-items-center terms_condition_banner">

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

@section('content')



    <div class="container">
        <div class="row">
            <div class="col-md-6 col-6">
                <h5>{{$subs->domain_name}}</h5>
            </div>
            <div class="col-md-6 col-6 text-right">
                <a  class="btn btn-lg btn-success" href="{{ route('logout') }}"
                    onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();" >
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        {{ csrf_field() }}
                    </form>
                    Logout</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 mt-5">
                <ul class="list-group list-group-flush list-text">
                    <li class="list-group-item"><a href="{{asset('user/dashboard?id='.Session::get('domain_id'))}}">Dashboard</a></li>
                    <li class="list-group-item"><a href="{{asset('user/billinginformation?id='.Session::get('domain_id'))}}">Billing information</a></li>
                    <li class="list-group-item"><a href="#">Payment information</a></li>
                    <li class="list-group-item"><a href="{{asset('user/paymenthistory')}}">Payment history</a></li>
                    <li class="list-group-item"><a href="#">Create PDF invoices</a></li>
                    <li class="list-group-item"><a href="{{asset('/user/purchaseagreement')}}">Purchase agreement</a></li>
                    <hr>
                    <li class="list-group-item"><a href="#">Domain settings</a></li>
                </ul>
            </div>
            <div class="col-md-8 mt-5">
                <h5>Manage my payment plan</h5>
                <br>
                <div class="single-feature-item wow fade-in-bottom">
                    <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                        <div class="container">
                            <div class="row text-center">
                                <div class="col-md-3 mt-20 mb-20">
                                    <h6 class="payment-heading text-muted">Current balance:</h6>
                                    <h4 class="payment-description">${{$subs->remaining_payable}}</h4>
                                </div>
                                <div class="col-md-3 mt-20 mb-20">
                                    <h6 class="payment-heading text-muted">Next Payment date:</h6>
                                    <h4 class="payment-description">{{$subs->next_date}}</h4>
                                </div>
                                <div class="col-md-3 mt-20 mb-20">
                                    <h6 class="payment-heading text-muted">Next Payment:</h6>
                                    <h4 class="payment-description">${{$subs->total_paid}}</h4>
                                </div>
                                <div class="col-md-3 mt-20 mb-20">
                                    <h6 class="payment-heading text-muted">Remaining Payments:</h6>
                                    <h4 class="payment-description">{{$subs->month - $subs->count}}</h4>
                                </div>
                            </div>
                        </div>
                    </a>
                    <!-- /.rt-feature-box -->
                </div>
                <div class="row">
                    <div class="col-md-6  mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="row">
                                    <div class="col-md-4 col-4 bg-primary-bluish icon-background">
                                        <i class="fa fa-dollar-sign"></i>
                                    </div>
                                    <div class="col-md-8 col-8">
                                        <p class="payment-text">Make a payment</p>
                                    </div>
                                </div>
                            </a>
                            <!-- /.rt-feature-box -->
                        </div>

                    </div>
                    <div class="col-md-6  mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="row">
                                    <div class="col-md-4 col-4 bg-primary-bluish icon-background">
                                        <i class="fa fa-id-card"></i>

                                    </div>
                                    <div class="col-md-8 col-8">
                                        <p class="payment-text">Upgrade card ending in 2208</p>
                                    </div>
                                </div>
                            </a>
                            <!-- /.rt-feature-box -->
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="row">
                                    <div class="col-md-4 col-4 bg-primary-bluish icon-background">
                                        <i class="fa fa-check-circle"></i>
                                    </div>
                                    <div class="col-md-8 col-8">
                                        <p class="payment-text">Pay remaining balance</p>
                                    </div>
                                </div>
                            </a>
                            <!-- /.rt-feature-box -->
                        </div>

                    </div>
                    <div class="col-md-6 mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="row">
                                    <div class="col-md-4 col-4 bg-primary-bluish icon-background">
                                        <i class="fa fa-window-close"></i>

                                    </div>
                                    <div class="col-md-8 col-8">
                                        <p class="payment-text">Cancel my plan</p>
                                    </div>
                                </div>

                            </a>
                            <!-- /.rt-feature-box -->
                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="row">
                                    <div class="col-md-4 col-4 bg-primary-bluish icon-background">
                                        <i class="fa fa-globe"></i>

                                    </div>
                                    <div class="col-md-8 col-8">
                                        <p class="payment-text">Domain settings</p>
                                    </div>
                                </div>
                            </a>
                            <!-- /.rt-feature-box -->
                        </div>

                    </div>
                    <div class="col-md-6 mt-5">

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12  mt-5">
                        <div class="single-feature-item wow fade-in-bottom">
                            <a class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="container">
                                    <div class="row text-center">
                                        <div class="col-md-4 mt-20 mb-20">
                                            <h6 class="payment-heading text-muted">Purchase price:</h6>
                                            <h4 class="payment-description">${{round($subs->total_paid * $subs->month)}}</h4>
                                        </div>
                                        <div class="col-md-4 mt-20 mb-20">
                                            <h6 class="payment-heading text-muted">Payments:</h6>
                                            <h4 class="payment-description">{{$subs->month}} × ${{$subs->total_paid}}</h4>
                                        </div>
                                        <div class="col-md-4 mt-20 mb-20">
                                            <h6 class="payment-heading text-muted">Payments made:</h6>
                                            <h4 class="payment-description"> {{$subs->count}}</h4>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <!-- /.rt-feature-box -->
                        </div>


                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="single-feature-item wow fade-in-bottom">
                            <div class="rt-feature-box  rt-p-20 billing-card" href="#" style="padding: 10px 20px;">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12 mt-20 mb-20">
                                            <h6 class="payment-heading text-muted">Billing information:</h6>
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <p class="billing-paragraph mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit,consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
                                            <a href="" class="billing-link">Edit</a>

                                        </div>
                                        <div class="col-md-4">
                                            <p class="billing-paragraph mb-0">Abc@gmail.com</p>
                                            <a href=""  class="billing-link">Edit</a>
                                            <br>
                                            <p class="billing-paragraph mb-0">Password:******</p>
                                            <a href=""  class="billing-link">Edit</a>
                                        </div>

                                    </div>

                                </div>

                            </div>
                            <div class="row mt-5">
                                <div class="col-md-12">
                                    <p><span class="font-weight-bold">Did you know?</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit,consequat.
                                        <a href="">GoDaddy.com</a></p>
                                </div>
                            </div>
                            <!-- /.rt-feature-box -->
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <br>
    </div>

@endsection