@extends('layouts.app')

@section('title', 'My Profile')

@push('styles')
<style>
    .page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
    .page-header h1 { font-size:1.5rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; }
    .page-header h1 i { color:var(--accent); }
    .page-header p { color:var(--text-muted); font-size:0.85rem; margin-top:0.25rem; }

    .profile-grid { display:grid; grid-template-columns:300px 1fr; gap:1.5rem; }
    @media (max-width: 900px) { .profile-grid { grid-template-columns:1fr; } }

    .form-card {
        background:var(--bg-card);
        border:1px solid var(--border);
        border-radius:var(--radius-lg);
        padding:1.5rem;
        margin-bottom:1.5rem;
    }
    .form-card-title {
        font-size:1rem; font-weight:600; margin-bottom:1.25rem;
        padding-bottom:0.75rem; border-bottom:1px solid var(--border);
    }

    .form-group { margin-bottom:1.25rem; }
    .form-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:0.5rem; color:var(--text-secondary); }
    .form-group .required { color:var(--danger); }
    .form-group .hint { font-size:0.75rem; color:var(--text-muted); margin-top:0.35rem; }

    .form-control {
        width:100%; padding:0.625rem 0.875rem;
        border:1px solid var(--border); border-radius:var(--radius-sm);
        background:var(--bg-primary); color:var(--text-primary);
        font-family:inherit; font-size:0.875rem; outline:none;
        transition:border-color var(--transition);
    }
    .form-control:focus { border-color:var(--accent); }
    .form-control:disabled { opacity:0.6; cursor:not-allowed; }

    .form-error { color:var(--danger); font-size:0.78rem; margin-top:0.35rem; }

    /* Avatar block */
    .avatar-card { text-align:center; }
    .avatar-large {
        width:130px; height:130px; border-radius:50%;
        margin:0 auto 1rem;
        background:rgba(0,212,170,0.12);
        color:var(--accent);
        display:flex; align-items:center; justify-content:center;
        font-size:2.5rem; font-weight:700;
        overflow:hidden;
        border:4px solid var(--border);
    }
    .avatar-large img { width:100%; height:100%; object-fit:cover; }
    .avatar-meta { font-size:0.85rem; color:var(--text-muted); margin-top:0.5rem; }
    .avatar-meta strong { color:var(--text-primary); display:block; font-size:0.95rem; margin-bottom:0.25rem; }

    .avatar-upload-btn {
        display:inline-flex; align-items:center; gap:0.4rem;
        padding:0.55rem 1rem; border:1px solid var(--border);
        border-radius:var(--radius-sm); background:var(--bg-primary);
        color:var(--text-primary); font-size:0.82rem; cursor:pointer;
        font-family:inherit; transition:all var(--transition);
    }
    .avatar-upload-btn:hover { border-color:var(--accent); color:var(--accent); }
    .avatar-upload-btn input[type="file"] { display:none; }

    .role-chip {
        display:inline-block; padding:0.18rem 0.6rem;
        border-radius:999px; font-size:0.7rem; font-weight:600;
        background:rgba(0,212,170,0.12); color:var(--accent);
        margin-top:0.5rem;
    }

    .btn {
        padding:0.6rem 1.1rem; border-radius:var(--radius-md);
        border:1px solid var(--border); background:var(--bg-card);
        color:var(--text-primary); cursor:pointer; font-size:0.85rem;
        font-family:inherit;
    }
    .btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
    .btn-primary:hover { opacity:0.92; }

    .alert {
        padding:0.85rem 1.1rem; margin-bottom:1rem;
        border-radius:var(--radius-md); font-size:0.88rem;
    }
    .alert-success { background:rgba(0,212,170,0.1); color:#00d4aa; border:1px solid rgba(0,212,170,0.25); }
    .alert-error { background:rgba(255,71,87,0.1); color:#ff4757; border:1px solid rgba(255,71,87,0.25); }

    .quick-links { display:flex; flex-direction:column; gap:0.5rem; }
    .quick-link {
        display:flex; align-items:center; gap:0.6rem; padding:0.65rem 0.85rem;
        background:var(--bg-primary); border:1px solid var(--border);
        border-radius:var(--radius-sm); color:var(--text-primary);
        font-size:0.85rem; text-decoration:none;
        transition:all var(--transition);
    }
    .quick-link:hover { border-color:var(--accent); color:var(--accent); }
    .quick-link i { color:var(--accent); width:1rem; text-align:center; }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1><i class="fas fa-user-circle"></i> My Profile</h1>
            <p>Your personal account on Tenseal. For business info, head to <a href="{{ route('inventory.settings') }}" style="color:var(--accent);">Settings</a>.</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-error"><i class="fas fa-triangle-exclamation"></i> {{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('inventory.profile.update') }}" enctype="multipart/form-data">
        @csrf
        <div class="profile-grid">

            {{-- LEFT: avatar + identity --}}
            <div>
                <div class="form-card avatar-card">
                    <div class="avatar-large" id="avatarPreview">
                        @if($user->avatar)
                            <img src="{{ str_starts_with($user->avatar, 'http') ? $user->avatar : asset('storage/' . $user->avatar) }}" alt="{{ $user->name }}">
                        @else
                            {{ strtoupper(substr($user->name ?: $user->email, 0, 1)) }}
                        @endif
                    </div>

                    <div class="avatar-meta">
                        <strong>{{ $user->name }}</strong>
                        {{ $user->email }}
                        @if($tenant)
                            @php
                                $isOwner = (int) $tenant->user_id === (int) $user->id;
                                $staffRow = $isOwner ? null : \App\Modules\Inventory\Models\InventoryStaff::where('inventory_tenant_id', $tenant->id)->where('user_id', $user->id)->first();
                            @endphp
                            <div class="role-chip">
                                @if($isOwner)
                                    <i class="fas fa-crown"></i> Owner of {{ $tenant->business_name ?: $tenant->name }}
                                @else
                                    Staff &middot; {{ ucwords(str_replace('_', ' ', optional($staffRow)->role ?? 'member')) }}
                                @endif
                            </div>
                        @endif
                    </div>

                    <hr style="margin:1.25rem 0; border:none; border-top:1px solid var(--border);">

                    <label class="avatar-upload-btn">
                        <i class="fas fa-camera"></i> Change photo
                        <input type="file" name="avatar" accept="image/*" onchange="previewAvatar(this)">
                    </label>
                    <div class="hint" style="margin-top:0.5rem;">JPG, PNG or GIF. Max 2 MB.</div>
                    @error('avatar') <div class="form-error">{{ $message }}</div> @enderror
                </div>

                <div class="form-card">
                    <h3 class="form-card-title">Account &amp; Security</h3>
                    <div class="quick-links">
                        @if(Route::has('inventory.security'))
                            <a href="{{ route('inventory.security') }}" class="quick-link">
                                <i class="fas fa-key"></i> Password &amp; 2FA
                            </a>
                        @endif
                        <a href="{{ route('inventory.notifications') }}" class="quick-link">
                            <i class="fas fa-bell"></i> Notifications
                        </a>
                        <a href="{{ route('inventory.settings') }}" class="quick-link">
                            <i class="fas fa-building"></i> Business settings
                        </a>
                    </div>
                </div>
            </div>

            {{-- RIGHT: edit form --}}
            <div>
                <div class="form-card">
                    <h3 class="form-card-title">Personal Info</h3>

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

                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" class="form-control" value="{{ $user->email }}" disabled>
                        <div class="hint">To change your email, contact support — we'll verify the new address.</div>
                    </div>

                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="text" id="phone" name="phone" class="form-control" maxlength="32"
                               value="{{ old('phone', $user->phone) }}"
                               placeholder="+234 80x xxx xxxx">
                        @error('phone') <div class="form-error">{{ $message }}</div> @enderror
                        <div class="hint">Used for SMS verification and order alerts.</div>
                    </div>

                    <div style="display:flex; justify-content:flex-end; padding-top:0.5rem; border-top:1px solid var(--border);">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-check"></i> Save Changes
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </form>
@endsection

@push('scripts')
<script>
    function previewAvatar(input) {
        if (!input.files || !input.files[0]) return;
        const file = input.files[0];
        if (file.size > 2 * 1024 * 1024) {
            input.value = '';
            TensealModal.notice({
                type: 'warning',
                title: 'Image too large',
                message: 'Avatar images must be 2 MB or smaller. Compress the image or pick a smaller one and try again.',
                buttonText: 'OK',
            });
            return;
        }
        const reader = new FileReader();
        reader.onload = e => {
            const box = document.getElementById('avatarPreview');
            box.innerHTML = '<img src="' + e.target.result + '" alt="Preview">';
        };
        reader.readAsDataURL(file);
    }
</script>
@endpush