@extends('layouts.admin')

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

@section('content')
    <x-ui.page-header title="My Profile" :subtitle="$user->email" />

    <div class="row g-3">
        <div class="col-lg-6">
            <x-ui.card title="Account details">
                <form method="POST" action="{{ route('admin.profile.update') }}">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <x-form.input name="name" label="Full Name" :value="$user->name" required col="col-12" />
                        <x-form.input name="email" label="Email Address" type="email" :value="$user->email" required col="col-12" />
                    </div>
                    <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-check-lg"></i> Save</button>
                </form>
            </x-ui.card>
        </div>

        <div class="col-lg-6">
            <x-ui.card title="Change password">
                <form method="POST" action="{{ route('admin.profile.password') }}">
                    @csrf
                    @method('PUT')
                    <div class="row">
                        <x-form.input name="current_password" label="Current Password" type="password" required col="col-12" />
                        <x-form.input name="password" label="New Password" type="password" required col="col-12" />
                        <x-form.input name="password_confirmation" label="Confirm New Password" type="password" required col="col-12" />
                    </div>
                    <button class="btn btn-sm btn-primary" type="submit"><i class="bi bi-shield-lock"></i> Change Password</button>
                </form>
            </x-ui.card>

            <x-ui.card title="Roles">
                @foreach ($user->roles as $role)
                    <span class="badge text-bg-light">{{ $role->display_name }}</span>
                @endforeach
            </x-ui.card>
        </div>
    </div>
@endsection