@extends('layouts.admin')

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

@section('content')
<x-ui.page-header
    title="My Profile"
    subtitle="View and update your account information."
    :breadcrumbs="[
        ['label' => 'Home', 'href' => route('dashboard')],
        ['label' => 'Profile'],
    ]"
/>

<div class="bv-profile-header">
    @livewire('profile.avatar-upload', ['editable' => true])

    <div class="bv-profile-header__info">
        <h2>{{ $user->name }}</h2>
        <p class="bv-profile-header__meta">{{ $user->email }}</p>
        @if($user->roles?->isNotEmpty())
            <div class="mt-2">
                @foreach($user->roles as $role)
                    <x-ui.badge variant="primary">{{ $role->name }}</x-ui.badge>
                @endforeach
            </div>
        @endif
    </div>
</div>

<x-ui.card title="Account details">
    <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row g-3">
            <div class="col-md-6">
                <label for="name" class="bv-form-label">
                    Full name <span class="required" aria-hidden="true">*</span>
                </label>
                <input type="text" id="name" name="name" class="form-control bv-form-control"
                       value="{{ old('name', $user->name) }}" required>
            </div>
            <div class="col-md-6">
                <label for="email" class="bv-form-label">
                    Email address <span class="required" aria-hidden="true">*</span>
                </label>
                <input type="email" id="email" name="email" class="form-control bv-form-control"
                       value="{{ old('email', $user->email) }}" required>
            </div>
            <div class="col-md-6">
                <label for="phone" class="bv-form-label">Phone number</label>
                <input type="tel" id="phone" name="phone" class="form-control bv-form-control"
                       value="{{ old('phone', $user->phone) }}">
            </div>
            <div class="col-md-6">
                <label for="password" class="bv-form-label">New password</label>
                <input type="password" id="password" name="password" class="form-control bv-form-control"
                       autocomplete="new-password" placeholder="Leave blank to keep current">
            </div>
        </div>

        <div class="d-flex gap-2 mt-4">
            <x-ui.button type="submit" variant="primary" icon="bi-check-lg">Save changes</x-ui.button>
        </div>
    </form>
</x-ui.card>
@endsection