@extends('layouts.auth')

@section('content')
	<div class="container">
		<div class="row">
			<nav class="navbar fixed-top" style="opacity: 1;">
			<div class = "container">
				<div class="d-flex align-items-center navbar-left">
					<a class="navbar-logo" href="/">
						<span class="logo d-none d-xs-block"></span>
						<span class="logo-mobile d-block d-xs-none"></span>
					</a>
				</div>

				<div class="navbar-right">
					<div class="header-icons d-inline-block align-middle"></div>
					<div class="user d-inline-block"></div>
				</div>

				<div class="d-none d-md-inline-block align-text-bottom mr-3">
                    <a class="btn btn-primary" href="{{ url('/login')}}">Login</a>
                </div>
			</div>
			</nav>
		</div>

		<div style="margin-top:100px;"></div>
		
		<div class="row">
			<div class="col-12">
				<h1 class="text-center">Pricing</h1>
			</div>
		</div>

		<div class="row">
			@foreach($plans as $plan)	
				<div class="col-4 mb-4">
					<div class="card">
						<div class="card-body">
							<div class="mt-2 mb-4">
								<h2 class="text-center">
									{{ $plan->title}}
								</h2>
								<h5 class="text-center">
									$ {{$plan->amount}}  / {{ $plan->duration }}
								</h5>
							</div>
							<div class="mt-2 mb-2">
								<div class="scroll ps">
									<p class="text-muted text-small">Services</p>
									<ul class="list-unstyled mb-5">
										@foreach( $plan->services as $service )
											<li>
												<a>
													<i class="simple-icon-home"></i>
													{{ $service->name }}
												</a>
											</li>
										@endforeach
									</ul>
								</div>
							</div>
							@php
								$plan = \Illuminate\Support\Facades\Crypt::encrypt( $plan->id );
							@endphp
							<a href="{{ route('register', ['plan' => $plan]) }}" class="btn btn-primary btn-block"> Purchase </a> 
						</div> 
					</div>
				</div>
			@endforeach
		</div>
    </div>
@endsection