@extends('layouts.dashboard.app')

@php
    $body_class = 'fullpage';


    $header_params = [
            'heading_page_title' => 'Billing Info',
    ];
@endphp

@section('content')

    <div class="wrapper header-fixed sidebar-gutters">
        <main class="content">
            <section class="full-vh">
                <div class="card">
                    <div class="decor-border-bottom-4">
                        <div class="payment-group">
                            <div class="payment-item">
                                <h3 class="mb-16">Payment Schedule</h3>
                                <p class="color-secondary text--xs fw-500 mb-28">Check when will be your next payment. </p>
                                @if($activeSub)
                                <div class="payment-item__card">
                                    <div class="payment-item__group-price">
                                        <span class="payment-item__card-price --gradient-text">{{ $activeSub->plan->price }} {{\App\Models\Setting::get('currency_sign')}}</span>
                                        <div class="payment-item__card-text border-left-decor">
                                            <span class="fw-500">{{ $activeSub->plan->title }} Plan</span>
                                            <span class="text--xs">
                                                @if( $activeSub->plan->cancel_at)
                                                    Cancel at: {{ date('d M Y', $activeSub->plan->cancel_at) }}
                                                @else
                                                    @if($activeSub->current_period_end)
                                                    Next payment: {{ date('d M Y', $activeSub->current_period_end) }}
                                                    @endif
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <a href="{{ route('dashboard.subscription-plans.index') }}" class="btn btn--primary btn--md radius-10">Change Plan</a>
                                </div>
                                @elseif($currentPlan)

                                    <div class="payment-item__card">
                                        <div class="payment-item__group-price">
                                            <span class="payment-item__card-price --gradient-text">{{ $currentPlan->price }} {{\App\Models\Setting::get('currency_sign')}}</span>
                                            <div class="payment-item__card-text border-left-decor">
                                                <span class="fw-500">{{ $currentPlan->title }} Plan</span>

                                            </div>
                                        </div>
                                        <a href="{{ route('dashboard.subscription-plans.index') }}" class="btn btn--primary btn--md radius-10">Change Plan</a>
                                    </div>

                                @endif
                            </div>
                            <div class="payment-item">
                                <h3 class="mb-16">Payment Method</h3>
                                <p class="color-secondary text--xs fw-500 mb-28">Change the way how you pay for the plan.</p>
                                <div class="payment-item__card">
                                    @if($defMethod)
                                        @php
                                        $card_data = $defMethod->data??[];

                                        @endphp
                                        <div class="flex items-start gap-16">
                                            @if($card_data['card']['brand']??0 && $card_data['card']['brand'] == 'visa')
                                            <div class="payment-item__card-logo">
                                                @php include(public_path('dash/img/visa-logo.svg')) @endphp
                                            </div>
                                            @endif
                                            <div class="payment-item__card-text">
                                                <span class="fw-500">{{ ucfirst($card_data['card']['brand']??'')  }} card</span>
                                                <span class="text--xs">Expiry {{ $card_data['card']['exp_month']??'' }}/{{ $card_data['card']['exp_year']??'' }}</span>
                                            </div>
                                        </div>
                                        <a href="#" data-modal="#update-card-form-popup" class="btn btn--primary btn--md radius-10">Update Method</a>
                                    @else
                                        <div class="flex items-start gap-16">
                                        </div>
                                        <a href="#" data-modal="#update-card-form-popup" class="btn btn--primary btn--md radius-10">Set Method</a>
                                    @endif


                                </div>
                            </div>
                        </div>
                    </div>
                    <h3 class="mb-16">Billing History</h3>
                    <p class="color-secondary text--xs fw-500 mb-28">You can find the recipes of all your transactions here. </p>

                    @if($charges)
                        <div class="table-wrapper min-h-300 mb-28">
                            <table class="table" cellpadding="0" cellspacing="0">
                                <thead>
                                <tr>
                                    <th style="width: 150px">Date</th>
                                    <th>Description</th>
                                    <th style="width: 150px">Invoice Total</th>
                                    <th style="width: 150px">Status</th>
                                    {{-- <th style="width: 150px">Action</th> --}}
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($charges as $charge)
                                    <tr>
                                        <td>
                                            <span class="fw-500">{{ $charge->created }}</span>
                                        </td>
                                        <td>{{ $charge->description }}</td>
                                        <td> <span class="fw-500">{{ $charge->amount }}</span></td>
                                        <td>
                                            @if($charge->status == 'succeeded')
                                            <span class="pill pill-paid">
                                                @php include(public_path('dash/img/icon-check-streamline-core.svg')) @endphp
                                                Paid
                                            </span>
                                            @else
                                                {{ $charge->status }}
                                            @endif

                                        </td>
                                        {{-- <td>
                                            @if($charge->receipt_url)
                                                <a target="_blank" href="{{ $charge->receipt_url }}" class="btn--download" download="">
                                                    <span class="ico">
                                                         @php include(public_path('dash/img/icon-download.svg')) @endphp
                                                    </span>
                                                    <span class="btn--download__text">Download</span>
                                                </a>
                                            @endif
                                        </td> --}}
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                    @if(false)
                    <div class="pagination-group">
                        <ul class="paginations-list">
                            <li class="pagination-item">
                                <button class="pagination__page active">1</button>
                            </li>
                            <li class="pagination-item">
                                <button class="pagination__page">2</button>
                            </li>
                            <li class="pagination-item">
                                <button class="pagination__page">3</button>
                            </li>
                            <li class="pagination-item">
                                <span class="pagination-dots">...</span>
                            </li>
                            <li class="pagination-item">
                                <button class="pagination__page">8</button>
                            </li>
                            <li class="pagination-item">
                                <button class="pagination__page">9</button>
                            </li>
                        </ul>

                        <div class="pagination-btn-group">
                            <button class="pagination-btn pagination-btn-prev pagination-btn-diseble">
                                @php include(public_path('dash/img/arrow-right.svg')) @endphp
                                Prev
                            </button>
                            <button class="pagination-btn pagination-btn-next">
                                Next
                                @php include(public_path('dash/img/arrow-right.svg')) @endphp
                            </button>
                        </div>

                    </div>
                    @endif
                </div>
            </section>

        </main>



        <div id="update-card-form-popup" class="modal">
            <div class="modal__dialog modal__dialog--md tw-max-w-xl">
                <div class="modal__content">
                    <div class="modal__header">
                        <h3>Payment Cart Info</h3>
                        <a href="#" class="btn btn-close btn--square btn--light" data-close-modal="">
                            <img src="{{ asset('dash/img/ico-close.svg') }}">
                        </a>
                    </div>
                    <form class="payment-methods-block2 add-payment-method">
                        @csrf

                        <span class="d-none" id="user-data" data-period="" data-plan="" data-email="{{$currentUser->email}}"  data-name="{{$currentUser->name}}"></span>

                        {{-- <div id="credit-card" class="form-group row gy-24 gx-16">
                            <div class="popup_input_line col-12 ">
                                <div class="form-group input--xl">
                                    <label  class="label porfile-change__form-label">Card Number</label>
                                    <div class="input input--outline" id="cardNumber"></div>
                                </div>
                                <div class="form-group input--xl">
                                    <label  class="label porfile-change__form-label">Expiration Date</label>
                                    <div class="input input--outline" id="cardExp"></div>
                                </div>
                                <div class="form-group input--xl">
                                    <label  class="label porfile-change__form-label">CVV Code</label>
                                    <div class="input input--outline" id="cardCVC"></div>
                                </div>
                            </div>
                        </div> --}}

                        <div id="credit-card"  class="form-group row gy-24 gx-16 tw-max-w-lg">
                            <div class="popup_input_line col-12 ">
                                <div class="form-group input--xl">
                                    <label for="email" class="label porfile-change__form-label">Card</label>
                                    <div id="cardNumber" class="input input--outline  tw-h-14"></div>
                                </div>
                            </div>
                          <div class=" grid tw-grid-cols-2 tw-gap-4">
                            <div class="popup_input_line col-12">
                                <div class="form-group input--xl">
                                    <label for="password" class="label porfile-change__form-label">Expiration</label>
                                    <div id="cardExp" class="input input--outline tw-h-14"></div>
                                </div>
                            </div>
                            <div class="popup_input_line col-12">
                                <div class="form-group input--xl">
                                    <label for="password" class="label porfile-change__form-label">CVC</label>
                                    <div id="cardCVC" class="input input--outline tw-h-14"></div>
                                </div>
                            </div>
                            <div>
                        </div>
                        <div class="mt-auto pt-5 pb-5 text-center">
                            <div class="actions-butts">
                               {{-- <a href="#" class="btn btn-white btn-form btn-exit">Cancel</a>--}}
                                <button type="submit" class="btn btn--primary btn--lg btn--lg-2">Update</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <x-footer-dashboard />
    </div>

@endsection



@push('scripts')
    <script>
        var STRIPE_PUB_KEY = "{{\App\Models\Setting::get('stripe_public_key')}}";
    </script>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="{{ asset('dash/js/dash-subscription-plans.js') }}"></script>
    <script src="{{ asset('js/payments.js') }}"></script>
@endpush