{{-- resources/views/profile/index.blade.php --}}
@extends('layouts.app')
@section('title', 'My Profile')
@section('page_title', 'My Profile')
@section('page_subtitle', 'Manage your account settings')

@section('content')

<div class="row g-3 justify-content-center">
<div class="col-xl-8">

    {{-- Profile Info --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-person me-2" style="color:var(--clay)"></i>
                Personal Information
            </span>
        </div>
        <div class="card-body">
            <div class="row g-3">

                {{-- Avatar --}}
                <div class="col-12">
                    <div style="display:flex;align-items:center;gap:16px;
                                padding:14px;background:var(--bg);
                                border-radius:10px;margin-bottom:4px;">
                        <div style="position:relative;">
                            @if($user->avatar)
                                <img src="{{ asset('storage/' . $user->avatar) }}"
                                     alt="{{ $user->name }}"
                                     style="width:64px;height:64px;border-radius:14px;
                                            object-fit:cover;">
                            @else
                                <div style="width:64px;height:64px;border-radius:14px;
                                             background:var(--clay);
                                             display:flex;align-items:center;
                                             justify-content:center;">
                                    <span style="font-size:1.6rem;font-weight:800;
                                                 color:#fff;">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </span>
                                </div>
                            @endif
                        </div>
                        <div style="flex:1;">
                            <div class="fw-bold" style="font-size:.95rem;">
                                {{ $user->name }}
                            </div>
                            <div style="font-size:.75rem;color:var(--muted);margin-top:2px;">
                                {{ $user->email }}
                            </div>
                            @if($user->roles->count() > 0)
                                <div style="margin-top:5px;">
                                    <span style="font-size:.68rem;font-weight:600;
                                                 background:var(--clay-light);
                                                 color:var(--clay);padding:2px 8px;
                                                 border-radius:4px;">
                                        {{ ucfirst(str_replace('_', ' ', $user->roles->first()?->name ?? 'property_owner')) }}
                                    </span>
                                </div>
                            @endif
                        </div>

                        {{-- Avatar upload --}}
                        <form method="POST"
                              action="{{ tenant_route('profile.avatar') }}"
                              enctype="multipart/form-data">
                            @csrf @method('PUT')
                            <label style="cursor:pointer;">
                                <input type="file" name="avatar"
                                       accept="image/*"
                                       style="display:none;"
                                       onchange="this.form.submit()">
                                <span class="btn btn-sm btn-outline-secondary">
                                    <i class="bi bi-camera me-1"></i>
                                    Change Photo
                                </span>
                            </label>
                            @error('avatar')
                                <div style="font-size:.72rem;color:var(--danger);
                                            margin-top:4px;">
                                    {{ $message }}
                                </div>
                            @enderror
                        </form>
                    </div>
                </div>

                <div class="col-md-6">
                    <form method="POST"
                          action="{{ tenant_route('profile.update') }}">
                        @csrf @method('PUT')
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    Full Name <span class="text-danger">*</span>
                                </label>
                                <input type="text" name="name"
                                       class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name', $user->name) }}"
                                       required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    Email <span class="text-danger">*</span>
                                </label>
                                <input type="email" name="email"
                                       class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email', $user->email) }}"
                                       required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                @if(!$user->email_verified_at)
                                    <div style="font-size:.7rem;color:var(--warning);
                                                margin-top:4px;">
                                        ⚠ Email not verified
                                    </div>
                                @endif
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">Phone</label>
                                <input type="tel" name="phone"
                                       class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone', $user->phone) }}"
                                       placeholder="+263 77 123 4567">
                                @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">WhatsApp</label>
                                <input type="tel" name="whatsapp_number"
                                       class="form-control"
                                       value="{{ old('whatsapp_number', $user->whatsapp_number) }}"
                                       placeholder="+263 77 123 4567">
                            </div>

                            <div class="col-12">
                                <button type="submit"
                                        class="btn btn-primary btn-sm">
                                    <i class="bi bi-check-lg me-1"></i>
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                {{-- Account Details --}}
                <div class="col-md-6">
                    <div style="background:var(--bg);border-radius:10px;
                                padding:16px;height:100%;">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.1em;
                                    color:var(--muted);margin-bottom:12px;">
                            Account Details
                        </div>

                        <div style="display:flex;flex-direction:column;
                                    gap:9px;font-size:.8rem;">
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Property</span>
                                <span class="fw-semibold">
                                    {{ tenant()?->name }}
                                </span>
                            </div>
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Role</span>
                                <span>
                                    {{ ucfirst(str_replace('_',
                                        ' ',
                                        $user->roles->first()?->name ?? 'property_owner'
                                    )) }}
                                </span>
                            </div>
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Member Since</span>
                                <span>
                                    {{ $user->created_at->format('d M Y') }}
                                </span>
                            </div>
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Last Login</span>
                                <span>
                                    {{ $user->last_login_at?->diffForHumans() ?? 'Never' }}
                                </span>
                            </div>
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Email Verified</span>
                                <span style="color:{{ $user->email_verified_at ? 'var(--success)' : 'var(--warning)' }};">
                                    @if($user->email_verified_at)
                                        <i class="bi bi-check-circle-fill me-1"></i>
                                        {{ $user->email_verified_at->format('d M Y') }}
                                    @else
                                        <i class="bi bi-exclamation-circle me-1"></i>
                                        Not verified
                                    @endif
                                </span>
                            </div>
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Status</span>
                                <span style="color:{{ $user->is_active ? 'var(--success)' : 'var(--danger)' }};
                                             font-weight:600;">
                                    {{ $user->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </div>
                        </div>

                        <div style="margin-top:16px;padding-top:14px;
                                    border-top:1px solid var(--border);">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.1em;
                                        color:var(--muted);margin-bottom:8px;">
                                Quick Links
                            </div>
                            <div style="display:flex;flex-direction:column;gap:6px;">
                                <a href="{{ tenant_route('settings.index') }}"
                                   style="font-size:.78rem;color:var(--clay);
                                          text-decoration:none;
                                          display:flex;align-items:center;gap:6px;">
                                    <i class="bi bi-gear"
                                       style="font-size:.8rem;"></i>
                                    Property Settings
                                </a>
                                <a href="{{ tenant_route('settings.subscription') }}"
                                   style="font-size:.78rem;color:var(--clay);
                                          text-decoration:none;
                                          display:flex;align-items:center;gap:6px;">
                                    <i class="bi bi-credit-card"
                                       style="font-size:.8rem;"></i>
                                    Subscription & Plan
                                </a>
                                <a href="{{ tenant_route('support.create') }}"
                                   style="font-size:.78rem;color:var(--clay);
                                          text-decoration:none;
                                          display:flex;align-items:center;gap:6px;">
                                    <i class="bi bi-headset"
                                       style="font-size:.8rem;"></i>
                                    Get Support
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Change Password --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-shield-lock me-2"
                   style="color:var(--clay)"></i>
                Change Password
            </span>
        </div>
        <div class="card-body">
            <form method="POST"
                  action="{{ tenant_route('profile.password') }}">
                @csrf @method('PUT')
                <div class="row g-3">

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            Current Password
                            <span class="text-danger">*</span>
                        </label>
                        <input type="password" name="current_password"
                               class="form-control @error('current_password') is-invalid @enderror"
                               autocomplete="current-password"
                               required>
                        @error('current_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            New Password
                            <span class="text-danger">*</span>
                        </label>
                        <input type="password" name="password"
                               class="form-control @error('password') is-invalid @enderror"
                               autocomplete="new-password"
                               id="newPassword"
                               oninput="checkPasswordStrength(this.value)"
                               required>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        {{-- Strength meter --}}
                        <div style="margin-top:6px;">
                            <div style="height:4px;background:var(--border);
                                        border-radius:2px;overflow:hidden;">
                                <div id="strengthBar"
                                     style="height:100%;width:0;
                                            transition:width .3s,background .3s;
                                            border-radius:2px;"></div>
                            </div>
                            <div id="strengthLabel"
                                 style="font-size:.68rem;color:var(--muted);
                                        margin-top:3px;"></div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold">
                            Confirm New Password
                            <span class="text-danger">*</span>
                        </label>
                        <input type="password" name="password_confirmation"
                               class="form-control"
                               autocomplete="new-password"
                               required>
                    </div>

                    <div class="col-12">
                        <div style="font-size:.72rem;color:var(--muted);
                                    margin-bottom:10px;">
                            Password must be at least 8 characters with
                            uppercase, lowercase and numbers.
                        </div>
                        <button type="submit"
                                class="btn btn-primary btn-sm">
                            <i class="bi bi-shield-check me-1"></i>
                            Update Password
                        </button>
                    </div>

                </div>
            </form>
        </div>
    </div>

    {{-- Sessions / Activity --}}
    <div class="card mb-3">
        <div class="card-header">
            <span class="card-title">
                <i class="bi bi-clock-history me-2"
                   style="color:var(--clay)"></i>
                Recent Activity
            </span>
        </div>
        <div class="card-body">
            @php
                $logs = \App\Models\ActivityLog::where('user_id', auth()->id())
                    ->orderByDesc('created_at')
                    ->take(10)
                    ->get();
            @endphp

            @if($logs->isEmpty())
                <p class="text-muted mb-0" style="font-size:.8rem;">
                    No recent activity recorded
                </p>
            @else
                <div style="display:flex;flex-direction:column;gap:0;">
                    @foreach($logs as $log)
                        <div style="display:flex;align-items:flex-start;
                                    gap:12px;padding:10px 0;
                                    border-bottom:1px solid var(--border);">
                            <div style="width:30px;height:30px;border-radius:8px;
                                        background:var(--clay-light);
                                        display:flex;align-items:center;
                                        justify-content:center;flex-shrink:0;">
                                <i class="bi {{ match(strtolower($log->action ?? '')) {
                                    'created'  => 'bi-plus-circle',
                                    'updated'  => 'bi-pencil',
                                    'deleted'  => 'bi-trash',
                                    'login'    => 'bi-box-arrow-in-right',
                                    'logout'   => 'bi-box-arrow-right',
                                    default    => 'bi-activity',
                                } }}"
                                   style="font-size:.75rem;color:var(--clay);"></i>
                            </div>
                            <div style="flex:1;">
                                <div style="font-size:.8rem;font-weight:600;">
                                    {{ ucfirst($log->action ?? 'Action') }}
                                    @if($log->model_type)
                                        <span style="font-weight:400;color:var(--muted);">
                                            {{ class_basename($log->model_type) }}
                                            @if($log->model_id)
                                                #{{ $log->model_id }}
                                            @endif
                                        </span>
                                    @endif
                                </div>
                                @if($log->description)
                                    <div style="font-size:.72rem;color:var(--muted);
                                                margin-top:2px;">
                                        {{ $log->description }}
                                    </div>
                                @endif
                                <div style="font-size:.68rem;color:var(--muted);
                                            margin-top:2px;">
                                    {{ $log->ip_address ?? '' }}
                                </div>
                            </div>
                            <div style="font-size:.7rem;color:var(--muted);
                                        white-space:nowrap;flex-shrink:0;">
                                {{ $log->created_at->diffForHumans() }}
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    {{-- Danger Zone --}}
    <div class="card"
         style="border-color:#fecaca;">
        <div class="card-header"
             style="border-color:#fecaca;">
            <span class="card-title" style="color:var(--danger);">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Account Actions
            </span>
        </div>
        <div class="card-body">
            <div style="display:flex;align-items:center;
                        justify-content:space-between;gap:16px;
                        flex-wrap:wrap;">
                <div>
                    <div class="fw-semibold" style="font-size:.85rem;">
                        Sign Out
                    </div>
                    <div style="font-size:.75rem;color:var(--muted);margin-top:2px;">
                        Sign out of your account on this device
                    </div>
                </div>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit"
                            class="btn btn-sm btn-outline-danger">
                        <i class="bi bi-box-arrow-right me-1"></i>
                        Sign Out
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>
</div>

@endsection

@push('scripts')
<script>
function checkPasswordStrength(password) {
    const bar   = document.getElementById('strengthBar');
    const label = document.getElementById('strengthLabel');

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

    const levels = [
        { width: '0%',   bg: 'transparent', text: '' },
        { width: '20%',  bg: '#ef4444',     text: 'Very weak' },
        { width: '40%',  bg: '#f97316',     text: 'Weak' },
        { width: '60%',  bg: '#f59e0b',     text: 'Fair' },
        { width: '80%',  bg: '#3b82f6',     text: 'Good' },
        { width: '100%', bg: '#10b981',     text: 'Strong' },
    ];

    const level = levels[Math.min(score, 5)];
    bar.style.width      = level.width;
    bar.style.background = level.bg;
    label.textContent    = level.text;
    label.style.color    = level.bg;
}
</script>
@endpush