@extends('layouts.app')

@section('title', 'My Profile')
@section('page-title', 'My Profile')
@section('page-subtitle', 'Manage your account settings')

@section('topbar-actions')
<a href="{{ url()->previous() }}" class="btn btn-ghost btn-sm">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
        <line x1="19" y1="12" x2="5" y2="12"/>
        <polyline points="12 19 5 12 12 5"/>
    </svg>
    Back
</a>
@endsection

@php
$industries = [
    'Fashion & Apparel',
    'Beauty & Cosmetics',
    'Health & Wellness',
    'Food & Beverage',
    'Technology & Electronics',
    'Travel & Hospitality',
    'Sports & Fitness',
    'Home & Lifestyle',
    'Finance & Fintech',
    'Education & E-Learning',
    'Gaming & Entertainment',
    'Automotive',
    'Real Estate',
    'Healthcare & Pharma',
    'Retail & E-Commerce',
    'Other',
];
@endphp

@push('styles')
<style>
.profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } }

/* ── Card ── */
.p-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.p-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px; font-weight: 600; color: #111827;
    display: flex; align-items: center; justify-content: space-between;
}
.p-card-header-sub { font-size: 12px; font-weight: 400; color: #9ca3af; }
.p-card-body { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.p-card-footer {
    padding: 14px 20px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
    display: flex; align-items: center; gap: 10px;
}

/* ── Avatar block ── */
.avatar-block {
    display: flex; flex-direction: column; align-items: center;
    padding: 28px 20px 20px;
    text-align: center;
}
.avatar-circle {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #34BDEB, #0070f3);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700; color: #fff;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.avatar-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px; font-weight: 700; color: #111827;
    margin-bottom: 4px;
}
.avatar-email { font-size: 12.5px; color: #9ca3af; margin-bottom: 12px; }

.role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600;
    background: rgba(124,58,237,.08); color: #7c3aed;
    border: 1px solid rgba(124,58,237,.2);
}
.role-badge svg { width: 11px; height: 11px; }

/* ── Meta list ── */
.meta-list { display: flex; flex-direction: column; gap: 0; }
.meta-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 20px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
}
.meta-item:last-child { border-bottom: none; }
.meta-key { color: #6b7280; font-weight: 500; }
.meta-val { color: #111827; font-weight: 600; text-align: right;
            max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industry-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 20px; padding: 2px 9px;
    font-size: 12px; font-weight: 500; color: #374151;
}

/* ── Form ── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-label {
    font-size: 12px; font-weight: 600; color: #374151;
    letter-spacing: .02em;
}
.form-label span { color: #ef4444; margin-left: 2px; }
.form-control {
    padding: 9px 13px;
    border: 1px solid #d1d5db; border-radius: 7px;
    font-size: 13.5px; font-family: 'Inter', sans-serif;
    color: #111827; background: #f9fafb;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%; box-sizing: border-box;
}
.form-control:focus {
    border-color: #34BDEB;
    box-shadow: 0 0 0 3px rgba(52,189,235,.1);
    background: #fff;
}
.form-control::placeholder { color: #9ca3af; }
.form-control.is-invalid   { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.08); }
.error-msg { font-size: 12px; color: #dc2626; }
.form-hint { font-size: 11.5px; color: #9ca3af; line-height: 1.5; }

/* ── Password strength ── */
.strength-bar-wrap {
    height: 4px; background: #f3f4f6; border-radius: 4px;
    overflow: hidden; margin-top: 6px;
}
.strength-bar {
    height: 100%; border-radius: 4px;
    transition: width .3s, background .3s;
    width: 0;
}
.strength-label { font-size: 11px; color: #9ca3af; margin-top: 3px; }

/* ── Section divider inside card body ── */
.section-divider { height: 1px; background: #f3f4f6; margin: 0 -20px; }

/* ── Security tips ── */
.tip-list { display: flex; flex-direction: column; gap: 10px; }
.tip-item { display: flex; gap: 9px; font-size: 12.5px; color: #6b7280; line-height: 1.5; }
.tip-dot  { width: 6px; height: 6px; border-radius: 50%; background: #34BDEB; margin-top: 5px; flex-shrink: 0; }
</style>
@endpush

@section('content')

<div class="profile-grid">

    {{-- ── Left: avatar card + security tips ── --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        <div class="p-card">
            <div class="avatar-block">
                <div class="avatar-circle" id="avatarCircle">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="avatar-name"  id="avatarName">{{ auth()->user()->name }}</div>
                <div class="avatar-email" id="avatarEmail">{{ auth()->user()->email }}</div>
                <span class="role-badge">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="23 7 16 12 23 17 23 7"/>
                        <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                    </svg>
                    Influencer
                </span>
            </div>
            <div class="meta-list">
                <div class="meta-item">
                    <span class="meta-key">Industry</span>
                    <span id="metaIndustry">
                        @if(auth()->user()->industry)
                            <span class="industry-tag">{{ auth()->user()->industry }}</span>
                        @else
                            <span style="color:#9ca3af;font-weight:400;">Not set</span>
                        @endif
                    </span>
                </div>
                <div class="meta-item">
                    <span class="meta-key">Member since</span>
                    <span class="meta-val">{{ auth()->user()->created_at->format('M j, Y') }}</span>
                </div>
                <div class="meta-item">
                    <span class="meta-key">Account status</span>
                    <span class="meta-val" style="color:#16a34a;">Active</span>
                </div>
            </div>
        </div>

        <div class="p-card">
            <div class="p-card-header">Security Tips</div>
            <div class="p-card-body" style="gap:0;padding-bottom:20px;">
                <div class="tip-list">
                    <div class="tip-item"><div class="tip-dot"></div>Use at least 8 characters with a mix of letters and numbers.</div>
                    <div class="tip-item"><div class="tip-dot"></div>Avoid using the same password across multiple sites.</div>
                    <div class="tip-item"><div class="tip-dot"></div>Never share your password with anyone.</div>
                    <div class="tip-item"><div class="tip-dot"></div>Update your password regularly for better security.</div>
                </div>
            </div>
        </div>

    </div>

    {{-- ── Right: two forms stacked ── --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        {{-- Form 1: Profile info --}}
        <div class="p-card">
            <div class="p-card-header">
                Profile Information
                <span class="p-card-header-sub">Name, email &amp; industry</span>
            </div>
            <form method="POST" action="{{ route('influencer.profile.update') }}">
                @csrf
                @method('PUT')
                <div class="p-card-body">

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label" for="name">Full Name <span>*</span></label>
                            <input type="text"
                                   id="name"
                                   name="name"
                                   class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                                   value="{{ old('name', auth()->user()->name) }}"
                                   placeholder="Your full name"
                                   oninput="livePreview()"
                                   required>
                            @error('name') <span class="error-msg">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="email">Email Address <span>*</span></label>
                            <input type="email"
                                   id="email"
                                   name="email"
                                   class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}"
                                   value="{{ old('email', auth()->user()->email) }}"
                                   placeholder="you@example.com"
                                   oninput="livePreview()"
                                   required>
                            @error('email') <span class="error-msg">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="industry">Industry</label>
                        <select id="industry"
                                name="industry"
                                class="form-control {{ $errors->has('industry') ? 'is-invalid' : '' }}"
                                onchange="livePreview()">
                            <option value="">— Select an industry —</option>
                            @foreach($industries as $ind)
                                <option value="{{ $ind }}"
                                    {{ old('industry', auth()->user()->industry) === $ind ? 'selected' : '' }}>
                                    {{ $ind }}
                                </option>
                            @endforeach
                        </select>
                        @error('industry') <span class="error-msg">{{ $message }}</span> @enderror
                        <div class="form-hint">
                            Your industry determines which campaigns are visible to you.
                        </div>
                    </div>

                </div>
                <div class="p-card-footer">
                    <button type="submit" class="btn btn-primary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="13" height="13">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                        Save Profile
                    </button>
                    <span style="font-size:12px;color:#9ca3af;">Changes take effect immediately.</span>
                </div>
            </form>
        </div>

        {{-- Form 2: Change password --}}
        <div class="p-card">
            <div class="p-card-header">
                Change Password
                <span class="p-card-header-sub">Leave blank to keep current</span>
            </div>
            <form method="POST" action="{{ route('influencer.profile.password') }}">
                @csrf
                <div class="p-card-body">

                    <div class="form-group">
                        <label class="form-label" for="current_password">
                            Current Password <span>*</span>
                        </label>
                        <input type="password"
                               id="current_password"
                               name="current_password"
                               class="form-control {{ $errors->has('current_password') ? 'is-invalid' : '' }}"
                               placeholder="Enter your current password"
                               autocomplete="current-password"
                               required>
                        @error('current_password')
                            <span class="error-msg">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="section-divider"></div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label" for="password">
                                New Password <span>*</span>
                            </label>
                            <input type="password"
                                   id="password"
                                   name="password"
                                   class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                   placeholder="Min. 8 characters"
                                   autocomplete="new-password"
                                   oninput="checkStrength(this.value)"
                                   required>
                            @error('password')
                                <span class="error-msg">{{ $message }}</span>
                            @enderror
                            <div class="strength-bar-wrap">
                                <div class="strength-bar" id="strengthBar"></div>
                            </div>
                            <div class="strength-label" id="strengthLabel"></div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="password_confirmation">
                                Confirm New Password <span>*</span>
                            </label>
                            <input type="password"
                                   id="password_confirmation"
                                   name="password_confirmation"
                                   class="form-control"
                                   placeholder="Repeat new password"
                                   autocomplete="new-password"
                                   required>
                            <div class="form-hint">Both passwords must match.</div>
                        </div>
                    </div>

                </div>
                <div class="p-card-footer">
                    <button type="submit" class="btn btn-primary">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="13" height="13">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                        Update Password
                    </button>
                    <span style="font-size:12px;color:#9ca3af;">You will remain logged in after updating.</span>
                </div>
            </form>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
/* ── Live preview on left card ── */
function livePreview() {
    const name     = document.getElementById('name').value.trim();
    const email    = document.getElementById('email').value.trim();
    const industry = document.getElementById('industry').value;

    document.getElementById('avatarCircle').textContent =
        name ? name.charAt(0).toUpperCase() : '?';
    document.getElementById('avatarName').textContent  = name  || '—';
    document.getElementById('avatarEmail').textContent = email || '—';

    const metaIndustry = document.getElementById('metaIndustry');
    metaIndustry.innerHTML = industry
        ? `<span class="industry-tag">${industry}</span>`
        : `<span style="color:#9ca3af;font-weight:400;">Not set</span>`;
}

/* ── Password strength ── */
function checkStrength(val) {
    const bar   = document.getElementById('strengthBar');
    const label = document.getElementById('strengthLabel');
    if (!val) { bar.style.width = '0'; label.textContent = ''; return; }

    let score = 0;
    if (val.length >= 8)          score++;
    if (/[A-Z]/.test(val))        score++;
    if (/[0-9]/.test(val))        score++;
    if (/[^A-Za-z0-9]/.test(val)) score++;

    const levels = [
        { w: '20%',  bg: '#ef4444', txt: 'Weak' },
        { w: '45%',  bg: '#f59e0b', txt: 'Fair' },
        { w: '70%',  bg: '#3b82f6', txt: 'Good' },
        { w: '100%', bg: '#22c55e', txt: 'Strong' },
    ];
    const lvl = levels[Math.min(score - 1, 3)] ?? levels[0];
    bar.style.width      = lvl.w;
    bar.style.background = lvl.bg;
    label.textContent    = lvl.txt;
    label.style.color    = lvl.bg;
}
</script>
@endpush