@extends('layouts.admin')

@section('title', 'Mon Profil - MentoraMind Admin')
@section('description', 'Gestion de mon profil administrateur')

@section('content')
<div class="page-header">
    <div>
        <h1>{{ __('admin.profile.title') }}</h1>
        <p>{{ __('admin.profile.subtitle') }}</p>
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center p-4">
                @if(auth()->check() && auth()->user()->hasMedia('profile_photo'))
                    <img src="{{ auth()->user()->getFirstMediaUrl('profile_photo') }}"
                         alt="{{ auth()->user()->full_name }}"
                         class="mx-auto mb-3 d-block"
                         style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
                @else
                    <div class="mx-auto mb-3 d-flex align-items-center justify-content-center"
                         style="width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #1E88E5, #42A5F5); color: white; font-weight: 600; font-size: 2.5rem;">
                        {{ auth()->check() ? strtoupper(substr(auth()->user()->first_name, 0, 1) . substr(auth()->user()->last_name, 0, 1)) : 'AD' }}
                    </div>
                @endif
                <h4 class="mb-1">{{ auth()->check() ? auth()->user()->full_name : 'Admin' }}</h4>
                <p class="text-muted mb-3">{{ __('admin.header.administrator') }}</p>
                <span class="badge bg-success mb-3">{{ __('admin.profile.status.active') }}</span>
                <button class="btn btn-success w-100 pwa-install-button" id="profile-pwa-install-btn" onclick="window.dispatchEvent(new Event('trigger-pwa-install'))" style="display: none;">
                    <i class="bi bi-phone me-2"></i>{{ __('pwa.install_app') }}
                </button>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">{{ __('admin.profile.account_info') }}</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <small class="text-muted d-block mb-1">{{ __('admin.profile.member_since') }}</small>
                    <p class="mb-0">15 Janvier 2024</p>
                </div>
                <div class="mb-3">
                    <small class="text-muted d-block mb-1">{{ __('admin.profile.last_login') }}</small>
                    <p class="mb-0">Aujourd'hui à 14:30</p>
                </div>
                <div class="mb-3">
                    <small class="text-muted d-block mb-1">{{ __('admin.profile.role') }}</small>
                    <span class="badge bg-primary">Admin</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">{{ __('admin.profile.personal_info') }}</h5>
            </div>
            <div class="card-body p-4">
                @livewire('admin.edit-profile')
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0">{{ __('admin.profile.change_password') }}</h5>
            </div>
            <div class="card-body p-4">
                @livewire('admin.update-password')
            </div>
        </div>
    </div>
</div>
@endsection