@extends('layouts.app')
@section('title', 'Mon Compte')
@section('page-title', 'Boite à outils — Mon Compte')

@push('styles')
<style>
    .nc-wrap {
        max-width: 680px;
        margin: 0 auto;
    }
    .nc-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 32px 36px 28px;
    }
    .nc-row {
        display: flex;
        align-items: center;
        gap: 0;
        padding: 10px 0;
        border-bottom: 1px solid #EEF0F7;
    }
    .nc-row:last-of-type { border-bottom: none; }
    .nc-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-muted);
        min-width: 150px;
        flex-shrink: 0;
    }
    .nc-value {
        font-size: 14px;
        font-weight: 800;
        color: var(--navy);
    }
    .nc-input {
        border: 1.5px solid var(--border);
        border-radius: 7px;
        padding: 5px 10px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        background: #fff;
        outline: none;
        width: 200px;
        transition: border-color 0.2s;
    }
    .nc-input:focus { border-color: var(--yellow); }

    .nc-inline {
        display: flex;
        align-items: center;
        gap: 30px;
    }
    .nc-action {
        display: flex;
        justify-content: center;
        margin-top: 28px;
    }
    .btn-ghost {
        background: #fff;
        color: var(--text-muted);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 8px 28px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
    }
    .btn-ghost:hover { background: #F4F6FB; }
</style>
@endpush

@section('content')

<div class="nc-wrap">
    <div class="nc-card">

        <div class="nc-row">
            <span class="nc-label">Base de données</span>
            <input type="text" class="nc-input" value="{{ $base }}">
        </div>

        <div class="nc-row">
            <span class="nc-label">Serveur</span>
            <input type="text" class="nc-input" value="{{ $serveur }}">
        </div>

        <div class="nc-row">
            <span class="nc-label">Utilisateur</span>
            <input type="text" class="nc-input" value="{{ $utilisateur }}" style="width:340px;">
            <span class="nc-label" style="min-width:80px;margin-left:30px;">Loggin</span>
            <input type="text" class="nc-input" style="width:160px;">
        </div>

        <div class="nc-row">
            <span class="nc-label">Plateforme</span>
            <span class="nc-value">{{ $plateforme }}</span>
        </div>

        <div class="nc-row">
            <span class="nc-label">Navigateur</span>
            @php
                $ua = $navigateur ?? '';
                $browser = 'Inconnu';
                $version = '';
                if (str_contains($ua, 'Edg/'))        { $browser = 'Edge';    preg_match('/Edg\/([\d]+)/', $ua, $m); $version = $m[1] ?? ''; }
                elseif (str_contains($ua, 'OPR/'))    { $browser = 'Opera';   preg_match('/OPR\/([\d]+)/', $ua, $m); $version = $m[1] ?? ''; }
                elseif (str_contains($ua, 'Chrome/')) { $browser = 'Chrome';  preg_match('/Chrome\/([\d]+)/', $ua, $m); $version = $m[1] ?? ''; }
                elseif (str_contains($ua, 'Firefox/')){ $browser = 'Firefox'; preg_match('/Firefox\/([\d]+)/', $ua, $m); $version = $m[1] ?? ''; }
                elseif (str_contains($ua, 'Safari/')) { $browser = 'Safari';  preg_match('/Version\/([\d]+)/', $ua, $m); $version = $m[1] ?? ''; }
            @endphp
            <div class="nc-inline">
                <span class="nc-value">{{ $browser }}</span>
                <span class="nc-label">Version</span>
                <span class="nc-value">{{ $version }}</span>
            </div>
        </div>

        <div class="nc-row">
            <span class="nc-label">Adresse IP</span>
            <span class="nc-value">{{ $ip }}</span>
        </div>

    </div>

    </div>

    {{-- Abonnement --}}
    <div class="nc-card" style="margin-top:16px;">
        <div style="font-size:13px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--yellow);padding-bottom:8px;margin-bottom:16px;">Mon Abonnement</div>

        @if($abonnement)
        @php
            $statutColor = match($abonnement->statut) {
                'actif'    => ['bg' => '#E6FFFA', 'color' => '#276749'],
                'suspendu' => ['bg' => '#FFFAF0', 'color' => '#9C4221'],
                default    => ['bg' => '#FFF5F5', 'color' => '#9B2C2C'],
            };
            $echeanceOk = $abonnement->date_echeance && $abonnement->date_echeance->isFuture();
        @endphp

        <div class="nc-row">
            <span class="nc-label">Statut</span>
            <span style="display:inline-block;font-size:12px;font-weight:800;padding:3px 10px;border-radius:4px;background:{{ $statutColor['bg'] }};color:{{ $statutColor['color'] }};">
                {{ ucfirst($abonnement->statut) }}
            </span>
        </div>
        <div class="nc-row">
            <span class="nc-label">Date d'engagement</span>
            <span class="nc-value">{{ $abonnement->date_debut?->format('d/m/Y') ?? '—' }}</span>
        </div>
        <div class="nc-row">
            <span class="nc-label">Date d'échéance</span>
            <div style="display:flex;align-items:center;gap:10px;">
                <span class="nc-value">{{ $abonnement->date_echeance?->format('d/m/Y') ?? '—' }}</span>
                @if($abonnement->date_echeance)
                    @if($echeanceOk)
                        <span style="font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;background:#E6FFFA;color:#276749;">Valide</span>
                    @else
                        <span style="font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;background:#FFF5F5;color:#C53030;">Expirée</span>
                    @endif
                @endif
            </div>
        </div>
        <div class="nc-row">
            <span class="nc-label">Mensualité HT</span>
            <span class="nc-value">{{ number_format($abonnement->prix_mensuel_ht, 2, ',', ' ') }} €</span>
        </div>
        <div class="nc-row">
            <span class="nc-label">Mensualité TTC</span>
            <span class="nc-value" style="font-size:16px;">{{ number_format($abonnement->prix_mensuel_ttc, 2, ',', ' ') }} €</span>
        </div>
        @if($abonnement->nb_clients_mobiles > 0)
        <div class="nc-row">
            <span class="nc-label">Clients mobiles</span>
            <span class="nc-value">{{ $abonnement->nb_clients_mobiles }} inclus</span>
        </div>
        @endif
        @else
        <div style="text-align:center;padding:20px;color:var(--text-muted);font-size:13px;">
            Aucun abonnement actif. Contactez-nous pour souscrire.
        </div>
        @endif
    </div>

    <div class="nc-action">
        <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

@endsection