@extends('layouts.student')

@section('title', 'Mon Profil - MentoraMind')

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

@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="row">
    <div class="col-lg-4">
        <div class="card text-center mb-3">
            <div class="card-body p-4">
                @if(auth()->user()->hasMedia('profile_photo'))
                    <img src="{{ auth()->user()->getFirstMediaUrl('profile_photo') }}"
                         alt="{{ auth()->user()->full_name }}"
                         style="width: 120px; height: 120px; margin: 0 auto 1.5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-orange);">
                @else
                    <div style="width: 120px; height: 120px; margin: 0 auto 1.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--primary-orange), var(--secondary-orange-light)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem; font-weight: 700;">
                        {{ strtoupper(substr(auth()->user()->first_name, 0, 1) . substr(auth()->user()->last_name, 0, 1)) }}
                    </div>
                @endif
                <h4 class="mb-1">{{ auth()->user()->full_name }}</h4>
                <p class="text-muted mb-3">{{ auth()->user()->email }}</p>
                @if(auth()->user()->phone_number)
                    <p class="text-muted mb-3"><i class="bi bi-telephone me-2"></i>{{ auth()->user()->phone_number }}</p>
                @endif
                <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 mb-3">
            <div class="card-header">
                <h5 class="mb-0">{{ __('student.profile.change_photo') }}</h5>
            </div>
            <div class="card-body p-4">
                @livewire('student.upload-profile-photo')
            </div>
        </div>

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

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