@extends('front.layouts.master')
@section('title', __('unlimited'))
@section('content')


    <div class="py-5 bg-gradient rounded-4 mx-3 mt-3">
        <div class="container py-4">
            <!-- start tab content -->
            @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="tab-content">
                <div class="tab-pane fade show active" id="monthly-tab-pane" role="tabpanel" aria-labelledby="monthly-tab"
                    tabindex="0">
                    <!-- start pricing table -->
                    <div class="table-responsive">
                        <table class="table table-hover pricing-table table-responsive-md">
                            <thead>
                                <tr>
                                    <th scope="col">
                                        <div class="fs-4 fw-semibold h6 mb-0 mb-2">Plan & Features</div>
                                        <p class="mb-0 fw-normal">Hidden in the middle generators<br> tend repeat
                                            predefin.
                                        </p>
                                    </th>
                                    @foreach ($subscriptions as $subscription)
                                        <th scope="col">
                                            <span class="font-caveat fs-3 text-primary">{{ $subscription->name }}</span>
                                            <div class="d-flex pt-md-3">
                                                <span class="h3">AED </span>
                                                <span class="display-4 fw-semibold">{{ $subscription->price }}</span>
                                            </div>
                                            <span class="text-small fw-normal text-nowrap">Per user, billed
                                                monthly</span>

                                            @if (auth()->user())
                                                <form action="{{ url('user/subscription', ['id' => $subscription->id]) }}"
                                                    method="POST" id="subscriptionForm{{ $subscription->id }}">
                                                    @csrf
                                                    <a onclick="document.getElementById('subscriptionForm{{ $subscription->id }}').submit();"
                                                        class="btn d-block mt-4 btn-outline-primary text-nowrap">
                                                        Get {{ $subscription->name }}
                                                    </a>
                                                </form>
                                            @else
                                                <a href="{{ url('sign-in') }}"
                                                    class="btn d-block mt-4 btn-outline-primary text-nowrap">{{ $subscription->name }}</a>
                                            @endif
                                        </th>
                                    @endforeach

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">
                                        <span class="d-block fw-semibold h6 mb-0 text-nowrap">Days</span>
                                    </th>
                                    @foreach ($subscriptions as $subscription)
                                        <td>
                                            <span>{{ $subscription->duration }}</span>
                                        </td>
                                    @endforeach

                                    <!-- <td>
                                                                                        <span>Unlimited</span>
                                                                                    </td> -->
                                </tr>
                                <tr>
                                    <th scope="row">
                                        <span class="d-block fw-semibold h6 mb-0 text-nowrap">Services</span>
                                    </th>
                                    @foreach ($subscriptions as $subscription)
                                        <td>
                                            <span>{{ $subscription->services }}</span>
                                        </td>
                                    @endforeach
                                    <!-- <td>
                                                                                        <span>Unlimited</span>
                                                                                    </td> -->
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- end /. pricing table -->
                </div>
            </div>
            <!-- end /. tab content -->
            <div class="text-center">Interested in a custom plan? <a href="#" class="text-primary fw-medium">Get
                    in
                    touch</a></div>
        </div>
    </div>
    <!-- Footer Section Start -->
@endsection

@push('styles')
    <link href="{{ asset('front/assets/plugins/aos/aos.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/fontawesome/css/all.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/OwlCarousel2/css/owl.carousel.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/OwlCarousel2/css/owl.theme.default.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/fancy_fileupload.css') }}"
        rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/ion.rangeSlider/ion.rangeSlider.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/magnific-popup/magnific-popup.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/select2/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('front/assets/plugins/select2-bootstrap-5/select2-bootstrap-5-theme.min.css') }}"
        rel="stylesheet">
    <style>
        .table thead th {
            background-color: #f9efff;
        }

        .pricing-table td,
        .pricing-table th {
            padding: 1.5rem;
        }
    </style>
@endpush

@push('script')
    <!-- Optional JavaScript -->
    <script src="{{ asset('front/assets/plugins/jQuery/jquery.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/aos/aos.min.js') }}"></script>
    <!-- SlickNav js file -->
    <script src="{{ asset('front/assets/js/jquery.slicknav.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/macy/macy.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/simple-parallax/simpleParallax.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/OwlCarousel2/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/theia-sticky-sidebar/ResizeSensor.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/waypoints/jquery.waypoints.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/counter-up/jquery.counterup.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.ui.widget.js') }}">
    </script>
    <script src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fileupload.js') }}">
    </script>
    <script
        src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.iframe-transport.js') }}">
    </script>
    <script
        src="{{ asset('front/assets/plugins/jquery-fancyfileuploader/fancy-file-uploader/jquery.fancy-fileupload.js') }}">
    </script>
    <script src="{{ asset('front/assets/plugins/ion.rangeSlider/ion.rangeSlider.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/magnific-popup/jquery.magnific-popup.min.js') }}"></script>
    <script src="{{ asset('front/assets/plugins/select2/select2.min.js') }}"></script>
    <!-- Custom script for this template -->
    {{-- <script src="{{ asset('front/assets/js/script.js') }}"></script> --}}
@endpush