@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<style>
    .overview-cards {
        border: 1px solid !important;
        border-color: #d4d4d4 !important;
    }
</style>
@endsection

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Billing</h4>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <ul class="nav nav-pills navtab-bg" id="nav-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="nav-overview-tab" data-toggle="tab" href="#nav-overview" role="tab" aria-controls="nav-overview" aria-selected="true">Overview</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="nav-invoices-tab" data-toggle="tab" href="#nav-invoices" role="tab" aria-controls="nav-invoices" aria-selected="false">Invoices</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane show active" id="nav-overview">
                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="card overview-cards">
                                    <div class="card-body pb-4">
                                        <h5 class="font-size-18">Plan: Free 7 days trial</h5>
                                        <p class="font-size-16">Current period: 06/07/2021 to 13/07/2021</p>
                                        <!-- <p class="font-size-16">Children added: 10</p> -->
                                        <p class="font-size-16 text-danger">Expires in 5 days</p>
                                        <a href="{{route('message.add')}}" class="mt-3 btn btn-success btn-min-width">Purchase plan</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="card overview-cards">
                                    <div class="card-body pb-4">
                                        <h5 class="font-size-18">Payment details</h5>
                                        <p class="font-size-16">Next payment: 01/10/2021</p>
                                        <p class="font-size-16">Card information: 4242 4242 XXXX XXXX</p>
                                        <a href="{{route('message.add')}}" class="mt-3 btn btn-success btn-min-width">Update card</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="nav-invoices">
                        <h5 class="font-size-18 mb-3">Invoices</h5>
                        <div class="row">
                            <div class="col-sm">
                                <h5 class="font-size-18">Plan: Free 7 days trial <span class="text-danger">(3 days left)</span></h5>
                                <p class="font-size-16">Current period: 07/05/2020 to 14/05/2020</p>
                                <p class="font-size-16">Children added: 10</p>
                            </div>
                            <div class="col-sm-auto">
                                <a href="{{route('message.add')}}" class="btn btn-success btn-min-width">Purchase plan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/datatables/jquery.dataTables.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.responsive.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script type="text/javascript"> var recipientUrl=""; </script>
<script defer src="{{ Helper::assets('assets/js/pages/school-billing.js') }}" type="text/javascript"></script>
@endsection