@extends('layouts.app')

@section('title', 'Mon Profil')

@section('content')

{{-- Flash Messages --}}
@if(session('success'))
    <div class="prof-alert prof-alert--success">
        <svg width="16" height="16" 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>
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="prof-alert prof-alert--danger">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
        {{ session('error') }}
    </div>
@endif

{{-- Stats --}}
<div class="prof-stats">
    <div class="prof-stat">
        <span class="prof-stat__value">{{ $totalProduits }}</span>
        <span class="prof-stat__label">Produits total</span>
    </div>
    <div class="prof-stat">
        <span class="prof-stat__value">{{ $totalEvenements }}</span>
        <span class="prof-stat__label">Événements</span>
    </div>
    <div class="prof-stat">
        <span class="prof-stat__value">{{ $produitsCeMois }}</span>
        <span class="prof-stat__label">Scans ce mois</span>
    </div>
    <div class="prof-stat prof-stat--{{ $alertesDLC > 0 ? 'danger' : 'ok' }}">
        <span class="prof-stat__value">{{ $alertesDLC }}</span>
        <span class="prof-stat__label">Alertes DLC</span>
    </div>
</div>

{{-- Grille 2 colonnes --}}
<div class="prof-grid">

    {{-- Informations du compte --}}
    <div class="card">
        <div class="prof-card-header">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
            Informations du compte
        </div>
        <form method="POST" action="{{ route('profile.update') }}" class="prof-form">
            @csrf
            @method('PATCH')
            <div class="prof-field">
                <label for="name">Nom complet</label>
                <input type="text" id="name" name="name"
                    value="{{ old('name', auth()->user()->name) }}"
                    class="{{ $errors->has('name') ? 'is-invalid' : '' }}"
                    required autocomplete="name">
                @error('name')<span class="prof-error">{{ $message }}</span>@enderror
            </div>
            <div class="prof-field">
                <label for="email">Adresse e-mail</label>
                <input type="email" id="email" name="email"
                    value="{{ old('email', auth()->user()->email) }}"
                    class="{{ $errors->has('email') ? 'is-invalid' : '' }}"
                    required autocomplete="email">
                @error('email')<span class="prof-error">{{ $message }}</span>@enderror
            </div>
            <button type="submit" class="prof-btn prof-btn--primary">
                <svg width="14" height="14" 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>
                Enregistrer les modifications
            </button>
        </form>
    </div>

    {{-- Mot de passe --}}
    <div class="card">
        <div class="prof-card-header">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
            Sécurité & Mot de passe
        </div>
        <form method="POST" action="{{ route('profile.password') }}" class="prof-form">
            @csrf
            @method('PATCH')
            <div class="prof-field">
                <label for="current_password">Mot de passe actuel</label>
                <div class="pwd-wrap">
                    <input type="password" id="current_password" name="current_password"
                        class="{{ $errors->has('current_password') ? 'is-invalid' : '' }}"
                        autocomplete="current-password">
                    <button type="button" class="pwd-eye" onclick="togglePwd('current_password',this)" tabindex="-1">👁</button>
                </div>
                @error('current_password')<span class="prof-error">{{ $message }}</span>@enderror
            </div>
            <div class="prof-field">
                <label for="password">Nouveau mot de passe</label>
                <div class="pwd-wrap">
                    <input type="password" id="password" name="password"
                        class="{{ $errors->has('password') ? 'is-invalid' : '' }}"
                        autocomplete="new-password">
                    <button type="button" class="pwd-eye" onclick="togglePwd('password',this)" tabindex="-1">👁</button>
                </div>
                @error('password')<span class="prof-error">{{ $message }}</span>@enderror
            </div>
            <div class="prof-field">
                <label for="password_confirmation">Confirmer le nouveau mot de passe</label>
                <div class="pwd-wrap">
                    <input type="password" id="password_confirmation" name="password_confirmation"
                        autocomplete="new-password">
                    <button type="button" class="pwd-eye" onclick="togglePwd('password_confirmation',this)" tabindex="-1">👁</button>
                </div>
            </div>
            <button type="submit" class="prof-btn prof-btn--warning">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
                Mettre à jour le mot de passe
            </button>
        </form>
    </div>

    {{-- Photo de profil --}}
    <div class="card">
        <div class="prof-card-header">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            Photo de profil
        </div>
        <form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data" class="prof-form">
            @csrf
            <div class="prof-field">
                <label for="avatar">Choisir une image</label>
                <input type="file" id="avatar" name="avatar" accept="image/*"
                    class="{{ $errors->has('avatar') ? 'is-invalid' : '' }}">
                <span class="prof-hint">JPG, PNG ou GIF — max 2 Mo</span>
                @error('avatar')<span class="prof-error">{{ $message }}</span>@enderror
            </div>
            <button type="submit" class="prof-btn prof-btn--gold">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                Mettre à jour la photo
            </button>
        </form>
    </div>

    {{-- Infos lecture seule --}}
    <div class="card">
        <div class="prof-card-header">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Informations du compte
        </div>
        <dl class="prof-dl">
            <dt>Membre depuis</dt>
            <dd>{{ auth()->user()->created_at->format('d/m/Y') }}</dd>
            <dt>Dernière mise à jour</dt>
            <dd>{{ auth()->user()->updated_at->diffForHumans() }}</dd>
            <dt>Alertes DLC</dt>
            <dd>
                @if($alertesDLC > 0)
                    <span class="prof-badge prof-badge--danger">{{ $alertesDLC }} produit(s) à surveiller</span>
                @else
                    <span class="prof-badge prof-badge--success">Aucune alerte</span>
                @endif
            </dd>
        </dl>
    </div>

