@extends('layouts.register-base', ['title' => 'Register'])
@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/front/css/main.css') }}" />
<style>
  /* section.pricing {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
} */
  .pricing .signupform-proof {
    background: #ccd1d9;
  }

  #planTabs button {
    padding: 10px 60px;
    border: 1px solid #000000;

  }

  #planTabs li {
    margin: 0 0 0 5px;
  }

  #planTabs li button.active {
    color: #ffffff;
    background: #000000;
  }

  .pricing .tab-content li {
    font-weight: 700;
    font-style: italic;
  }

  .pricing .card {
    border: none;
    border-radius: 1rem;
    transition: all 0.2s;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
  }

  .pricing hr {
    margin: 1.5rem 0;
  }

  .pricing .card-title {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    letter-spacing: .1rem;
    font-weight: bold;
  }

  .pricing .card-price {
    font-size: 3rem;
    margin: 0;
  }

  .pricing .card-price .period {
    font-size: 0.8rem;
  }

  .pricing ul li {
    margin-bottom: 1rem;
  }

  .pricing .text-muted {
    opacity: 0.7;
  }

  .pricing .btn {
    font-size: 80%;
    border-radius: 5rem;
    letter-spacing: .1rem;
    font-weight: bold;
    padding: 1rem;
    opacity: 0.7;
    transition: all 0.2s;
  }

  /* Hover Effects on Card */

  @media (min-width: 992px) {
    .pricing .card:hover {
      margin-top: -.25rem;
      margin-bottom: .25rem;
      box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }

    .pricing .card:hover .btn {
      opacity: 1;
    }
  }
</style>
@endsection
@section('content')
<section class="gray-bg" style="background-color: var(--theme-secondry-color);">
  <div class="container profplans">
    <div class="gray-heading col-md-10">
      <p>Ready to get started? Register a new account; it takes less than a minute.</p>
    </div>
  </div>
</section>
{{-- <section>
  <div class="container p-4  profplans">
    <div class="col-md-11 signupform-proof">
    </div>
  </div>
</section> --}}

<section class="pricing py-5">
  <div class="container p-4  profplans">
    <div class="col-md-11 signupform-proof">
      <ul class="nav nav-tabs mb-5 justify-content-center" id="planTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="monthly-tab" data-toggle="tab" data-target="#monthly" type="button"
            role="tab" aria-controls="monthly" aria-selected="true">Monthly</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="qly-tab" data-toggle="tab" data-target="#qly" type="button" role="tab"
            aria-controls="qly" aria-selected="false">Quarterly 5% Off</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="yearly-tab" data-toggle="tab" data-target="#yearly" type="button" role="tab"
            aria-controls="yearly" aria-selected="false">Yearly 10% off</button>
        </li>
      </ul>
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="monthly" role="tabpanel" aria-labelledby="monthly">
          <div class="row">
            @foreach ($plans->where('plan_cycle', 2) as $plan)
            <div class="col-md-4 mb-3">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">{{$plan->name}}</h5>
                  <h6 class="card-price text-center">${{ $plan->min_price }}<span class="period">/month</span></h6>
                  <hr>
                  <ul class="fa-ul">
                    @foreach ($plan->plan_features ?? [] as $key => $feature)
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>{{ $feature ?? '' }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
        <div class="tab-pane fade" id="qly" role="tabpanel" aria-labelledby="qly">
          <div class="row">
            @foreach ($plans->where('plan_cycle', 3) as $plan)
            <div class="col-md-4 mb-3">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">{{$plan->name}}</h5>
                  <h6 class="card-price text-center">${{ $plan->min_price/3 }}<span class="period">/month</span></h6>
                  <hr>
                  <ul class="fa-ul">
                    @foreach ($plan->plan_features ?? [] as $key => $feature)
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>{{ $feature ?? '' }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
        <div class="tab-pane fade" id="yearly" role="tabpanel" aria-labelledby="yearly">
          <div class="row">
            @foreach ($plans->where('plan_cycle', 5) as $plan)
            <div class="col-md-4 mb-3">
              <div class="card mb-5 mb-lg-0">
                <div class="card-body">
                  <h5 class="card-title text-muted text-uppercase text-center">{{$plan->name}}</h5>
                  <h6 class="card-price text-center">${{ $plan->min_price/12 }}<span class="period">/month</span></h6>
                  <hr>
                  <ul class="fa-ul">
                    @foreach ($plan->plan_features ?? [] as $key => $feature)
                    <li><span class="fa-li"><i class="fas fa-check"></i></span>{{ $feature ?? '' }}</li>
                    @endforeach
                  </ul>
                </div>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>
      <div class="pptu-proof text-center">
        <h6>Please contact admin for more details <strong>{{$owner->email ?? ''}}</strong></h6>
      </div>
    </div>
  </div>
</section>
@endsection