@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@extends('admin.layouts.layout', $headerOption)
@section('content')
    <div class="col-12">
        <div class="project-box">
            <div class="heading-btn-sec">
                <h3>Billing</h3>
            </div>
             <div class="inner-tab mt-4">
                <ul class="nav nav-tabs project-tab mb-30" id="myTab" role="tablist">

                    <li class="nav-item" role="presentation">

                        <button class="nav-link active waves-effect" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane"

                            type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Invoices</button>

                    </li>

                    <li class="nav-item" role="presentation">

                        <button class="nav-link waves-effect" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane"

                            type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Payment Profile</button>

                    </li>

                    <li class="nav-item" role="presentation">

                        <button class="nav-link waves-effect" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane"

                            type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Buy Credits</button>

                    </li>

                </ul>

                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">

                    <div class="row">

                        <div class="col-12 ">

                            <div class="heading-btn-sec inner-hed-btn"><p class="mb-0">Invoice #: 28917  |  Feb 28, 2025 - Mar 30, 2025</p>
                                <div class="heading-btn">
                                    <div class="project-form ">
                                        <label>Select Invoice</label>
                                        <select class="form-select form-control" aria-label="Default select example" style="">
                                            <option class="select-op">#28917 - Mar 31</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                    </div>
                                    <button type="button" class="green-btn-inner waves-effect">Download Invoice <i class="bx bx-download"></i></button>
                                </div>
                            </div>

                            <div class="project-box ">

                                <div class="table-responsive project-table no-border">

                                <table id="datatable" class="table mb-0 dt-responsive nowrap">
                                    <thead class="thead-light ">
                                        <tr>
                                            <th class="w-5">#</th>
                                            <th class="text-center">Description</th>
                                            <th class="text-center">Quantity</th>
                                            <th class="text-end">Unit Price</th>
                                            <th class="text-end">Total Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="w-5">1</td>
                                            <td class="text-center">E-Sign Sent Apps</td>
                                            <td class="text-center">2</td>
                                            <td class="text-end">$1.00</td>
                                            <td class="text-end"><b>$2.00</b></td>
                                        </tr>
                                        <tr class="thead-light">
                                            <td class="w-5"></td>
                                            <td class="text-center"></td>
                                            <td class="text-center"></td>
                                            <td class="text-end">Sub Total:</td>
                                            <td class="text-end"><b>$2.00</b></td>
                                        </tr>
                                        <tr class="thead-light">
                                            <td class="w-5"></td>
                                            <td class="text-center"></td>
                                            <td class="text-center"></td>
                                            <td class="text-end">Credits:</td>
                                            <td class="text-end"><b>-$0.00</b></td>
                                        </tr>
                                        <tr class="thead-light">
                                            <td class="w-5"></td>
                                            <td class="text-center"></td>
                                            <td class="text-center"></td>
                                            <td class="text-end">Sales Tax:</td>
                                            <td class="text-end"><b>$0.00</b></td>
                                        </tr>
                                        <tr class="thead-light">
                                            <td class="w-5"></td>
                                            <td class="text-center"></td>
                                            <td class="text-center"></td>
                                            <td class="text-end">Total:</td>
                                            <td class="text-end"><b>$2.00</b></td>
                                        </tr>
                                    </tbody>
                                    
                                </table>

                                </div>

                            </div>

                    </div>

                    </div>

                    </div>



                    <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">

                        <div class="row">

                        <div class="col-12 ">

                            <div class="project-box ">
                                <div class="row">
                                    <div class="col-lg-4 col-md-6 col-12">
                                        <div class="project-form">
                                            <label>Account Number</label>
                                            <input class="form-control" type="password" placeholder="**********4165">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12">
                                        <div class="project-form">
                                        <label>Routing Number</label>
                                        <select class="form-select form-control" aria-label="Default select example" style="">
                                            <option class="select-op">122037760- first citizens bank</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12"></div>
                                    <div class="col-12">
                                        <div class="radio-txt mb-15">
                                            <h4>Bank Account Type:</h4>
                                                <div class="custom-control custom-radio ">
                                                    <input type="radio" id="radio1" name="radio" class="custom-control-input" value="checking" checked="">
                                                    <label class="custom-control-label" for="radio1">Checking</label>
                                                </div>
                                                <div class="custom-control custom-radio ">
                                                    <input type="radio" id="radio2" name="radio" class="custom-control-input" value="savings">
                                                    <label class="custom-control-label" for="radio2">Savings</label>
                                                </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="project-form">
                                            <label>Company</label>
                                            <input class="form-control" type="text" placeholder="AAZ enterprises Inc">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="project-form">
                                            <label>Name</label>
                                            <input class="form-control" type="text" placeholder="AAZ enterprises Inc">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="project-form">
                                            <label>Billing Address</label>
                                            <input class="form-control" type="text" placeholder="21550 Oxnard St">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="project-form">
                                            <label>Billing City</label>
                                            <input class="form-control" type="text" placeholder="Woodland Hills">
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12">
                                        <div class="project-form">
                                        <label>Billing State</label>
                                        <select class="form-select form-control" aria-label="Default select example" style="">
                                            <option class="select-op">California</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12">
                                        <div class="project-form">
                                        <label>Billing Zip</label>
                                        <select class="form-select form-control" aria-label="Default select example" style="">
                                            <option class="select-op">91367</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                        </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-6 col-12"></div>
                                    <div class="w-12">
                                        <button type="button" class="green-btn-inner waves-effect w-auto">Save Profile</button>
                                    </div>
                                </div>
                            </div>

                    </div>

                    </div>

                    </div>



                    <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">

                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="billing-card active">
                                    <div class="billing-card-body">
                                        <div class="custom-control custom-checkbox ">
                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton" value="checked">
                                            <label class="custom-control-label" for="closeButton">15,000 minutes</label>
                                        </div>
                                        <div class="billing-card-body-txt"><h4>$0.00 /month</h4></div>
                                    </div>
                                    <div class="billing-card-footer">
                                        <span>Dialler Minutes</span>
                                        <span>5,000</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="billing-card ">
                                    <div class="billing-card-body">
                                        <div class="custom-control custom-checkbox ">
                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton1" >
                                            <label class="custom-control-label" for="closeButton1">15,000 minutes</label>
                                        </div>
                                        <div class="billing-card-body-txt"><h4>$499.00 /month</h4></div>
                                    </div>
                                    <div class="billing-card-footer">
                                        <span>Dialler Minutes</span>
                                        <span>5,000</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-12 col-12">
                                <div class="billing-card ">
                                    <div class="billing-card-body">
                                        <div class="custom-control custom-checkbox ">
                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton2" value="checked">
                                            <label class="custom-control-label" for="closeButton2">30,000 minutes</label>
                                        </div>
                                        <div class="billing-card-body-txt"><h4>$899.00 /month</h4></div>
                                    </div>
                                    <div class="billing-card-footer">
                                        <span>Dialler Minutes</span>
                                        <span>5,000</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="buy-heading my-4"><h2>SMS</h2></div>
                        <div class="row">
                            <div class="col-lg-4 col-md-12 col-12">
                                <div class="billing-card ">
                                    <div class="billing-card-body">
                                        <div class="custom-control custom-checkbox ">
                                            <input type="checkbox" class="custom-control-input input-mini" id="closeButton3" value="checked">
                                            <label class="custom-control-label" for="closeButton3">15,000 minutes</label>
                                        </div>
                                        <div class="billing-card-body-txt"><h4>$499.00 /month</h4></div>
                                    </div>
                                    <div class="billing-card-footer">
                                        <span>Dialler Minutes</span>
                                        <span>5,000</span>
                                    </div>
                                </div>
                            </div>
                            <div class="w-12 ">
                                <button type="button" class="green-btn-inner waves-effect w-auto">Save Changes</button>
                            </div>
                        </div>
            </div>
            <nav aria-label="Page navigation example " class="mt-3 pagination-two">
                            <span>Showing 0 to 0 of 0 entries</span>
                            <ul>
                                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            </ul>
                        </nav>
        </div>
    </div>
@endsection
@push('page_script')
@endpush