</div>

{{-- Notifications push --}}
<div class="card" style="margin-top:20px;">
    <div class="prof-card-header">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
        Notifications
    </div>
    <p style="font-size:13px; color:#64748b; margin-bottom:16px;">
        Recevez un rappel pour faire vos relevés de température.
    </p>
    <form method="POST" action="{{ route('profile.update') }}" style="margin-bottom:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
        @csrf
        @method('PATCH')
        <label style="font-size:13px; font-weight:600; color:#374151;">Heure du rappel</label>
        <select name="push_reminder_time"
                style="height:40px; border:1.5px solid #e2e8f0; border-radius:8px; padding:0 12px; font-size:14px; background:#fff; outline:none;">
            @foreach(['06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00'] as $time)
                <option value="{{ $time }}" {{ auth()->user()->push_reminder_time === $time ? 'selected' : '' }}>
                    {{ $time }}
                </option>
            @endforeach
        </select>
        <button type="submit"
                style="height:40px; padding:0 16px; background:#0f172a; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;">
            Enregistrer
        </button>
    </form>
    <button
        id="push-btn"
        onclick="subscribeToPush()"
        style="padding:12px 24px; border-radius:10px; border:none; color:#fff; font-size:14px; font-weight:600; cursor:pointer; background:#0f172a;">
        🔕 Activer les notifications
    </button>
    <p style="font-size:11px; color:#94a3b8; margin-top:10px;">
        Sur iPhone : installez d'abord l'app via Safari → Partager → Sur l'écran d'accueil
    </p>
</div>

<script>
function togglePwd(id, btn) {
    const input = document.getElementById(id);
    if (input.type === 'password') {
        input.type = 'text';
        btn.textContent = '🙈';
    } else {
        input.type = 'password';
        btn.textContent = '👁';
    }
}
</script>

@endsection

@section('styles')
<style>
.prof-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 8px;
    font-size: 13px; margin-bottom: 24px;
}
.prof-alert--success { background: var(--success-bg); color: var(--success); }
.prof-alert--danger  { background: var(--danger-bg);  color: var(--danger);  }

.prof-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.prof-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex; flex-direction: column; gap: 4px;
}
.prof-stat__value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px; font-weight: 600;
    color: var(--navy); line-height: 1;
}
.prof-stat__label { font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.prof-stat--danger .prof-stat__value { color: var(--danger); }
.prof-stat--ok     .prof-stat__value { color: var(--text-muted); }

.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.prof-card-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--navy); letter-spacing: 0.04em;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.prof-card-header svg { color: var(--gold); flex-shrink: 0; }

.prof-form { display: flex; flex-direction: column; gap: 16px; }
.prof-field { display: flex; flex-direction: column; gap: 6px; }
.prof-field label {
    font-size: 12px; font-weight: 500;
    color: var(--text-muted); letter-spacing: 0.04em;
    text-transform: uppercase;
}
.prof-field input {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 13px; font-family: 'Jost', sans-serif;
    color: var(--text); background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.prof-field input:focus { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(45,74,95,0.1); }
.prof-field input.is-invalid { border-color: var(--danger); }
.prof-field input[type="file"] { padding: 8px 12px; cursor: pointer; }
.prof-hint  { font-size: 11px; color: var(--text-muted); }
.prof-error { font-size: 11px; color: var(--danger); }

.prof-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 500;
    font-family: 'Jost', sans-serif; letter-spacing: 0.04em;
    cursor: pointer; border: none;
    transition: opacity 0.15s, transform 0.1s; margin-top: 4px;
}
.prof-btn:hover { opacity: 0.88; }
.prof-btn:active { transform: scale(0.98); }
.prof-btn--primary { background: var(--navy);  color: var(--white); }
.prof-btn--warning { background: #e67e22;       color: var(--white); }
.prof-btn--gold    { background: var(--gold);   color: var(--navy);  }

.prof-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: center; }
.prof-dl dt { font-size: 12px; color: var(--text-muted); }
.prof-dl dd { font-size: 13px; font-weight: 500; color: var(--text); margin: 0; }

.prof-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.prof-badge--success { background: var(--success-bg); color: var(--success); }
.prof-badge--danger  { background: var(--danger-bg);  color: var(--danger);  }

@media (max-width: 768px) {
    .prof-stats { grid-template-columns: 1fr 1fr; }
    .prof-grid  { grid-template-columns: 1fr; }
}

.pwd-wrap { position:relative; display:flex; align-items:center; }
.pwd-wrap input { flex:1; padding-right:40px; }
.pwd-eye { position:absolute; right:10px; background:none; border:none; cursor:pointer; font-size:16px; color:var(--text-muted); padding:0; line-height:1; }
.pwd-eye:hover { color:var(--navy); }
</style>
@endsection