@extends('backend::layouts.app')

@section('content')
    <div class="container">

        <x-ui.breadcrumb title="Subscription">
            <a class="breadcrumb-item" href="{{ route('backend.subscription.index') }}">Subscription</a>
            <span>show</span>
        </x-ui.breadcrumb>


        <div class="card">
            <div class="card-header">Invoices</div>
            <div class="card-body">
                <table class="table table-hover table-sm mb-0 ">
                    <thead>
                    <tr>
                        <th>Invoice ID:</th>
                        <th>Amount Due:</th>
                        <th>Status:</th>
                        <th>Created:</th>
                        <th>Period Start:</th>
                        <th>Period End:</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($invoices->data as $invoice)
                        <tr>
                            <td>{{ $invoice->id }}</td>
                            <td>{{ $invoice->amount_due / 100 }}</td>
                            <td class="{{ $invoice->status == 'paid' ? 'text-success' : 'text-danger' }}">{{ $invoice->status }}</td>
                            <td>{{ app_datetime($invoice->created) }}</td>
                            <td>{{ app_date($invoice->period_start) }}</td>
                            <td>{{ app_date($invoice->period_end) }}</td>
                            <td>
                                <a class="text-primary" href="{{  $invoice->invoice_pdf }}" target="_blank">Download Invoice - PDF</a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-header">Charges</div>
            <div class="card-body">
                <table class="table table-hover table-sm mb-0 ">
                    <thead>
                    <tr>
                        <th>Charge ID:</th>
                        <th>Amount Due:</th>
                        <th>Status:</th>
                        <th>Created:</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($charges->data as $charge)
                        <tr>
                            <td>{{ $charge->id }}</td>
                            <td>{{ $charge->amount / 100 }}</td>
                            <td class="{{ $charge->status == 'succeeded' ? 'text-success' : 'text-danger' }}">{{ $charge->status }}</td>
                            <td>{{ app_datetime($charge->created) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card">
            <div class="card-header">Actions</div>
            <div class="card-body">
                <table class="table table-borderless table-sm mb-0 ">
                    <thead>
                    <tr>
                        <th>Action</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <a href="#" class="btn btn-danger"><i class="fa fa-arrow-right"></i> Cancel subscription</a>
                        </td>
                        <td>
                            <ul>
                                <li class="text-danger">(under development)</li>
                                <li>The user will no longer have access to the associated services or products after the current billing period ends.</li>
                                <li>The user may still receive notifications regarding their subscription status, and there may be options for renewing or re-subscribing in the future.</li>
                                <li>The user will have access to all the resource until the end of subscription</li>
                                <li>Additionally, depending on the cancellation policy, the user might lose any remaining benefits or credits associated with that subscription.</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#" class="btn btn-primary"><i class="fa fa-arrow-right"></i> Send Stripe Payment Link</a>
                        </td>
                        <td>
                            <ul>
                                <li class="text-danger">(under development)</li>
                                <li>The user will will receives an email with the payment link for the current subscription</li>
                            </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
@endsection