@extends('layouts.app')
@section('title', __('My profile'))

@section('content')
<div class="mx-auto max-w-3xl">
    {{-- Identity card --}}
    <div class="card mb-4 flex items-center gap-4">
        <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-brand-600 text-lg font-bold text-white">
            {{ strtoupper(substr($user->name, 0, 2)) }}
        </span>
        <div class="min-w-0">
            <p class="truncate font-semibold text-slate-800 dark:text-slate-100">{{ $user->name }}</p>
            <p class="truncate text-sm text-slate-500">{{ $user->email }}</p>
            <div class="mt-1 flex flex-wrap gap-1">
                @foreach ($user->roles as $role)
                    <span class="badge bg-brand-100 text-brand-700">{{ $role->name }}</span>
                @endforeach
                <span class="badge {{ $user->is_active ? 'bg-brand-100 text-brand-700' : 'bg-red-100 text-red-700' }}">
                    {{ $user->is_active ? __('Active') : __('Inactive') }}
                </span>
                @if ($user->store)
                    <span class="badge bg-slate-100 text-slate-600">{{ $user->store->name }}</span>
                @endif
            </div>
        </div>
    </div>

    {{-- Personal information --}}
    <form method="POST" action="{{ route('profile.update') }}">
        @csrf
        @method('PUT')
        <div class="card grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div><label class="label">{{ __('Name') }} *</label><input type="text" name="name" value="{{ old('name', $user->name) }}" required class="input"></div>
            <div><label class="label">{{ __('Email') }} *</label><input type="email" name="email" value="{{ old('email', $user->email) }}" required class="input"></div>
            <div><label class="label">{{ __('Phone') }}</label><input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="input"></div>
            <div><label class="label">{{ __('Position') }}</label><input type="text" name="position" value="{{ old('position', $user->position) }}" class="input"></div>
            <div class="sm:col-span-2">
                <label class="label">{{ __('Language') }}</label>
                <select name="locale" class="input">
                    @foreach (config('pharma.locales') as $loc)
                        <option value="{{ $loc }}" @selected(old('locale', $user->locale ?? app()->getLocale()) === $loc)>{{ $loc === 'fr' ? 'Français' : 'English' }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="mt-4">
            <button class="btn-primary">{{ __('Save') }}</button>
        </div>
    </form>

    {{-- Password --}}
    <form method="POST" action="{{ route('profile.password') }}" class="mt-6">
        @csrf
        @method('PUT')
        <div class="card">
            <h3 class="mb-3 text-sm font-semibold text-slate-700 dark:text-slate-200">{{ __('Change password') }}</h3>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div>
                    <label class="label">{{ __('Current password') }} *</label>
                    <input type="password" name="current_password" required class="input" autocomplete="current-password">
                </div>
                <div>
                    <label class="label">{{ __('New password') }} *</label>
                    <input type="password" name="password" required class="input" autocomplete="new-password">
                </div>
                <div>
                    <label class="label">{{ __('Confirm new password') }} *</label>
                    <input type="password" name="password_confirmation" required class="input" autocomplete="new-password">
                </div>
            </div>
        </div>
        <div class="mt-4">
            <button class="btn-primary">{{ __('Update password') }}</button>
        </div>
    </form>
</div>
@endsection