@extends('layouts.landing')

@section('title', 'Subscription')

@section('content')
    <div class="container-fluid">
        <div class="row">
            @forelse ($packages as $package)
                <div class="col-12 col-xl-4 col-lg-4">
                    <div
                        class="card w-100 shadow-2 {{ $package->recommended == 1 ? 'bg-card-gray' : '' }} mt-4 p-3 br-12 border-1">
                        <div class="mt-1 p-3">
                            <div class="d-flex pb-4 mb-4 border-bottom-xs">
                                <img src="{{ asset('assets/main/images/sub.png') }}" alt="">
                                <div class="ml-1-">
                                    <h4>{{ $package->name }}</h4>
                                    <p class="small-custom">
                                        @if ($package->validity == 'Years')
                                            @if ($package->duration == 1)
                                                ₦{{ number_format($package->price, 2) }} / Year
                                            @elseif($package->duration > 1)
                                                ₦{{ number_format($package->price, 2) }} /
                                                {{ $package->duration }} Years
                                            @endif
                                        @elseif($package->validity == 'Months')
                                            @if ($package->duration > 0 && $package->duration < 2)
                                                NGN {{ number_format($package->price, 2) }} / Month
                                            @elseif($package->duration > 1)
                                                NGN {{ number_format($package->price, 2) }} /
                                                {{ $package->duration }} Months
                                            @endif
                                        @elseif($package->validity == 'Days')
                                            @if ($package->duration > 0 && $package->duration < 2)
                                                NGN {{ number_format($package->price, 2) }} / Day
                                            @elseif($package->duration > 1)
                                                @if ($package->price < 1)
                                                    {{ $package->duration }} Days Trial
                                                @else
                                                    NGN {{ number_format($package->price, 2) }} /
                                                    {{ $package->duration }} Days
                                                @endif
                                            @endif
                                        @endif
                                    </p>
                                    @if ($package->recommended == 1)
                                        <img src="{{ asset('assets/main/images/popular.png') }}" class="popular"
                                            alt="">
                                    @endif
                                </div>
                            </div>
                            <h5 class="fw-700">Features</h5>
                            <div>
                                <ul class="top-content list-unstyled">
                                    @php
                                        $features = '';
                                        if (isset($package->features) && !empty($package->features)) {
                                            $features = json_decode($package->features);
                                        }
                                    @endphp
                                    @forelse ($features as $feature)
                                        <li>
                                            <a class="btn menu-btn d-flex fw-600 mb-2">
                                                <img src="{{ asset('assets/main/images/check.png') }}" alt="">
                                                <span class="-mt-4 ml-1-">{{ $feature }}</span>
                                            </a>
                                        </li>
                                    @empty
                                        <li>
                                            <a class="btn menu-btn d-flex fw-600 mb-2">
                                                <img src="{{ asset('assets/main/images/check.png') }}" alt="">
                                                <span class="-mt-4 ml-1-">None Available for now</span>
                                            </a>
                                        </li>
                                    @endforelse
                                </ul>
                                <div class="text-center pt-4 pb-4">
                                    @if ($package->price < 1)
                                        @if (isLoggedIn())
                                            <a href="/subscribe-to-free/{{ $package->id }}"
                                                class="custom-btn btn w-100 rounded-1 px-5">Start for free</a>
                                        @else
                                            <a href="{{ route('register') }}"
                                                class="custom-btn btn w-100 rounded-1 px-5">Start for free</a>
                                        @endif
                                    @else
                                        <a href="{{ route('checkout', $package->id) }}"
                                            class="custom-btn btn w-100 rounded-1 px-5">Get started</a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            @empty
                <div class="mt-4">
                    <div class="text-center">
                        <h6 class="mb-4">No Upgradable plan found</h6>
                    </div>
                </div>
            @endforelse
            {{-- <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
             
            </div>
            <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
               
            </div> --}}
        </div>
        {{-- <script src="{{ asset('assets/js/push.min.js') }}"></script>
        <script>
            Push.create("Hey there!", {
                body: "Ever seen a senior dev?",
                icon: '/icon.png',
                timeout: 4000,
                onClick: function() {
                    window.focus();
                    this.close();
                }
            });
        </script> --}}

    @endsection