@extends('layouts.app')

@section('title', 'Abonnement')

@section('styles')
<style>
    .subscription-wrap {
        max-width: 900px;
        margin: 0 auto;
    }

    .subscription-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .subscription-header h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 32px;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 10px;
    }

    .subscription-header p {
        color: var(--text-muted);
        font-size: 15px;
        max-width: 480px;
        margin: 0 auto;
    }

    .trial-banner {
        background: linear-gradient(135deg, #f7f2e8 0%, #fdf9f0 100%);
        border: 1px solid var(--gold);
        border-radius: 12px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 36px;
    }

    .trial-banner-icon {
        width: 44px; height: 44px;
        background: var(--gold);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }

    .trial-banner-icon svg { width: 22px; height: 22px; color: white; }

    .trial-banner-text strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 3px;
    }

    .trial-banner-text span {
        font-size: 13px;
        color: var(--text-muted);
    }

    .active-sub-banner {
        background: var(--success-bg);
        border: 1px solid var(--success);
        border-radius: 12px;
        padding: 20px 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 36px;
        flex-wrap: wrap;
    }

    .active-sub-info strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--success);
        margin-bottom: 4px;
    }

    .active-sub-info span { font-size: 13px; color: var(--text-muted); }

    .plans-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-bottom: 32px;
    }

    @media (max-width: 640px) {
        .plans-grid { grid-template-columns: 1fr; }
    }

    .plan-card {
        border: 2px solid var(--border);
        border-radius: 16px;
        padding: 32px 28px;
        position: relative;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: var(--white);
    }

    .plan-card:hover {
        border-color: var(--gold);
        box-shadow: 0 4px 20px rgba(200, 180, 122, 0.15);
    }

    .plan-card.featured {
        border-color: var(--navy);
        box-shadow: 0 4px 24px rgba(45, 74, 95, 0.12);
    }

    .plan-badge {
        position: absolute;
        top: -13px; left: 50%;
        transform: translateX(-50%);
        background: var(--navy);
        color: var(--gold);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 4px 14px;
        border-radius: 20px;
        white-space: nowrap;
    }

    .plan-period {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 12px;
    }

    .plan-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 6px;
    }

    .plan-price-amount {
        font-family: 'Cormorant Garamond', serif;
        font-size: 48px;
        font-weight: 600;
        color: var(--navy);
        line-height: 1;
    }

    .plan-price-currency {
        font-size: 20px;
        color: var(--navy);
        font-weight: 500;
        margin-bottom: 6px;
    }

    .plan-price-per {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 20px;
    }

    .plan-savings {
        font-size: 12px;
        color: var(--success);
        font-weight: 500;
        background: var(--success-bg);
        padding: 3px 10px;
        border-radius: 20px;
        display: inline-block;
        margin-bottom: 20px;
    }

    .plan-features {
        list-style: none;
        margin-bottom: 28px;
    }

    .plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--text);
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
    }

    .plan-features li:last-child { border-bottom: none; }

    .plan-features li svg {
        width: 16px; height: 16px;
        color: var(--gold);
        flex-shrink: 0;
        margin-top: 1px;
    }

    .btn-subscribe {
        width: 100%;
        padding: 13px;
        background: var(--navy);
        color: white;
        border: none;
        border-radius: 8px;
        font-family: 'Jost', sans-serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.2s;
        text-align: center;
    }

    .btn-subscribe:hover { background: var(--navy-dark); }

    .btn-subscribe.gold {
        background: var(--gold);
        color: var(--navy);
    }

    .btn-subscribe.gold:hover { background: var(--gold-light); }

    .btn-portal {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: transparent;
        border: 1px solid var(--navy);
        border-radius: 8px;
        color: var(--navy);
        font-size: 13px;
        font-family: 'Jost', sans-serif;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s;
    }

    .btn-portal:hover { background: var(--navy); color: white; }
    .btn-portal svg { width: 15px; height: 15px; }

    .guarantee {
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 24px;
    }

    .guarantee svg {
        width: 14px; height: 14px;
        vertical-align: middle;
        margin-right: 4px;
        color: var(--success);
    }
</style>
@endsection

