@extends('layouts.app')
@section('title', 'My Profile')
@section('breadcrumb', 'My Profile')

@section('content')
<div class="row justify-content-center">
<div class="col-lg-6">

<div class="card table-card">
    <div class="card-header bg-white py-3">
        <h5 class="fw-bold mb-0" style="color:#0f3d23;">
            <i class="bi bi-person-circle me-2" style="color:#c9a94d;"></i>My Profile
        </h5>
    </div>
    <div class="card-body p-4">

        <div class="text-center mb-4">
            <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center fw-bold fs-2 mb-2"
                 style="width:72px; height:72px; background:#e8f5ee; color:#1a6b3c;">
                {{ strtoupper(substr($user->name, 0, 2)) }}
            </div>
            <div class="fw-bold fs-5">{{ $user->name }}</div>
            <span class="badge bg-secondary text-capitalize">{{ str_replace('_', ' ', $user->role) }}</span>
            @if($user->school)
            <div class="text-muted mt-1" style="font-size:.83rem;">{{ $user->school->name }}</div>
            @endif
        </div>

        <form action="{{ route('profile.update') }}" method="POST">
        @csrf
        @method('PUT')

        <div class="mb-3">
            <label class="form-label fw-semibold">Full Name</label>
            <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required>
        </div>
        <div class="mb-3">
            <label class="form-label fw-semibold">Email Address</label>
            <input type="text" class="form-control bg-light" value="{{ $user->email }}" readonly>
            <div class="form-text">Email cannot be changed. Contact MCSS administrator.</div>
        </div>
        <div class="mb-3">
            <label class="form-label fw-semibold">Phone</label>
            <input type="text" name="phone" class="form-control" value="{{ old('phone', $user->phone) }}">
        </div>

        <hr>
        <div class="mb-1 fw-semibold" style="font-size:.85rem;">Change Password <span class="text-muted fw-normal">(leave blank to keep current)</span></div>
        <div class="mb-3">
            <input type="password" name="password" class="form-control" placeholder="New password (min 8 characters)" minlength="8">
        </div>
        <div class="mb-4">
            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm new password">
        </div>

        <button type="submit" class="btn w-100" style="background:#1a6b3c; color:#fff; border-radius:8px;">
            <i class="bi bi-check-lg me-1"></i>Save Changes
        </button>
        </form>

        <div class="mt-3 text-center text-muted" style="font-size:.78rem;">
            Last login: {{ $user->last_login_at?->format('M d, Y H:i') ?? 'N/A' }}
            @if($user->last_login_ip) from {{ $user->last_login_ip }} @endif
        </div>
    </div>
</div>

</div>
</div>
@endsection