@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">
                    @if ($subscription != null)
                        <div class="row g-3 mb-3">
                            <div class="col-sm-6 col-md-8 d-flex">
                                <div
                                    class="header-banner align-items-center d-flex justify-content-between mb-3 p-4 rounded-4 w-100">
                                    <div class="header-banner-context">
                                        <h3 class="align-items-center d-flex fs-5 gap-2 text-white mb-3">
                                            <img src="{{ asset('front/user/assets/dist/img/SHOWOFF-UNLIMITED-WHITE.png') }}"
                                                alt="" width="35">
                                            <div>
                                                <h6 class="mb-0" style="opacity: 0.7; font-size: 13px;">Your plan</h6>
                                                {{ $subscription->name }} <small class="fs-normal" style="opacity: 0.8;">-
                                                    ({{ $subscription->duration }}/days)</small>
                                            </div>
                                        </h3>
                                        <div class="content-text fs-14 opacity-75 text-white">It is a long established fact
                                            that
                                            a reader will be distracted by the readable content of a page when looking at
                                            its
                                            layout their default.</div>
                                        <!-- <a href="#" class="content-button btn btn-light mt-3">Upgrade Plan</a> -->
                                    </div>
                                    <img class="content-wrapper-img"
                                        src="{{ asset('front/user/assets/dist/img/glass.png') }}" alt=""
                                        width="180">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-4 d-flex">
                                <div style="background: #493a52;"
                                    class="qr-header-banner header-banner align-items-center d-flex justify-content-between mb-3 p-2 rounded-4 w-100">
                                    {!! QrCode::size(300)->generate('https://dxbitprojects.com/showoff/public/user_detail/' . auth()->user()->id) !!}

                                    {{-- <div class="action-are">
                                        <p>Share Your QR</p>
                                        <div>
                                            <a href="{{ asset('front/user/assets/dist/img/9c1d35fa59da3240835207db61b9998a.png') }}"
                                                class="link" download>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24"
                                                    style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                                                    <path d="M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z"></path>
                                                </svg>
                                            </a>
                                            <a href="{{ asset('front/user/assets/dist/img/9c1d35fa59da3240835207db61b9998a.png') }}"
                                                class="link popup-img-link">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24"
                                                    style="fill: rgba(255, 255, 255, 1);transform: ;msFilter:;">
                                                    <path
                                                        d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z">
                                                    </path>
                                                </svg>
                                            </a>
                                        </div>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="row g-3 mb-3">

                        <div class="col-sm-6 col-md-6 col-lg-6  d-flex">
                            <div class="card flex-column flex-fill p-4 position-relative shadow w-100 widget-card">
                                <div class="d-flex">
                                    <div class="flex-grow-1 ms-3">
                                        <div class="fs-14 text-muted">Points</div>
                                        <h3 class="fw-semi-bold mb-0">{{ auth()->user()->loyalty_points }}</h3>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <img src="{{ asset('front/user/assets/dist/img/degrees.png') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 d-flex">
                            <div class="card flex-column flex-fill p-4 position-relative shadow w-100 widget-card">
                                <div class="d-flex">
                                    <div class="flex-grow-1 ms-3">
                                        <div class="fs-14 text-muted">Saved</div>
                                        <h3 class="fw-semi-bold mb-0">AED
                                            {{ auth()->user()->loyalty_points > 0 ? auth()->user()->loyalty_points / 10 : 0 }}
                                        </h3>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <img src="{{ asset('front/user/assets/dist/img/sales-performance-v2.png') }}"
                                            alt="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header position-relative">
                                <h6 class="fs-17 fw-semi-bold my-1">Recent Services</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>SL</th>
                                                <th>Company</th>
                                                <th>Service Date</th>
                                                <th>Service</th>
                                                <!-- <th class="text-end">View Booking</th> -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($services as $key => $service)
                                                <tr>
                                                    <td>
                                                        {{ $key + 1 }}
                                                    </td>
                                                    <td>
                                                        {{ \App\Models\VendorModel::find($service->vendor_id)->business_name }}
                                                    </td>
                                                    <td>
                                                        {{ date('d-M-Y', strtotime($service->created_at)) }}
                                                    </td>
                                                    <td>
                                                        {{ \App\Models\Service::find($service->service_id)->name }}
                                                    </td>
                                                </tr>
                                            @endforeach

                                        </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/magnific-Popup/jquery.magnific-popup.min.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