@section('content')
<div class="subscription-wrap">

    <div class="subscription-header">
        <img src="/images/logo_transparent.png" alt="TraçaChef"
             style="width:160px;height:auto;object-fit:contain;display:block;margin:0 auto 20px;">
        <h1>Votre abonnement TraçaChef</h1>
        <p>Accès illimité à toutes les fonctionnalités de traçabilité HACCP pour votre établissement.</p>
    </div>

    @if($subscription && $subscription->onTrial())
    <div class="trial-banner">
        <div class="trial-banner-icon">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </div>
        <div class="trial-banner-text">
            <strong>Période d'essai en cours</strong>
            <span>Votre essai gratuit se termine le {{ $subscription->trial_ends_at->locale('fr')->isoFormat('D MMMM YYYY') }}.</span>
        </div>
    </div>

    @elseif($subscription && $subscription->active())
    <div class="active-sub-banner">
        <div class="active-sub-info">
            <strong>Abonnement actif</strong>
            <span>
                Prochain renouvellement :
                {{ $subscription->ends_at ? $subscription->ends_at->locale('fr')->isoFormat('D MMMM YYYY') : 'Renouvellement automatique' }}
            </span>
        </div>
        <form method="POST" action="{{ route('subscription.portal') }}">
            @csrf
            <button type="submit" class="btn-portal">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                Gérer mon abonnement
            </button>
        </form>
    </div>
    @endif

    @if(!$subscription || (!$subscription->active() && !$subscription->onTrial()))
    <div class="plans-grid">

        {{-- Mensuel --}}
        <div class="plan-card">
            <div class="plan-period">Mensuel</div>
            <div class="plan-price">
                <span class="plan-price-currency">€</span>
                <span class="plan-price-amount">19</span>
                <span class="plan-price-currency">,50</span>
            </div>
            <div class="plan-price-per">par mois, HT</div>

            <ul class="plan-features">
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Traçabilité produits illimitée
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Contrôle des températures
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Exports HACCP en PDF
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Alertes DLC par notification
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Scanner QR / code-barres
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Utilisateurs illimités
                </li>
            </ul>

            <form method="POST" action="{{ route('subscription.checkout') }}">
                @csrf
                <input type="hidden" name="plan" value="monthly">
                <button type="submit" class="btn-subscribe">
                    Commencer l'essai gratuit 7 jours
                </button>
            </form>
        </div>

        {{-- Annuel --}}
        <div class="plan-card featured">
            <div class="plan-badge">Meilleure valeur — 24% d'économie</div>
            <div class="plan-period">Annuel</div>
            <div class="plan-price">
                <span class="plan-price-currency">€</span>
                <span class="plan-price-amount">178</span>
            </div>
            <div class="plan-price-per">par an, HT — soit 14,83€/mois</div>
            <div class="plan-savings">Économisez 56€ par rapport au mensuel</div>

            <ul class="plan-features">
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Traçabilité produits illimitée
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Contrôle des températures
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Exports HACCP en PDF
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Alertes DLC par notification
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Scanner QR / code-barres
                </li>
                <li>
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    Utilisateurs illimités
                </li>
            </ul>

            <form method="POST" action="{{ route('subscription.checkout') }}">
                @csrf
                <input type="hidden" name="plan" value="yearly">
                <button type="submit" class="btn-subscribe gold">
                    Commencer l'essai gratuit 7 jours
                </button>
            </form>
        </div>

    </div>

    <div class="guarantee">
        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
        </svg>
        Paiement sécurisé par Stripe · Sans engagement pour l'essai · Annulable à tout moment
    </div>

    @else

    <div class="card" style="text-align:center; padding: 40px;">
        <p style="color: var(--text-muted); margin-bottom: 20px;">
            Votre abonnement est actif. Gérez vos factures, votre moyen de paiement ou annulez depuis le portail de facturation.
        </p>
        <form method="POST" action="{{ route('subscription.portal') }}">
            @csrf
            <button type="submit" class="btn-portal" style="margin: 0 auto;">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
                Accéder au portail de facturation
            </button>
        </form>
    </div>

    @endif

</div>
@endsection