@extends('user.layouts.master')
@section('title', __('unlimited'))
@section('contents')

    <!-- Page Content  -->
    <div class="content-wrapper">
        <div class="main-content">
            <!-- Start navbar -->
            @include('user.pages.navbar')
            <!-- End /. navbar -->
            <div class="body-content">
                <div class="Feboration blur-2"></div>
                <div class="Feboration blur-3"></div>
                <div class="container-xxl">
                    <div class="row g-3 mb-3">


                       @if ($errors->any())
                       <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

                    </div>
                    @endif
                    @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif

                        <div class="card">
                            <div class="card-header position-relative">
                                <h6 class="fs-17 fw-semi-bold my-1">Subscription Package History</h6>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-borderless table-condensed text-nowrap category-list"
                                        id="example2">
                                        <thead>
                                            <tr>
                                                
                                                <th>Package</th>
                                                <th>Price</th>
                                                <th>Duration</th>
                                                <th>Services</th>
                                                <th>End At</th>
                                                <!-- <th class="text-end">View Booking</th> -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            
                                                <tr> 
                                                    <td>
                                                        {{ $subscriptions->name ?? '' }}
                                                    </td>
                                                    <td>
                                                        {{ $subscriptions->price ?? '' }}
                                                    </td>
                                                    <td>
                                                        {{ $subscriptions->duration ?? '' }}
                                                    </td> 
                                                    <td>
                                                        {{ $subscriptions->services ?? '' }}
                                                    </td>

                                                     <td>
                                                        {{ $user->subscription_end_at ?? '' }}
                                                    </td>
                                                </tr>
                                            

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/.body content-->
            </div>
            <!--/.main content-->
        </div>

    @endsection
    @push('style')
        <link href="{{ asset('front/user/assets/plugins/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet">
        <link href="{{ asset('front/user/assets/plugins/magnific-Popup/magnific-popup.css') }}" rel="stylesheet">
    @endpush
    @push('script')
        {{-- <script src="{{ asset('front/user/assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('front/user/assets/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script> --}}
        <script src="{{ asset('front/user/assets/plugins/magnific-Popup/magnific-popup.js') }}"></script>
        <script src="{{ asset('front/user/assets/dist/js/app.min.js') }}"></script>
        <!-- Page Active Scripts(used by this page) -->
        {{-- <script src="{{ asset('front/user/assets/dist/js/dashboard.js') }}"></script> --}}
        <script>
            $(document).ready(function() {
                $('.popup-img-link').magnificPopup({
                    type: 'image'
                });
            });
        </script>
    @endpush