@extends('layout.app')
@section('title', 'Subscriptions | Waiting Room')

@section('custom-css')
    <style>
        .container-fluid {
            height: 82vh;
        }

        .content-body {
            min-height: 0 !important;
        }

        @media only screen and (max-width: 767px) {
            .container-fluid {
                height: unset !important;
            }

            .content-body {
                min-height: auto !important;
            }
        }
    </style>
@endsection

@section('content')
    <div class="row page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{{ __('translations.Dashboard') }}</a>
            </li>
            <li class="breadcrumb-item"><a
                    href="javascript:void(0)">{{ __('translations.Choose Your Subscription Package') }}</a></li>
        </ol>
    </div>

    <div class="row">
        <div class="col-md-10 m-auto">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                    <div class="card pricing pricing-primary business-rate shadow bg-light-gray border-0 rounded">
                        <div class="card-body">
                            <h6 class="title name fw-bold text-uppercase mb-4">{{ __('translations.Professional') }}</h6>
                            <div class="d-flex mb-4">
                                <span class="h4 mb-0 mt-2">$</span>
                                <span class="price h1 mb-0">59</span>
                                <span class="h4 align-self-end mb-1">/mo</span>
                            </div>

                            <ul class="list-unstyled mb-0 ps-0">
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Full Access') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Source Files') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.1 Domain Free') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Enhanced Security') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Free Appointments') }}
                                </li>
                            </ul>
                            <a href="javascript:void(0)"
                               class="btn btn-primary mt-4">{{ __('translations.Try It Now') }}</a>
                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded">
                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden"></div>
                        <div class="card-body">
                            <h6 class="title name fw-bold text-uppercase mb-4">{{ __('translations.Starter') }}</h6>
                            <div class="d-flex mb-4">
                                <span class="h4 mb-0 mt-2">$</span>
                                <span class="price h1 mb-0">39</span>
                                <span class="h4 align-self-end mb-1">/mo</span>
                            </div>

                            <ul class="list-unstyled mb-0 ps-0">
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Full Access') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Source Files') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Free Appointments') }}
                                </li>
                            </ul>
                            <a href="javascript:void(0)"
                               class="btn btn-primary mt-4">{{ __('translations.Get Started') }}</a>
                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                    <div class="card pricing pricing-primary business-rate shadow bg-light-gray border-0 rounded">
                        <div class="card-body">
                            <h6 class="title name fw-bold text-uppercase mb-4">{{ __('translations.Ultimate') }}</h6>
                            <div class="d-flex mb-4">
                                <span class="h4 mb-0 mt-2">$</span>
                                <span class="price h1 mb-0">79</span>
                                <span class="h4 align-self-end mb-1">/mo</span>
                            </div>

                            <ul class="list-unstyled mb-0 ps-0">
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Full Access') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Enhanced Security') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Source Files') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.1 Domain Free') }}
                                </li>
                                <li class="h6 text-muted mb-0"><span class="icon h5 me-2"><i
                                            class="uil uil-check-circle align-middle"></i></span>{{ __('translations.Free Installment') }}
                                </li>
                            </ul>
                            <a href="javascript:void(0)"
                               class="btn btn-primary mt-4">{{ __('translations.Started Now') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end row-->

@endsection

@section('custom-script')
    <script>
        function SubmitSubscription() {
            // Handle the subscription form submission logic
        }
    </script>
@endsection