@extends('layouts.app')

@section('title', 'Profile')

@push('styles')
<style>
    .profile-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .profile-page h1 i { color: var(--accent); }

    .profile-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .profile-section-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .profile-section-header i { color: var(--accent); }
    .profile-section-body { padding: 1.5rem; }

    /* Large Avatar */
    .profile-avatar-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 2.5rem;
        font-weight: 700;
        overflow: hidden;
        border: 4px solid var(--border);
        margin-bottom: 1rem;
    }

    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-actions {
        display: flex;
        gap: 0.75rem;
    }

    /* Info Cards */
    .profile-meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .profile-meta-item {
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    .profile-meta-label {
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.375rem;
    }

    .profile-meta-value {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* Form */
    .form-group { margin-bottom: 1.25rem; }
    .form-group:last-child { margin-bottom: 0; }

    .form-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .form-input,
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-input:focus,
    .form-textarea:focus { border-color: var(--accent); }

    .form-textarea {
        resize: vertical;
        min-height: 100px;
    }

    .form-input-readonly {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .form-error {
        display: block;
        font-size: 0.75rem;
        color: var(--danger);
        margin-top: 0.375rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    .verified-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.15rem 0.5rem;
        border-radius: 12px;
    }

    .verified-badge.verified {
        background: var(--success-light);
        color: var(--success);
    }

    .verified-badge.unverified {
        background: var(--warning-light);
        color: var(--warning);
    }

    .trust-score-display {
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }

    .trust-score-display i { color: var(--warning); font-size: 0.85rem; }

    /* Alert */
    .alert-success {
        background: var(--success-light);
        border: 1px solid rgba(0, 212, 170, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        color: var(--success);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    @media (max-width: 640px) {
        .form-row { grid-template-columns: 1fr; }
        .profile-meta { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="profile-page">
        <h1><i class="fas fa-user"></i> Profile</h1>

        @if(session('success'))
            <div class="alert-success">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        <div class="profile-section">
            {{-- Avatar Area --}}
            <div class="profile-avatar-area">
                <div class="profile-avatar" id="avatarPreview">
                    @if(auth()->user()->avatar_url)
                        <img src="{{ auth()->user()->avatar_url }}" alt="Avatar"
                             onerror="this.outerHTML='{{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}'">
                    @else
                        {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}
                    @endif
                </div>
                <div class="profile-avatar-actions">
                    <label class="btn btn-sm btn-primary" for="avatarInput" style="cursor: pointer;">
                        <i class="fas fa-camera"></i> Upload Photo
                    </label>
                    <button type="button" class="btn btn-sm btn-secondary" onclick="removeAvatar()">
                        <i class="fas fa-trash"></i> Remove
                    </button>
                </div>
            </div>

            {{-- Meta Info --}}
            <div class="profile-section-body">
                <div class="profile-meta">
                    <div class="profile-meta-item">
                        <div class="profile-meta-label">Tenseal ID</div>
                        <div class="profile-meta-value">
                            <i class="fas fa-fingerprint" style="color: var(--accent);"></i>
                            #{{ auth()->user()->id ?? '000000' }}
                        </div>
                    </div>
                    <div class="profile-meta-item">
                        <div class="profile-meta-label">Member Since</div>
                        <div class="profile-meta-value">
                            <i class="fas fa-calendar" style="color: var(--accent);"></i>
                            {{ auth()->user()->created_at?->format('M d, Y') ?? 'N/A' }}
                        </div>
                    </div>
                    <div class="profile-meta-item">
                        <div class="profile-meta-label">Verification Status</div>
                        <div class="profile-meta-value">
                            @if(auth()->user()->is_verified ?? false)
                                <span class="verified-badge verified"><i class="fas fa-check-circle"></i> Verified</span>
                            @else
                                <span class="verified-badge unverified"><i class="fas fa-exclamation-circle"></i> Unverified</span>
                                <a href="{{ url('/verification') }}" style="font-size: 0.78rem; color: var(--accent); margin-left: 0.25rem;">Verify Now</a>
                            @endif
                        </div>
                    </div>
                    <div class="profile-meta-item">
                        <div class="profile-meta-label">Trust Score</div>
                        <div class="profile-meta-value">
                            <div class="trust-score-display">
                                <i class="fas fa-star"></i>
                                <span>{{ auth()->user()->trust_score ?? 'N/A' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Profile Form --}}
                <form method="POST" action="{{ route('escrow.profile.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display: none;" onchange="previewAvatar(this)">

                    <div class="form-group">
                        <label class="form-label" for="name">Full Name</label>
                        <input type="text" class="form-input" id="name" name="name" value="{{ old('name', auth()->user()->name) }}">
                        @error('name')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="email">
                            Email Address
                            <span class="verified-badge verified" style="margin-left: 0.5rem;"><i class="fas fa-check-circle"></i> Verified</span>
                        </label>
                        <input type="email" class="form-input form-input-readonly" id="email" value="{{ auth()->user()->email }}" readonly>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="phone">Phone Number</label>
                        <input type="tel" class="form-input" id="phone" name="phone" value="{{ old('phone', auth()->user()->phone) }}" placeholder="+234 800 000 0000">
                        @error('phone')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="bio">Bio / Tagline</label>
                        <textarea class="form-textarea" id="bio" name="bio" placeholder="Tell us a little about yourself...">{{ old('bio', auth()->user()->bio) }}</textarea>
                        @error('bio')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function previewAvatar(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('avatarPreview');
                preview.innerHTML = `<img src="${e.target.result}" alt="Avatar">`;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function removeAvatar() {
        const preview = document.getElementById('avatarPreview');
        const initials = '{{ strtoupper(substr(auth()->user()->name ?? "U", 0, 2)) }}';
        preview.innerHTML = initials;
    }
</script>
@endpush