@extends('layouts.admin')

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

@section('content')
<x-ui.page-header
    title="Edit Profile"
    subtitle="Update your personal information."
    :breadcrumbs="[
        ['label' => 'Home', 'href' => route('dashboard')],
        ['label' => 'Profile', 'href' => route('profile.show')],
        ['label' => 'Edit'],
    ]"
/>

<div class="row">
    <div class="col-lg-8">
        <x-ui.card title="Personal information">
            <form method="POST" action="{{ route('profile.update') }}">
                @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', auth()->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', auth()->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') }}"
                               placeholder="+260 ...">
                    </div>
                    <div class="col-md-6">
                        <label for="department" class="bv-form-label">Department</label>
                        <input type="text"
                               id="department"
                               name="department"
                               class="form-control bv-form-control"
                               value="{{ old('department') }}"
                               placeholder="e.g. Registry">
                    </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>
                    <x-ui.button variant="ghost" :href="route('profile.show')">
                        Cancel
                    </x-ui.button>
                </div>
            </form>
        </x-ui.card>
    </div>

    <div class="col-lg-4">
        <x-ui.card title="Profile photo">
            @livewire('profile.avatar-upload', ['editable' => true])
        </x-ui.card>
    </div>
</div>
@endsection