@extends('layouts.app')
@section('title', $page_title)
@section('content')

@section('extra_style')
<style>

</style>
@endsection

<section class="content">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="box">
                <div class="box-body">
                    <div class="inner-head-section">
                        <div class="row align-items-center">
                            <div class="col-md-6 col-xs-12 text-left">
                                <div class="inner-title">
                                    <span>Payment History</span>
                                </div>
                            </div>
                            <div class="col-md-6 col-xs-12 text-right">
                                <div class="all-vol-btn">
                                    <a href="https://www.ryzeproducts.com/admin/add-plans">
                                        <button>
                                            <svg class="svg-inline--fa fa-plus-circle fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
                                                <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path>
                                            </svg>
                                            Add New Plan
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-box-area">
                        <div class="card-box-area-inner">
                            <div class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                <div class="custom-mini-table">
                                    <div id="example1_wrapper" class="dataTables_wrapper no-footer">
                                        <div class="dataTables_length" id="example1_length">
                                            <label>
                                                Show
                                                <select name="example1_length" aria-controls="example1" class="">
                                                    <option value="10">10</option>
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                                entries
                                            </label>
                                        </div>
                                        <div id="example1_filter" class="dataTables_filter">
                                            <label>Search:
                                                <input type="search" class="" placeholder="" aria-controls="example1">
                                            </label>
                                        </div>
                                        <table id="example1" class="table table-bordered table-striped dataTable no-footer" role="grid" aria-describedby="example1_info">
                                            <thead>
                                                <tr role="row">
                                                    <th class="sorting">Customer Name</th>
                                                    <th class="sorting">Email</th>
                                                    <th class="sorting">Plan Purchased</th>
                                                    <th class="sorting">Transaction Id</th>
                                                    <th class="sorting">Amount</th>
                                                    <th class="sorting">Date of Purchased</th>
                                                    <th class="sorting">Contact Details</th>
                                                    <th class="sorting">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr role="row" class="odd">
                                                    <td>Andrew</td>
                                                    <td>andrew@123.com</td>
                                                    <td>Plan 2</td>
                                                    <td>$200</td>
                                                    <td>15 March 202200</td>
                                                    <td>0000000 0000 000</td>
                                                    <td>
                                                        <a href="#">
                                                            <button type="submit" class="custon-active">Active</button>
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <div class="action-btns">
                                                            <a class="view-btn" href="#" title="View">Edit</a>
                                                            <a class="view-btn" href="#" title="View">View</a>
                                                            <a class="delete-btn" href="#" title="Delete">
                                                                <svg class="svg-inline--fa fa-trash fa-w-14 fa-lg" onclick="return confirm('do you want to delete this category yes/no');" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                                                                    <path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr role="row" class="even">
                                                    <td>Andrew</td>
                                                    <td>andrew@123.com</td>
                                                    <td>Plan 2</td>
                                                    <td>$200</td>
                                                    <td>15 March 202200</td>
                                                    <td>0000000 0000 000</td>
                                                    <td>
                                                        <a href="#">
                                                            <button type="submit" class="custon-active">Active</button>
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <div class="action-btns">
                                                            <a class="view-btn" href="#" title="View">Edit</a>
                                                            <a class="view-btn" href="#" title="View">View</a>
                                                            <a class="delete-btn" href="#" title="Delete">
                                                                <svg class="svg-inline--fa fa-trash fa-w-14 fa-lg" onclick="return confirm('do you want to delete this category yes/no');" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                                                                    <path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr role="row" class="odd">
                                                    <td>Andrew</td>
                                                    <td>andrew@123.com</td>
                                                    <td>Plan 2</td>
                                                    <td>$200</td>
                                                    <td>15 March 202200</td>
                                                    <td>0000000 0000 000</td>
                                                    <td>
                                                        <a href="#">
                                                            <button type="submit" class="custon-active">Active</button>
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <div class="action-btns">
                                                            <a class="view-btn" href="#" title="View">Edit</a>
                                                            <a class="view-btn" href="#" title="View">View</a>
                                                            <a class="delete-btn" href="#" title="Delete">
                                                                <svg class="svg-inline--fa fa-trash fa-w-14 fa-lg" onclick="return confirm('do you want to delete this category yes/no');" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                                                                    <path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr role="row" class="even">
                                                    <td>Andrew</td>
                                                    <td>andrew@123.com</td>
                                                    <td>Plan 2</td>
                                                    <td>$200</td>
                                                    <td>15 March 202200</td>
                                                    <td>0000000 0000 000</td>
                                                    <td>
                                                        <a href="#">
                                                            <button type="submit" class="custon-active">Active</button>
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <div class="action-btns">
                                                            <a class="view-btn" href="#" title="View">Edit</a>
                                                            <a class="view-btn" href="#" title="View">View</a>
                                                            <a class="delete-btn" href="#" title="Delete">
                                                                <svg class="svg-inline--fa fa-trash fa-w-14 fa-lg" onclick="return confirm('do you want to delete this category yes/no');" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
                                                                    <path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path>
                                                                </svg>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <div class="dataTables_info" id="example1_info" role="status" aria-live="polite">Showing 1 to 8 of 8 entries</div>
                                        <div class="dataTables_paginate paging_simple_numbers" id="example1_paginate"><a class="paginate_button previous disabled" aria-controls="example1" data-dt-idx="0" tabindex="0" id="example1_previous">Previous</a><span><a class="paginate_button current" aria-controls="example1" data-dt-idx="1" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="example1" data-dt-idx="2" tabindex="0" id="example1_next">Next</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@section('extra_scripts')

@endsection

@endsection