@extends('layouts.app')

@push('styles')
    @vite('resources/css/pages/visitor-dashboard.css')
@endpush

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

@include('components.visitor-header')

@php
    $user = auth()->user();
    $activeLinks = collect(['facebook','twitter','instagram','whatsapp','snapchat','tiktok','location','website','custom_link'])
        ->filter(fn($s) => $user->$s)->count();
    $favCount = $products->where('is_favorite', true)->count();
@endphp

<style>
*{font-family:'Inter',sans-serif;box-sizing:border-box}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ping{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.4);opacity:0}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}

.dash-card{background:#fff;border-radius:20px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 16px rgba(0,0,0,.05);overflow:hidden;animation:fadeInUp .55s ease both}
.section-head{display:flex;align-items:center;gap:12px;padding:22px 24px 18px;border-bottom:1px solid #f8fafc}
.section-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.section-title{font-size:15px;font-weight:800;color:#0f2a45;flex:1}

.link-row{display:flex;align-items:center;gap:14px;padding:14px 24px;transition:background .15s;border-bottom:1px solid #f8fafc}
.link-row:hover{background:#fafbfc}
.link-row:last-child{border-bottom:none}
.link-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.link-label{font-size:13px;font-weight:700;color:#0f2a45}
.link-value{font-size:12px;color:#94a3b8;font-style:italic}
.link-value a{color:#1a8ed4;font-style:normal;text-decoration:none}
.link-value a:hover{text-decoration:underline}
.btn-edit{padding:6px 14px;background:#f1f5f9;border:none;border-radius:8px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;transition:all .2s;flex-shrink:0}
.btn-edit:hover{background:#e2e8f0;color:#0f2a45}

.product-card-new{background:#fff;border-radius:16px;border:1.5px solid #f1f5f9;overflow:hidden;transition:all .25s;position:relative}
.product-card-new:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(8,120,200,.12);border-color:#bfdbfe}
.product-card-new.is-fav{border-color:#fcd34d;box-shadow:0 0 0 2px rgba(245,158,11,.15)}

.form-input{width:100%;padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:13px;font-weight:500;color:#0f2a45;background:#f8fafc;outline:none;transition:all .2s}
.form-input:focus{border-color:#1a8ed4;background:#fff;box-shadow:0 0 0 3px rgba(26,142,212,.1)}
.form-input::placeholder{color:#94a3b8}

.btn-primary-dash{background:linear-gradient(135deg,#045d98,#08a3ff);color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer;transition:opacity .2s;box-shadow:0 4px 14px rgba(8,163,255,.3)}
.btn-primary-dash:hover{opacity:.88}

.stat-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:14px 22px;text-align:center;min-width:100px;backdrop-filter:blur(10px)}

.toast-new{position:fixed;bottom:24px;right:24px;z-index:9999;padding:14px 20px;border-radius:14px;font-size:13px;font-weight:700;color:#fff;transform:translateY(80px);opacity:0;transition:all .35s;pointer-events:none;max-width:320px}
.toast-new.show{transform:translateY(0);opacity:1}
.toast-new.ok{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 8px 24px rgba(16,185,129,.35)}
.toast-new.err{background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 8px 24px rgba(239,68,68,.35)}

.dot-status{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-on{background:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.25)}
.dot-off{background:#cbd5e1}
</style>

{{-- Toast --}}
<div id="toast" class="toast-new" style="display:none"></div>

<div style="min-height:100vh;background:#f0f4f8;padding-top:64px">

{{-- ════════════════════════ HERO ════════════════════════ --}}
<div style="background:linear-gradient(135deg,#020f1e 0%,#041d38 45%,#063660 100%);position:relative;overflow:hidden">
    <div style="position:absolute;top:-100px;right:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(8,163,255,.1),transparent 70%);pointer-events:none"></div>
    <div style="position:absolute;bottom:-80px;left:-60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(4,93,152,.15),transparent 70%);pointer-events:none"></div>
    <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none"></div>

    <div style="max-width:1200px;margin:0 auto;padding:40px 24px 56px;position:relative;z-index:1">
        <div id="dash-hero-inner" style="display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap">

            {{-- Identité --}}
            <div style="display:flex;align-items:center;gap:20px">
                <div style="width:72px;height:72px;border-radius:20px;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.3)">
                    @if($user->logo)
                        <img src="{{ asset('storage/' . $user->logo) }}" alt="Logo" style="width:100%;height:100%;object-fit:cover">
                    @else
                        <svg width="32" height="32" fill="none" stroke="rgba(255,255,255,.6)" stroke-width="1.5" viewBox="0 0 24 24"><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>
                    @endif
                </div>
                <div>
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
                        <span style="font-size:11px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em">Tableau de bord</span>
                        <span style="display:flex;align-items:center;gap:5px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:50px;padding:2px 9px">
                            <span style="width:6px;height:6px;border-radius:50%;background:#10b981;animation:ping 2s infinite;display:inline-block"></span>
                            <span style="font-size:10px;font-weight:700;color:#6ee7b7">En ligne</span>
                        </span>
                    </div>
                    <h1 style="font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-.02em;margin:0">{{ $user->name }}</h1>
                    @if($user->phone)
                    <p style="font-size:13px;color:rgba(255,255,255,.55);margin-top:6px;display:flex;align-items:center;gap:5px">
                        <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                        {{ $user->phone }}
                    </p>
                    @endif
                </div>
            </div>

            {{-- Bouton voir ma page --}}
            @if($user->mapage)
            <a id="dash-see-page" href="/az/{{ $user->mapage }}" target="_blank"
               style="display:inline-flex;align-items:center;gap:9px;padding:13px 28px;border-radius:14px;font-weight:700;font-size:14px;color:#0f2a45;text-decoration:none;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s;white-space:nowrap"
               onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 28px rgba(0,0,0,.25)'"
               onmouseout="this.style.transform='';this.style.boxShadow='0 4px 20px rgba(0,0,0,.2)'">
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><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>
                Voir ma page
            </a>
            @endif
        </div>

        {{-- Stats pills --}}
        <div id="dash-stats" style="display:flex;gap:12px;margin-top:28px;flex-wrap:wrap">
            <div class="stat-pill">
                <div style="font-size:28px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em">{{ $products->count() }}</div>
                <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-top:4px">{{ $user->products_section_title ?? 'Produits' }}</div>
            </div>
            <div class="stat-pill">
                <div style="font-size:28px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em">{{ $activeLinks }}</div>
                <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-top:4px">Liens actifs</div>
            </div>
            <div class="stat-pill">
                <div style="font-size:28px;font-weight:900;color:#f59e0b;line-height:1;letter-spacing:-.02em">{{ $favCount }}</div>
                <div style="font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.1em;margin-top:4px">Favoris</div>
            </div>
        </div>
    </div>

    {{-- Vague --}}
    <div style="line-height:0">
        <svg viewBox="0 0 1440 50" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width:100%;display:block">
            <path d="M0,25 C480,55 960,0 1440,25 L1440,50 L0,50 Z" fill="#f0f4f8"/>
        </svg>
    </div>
</div>

{{-- ════════════════════════ GRILLE ════════════════════════ --}}
<div style="max-width:1200px;margin:0 auto;padding:32px 24px 60px;display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start" id="dash-grid">

{{-- ───────────── COLONNE GAUCHE ───────────── --}}
<div style="display:flex;flex-direction:column;gap:20px">

    {{-- Mon compte --}}
    <div class="dash-card" id="section-compte" style="animation-delay:.05s">
        <div class="section-head">
            <div class="section-icon" style="background:#eff6ff">
                <svg width="18" height="18" fill="none" stroke="#1d4ed8" stroke-width="2" viewBox="0 0 24 24"><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>
            </div>
            <span class="section-title">Mon compte</span>
            <button onclick="openProfileModal()" class="btn-primary-dash" style="padding:7px 14px;font-size:12px;display:flex;align-items:center;gap:6px">
                <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536M9 13l6.414-6.414a2 2 0 112.828 2.828L11.828 15.828a2 2 0 01-1.414.586H9v-1.414A2 2 0 019.586 14L9 13z"/></svg>
                Modifier
            </button>
        </div>
        <div style="padding:18px 24px;display:flex;flex-direction:column;gap:14px">
            @foreach([['Boutique','profile-name-display',$user->name],['Téléphone','profile-phone-display',$user->phone ?? '—'],['Adresse','profile-address-display',$user->address ?? '—']] as $row)
            <div>
                <div style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px">{{ $row[0] }}</div>
                <div id="{{ $row[1] }}" style="font-size:13px;font-weight:700;color:#0f2a45">{{ $row[2] }}</div>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Modal Modifier profil --}}
    <div id="profileModal" style="display:none!important;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:16px;background:rgba(15,23,42,.6);backdrop-filter:blur(6px)">
        <div style="background:#fff;border-radius:24px;width:100%;max-width:440px;box-shadow:0 32px 80px rgba(0,0,0,.25)">
            <div style="display:flex;align-items:center;gap:12px;padding:22px 24px 18px;border-bottom:1px solid #f1f5f9">
                <div style="width:38px;height:38px;border-radius:12px;background:#eff6ff;display:flex;align-items:center;justify-content:center">
                    <svg width="18" height="18" fill="none" stroke="#1d4ed8" stroke-width="2" viewBox="0 0 24 24"><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>
                </div>
                <span style="font-size:15px;font-weight:800;color:#0f2a45;flex:1">Modifier mon compte</span>
                <button onclick="closeProfileModal()" style="width:32px;height:32px;border-radius:8px;background:#f1f5f9;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center">
                    <svg width="14" height="14" fill="none" stroke="#64748b" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>
            <form id="profileForm" style="padding:22px 24px;display:flex;flex-direction:column;gap:14px">
                @foreach([['name','Nom de la boutique *','text',$user->name,'Ex: Ma Boutique'],['phone','Téléphone','text',$user->phone,'77 000 00 00'],['address','Adresse','text',$user->address,'Ex: Dakar, Sénégal']] as $f)
                <div>
                    <label style="display:block;font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px">{{ $f[1] }}</label>
                    <input type="{{ $f[2] }}" name="{{ $f[0] }}" id="profile-input-{{ $f[0] }}" value="{{ $f[3] }}" placeholder="{{ $f[4] }}" class="form-input" {{ $f[0]==='name'?'required':'' }}>
                    <p id="profile-error-{{ $f[0] }}" class="hidden" style="margin-top:4px;font-size:11px;color:#ef4444"></p>
                </div>
                @endforeach
                <div style="display:flex;gap:10px;margin-top:4px">
                    <button type="button" onclick="closeProfileModal()" style="flex:1;padding:12px;border-radius:12px;background:#f1f5f9;border:none;font-size:13px;font-weight:700;color:#475569;cursor:pointer">Annuler</button>
                    <button type="submit" id="profileSaveBtn" class="btn-primary-dash" style="flex:1;padding:12px;font-size:13px">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Ma page publique --}}
    <div class="dash-card" style="animation-delay:.1s">
        <div class="section-head">
            <div class="section-icon" style="background:#f0fdf4">
                <svg width="18" height="18" fill="none" stroke="#059669" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9"/></svg>
            </div>
            <span class="section-title">Ma page publique</span>
        </div>
        <div style="padding:18px 24px">
            <p style="font-size:12px;color:#94a3b8;font-weight:500;margin-bottom:12px">Partagez ce lien avec vos clients.</p>
            <div style="display:flex;gap:8px;margin-bottom:12px">
                <input type="text" id="publicUrl" value="{{ url('/az/' . $user->mapage) }}" readonly
                       style="flex:1;padding:9px 12px;border-radius:10px;border:1.5px solid #e2e8f0;font-size:11px;font-family:monospace;background:#f8fafc;color:#64748b;outline:none;min-width:0">
                <button onclick="copyPublicUrl()" class="btn-primary-dash" style="width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0" title="Copier">
                    <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                </button>
            </div>
            @if($user->mapage)
            <a href="/az/{{ $user->mapage }}" target="_blank"
               style="display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:12px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:700;color:#1a8ed4;text-decoration:none;transition:all .2s"
               onmouseover="this.style.borderColor='#1a8ed4';this.style.background='#f0f9ff'" onmouseout="this.style.borderColor='#e2e8f0';this.style.background=''">
                Ouvrir la page
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><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>
            </a>
            @endif
        </div>
    </div>

    {{-- Mon logo --}}
    <div class="dash-card" style="animation-delay:.15s">
        <div class="section-head">
            <div class="section-icon" style="background:#f0fdf4">
                <svg width="18" height="18" fill="none" stroke="#059669" stroke-width="2" viewBox="0 0 24 24"><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>
            </div>
            <span class="section-title">Mon logo</span>
        </div>
        <div style="padding:18px 24px">
            <div style="display:flex;justify-content:center;margin-bottom:16px">
                <div style="width:88px;height:88px;border-radius:18px;overflow:hidden;border:1.5px solid #e2e8f0;background:#f8fafc;display:flex;align-items:center;justify-content:center">
                    @if($user->logo)
                        <img src="{{ asset('storage/' . $user->logo) }}" alt="Logo" style="width:100%;height:100%;object-fit:contain">
                    @else
                        <svg width="32" height="32" fill="none" stroke="#d1d5db" stroke-width="1.5" viewBox="0 0 24 24"><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>
                    @endif
                </div>
            </div>
            <form id="logoForm" enctype="multipart/form-data">
                <label style="cursor:pointer;display:block">
                    <div style="display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;border:1.5px dashed #e2e8f0;font-size:12px;font-weight:600;color:#94a3b8;transition:all .2s"
                         onmouseover="this.style.borderColor='#059669';this.style.color='#059669';this.style.background='#f0fdf4'" onmouseout="this.style.borderColor='#e2e8f0';this.style.color='#94a3b8';this.style.background=''">
                        <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                        <span class="logo-file-name">Changer le logo</span>
                    </div>
                    <input type="file" name="logo" accept="image/*" class="hidden"
                           onchange="this.closest('form').querySelector('.logo-file-name').textContent = this.files[0]?.name || 'Changer le logo'">
                </label>
                <button type="submit" class="btn-primary-dash logo-submit-btn hidden" style="width:100%;padding:11px;margin-top:10px;font-size:13px;border-radius:12px;background:linear-gradient(135deg,#059669,#10b981)">
                    Mettre à jour
                </button>
            </form>
        </div>
    </div>


    {{-- Modifier le mot de passe --}}
    <div class="dash-card" style="animation-delay:.2s">
        <div class="section-head">
            <div class="section-icon" style="background:#fef3c7">
                <svg width="18" height="18" fill="none" stroke="#d97706" stroke-width="2" viewBox="0 0 24 24"><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>
            </div>
            <span class="section-title">Modifier le mot de passe</span>
        </div>
        <div style="padding:18px 24px">
            <form id="passwordForm">
                <div style="margin-bottom:12px">
                    <label style="display:block;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">Mot de passe actuel</label>
                    <div style="position:relative">
                        <input type="password" id="current_password" class="form-input" placeholder="••••••••" style="padding-right:40px">
                        <button type="button" onclick="togglePwField('current_password','eye0')" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;padding:2px">
                            <svg id="eye0" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                </div>
                <div style="margin-bottom:12px">
                    <label style="display:block;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">Nouveau mot de passe</label>
                    <div style="position:relative">
                        <input type="password" id="new_password" class="form-input" placeholder="Min. 8 caractères" style="padding-right:40px">
                        <button type="button" onclick="togglePwField('new_password','eye1')" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;padding:2px">
                            <svg id="eye1" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                </div>
                <div style="margin-bottom:16px">
                    <label style="display:block;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">Confirmer le mot de passe</label>
                    <div style="position:relative">
                        <input type="password" id="new_password_confirmation" class="form-input" placeholder="Répéter le mot de passe" style="padding-right:40px">
                        <button type="button" onclick="togglePwField('new_password_confirmation','eye2')" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;padding:2px">
                            <svg id="eye2" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </button>
                    </div>
                </div>
                <button type="submit" id="pwSubmitBtn" class="btn-primary-dash" style="width:100%;padding:12px;font-size:13px;border-radius:12px">
                    Mettre à jour le mot de passe
                </button>
            </form>
        </div>
    </div>

</div>{{-- fin colonne gauche --}}

{{-- ───────────── COLONNE DROITE ───────────── --}}
<div style="display:flex;flex-direction:column;gap:20px">

    {{-- Mes liens & réseaux sociaux --}}
    <div class="dash-card" id="section-liens" style="animation-delay:.1s">
        <div class="section-head">
            <div class="section-icon" style="background:#eff6ff">
                <svg width="18" height="18" fill="none" stroke="#1d4ed8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
            </div>
            <span class="section-title">Mes liens & réseaux sociaux</span>
            <span style="font-size:11px;font-weight:700;color:#94a3b8;background:#f1f5f9;padding:3px 10px;border-radius:50px">{{ $activeLinks }} actifs</span>
        </div>

        @php
        $platforms = [
            ['facebook','Facebook','#1d4ed8','#eff6ff','M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z','fill'],
            ['twitter','X / Twitter','#111827','#f8fafc','M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z','fill'],
            ['instagram','Instagram','#db2777','#fdf2f8','M12.017 0C8.396 0 7.917.017 6.69.08c-1.23.063-2.067.265-2.8.567a5.41 5.41 0 00-1.96 1.275 5.41 5.41 0 00-1.275 1.96c-.302.733-.504 1.57-.567 2.8C.017 7.917 0 8.396 0 12.017s.017 4.1.08 5.327c.063 1.23.265 2.067.567 2.8a5.41 5.41 0 001.275 1.96 5.41 5.41 0 001.96 1.275c.733.302 1.57.504 2.8.567 1.227.063 1.706.08 5.327.08s4.1-.017 5.327-.08c1.23-.063 2.067-.265 2.8-.567a5.41 5.41 0 001.96-1.275 5.41 5.41 0 001.275-1.96c.302-.733.504-1.57.567-2.8.063-1.227.08-1.706.08-5.327s-.017-4.1-.08-5.327c-.063-1.23-.265-2.067-.567-2.8a5.41 5.41 0 00-1.275-1.96 5.41 5.41 0 00-1.96-1.275c-.733-.302-1.57-.504-2.8-.567C16.117.017 15.638 0 12.017 0zm0 2.25c3.537 0 3.957.013 5.357.073 1.32.056 2.04.28 2.51.467a3.16 3.16 0 011.16.76 3.16 3.16 0 01.76 1.16c.187.47.411 1.19.467 2.51.06 1.4.073 1.82.073 5.357s-.013 3.957-.073 5.357c-.056 1.32-.28 2.04-.467 2.51a3.16 3.16 0 01-.76 1.16 3.16 3.16 0 01-1.16.76c-.47.187-1.19.411-2.51.467-1.4.06-1.82.073-5.357.073s-3.957-.013-5.357-.073c-1.32-.056-2.04-.28-2.51-.467a3.16 3.16 0 01-1.16-.76 3.16 3.16 0 01-.76-1.16c-.187-.47-.411-1.19-.467-2.51-.06-1.4-.073-1.82-.073-5.357s.013-3.957.073-5.357c.056-1.32.28-2.04.467-2.51a3.16 3.16 0 01.76-1.16 3.16 3.16 0 011.16-.76c.47-.187 1.19-.411 2.51-.467 1.4-.06 1.82-.073 5.357-.073zm0 2.25a9.767 9.767 0 100 19.534 9.767 9.767 0 000-19.534zm0 2.25a7.517 7.517 0 110 15.034 7.517 7.517 0 010-15.034zm8.25 1.5a1.75 1.75 0 11-3.5 0 1.75 1.75 0 013.5 0z','fill'],
            ['whatsapp','WhatsApp','#059669','#f0fdf4','M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z','fill'],
            ['snapchat','Snapchat','#ca8a04','#fefce8','M5.332 14.705c-.278-.07-1.656-.418-2.26-.57a.463.463 0 01-.35-.457c0-.232.152-.432.373-.49.052-.013.104-.02.157-.02.163 0 .318.055.441.154.694.556 1.354.565 1.738.432.296-.103.46-.318.436-.555-.043-.403-.487-.54-.906-.668l-.106-.032c-.706-.214-1.517-.458-1.908-1.158-.263-.467-.19-1.074.189-1.547.62-.77 1.707-.806 2.277-.668.085.02.169.044.25.073.14-.614.326-1.197.561-1.75.649-1.534 1.744-2.666 3.126-3.273 1.258-.553 2.643-.57 3.9-.044 1.381.573 2.487 1.705 3.148 3.24.24.558.432 1.145.573 1.76.083-.03.17-.054.258-.075.574-.138 1.662-.102 2.278.668.38.473.452 1.08.189 1.547-.39.7-1.201.944-1.907 1.158l-.106.032c-.42.128-.864.265-.907.668-.024.237.14.452.436.555.384.133 1.044.124 1.738-.432a.71.71 0 01.44-.154c.053 0 .107.007.16.02.22.058.372.258.372.49a.463.463 0 01-.35.457c-.607.153-1.985.5-2.26.57-.09.218-.263.8-.37 1.17-.088.302-.322.463-.633.463h-.037c-.22 0-.478-.07-.79-.214-.475-.22-1.002-.33-1.567-.33-.606 0-1.125.138-1.543.41-.428.278-.87.418-1.31.418-.44 0-.882-.14-1.31-.418-.418-.272-.937-.41-1.543-.41-.565 0-1.092.11-1.567.33-.312.144-.57.214-.79.214h-.037c-.311 0-.545-.161-.633-.463-.107-.37-.28-.952-.37-1.17z','fill'],
            ['tiktok','TikTok','#111827','#f8fafc','M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3','stroke'],
            ['location','Localisation','#dc2626','#fff1f2','M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z','stroke'],
            ['website','Site web','#0891b2','#ecfeff','M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9','stroke'],
            ['custom_link','Lien personnalisé','#7c3aed','#f5f3ff','M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1','stroke'],
            ['custom_link_name','Nom du bouton','#7c3aed','#f5f3ff','M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z','stroke'],
        ];
        @endphp

        @foreach($platforms as $p)
        @php [$key,$label,$iconColor,$iconBg,$iconPath,$iconType] = $p; $val = $user->$key ?? null; @endphp
        <div class="link-row">
            <div class="link-icon" style="background:{{ $iconBg }}">
                <svg width="17" height="17" fill="{{ $iconType==='fill'?$iconColor:'none' }}" stroke="{{ $iconType==='stroke'?$iconColor:'none' }}" stroke-width="2" viewBox="0 0 24 24">
                    @if($iconType==='stroke')<path stroke-linecap="round" stroke-linejoin="round" d="{{ $iconPath }}"/>@else<path d="{{ $iconPath }}"/>@endif
                </svg>
            </div>
            <div style="flex:1;min-width:0">
                <div class="link-label">{{ $label }}</div>
                <div id="{{ $key }}-display" class="link-value">
                    @if($val)
                        @if($key==='whatsapp')
                            <a href="https://wa.me/{{ $val }}">{{ $val }}</a>
                        @elseif($key==='custom_link_name')
                            <span style="color:#7c3aed;font-style:normal;font-weight:600">{{ $val }}</span>
                        @else
                            <a href="{{ $val }}" target="_blank">{{ Str::limit($val, 40) }}</a>
                        @endif
                    @else
                        <span>Non défini</span>
                    @endif
                </div>
                <div id="{{ $key }}-edit" class="hidden" style="margin-top:8px;display:flex;flex-direction:column;gap:6px">
                    <input type="{{ in_array($key,['whatsapp','custom_link_name']) ? 'text' : 'url' }}"
                           id="{{ $key }}-input"
                           value="{{ $val }}"
                           placeholder="{{ $key==='whatsapp' ? '221771234567' : ($key==='custom_link_name' ? 'Ex: Commander' : 'https://...') }}"
                           class="form-input" style="font-size:12px;padding:8px 12px">
                    <div style="display:flex;gap:6px">
                        <button onclick="saveInline('{{ $key }}')" class="btn-primary-dash" style="padding:7px 14px;font-size:11px;border-radius:8px">Sauver</button>
                        <button onclick="cancelInline('{{ $key }}')" style="padding:7px 14px;font-size:11px;font-weight:700;border-radius:8px;background:#f1f5f9;border:none;cursor:pointer;color:#64748b">Annuler</button>
                    </div>
                </div>
            </div>
            <div id="{{ $key }}-display-btn" style="display:flex;align-items:center;gap:8px;flex-shrink:0">
                <span class="dot-status {{ $val ? 'dot-on' : 'dot-off' }}"></span>
                <button class="btn-edit" onclick="editInline('{{ $key }}')">Modifier</button>
            </div>
        </div>
        @endforeach
    </div>

    {{-- Mes produits --}}
    <div class="dash-card" id="section-produits" style="animation-delay:.15s">
        <div class="section-head">
            <div class="section-icon" style="background:#fff7ed">
                <svg width="18" height="18" fill="none" stroke="#ea580c" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
            </div>

            {{-- Titre éditable --}}
            <div style="flex:1;display:flex;align-items:center;gap:8px">
                <h2 id="products-title-display" style="font-size:15px;font-weight:800;color:#0f2a45;margin:0">{{ $user->products_section_title ?? 'Mes produits' }}</h2>
                <button id="products-title-btn" onclick="editProductsTitle()" title="Modifier le titre"
                        style="width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff7ed;border:none;cursor:pointer;color:#ea580c;flex-shrink:0"
                        onmouseover="this.style.background='#ffedd5'" onmouseout="this.style.background='#fff7ed'">
                    <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536M9 13l6.414-6.414a2 2 0 112.828 2.828L11.828 15.828a2 2 0 01-1.414.586H9v-1.414A2 2 0 019.586 14L9 13z"/></svg>
                </button>
                <div id="products-title-edit" style="display:none;flex:1;align-items:center;gap:6px">
                    <input type="text" id="products-title-input" value="{{ $user->products_section_title ?? 'Mes produits' }}" maxlength="60"
                           style="flex:1;padding:6px 10px;border-radius:8px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:700;outline:none;min-width:0">
                    <button onclick="saveProductsTitle()" class="btn-primary-dash" style="padding:6px 12px;font-size:11px;border-radius:8px;white-space:nowrap">OK</button>
                    <button onclick="cancelProductsTitle()" style="padding:6px 10px;font-size:11px;font-weight:700;border-radius:8px;background:#f1f5f9;border:none;cursor:pointer;color:#64748b;white-space:nowrap">✕</button>
                </div>
            </div>

            <span style="font-size:11px;font-weight:700;color:#94a3b8;background:#f1f5f9;padding:3px 10px;border-radius:50px">{{ $products->count() }}</span>
        </div>

        <div style="padding:20px 24px">

            {{-- Favori counter --}}
            @if($favCount > 0)
            <div id="fav-counter-bar" style="display:flex;align-items:center;gap:7px;margin-bottom:16px;padding:8px 14px;background:#fefce8;border-radius:10px;border:1px solid #fde68a">
                <svg width="13" height="13" fill="#f59e0b" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                <span id="fav-counter" style="font-size:12px;font-weight:700;color:#92400e">{{ $favCount }}/10 favoris</span>
                <span style="font-size:11px;color:#b45309">— apparaissent en premier sur votre page</span>
            </div>
            @else
            <div id="fav-counter-bar" style="display:none;align-items:center;gap:7px;margin-bottom:16px;padding:8px 14px;background:#fefce8;border-radius:10px;border:1px solid #fde68a">
                <svg width="13" height="13" fill="#f59e0b" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                <span id="fav-counter" style="font-size:12px;font-weight:700;color:#92400e">0/10 favoris</span>
                <span style="font-size:11px;color:#b45309">— apparaissent en premier sur votre page</span>
            </div>
            @endif

            {{-- Barre de recherche --}}
            <div style="position:relative;margin-bottom:20px">
                <div style="position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none">
                    <svg width="14" height="14" fill="none" stroke="#94a3b8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <input type="text" id="dash-search" placeholder="Rechercher…"
                       oninput="dashSearch(this.value)"
                       style="width:100%;padding:10px 38px 10px 36px;border-radius:50px;border:1.5px solid #e2e8f0;font-size:13px;font-weight:500;color:#0f2a45;background:#f8fafc;outline:none;transition:all .2s"
                       onfocus="this.style.borderColor='#1a8ed4';this.style.background='#fff'" onblur="this.style.borderColor='#e2e8f0';this.style.background='#f8fafc'">
                <button id="dash-search-clear" onclick="clearDashSearch()"
                        style="display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#e2e8f0;border:none;cursor:pointer;align-items:center;justify-content:center">
                    <svg width="10" height="10" fill="none" stroke="#64748b" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            {{-- Aucun résultat --}}
            <div id="dash-no-results" class="hidden" style="text-align:center;padding:24px;background:#f8fafc;border-radius:14px;border:1.5px dashed #e2e8f0;margin-bottom:16px">
                <div style="font-size:28px;margin-bottom:6px">🔍</div>
                <p style="color:#94a3b8;font-size:13px;font-weight:600">Aucun produit trouvé</p>
            </div>

            @if($products->count())
            {{-- Grille produits --}}
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:16px" id="products-grid">
                @foreach($products as $i => $product)
                <div class="product-card-new {{ $i >= 4 ? 'product-extra hidden' : '' }} {{ $product->is_favorite ? 'is-fav' : '' }}"
                     id="product-card-{{ $product->id }}"
                     data-name="{{ strtolower($product->name) }}"
                     data-description="{{ strtolower($product->description ?? '') }}">

                    {{-- Image --}}
                    @if($product->image)
                    <div style="position:relative;height:180px;overflow:hidden;background:#f8fafc">
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}"
                             style="width:100%;height:100%;object-fit:cover;transition:transform .4s"
                             onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform=''">
                        {{-- Bouton favori --}}
                        <button id="fav-btn-{{ $product->id }}" onclick="toggleFavorite({{ $product->id }}, this)"
                                title="{{ $product->is_favorite ? 'Retirer des favoris' : 'Ajouter aux favoris' }}"
                                style="position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:{{ $product->is_favorite ? '#f59e0b' : 'rgba(255,255,255,.85)' }};box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .2s;{{ $product->is_favorite ? '' : 'opacity:0' }}"
                                class="{{ $product->is_favorite ? '' : 'fav-btn-hidden' }}">
                            <svg width="13" height="13" fill="{{ $product->is_favorite ? '#fff' : '#9ca3af' }}" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                        </button>
                        {{-- Bouton supprimer --}}
                        <button onclick="deleteProduct({{ $product->id }})"
                                style="position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(239,68,68,.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s"
                                class="delete-btn">
                            <svg width="12" height="12" fill="none" stroke="white" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                    @endif

                    <div style="padding:12px">
                        <div style="display:flex;align-items:flex-start;gap:6px;margin-bottom:{{ $product->description ? '6px' : '0' }}">
                            <h4 style="font-size:13px;font-weight:800;color:#0f2a45;flex:1;line-height:1.3">{{ $product->name }}</h4>
                            @if(!$product->image)
                            <button id="fav-btn-{{ $product->id }}" onclick="toggleFavorite({{ $product->id }}, this)"
                                    title="{{ $product->is_favorite ? 'Retirer' : 'Favori' }}"
                                    style="width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:{{ $product->is_favorite ? '#f59e0b' : '#f1f5f9' }};flex-shrink:0;transition:all .2s">
                                <svg width="11" height="11" fill="{{ $product->is_favorite ? '#fff' : '#9ca3af' }}" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                            </button>
                            @endif
                        </div>

                        @if($product->description)
                        <p style="font-size:11px;color:#94a3b8;line-height:1.5;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ $product->description }}</p>
                        @endif

                        @if($product->audio)
                        <div style="display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:10px;background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1px solid #fed7aa;margin-bottom:8px">
                            <div style="width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#f97316,#ec4899);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                                <svg width="11" height="11" fill="white" viewBox="0 0 24 24"><path d="M12 1a4 4 0 00-4 4v7a4 4 0 008 0V5a4 4 0 00-4-4z"/><path d="M19 11a7 7 0 01-14 0H3a9 9 0 0018 0h-2z"/></svg>
                            </div>
                            <audio controls controlsList="nodownload" src="{{ asset('storage/' . $product->audio) }}"
                                   style="flex:1;height:24px;min-width:0;accent-color:#f97316"></audio>
                        </div>
                        @endif

                        @if(!$product->image)
                        <button onclick="deleteProduct({{ $product->id }})"
                                style="display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#ef4444;background:none;border:none;cursor:pointer;padding:0;transition:color .2s"
                                onmouseover="this.style.color='#dc2626'" onmouseout="this.style.color='#ef4444'">
                            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            Supprimer
                        </button>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>

            @if($products->count() > 4)
            <div style="display:flex;justify-content:center;margin-bottom:8px">
                <button id="btn-voir-plus" onclick="toggleMoreProducts()"
                        style="display:flex;align-items:center;gap:7px;padding:10px 24px;border-radius:50px;border:none;cursor:pointer;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f97316,#ec4899);box-shadow:0 4px 14px rgba(249,115,22,.3);transition:opacity .2s"
                        onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    Voir plus ({{ $products->count() - 4 }} {{ Str::lower($user->products_section_title ?? 'produit') }}{{ $products->count() - 4 > 1 ? 's' : '' }})
                </button>
            </div>
            @endif

            @else
            <div style="text-align:center;padding:40px 20px">
                <div style="width:64px;height:64px;border-radius:20px;background:#fff7ed;display:flex;align-items:center;justify-content:center;margin:0 auto 14px">
                    <svg width="28" height="28" fill="none" stroke="#fb923c" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                </div>
                <p style="font-weight:800;color:#0f2a45;font-size:14px">Aucun produit encore</p>
                <p style="font-size:12px;color:#94a3b8;margin-top:4px">Commencez à construire votre catalogue</p>
            </div>
            @endif

            {{-- ── Formulaire ajout ── --}}
            <div id="section-ajout" style="border-top:1.5px solid #f1f5f9;padding-top:22px;margin-top:8px">
                <h4 style="display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0f2a45;margin-bottom:16px">
                    <span style="width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#f97316,#ec4899);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;font-weight:900;flex-shrink:0">+</span>
                    Ajouter — {{ $user->products_section_title ?? 'Mes produits' }}
                </h4>

                <form id="productForm" enctype="multipart/form-data" style="display:flex;flex-direction:column;gap:10px">
                    <input type="text" name="name" placeholder="Nom — {{ $user->products_section_title ?? 'produit' }} *" required class="form-input">

                    <label style="cursor:pointer;display:block">
                        <div style="display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;border:1.5px dashed #e2e8f0;font-size:12px;font-weight:600;color:#94a3b8;transition:all .2s"
                             onmouseover="this.style.borderColor='#f97316';this.style.color='#f97316';this.style.background='#fff7ed'" onmouseout="this.style.borderColor='#e2e8f0';this.style.color='#94a3b8';this.style.background=''">
                            <svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><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>
                            <span class="product-file-name">Photo — {{ $user->products_section_title ?? 'produit' }}</span>
                        </div>
                        <input type="file" name="image" accept="image/*" class="hidden"
                               onchange="this.closest('form').querySelector('.product-file-name').textContent = this.files[0]?.name || 'Photo — {{ $user->products_section_title ?? 'produit' }}'">
                    </label>

                    <textarea name="description" placeholder="Description (optionnel)" rows="2" class="form-input" style="resize:none"></textarea>

                    {{-- Enregistreur vocal --}}
                    <div style="border:1.5px dashed #e2e8f0;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px" id="voiceRecorder">
                        <p style="font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:6px;margin:0">
                            <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 016 0v6a3 3 0 01-3 3z"/></svg>
                            Message vocal (max 30 s)
                        </p>

                        <div id="voice-idle">
                            <button type="button" onclick="startRecording()"
                                    style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;border:none;cursor:pointer;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f97316,#ec4899);box-shadow:0 3px 12px rgba(249,115,22,.3);transition:opacity .2s"
                                    onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                                <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1a4 4 0 00-4 4v7a4 4 0 008 0V5a4 4 0 00-4-4z"/><path d="M19 11a7 7 0 01-14 0H3a9 9 0 0018 0h-2z"/><path d="M12 21v-2"/></svg>
                                Démarrer l'enregistrement
                            </button>
                        </div>

                        <div id="voice-recording" class="hidden" style="display:flex;flex-direction:column;gap:8px">
                            <div style="display:flex;align-items:center;justify-content:space-between">
                                <span style="display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ef4444">
                                    <span style="width:8px;height:8px;border-radius:50%;background:#ef4444;animation:ping 1s infinite;display:inline-block"></span>
                                    En cours…
                                </span>
                                <span id="voice-timer" style="font-size:12px;font-weight:900;color:#0f2a45;font-variant-numeric:tabular-nums">0:00 / 0:30</span>
                            </div>
                            <div style="height:5px;background:#f1f5f9;border-radius:50px;overflow:hidden">
                                <div id="voice-progress" style="height:100%;width:0%;background:linear-gradient(90deg,#f97316,#ec4899);border-radius:50px;transition:width 1s linear"></div>
                            </div>
                            <button type="button" onclick="stopRecording()"
                                    style="padding:10px;border-radius:10px;background:#f1f5f9;border:none;cursor:pointer;font-size:12px;font-weight:700;color:#475569;display:flex;align-items:center;justify-content:center;gap:6px">
                                <svg width="12" height="12" fill="#475569" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
                                Arrêter
                            </button>
                        </div>

                        <div id="voice-recorded" class="hidden" style="display:flex;flex-direction:column;gap:7px">
                            <div style="display:flex;gap:8px;align-items:center">
                                <audio id="voice-preview" controls style="flex:1;height:32px;min-width:0;accent-color:#f97316"></audio>
                                <button type="button" onclick="deleteRecording()"
                                        style="width:32px;height:32px;border-radius:9px;background:#fee2e2;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0">
                                    <svg width="13" height="13" fill="none" stroke="#ef4444" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            </div>
                            <p style="font-size:11px;color:#059669;font-weight:600;display:flex;align-items:center;gap:5px">
                                <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                Vocal enregistré — il sera joint à {{ $user->products_section_title ?? 'ce produit' }}
                            </p>
                        </div>
                    </div>

                    <button type="submit"
                            style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:12px;border:none;cursor:pointer;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f97316,#ec4899);box-shadow:0 4px 16px rgba(249,115,22,.35);transition:opacity .2s"
                            onmouseover="this.style.opacity='.88'" onmouseout="this.style.opacity='1'">
                        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                        Ajouter — {{ $user->products_section_title ?? 'Mes produits' }}
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>{{-- fin colonne droite --}}
</div>{{-- fin grille --}}
</div>{{-- fin min-h-screen --}}

<style>
.product-card-new:hover .delete-btn{opacity:1!important}
.product-card-new:hover .fav-btn-hidden{opacity:1!important}

/* ── Responsive ── */
@media(max-width:900px){
    #dash-grid{grid-template-columns:1fr!important}
}
@media(max-width:640px){
    /* Hero */
    #dash-hero-inner{flex-direction:column!important;align-items:flex-start!important;gap:16px!important}
    #dash-hero-inner h1{font-size:1.6rem!important}
    #dash-see-page{width:100%!important;justify-content:center!important}
    #dash-stats{gap:8px!important}
    .stat-pill{padding:10px 14px!important;min-width:80px!important}
    .stat-pill div:first-child{font-size:20px!important}
    /* Cards */
    .section-head{padding:16px 16px 14px!important}
    .link-row{padding:12px 16px!important;gap:10px!important}
    .link-row .btn-edit{padding:5px 10px!important;font-size:11px!important}
    /* Product grid */
    #products-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:10px!important}
    /* Add product form */
    #section-ajout .form-input{font-size:13px!important}
    /* Grid padding */
    #dash-grid{padding:20px 14px 40px!important}
    /* Recorder bar */
    #voice-recorded{flex-direction:column!important;align-items:flex-start!important}
    /* Profile modal */
    #profileModal>div{max-width:100%!important;border-radius:16px!important}
    /* Inline edit fields */
    .link-row [id^="edit-form"]{flex-direction:column!important;gap:6px!important}
}
@media(max-width:400px){
    #dash-stats{flex-direction:column!important;align-items:flex-start!important}
    .stat-pill{width:100%!important}
    #products-grid{grid-template-columns:1fr 1fr!important}
}
</style>

@push('scripts')
<script>
    let toastTimer;
    function showToast(msg, isError = false) {
        clearTimeout(toastTimer);
        const t = document.getElementById('toast');
        t.textContent = msg;
        t.className = 'toast-new ' + (isError ? 'err' : 'ok');
        t.style.display = 'block';
        void t.offsetWidth;
        t.classList.add('show');
        toastTimer = setTimeout(() => { t.classList.remove('show'); setTimeout(()=>t.style.display='none',350); }, 3500);
    }

    function copyPublicUrl() {
        const el = document.getElementById('publicUrl');
        el.select(); el.setSelectionRange(0,99999);
        document.execCommand('copy');
        showToast('Lien copié !');
    }

    // ── Profil modal ─────────────────────────────────────────────────────────
    function openProfileModal() {
        const m = document.getElementById('profileModal');
        m.style.removeProperty('display');
        m.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }
    function closeProfileModal() {
        document.getElementById('profileModal').style.display = 'none';
        document.body.style.overflow = '';
        ['name','phone','address'].forEach(f => {
            const el = document.getElementById('profile-error-' + f);
            if (el){ el.textContent=''; el.classList.add('hidden'); }
        });
    }
    document.getElementById('profileModal').addEventListener('click', function(e){ if(e.target===this) closeProfileModal(); });
    document.getElementById('profileForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const btn = document.getElementById('profileSaveBtn');
        btn.disabled = true; btn.textContent = '…';
        const fd = new FormData(this);
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fetch('/visitor/update-profile', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => {
                if(d.errors){
                    Object.entries(d.errors).forEach(([f,m])=>{ const el=document.getElementById('profile-error-'+f); if(el){el.textContent=m[0];el.classList.remove('hidden');} });
                    showToast('Veuillez corriger les erreurs.', true);
                } else {
                    document.getElementById('profile-name-display').textContent    = fd.get('name')    || '—';
                    document.getElementById('profile-phone-display').textContent   = fd.get('phone')   || '—';
                    document.getElementById('profile-address-display').textContent = fd.get('address') || '—';
                    closeProfileModal(); showToast(d.message || 'Profil mis à jour !');
                }
            })
            .catch(()=>showToast('Erreur.', true))
            .finally(()=>{ btn.disabled=false; btn.textContent='Enregistrer'; });
    });

    // ── Liens inline ─────────────────────────────────────────────────────────
    window.originalValues = {!! json_encode($user->only(['facebook','twitter','instagram','whatsapp','snapchat','tiktok','location','website','custom_link','custom_link_name'])) !!};

    function editInline(p) {
        document.getElementById(p+'-display').classList.add('hidden');
        document.getElementById(p+'-edit').classList.remove('hidden');
        document.getElementById(p+'-edit').style.display = 'flex';
        const btn = document.getElementById(p+'-display-btn');
        if(btn) btn.style.display = 'none';
    }
    function cancelInline(p) {
        document.getElementById(p+'-display').classList.remove('hidden');
        document.getElementById(p+'-edit').classList.add('hidden');
        document.getElementById(p+'-edit').style.display = 'none';
        const btn = document.getElementById(p+'-display-btn');
        if(btn) btn.style.display = 'flex';
        document.getElementById(p+'-input').value = originalValues[p] || '';
    }
    function saveInline(p) {
        const link = document.getElementById(p+'-input').value;
        const fd = new FormData();
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fd.append(p, link);
        fetch('/visitor/update-social-links', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => {
                if(d.errors) showToast('Erreur : '+Object.values(d.errors).flat().join(', '), true);
                else { showToast(d.message || 'Sauvegardé !'); originalValues[p]=link; location.reload(); }
            })
            .catch(()=>showToast('Erreur.', true));
    }

    // ── Logo ──────────────────────────────────────────────────────────────────
    document.getElementById('logoForm').querySelector('input[type=file]').addEventListener('change', function(){
        if(this.files.length) document.querySelector('.logo-submit-btn').classList.remove('hidden');
    });
    document.getElementById('logoForm').addEventListener('submit', function(e){
        e.preventDefault();
        const fd = new FormData(this);
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fetch('/visitor/update-logo', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => { if(d.errors) showToast('Erreur.', true); else { showToast(d.message||'Logo mis à jour !'); location.reload(); } })
            .catch(()=>showToast('Erreur.', true));
    });

    // ── Ancre scroll ─────────────────────────────────────────────────────────
    function dashScrollTo(id) {
        const el = document.getElementById(id);
        if(!el) return;
        window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior:'smooth' });
    }

    // ── Titre produits ────────────────────────────────────────────────────────
    function editProductsTitle() {
        document.getElementById('products-title-display').style.display = 'none';
        document.getElementById('products-title-btn').style.display = 'none';
        document.getElementById('products-title-edit').style.display = 'flex';
        document.getElementById('products-title-input').focus();
        document.getElementById('products-title-input').select();
    }
    function cancelProductsTitle() {
        document.getElementById('products-title-edit').style.display = 'none';
        document.getElementById('products-title-display').style.display = '';
        document.getElementById('products-title-btn').style.display = 'flex';
        document.getElementById('products-title-input').value = document.getElementById('products-title-display').textContent.trim();
    }
    function saveProductsTitle() {
        const val = document.getElementById('products-title-input').value.trim();
        if(!val) return;
        const fd = new FormData();
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fd.append('products_section_title', val);
        fetch('/visitor/update-products-title', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => { document.getElementById('products-title-display').textContent=val; cancelProductsTitle(); showToast(d.message||'Titre mis à jour !'); })
            .catch(()=>showToast('Erreur.', true));
    }
    document.getElementById('products-title-input').addEventListener('keydown', function(e){
        if(e.key==='Enter') saveProductsTitle();
        if(e.key==='Escape') cancelProductsTitle();
    });

    // ── Recherche dashboard ───────────────────────────────────────────────────
    function dashSearch(query) {
        const q = query.trim().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');
        const cards = document.querySelectorAll('#products-grid [data-name]');
        const btnMore = document.getElementById('btn-voir-plus');
        const noResults = document.getElementById('dash-no-results');
        const clearBtn = document.getElementById('dash-search-clear');
        clearBtn.style.display = q.length ? 'flex' : 'none';
        if(!q){
            cards.forEach(c => c.classList.toggle('hidden', c.classList.contains('product-extra') && !productsExpanded));
            if(btnMore) btnMore.parentElement.classList.remove('hidden');
            noResults.classList.add('hidden'); return;
        }
        if(btnMore) btnMore.parentElement.classList.add('hidden');
        let found = 0;
        const norm = s => (s||'').normalize('NFD').replace(/[\u0300-\u036f]/g,'').toLowerCase();
        cards.forEach(c => {
            const match = norm(c.dataset.name).includes(q) || norm(c.dataset.description).includes(q);
            c.classList.toggle('hidden', !match);
            if(match) found++;
        });
        noResults.classList.toggle('hidden', found > 0);
    }
    function clearDashSearch() {
        document.getElementById('dash-search').value = '';
        dashSearch('');
        document.getElementById('dash-search').focus();
    }

    let productsExpanded = false;
    function toggleMoreProducts() {
        productsExpanded = !productsExpanded;
        document.querySelectorAll('#products-grid .product-extra').forEach(el => el.classList.toggle('hidden', !productsExpanded));
        const btn = document.getElementById('btn-voir-plus');
        btn.innerHTML = productsExpanded
            ? `<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg> Voir moins`
            : `<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg> Voir plus ({{ $products->count() - 4 }} {{ Str::lower($user->products_section_title ?? 'produit') }}{{ $products->count() - 4 > 1 ? 's' : '' }})`;
    }

    // ── Enregistreur vocal ────────────────────────────────────────────────────
    let mediaRecorder=null, audioChunks=[], audioBlob=null, recInterval=null, recSeconds=0;
    const MAX_SEC = 30;

    function startRecording() {
        if(!navigator.mediaDevices?.getUserMedia){ showToast("Navigateur non supporté.", true); return; }
        navigator.mediaDevices.getUserMedia({audio:true})
            .then(stream => {
                audioChunks=[]; audioBlob=null; recSeconds=0;
                const mimeType = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus'
                    : MediaRecorder.isTypeSupported('audio/ogg;codecs=opus') ? 'audio/ogg;codecs=opus' : 'audio/webm';
                mediaRecorder = new MediaRecorder(stream, {mimeType});
                mediaRecorder.ondataavailable = e => { if(e.data.size>0) audioChunks.push(e.data); };
                mediaRecorder.onstop = () => {
                    stream.getTracks().forEach(t=>t.stop());
                    audioBlob = new Blob(audioChunks, {type:mimeType});
                    document.getElementById('voice-preview').src = URL.createObjectURL(audioBlob);
                    setVoiceState('recorded');
                };
                mediaRecorder.start(200);
                setVoiceState('recording');
                recInterval = setInterval(() => {
                    recSeconds++;
                    const mm=Math.floor(recSeconds/60), ss=String(recSeconds%60).padStart(2,'0');
                    document.getElementById('voice-timer').textContent = `${mm}:${ss} / 0:30`;
                    document.getElementById('voice-progress').style.width = (recSeconds/MAX_SEC*100)+'%';
                    if(recSeconds>=MAX_SEC) stopRecording();
                }, 1000);
            })
            .catch(err => showToast(err.name==='NotAllowedError' ? 'Microphone refusé.' : "Impossible d'accéder au micro.", true));
    }
    function stopRecording() { clearInterval(recInterval); if(mediaRecorder?.state!=='inactive') mediaRecorder.stop(); }
    function deleteRecording() {
        audioBlob=null; audioChunks=[];
        const p=document.getElementById('voice-preview'); URL.revokeObjectURL(p.src); p.src='';
        setVoiceState('idle');
    }
    function setVoiceState(s) {
        ['idle','recording','recorded'].forEach(st => {
            const el = document.getElementById('voice-'+st);
            el.classList.toggle('hidden', s!==st);
            el.style.display = s===st ? (st==='idle'?'block':'flex') : 'none';
        });
    }

    // ── Ajouter produit ───────────────────────────────────────────────────────
    document.getElementById('productForm').addEventListener('submit', function(e){
        e.preventDefault();
        const fd = new FormData(this);
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        if(audioBlob){ const ext=audioBlob.type.includes('ogg')?'ogg':'webm'; fd.append('audio', audioBlob, `vocal.${ext}`); }
        fetch('/visitor/products', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => { if(d.errors) showToast('Erreur : '+Object.values(d.errors).flat().join(', '), true); else { showToast(d.message||'Produit ajouté !'); deleteRecording(); location.reload(); } })
            .catch(()=>showToast("Erreur lors de l'ajout.", true));
    });

    // ── Favoris ───────────────────────────────────────────────────────────────
    function toggleFavorite(id, btn) {
        const fd = new FormData();
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fd.append('product_id', id);
        fetch('/visitor/products/favorite', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => {
                if(!d.success){ showToast(d.message, true); return; }
                const isFav = d.is_favorite;
                const star = btn.querySelector('svg');
                const card = document.getElementById('product-card-'+id);
                btn.style.background = isFav ? '#f59e0b' : (card.querySelector('.delete-btn') ? 'rgba(255,255,255,.85)' : '#f1f5f9');
                btn.title = isFav ? 'Retirer des favoris' : 'Ajouter aux favoris';
                star.setAttribute('fill', isFav ? '#fff' : '#9ca3af');
                btn.style.opacity = isFav ? '1' : '';
                if(card){ card.classList.toggle('is-fav', isFav); card.style.boxShadow=isFav?'0 0 0 2px rgba(245,158,11,.2)':''; }
                const counter = document.getElementById('fav-counter');
                const bar = document.getElementById('fav-counter-bar');
                if(counter) counter.textContent = d.fav_count+'/10 favoris';
                if(bar) bar.style.display = d.fav_count > 0 ? 'flex' : 'none';
            })
            .catch(()=>showToast('Erreur.', true));
    }

    // ── Modifier mot de passe ────────────────────────────────────────────────
    function togglePwField(fieldId, iconId) {
        const f = document.getElementById(fieldId);
        const eye = document.getElementById(iconId);
        const isHidden = f.type === 'password';
        f.type = isHidden ? 'text' : 'password';
        eye.innerHTML = isHidden
            ? '<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>'
            : '<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
    }

    document.getElementById('passwordForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const btn = document.getElementById('pwSubmitBtn');
        const fd  = new FormData();
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fd.append('current_password', document.getElementById('current_password').value);
        fd.append('new_password', document.getElementById('new_password').value);
        fd.append('new_password_confirmation', document.getElementById('new_password_confirmation').value);
        btn.textContent = '…';
        btn.disabled = true;
        fetch('/visitor/update-password', { method: 'POST', body: fd })
            .then(r => r.json())
            .then(d => {
                btn.textContent = 'Mettre à jour le mot de passe';
                btn.disabled = false;
                if (d.success) {
                    showToast('Mot de passe mis à jour ✓');
                    document.getElementById('passwordForm').reset();
                } else {
                    showToast(d.message || 'Erreur', true);
                }
            })
            .catch(() => {
                btn.textContent = 'Mettre à jour le mot de passe';
                btn.disabled = false;
                showToast('Erreur réseau', true);
            });
    });

    // ── Supprimer produit ─────────────────────────────────────────────────────
    function deleteProduct(id) {
        if(!confirm('Supprimer ce produit ?')) return;
        const fd = new FormData();
        fd.append('_token', document.querySelector('meta[name="csrf-token"]').content);
        fd.append('product_id', id);
        fetch('/visitor/products/delete', { method:'POST', body:fd })
            .then(r=>r.json())
            .then(d => { if(d.success) location.reload(); else showToast('Erreur : '+(d.message||'Échec'), true); })
            .catch(()=>showToast('Erreur réseau', true));
    }
</script>
@endpush

@endsection