@extends('client.viewers.index')

@section('account-content')
    <div class="card">
        <div class="card-body p-4">
            <h4 class="mb-4">Profile</h4>
            <form action="{{ route('profile.viewer.update') }}" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" value="{{ encrypt(Auth::user()->id) }}">

                <div class="row g-4">
                    <div class="col-xl-12">
                        <label for="name" class="form-label">Name</label>
                        <div class="input-group">
                            <span class="input-group-text" id="basic-name"><i class='bx bx-user'></i></span>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Name" value="{{ auth()->user()->name }}" aria-label="Name" aria-describedby="basic-name" required>

                            @error('name')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <label for="username" class="form-label">Username</label>
                        <div class="input-group">
                            <span class="input-group-text" id="basic-username">@</span>
                            <input type="text" name="username" class="form-control text-lowercase @error('username') is-invalid @enderror" value="{{ auth()->user()->username }}" placeholder="@username" aria-label="Username" aria-describedby="basic-username" required>

                            @error('username')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <label for="email" class="form-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-text" id="basic-email"><i class='bx bx-envelope'></i></span>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" placeholder="e.g. email@example.com" value="{{ auth()->user()->email }}" aria-label="Email" aria-describedby="basic-email" required>

                            @error('email')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-xl-12">
                        <button type="submit" class="btn btn-dark float-end">Save changes</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('snackbar')
    <x-alert></x-alert>
    <x-alert-danger></x-alert-danger>
@endpush