@extends('layouts.admin')
    <style>
        /* Custom Styles for Card Hover Effect */
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
    </style>
@section('content')
    <div class="bg-dark-secondary pt-10 pb-21"></div>
    <div class="container-fluid mt-n22 px-6">
        <div class="row">
<div class="col-lg-12 col-md-12 col-12">
    <!-- Page header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="text-white mb-0">{{ __('Plans') }}</h3>
    </div>

    <!-- Main Content Section -->
    <div class="container">
 <div class="alert alert-info">
        <strong>Important :</strong> Les plans avec renouvellement automatique sont définis sur <strong>Stripe</strong> et <strong>PayPal</strong>. Toute modification de prix devra être effectuée directement sur ces plateformes. Veuillez également prendre en compte la migration des abonnements nécessaires pour refléter ces modifications sur les plateformes de paiement.
    </div>
       <div class="alert alert-warning mt-4">
        <ul>
            <li><strong>Paypal Monthly Plan:</strong> {{ env('PAYPAL_MONTHLY_PLAN') }}</li>
            <li><strong>PayPal Yearly Plan:</strong> {{ env('PAYPAL_YEARLY_PLAN') }}</li>
            <li><strong>Paypal Monthly Plan Without Trial:</strong> {{ env('PAYPAL_MONTHLY_WITHOUT_TRIAL_PLAN') }}</li>
            <li><strong>PayPal Yearly Plan Without Trial:</strong> {{ env('PAYPAL_YEARLY_WITHOUT_TRIAL_PLAN') }}</li>
            
            <li><strong>Stripe Monthly Plan :</strong> {{ env('STRIPE_MONTHLY_PLAN') }}</li>
            <li><strong>Stripe Yearly Plan :</strong> {{ env('STRIPE_YEARLY_PLAN') }}</li>
        </ul>
    </div>
        <!-- Plan Plans Cards -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            @foreach ($plans as $plan)
            <div class="col">
                <div class="card shadow-sm border-0 rounded-lg">
                    <div class="card-body">
                        <h5 class="card-title text-primary">{{ $plan->description }}</h5>
                        <p class="card-text">Price: <strong>${{ $plan->prix }}</strong></p>
                        <p class="card-text text-muted">Price (MAD): {{ $plan->prix_mad }}</p>
                        <p class="card-text text-muted">{{ $plan->description }}</p>
                        <p class="card-text text-muted"><strong>Periodicity:</strong> {{ $plan->periodicite }}</p>
                        <p class="card-text text-muted"><strong>Trial:</strong> {{ $plan->trial_days }} days</p>
                    </div>
                </div>
            </div>

            
            @endforeach
        </div>
    </div>
</div>


        </div>
        <!-- row  -->
        <div class="row mt-6">

        </div>

@endsection