@extends('layouts.home')
@section('body')
    <section class="section">


        @foreach ($invoices as $invoice)
            <div class="container">
                <h3>My Bill {{ $invoice->invoice_details->tx_ref }}</h3>

                <p class="sub_breadcrumb">User Home / Account / <span> <a href="{{ route('user.bills') }}">Bills</a></span>
                </p>
            </div>
            <div class="containers">
                <div class="sub_info_expanded">
                    <div class="sub_info_profile_price">
                        <div class="">

                            <div class="sub_info_profile_text">
                                <p class="sub_info_name">{{ $invoice->invoice_details->customer->name->first_name }}
                                    {{ $invoice->invoice_details->customer->name->last_name }}</p>
                                <p class="sub_info_email">{{ $invoice->invoice_details->customer->email }}</p>
                            </div>
                        </div>

                        <div class="sub_info_price_status">
                            <p class="sub_info_price">{{ $invoice->invoice_details->currency }}
                                {{ $invoice->invoice_details->amount }}</p>
                            <span
                                class={{ $invoice->status == 0 ? 'pending' : 'live' }}>{{ $invoice->status == 0 ? 'Pending' : 'Paid' }}</span>
                        </div>
                    </div>

                    <div class="sub_info_product_details">
                        <h4>Subscription Information</h4>

                        <div class="sub_info_product_details_flex">
                            <div class="sub_info_product">
                                <p class="sub_info_product_name">{{ $invoice->plan_details->product_name ?? '' }} X
                                    {{ $invoice->plan_details->plan_name ?? '' }}</p>
                                <p class="sub_info_product_plan">Features</p>
                                @foreach ($invoice->plan_details->options as $option)
                                    <p class="sub_info_product_tip">{{ $option->default == 0 ? 'Optional' : 'Default' }}
                                        {{ $option->name }}</p>
                                @endforeach

                            </div>

                            {{-- <div class="sub_info_product_price">
                                <p class="sub_info_product_price_text">₦ 2,800,000</p>
                                <p class="sub_info_product_price_duration">Lifetime</p>
                            </div> --}}
                        </div>
                    </div>

                    <div class="sub_info_item_details" style="  margin-bottom: 100px;">
                        <h4>Invoice Details</h4>
                        @if (isset($invoice->meta))
                            @for ($i = 0; $i < 1; $i++)
                                <div class="sub_info_item_details_flex">
                                    <p>Payment Type:</p>
                                    <div class="sub_date_time">
                                        <p>{{ $invoice->meta[$i]->payment_type }}</p>
                                    </div>
                                </div>

                                <div class="sub_info_item_details_flex">
                                    <p>Payment date:</p>
                                    <div class="sub_date_time">
                                        <p>{{ $invoice->meta[$i]->created_at }}</p>

                                    </div>
                                </div>

                                <div class="sub_info_item_details_flex">
                                    <p>Transaction REf:</p>
                                    <p class="sub_info_item_details_flex_result">{{ $invoice->meta[$i]->flw_ref }}</p>
                                </div>

                                <div class="sub_info_item_details_flex">
                                    <p>Charged Amount:</p>
                                    <p class="sub_info_item_details_flex_result">{{ $invoice->meta[$i]->currency }}
                                        {{ $invoice->meta[$i]->charged_amount }}</p>
                                </div>

                                {{-- <div class="sub_info_item_details_flex">
                           <p>Total Tax Amount:</p>
                           <p class="sub_info_item_details_flex_result">₦ 0</p>
                       </div> --}}
                            @endfor
                        @endif


                    </div>
                </div>

                {{-- <div class="transaction_info_expanded">

                    <div class="table-responsive">
                        <table class="table">
                            <div class="sub_container">
                                <h4>Transaction Details</h4>
                                <div class="sub_scroll_alert">
                                    <p class="sub_scroll_text">Scroll to explore</p>
                                    <ion-icon name="arrow-back-outline"></ion-icon>
                                    <ion-icon name="arrow-forward-outline"></ion-icon>
                                </div>

                                <!-- First Transaction -->
                                <div class="sub_table">
                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>Date</h5>
                                        </div>
                                        <div class="sub_content">
                                            <span class="live">Live</span>
                                            <div class="sub_details_date_time">
                                                <p>Mar 03, 2022</p>

                                                <p>13:14 PM</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>Transactions</h5>
                                        </div>
                                        <div class="sub_content">
                                            <p class="transaction_inv">INV-67960</p>
                                            <p class="transaction_inv_detail">New Sale</p>
                                        </div>
                                    </div>

                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>Transaction ID</h5>
                                        </div>
                                        <div class="sub_content">
                                            <p class="transaction_id">622071e58915440296523a95</p>
                                            <p class="transaction_payment_method">Gateway - Card</p>
                                            <p class="transaction_card_last_4_numbers">Card - 0369</p>
                                            <p class="transaction_gateway_id">Stripe Charge ID: <br>
                                                ch_3K29Kz488WSD8kXb2KzkfXkl</p>
                                        </div>
                                    </div>



                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>AMOUNT</h5>
                                        </div>
                                        <div class="sub_content">
                                            <p class="sub_amount">₦ 2,800,000</p>

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



                                <!-- Second Transaction -->
                                <h4>Invoice Details</h4>
                                <div class="sub_table">
                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>Date</h5>
                                        </div>
                                        <div class="sub_content">
                                            <span class="live">Paid</span>
                                            <div class="sub_details_date_time">
                                                <p>Mar 03, 2022</p>

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

                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>Transactions</h5>
                                        </div>
                                        <div class="sub_content">
                                            <p class="transaction_inv">INV-67960</p>

                                        </div>
                                    </div>

                                    <div class="sub_category">
                                        <div class="sub_head">
                                            <h5>AMOUNT</h5>
                                        </div>
                                        <div class="sub_content">
                                            <p class="sub_amount">₦ 2,800,000</p>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </table>
                    </div>
                </div> --}}
            </div>
        @endforeach


    </section>
@endsection