majiayu000 Componentes de UI para Clientes
Esta skill define os componentes Blade específicos para a gestão de clientes no Easy Budget, seguindo o padrão de components estabelecido no sistema.
Estrutura de Components
resources/views/components/
├── customer/
│ ├── customer-card.blade.php # Card resumido de cliente
│ ├── customer-details.blade.php # Detalhes completos do cliente
│ ├── customer-form.blade.php # Formulário de criação/edição
│ ├── customer-status.blade.php # Badge de status do cliente
│ ├── customer-contact.blade.php # Informações de contato
│ ├── customer-address.blade.php # Endereço do cliente
│ ├── customer-actions.blade.php # Ações disponíveis para cliente
│ ├── customer-filters.blade.php # Filtros específicos para clientes
│ ├── customer-interactions.blade.php # Histórico de interações
│ └── customer-summary.blade.php # Resumo do cliente
└── ...
1. Customer Card Component
Componente para exibição resumida de clientes em listas e dashboards.
Uso Básico
<x-customer.customer-card :customer="$customer" :showType="true" :showStatus="true" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
customer |
Customer |
Modelo do cliente | Obrigatório |
showType |
bool |
Exibir tipo de cliente (PF/PJ) | true |
showStatus |
bool |
Exibir status do cliente | true |
variant |
string |
Estilo do card (primary, secondary, etc.) | primary |
Estrutura
@props([
'customer',
'showType' => true,
'showStatus' => true,
'variant' => 'primary'
])
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="d-flex align-items-center gap-3">
<div class="avatar-circle bg-{{ $variant }} bg-gradient">
@if($customer->type === 'pf')
<i class="bi bi-person text-white"></i>
@else
<i class="bi bi-building text-white"></i>
@endif
</div>
<div>
<h6 class="mb-1 fw-bold">{{ $customer->display_name }}</h6>
<small class="text-muted">{{ $customer->created_at->format('d/m/Y') }}</small>
</div>
</div>
@if($showStatus)
<x-customer.customer-status :customer="$customer" />
@endif
</div>
@if($showType)
<div class="mb-3">
<span class="badge bg-secondary">{{ $customer->type === 'pf' ? 'Pessoa Física' : 'Pessoa Jurídica' }}</span>
</div>
@endif
@if($customer->contact)
<div class="mb-3">
<small class="text-muted">E-mail:</small>
<div class="fw-semibold">{{ $customer->contact->email }}</div>
</div>
@endif
@if($customer->address)
<div class="mb-3">
<small class="text-muted">Endereço:</small>
<div class="fw-semibold">{{ $customer->address->city }}/{{ $customer->address->state }}</div>
</div>
@endif
<div class="d-flex justify-content-between align-items-center">
<div>
<small class="text-muted">Total de Orçamentos</small>
<div class="h6 mb-0 fw-bold text-{{ $variant }}">
{{ $customer->budgets->count() }}
</div>
</div>
<div class="btn-group btn-group-sm" role="group">
<a href="{{ route('provider.customers.show', $customer) }}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i> Ver
</a>
<a href="{{ route('provider.customers.edit', $customer) }}" class="btn btn-outline-secondary">
<i class="bi bi-pencil"></i> Editar
</a>
</div>
</div>
</div>
</div>
2. Customer Details Component
Componente para exibição detalhada de informações do cliente.
Uso Básico
<x-customer.customer-details :customer="$customer" :showContact="true" :showAddress="true" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
customer |
Customer |
Modelo do cliente | Obrigatório |
showContact |
bool |
Exibir informações de contato | true |
showAddress |
bool |
Exibir endereço | true |
collapsible |
bool |
Permitir colapsar seções | false |
Estrutura
@props([
'customer',
'showContact' => true,
'showAddress' => true,
'collapsible' => false
])
<div class="customer-details">
<!-- Informações Básicas -->
<div class="row g-3 mb-3">
<div class="col-md-4">
<div class="info-item">
<label class="text-muted small">Nome/Razão Social</label>
<div class="fw-bold">{{ $customer->display_name }}</div>
</div>
</div>
<div class="col-md-4">
<div class="info-item">
<label class="text-muted small">Tipo</label>
<div class="fw-bold">
<span class="badge bg-secondary">{{ $customer->type === 'pf' ? 'Pessoa Física' : 'Pessoa Jurídica' }}</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="info-item">
<label class="text-muted small">Status</label>
<x-customer.customer-status :customer="$customer" />
</div>
</div>
</div>
<!-- Dados Pessoais/Empresariais -->
@if($customer->commonData)
<div class="row mb-3">
<div class="col-12">
<div class="card border-0">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">{{ $customer->type === 'pf' ? 'Dados Pessoais' : 'Dados Empresariais' }}</h6>
</div>
<div class="card-body">
<div class="row">
@if($customer->type === 'pf')
<div class="col-md-6">
<div class="mb-2">
<label class="text-muted small">Nome Completo</label>
<div class="fw-bold">{{ $customer->commonData->first_name }} {{ $customer->commonData->last_name }}</div>
</div>
<div class="mb-2">
<label class="text-muted small">Data de Nascimento</label>
<div class="fw-bold">{{ $customer->commonData->birth_date?->format('d/m/Y') ?? 'Não informado' }}</div>
</div>
@if($customer->commonData->cpf)
<div class="mb-2">
<label class="text-muted small">CPF</label>
<div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCpf($customer->commonData->cpf) }}</div>
</div>
@endif
</div>
@else
<div class="col-md-6">
<div class="mb-2">
<label class="text-muted small">Razão Social</label>
<div class="fw-bold">{{ $customer->commonData->company_name }}</div>
</div>
@if($customer->commonData->cnpj)
<div class="mb-2">
<label class="text-muted small">CNPJ</label>
<div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCnpj($customer->commonData->cnpj) }}</div>
</div>
@endif
@if($customer->commonData->cpf)
<div class="mb-2">
<label class="text-muted small">CPF do Responsável</label>
<div class="fw-bold">{{ \App\Helpers\DocumentHelper::formatCpf($customer->commonData->cpf) }}</div>
</div>
@endif
</div>
@endif
<div class="col-md-6">
@if($customer->commonData->areaOfActivity)
<div class="mb-2">
<label class="text-muted small">Área de Atuação</label>
<div class="fw-bold">{{ $customer->commonData->areaOfActivity->name }}</div>
</div>
@endif
@if($customer->commonData->profession)
<div class="mb-2">
<label class="text-muted small">Profissão</label>
<div class="fw-bold">{{ $customer->commonData->profession->name }}</div>
</div>
@endif
@if($customer->commonData->description)
<div class="mb-2">
<label class="text-muted small">Descrição</label>
<div class="fw-bold">{{ $customer->commonData->description }}</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Contato -->
@if($showContact && $customer->contact)
<x-customer.customer-contact :contact="$customer->contact" />
@endif
<!-- Endereço -->
@if($showAddress && $customer->address)
<x-customer.customer-address :address="$customer->address" />
@endif
<!-- Resumo -->
<x-customer.customer-summary :customer="$customer" />
</div>
3. Customer Status Component
Componente para exibição do status do cliente com cores e ícones apropriados.
Uso Básico
<x-customer.customer-status :customer="$customer" :showIcon="true" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
customer |
Customer |
Modelo do cliente | Obrigatório |
showIcon |
bool |
Exibir ícone ao lado do status | true |
size |
string |
Tamanho do badge (sm, md, lg) | md |
Estrutura
@props([
'customer',
'showIcon' => true,
'size' => 'md'
])
@php
$status = $customer->status;
$color = match($status) {
'active' => '#198754', // Verde
'inactive' => '#6c757d', // Cinza
'pending' => '#ffc107', // Amarelo
default => '#6c757d'
};
$icon = match($status) {
'active' => 'check-circle',
'inactive' => 'x-circle',
'pending' => 'clock',
default => 'circle'
};
$description = match($status) {
'active' => 'Ativo',
'inactive' => 'Inativo',
'pending' => 'Pendente',
default => 'Status Desconhecido'
};
$sizeClass = match($size) {
'sm' => 'badge-sm',
'lg' => 'badge-lg',
default => 'badge-md'
};
@endphp
<span class="badge modern-badge {{ $sizeClass }}"
style="background-color: {{ $color }}20; color: {{ $color }}; border: 1px solid {{ $color }}40;">
@if($showIcon)
<i class="bi bi-{{ $icon }} me-1"></i>
@endif
{{ $description }}
</span>
4. Customer Contact Component
Componente para exibição de informações de contato do cliente.
Uso Básico
<x-customer.customer-contact :contact="$contact" :showBusiness="true" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
contact |
Contact |
Modelo de contato | Obrigatório |
showBusiness |
bool |
Exibir contatos comerciais | true |
showWebsite |
bool |
Exibir website | true |
Estrutura
@props([
'contact',
'showBusiness' => true,
'showWebsite' => true
])
<div class="customer-contact">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Informações de Contato</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="text-muted small">E-mail Principal</label>
<div class="fw-bold">{{ $contact->email }}</div>
</div>
@if($contact->phone)
<div class="mb-3">
<label class="text-muted small">Telefone</label>
<div class="fw-bold">{{ $contact->phone }}</div>
</div>
@endif
</div>
@if($showBusiness)
<div class="col-md-6">
@if($contact->email_business)
<div class="mb-3">
<label class="text-muted small">E-mail Comercial</label>
<div class="fw-bold">{{ $contact->email_business }}</div>
</div>
@endif
@if($contact->phone_business)
<div class="mb-3">
<label class="text-muted small">Telefone Comercial</label>
<div class="fw-bold">{{ $contact->phone_business }}</div>
</div>
@endif
</div>
@endif
</div>
@if($showWebsite && $contact->website)
<div class="row">
<div class="col-12">
<div class="mb-3">
<label class="text-muted small">Website</label>
<div class="fw-bold">
<a href="{{ $contact->website }}" target="_blank" class="text-decoration-none">
{{ $contact->website }}
</a>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
5. Customer Address Component
Componente para exibição de endereço do cliente.
Uso Básico
<x-customer.customer-address :address="$address" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
address |
Address |
Modelo de endereço | Obrigatório |
Estrutura
@props(['address'])
<div class="customer-address">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Endereço</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<div class="mb-2">
<label class="text-muted small">Logradouro</label>
<div class="fw-bold">
{{ $address->address }}, {{ $address->address_number }}
@if($address->address_complement)
- {{ $address->address_complement }}
@endif
</div>
</div>
<div class="mb-2">
<label class="text-muted small">Bairro</label>
<div class="fw-bold">{{ $address->neighborhood }}</div>
</div>
</div>
<div class="col-md-4">
<div class="mb-2">
<label class="text-muted small">CEP</label>
<div class="fw-bold">{{ $address->cep }}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-2">
<label class="text-muted small">Cidade</label>
<div class="fw-bold">{{ $address->city }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-2">
<label class="text-muted small">Estado</label>
<div class="fw-bold">{{ $address->state }}</div>
</div>
</div>
</div>
@if($address->country && $address->country !== 'Brasil')
<div class="row">
<div class="col-12">
<div class="mb-2">
<label class="text-muted small">País</label>
<div class="fw-bold">{{ $address->country }}</div>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
6. Customer Form Component
Componente para formulário de criação e edição de clientes.
Uso Básico
<x-customer.customer-form :customer="$customer ?? null" :areasOfActivity="$areasOfActivity" :professions="$professions" />
Parâmetros
| Parâmetro | Tipo | Descrição | Padrão |
|---|---|---|---|
customer |
`Customer | null` | Modelo do cliente (para edição) |
areasOfActivity |
Collection |
Áreas de atuação disponíveis | Obrigatório |
professions |
Collection |
Profissões disponíveis | Obrigatório |
type |
string |
Tipo de cliente (pf/pj) | pf |
Estrutura
@props([
'customer' => null,
'areasOfActivity' => [],
'professions' => [],
'type' => 'pf'
])
<div class="customer-form">
<form action="{{ isset($customer) ? route('provider.customers.update', $customer) : route('provider.customers.store') }}"
method="POST"
id="customerForm">
@csrf
@if(isset($customer)) @method('PUT') @endif
<!-- Tipo de Cliente -->
<div class="row g-3 mb-4">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Tipo de Cliente *</label>
<div class="btn-group w-100" role="group">
<input type="radio" class="btn-check" name="type" id="type_pf" value="pf"
{{ (old('type', $customer->type ?? $type) == 'pf') ? 'checked' : '' }} required>
<label class="btn btn-outline-primary" for="type_pf">
<i class="bi bi-person me-2"></i>Pessoa Física
</label>
<input type="radio" class="btn-check" name="type" id="type_pj" value="pj"
{{ (old('type', $customer->type ?? $type) == 'pj') ? 'checked' : '' }} required>
<label class="btn btn-outline-secondary" for="type_pj">
<i class="bi bi-building me-2"></i>Pessoa Jurídica
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dados Pessoais/Empresariais -->
<div class="row g-3 mb-4">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">{{ $type === 'pf' ? 'Dados Pessoais' : 'Dados Empresariais' }}</h6>
</div>
<div class="card-body">
@if($type === 'pf')
<!-- Pessoa Física -->
<div class="row">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Nome *</label>
<input type="text"
name="first_name"
class="form-control @error('first_name') is-invalid @enderror"
value="{{ old('first_name', $customer->commonData->first_name ?? '') }}" required>
@error('first_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Sobrenome *</label>
<input type="text"
name="last_name"
class="form-control @error('last_name') is-invalid @enderror"
value="{{ old('last_name', $customer->commonData->last_name ?? '') }}" required>
@error('last_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">Data de Nascimento</label>
<input type="date"
name="birth_date"
class="form-control @error('birth_date') is-invalid @enderror"
value="{{ old('birth_date', $customer->commonData->birth_date?->format('Y-m-d') ?? '') }}">
@error('birth_date')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">CPF *</label>
<input type="text"
name="cpf"
class="form-control @error('cpf') is-invalid @enderror"
value="{{ old('cpf', $customer->commonData->cpf ?? '') }}" required>
@error('cpf')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
@else
<!-- Pessoa Jurídica -->
<div class="row">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Razão Social *</label>
<input type="text"
name="company_name"
class="form-control @error('company_name') is-invalid @enderror"
value="{{ old('company_name', $customer->commonData->company_name ?? '') }}" required>
@error('company_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">CNPJ *</label>
<input type="text"
name="cnpj"
class="form-control @error('cnpj') is-invalid @enderror"
value="{{ old('cnpj', $customer->commonData->cnpj ?? '') }}" required>
@error('cnpj')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">CPF do Responsável</label>
<input type="text"
name="cpf"
class="form-control @error('cpf') is-invalid @enderror"
value="{{ old('cpf', $customer->commonData->cpf ?? '') }}">
@error('cpf')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
@endif
<div class="row mt-3">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Área de Atuação</label>
<select name="area_of_activity_id" class="form-select @error('area_of_activity_id') is-invalid @enderror">
<option value="">Selecione uma área</option>
@foreach($areasOfActivity as $area)
<option value="{{ $area->id }}"
{{ (old('area_of_activity_id', $customer->commonData->area_of_activity_id ?? '') == $area->id) ? 'selected' : '' }}>
{{ $area->name }}
</option>
@endforeach
</select>
@error('area_of_activity_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Profissão</label>
<select name="profession_id" class="form-select @error('profession_id') is-invalid @enderror">
<option value="">Selecione uma profissão</option>
@foreach($professions as $profession)
<option value="{{ $profession->id }}"
{{ (old('profession_id', $customer->commonData->profession_id ?? '') == $profession->id) ? 'selected' : '' }}>
{{ $profession->name }}
</option>
@endforeach
</select>
@error('profession_id')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<label class="form-label small fw-bold text-muted text-uppercase">Descrição</label>
<textarea name="description"
class="form-control @error('description') is-invalid @enderror"
rows="3"
placeholder="Descrição do cliente...">{{ old('description', $customer->commonData->description ?? '') }}</textarea>
@error('description')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contato -->
<div class="row g-3 mb-4">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Informações de Contato</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">E-mail Principal *</label>
<input type="email"
name="email"
class="form-control @error('email') is-invalid @enderror"
value="{{ old('email', $customer->contact->email ?? '') }}" required>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Telefone</label>
<input type="tel"
name="phone"
class="form-control @error('phone') is-invalid @enderror"
value="{{ old('phone', $customer->contact->phone ?? '') }}">
@error('phone')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">E-mail Comercial</label>
<input type="email"
name="email_business"
class="form-control @error('email_business') is-invalid @enderror"
value="{{ old('email_business', $customer->contact->email_business ?? '') }}">
@error('email_business')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Telefone Comercial</label>
<input type="tel"
name="phone_business"
class="form-control @error('phone_business') is-invalid @enderror"
value="{{ old('phone_business', $customer->contact->phone_business ?? '') }}">
@error('phone_business')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Website</label>
<input type="url"
name="website"
class="form-control @error('website') is-invalid @enderror"
value="{{ old('website', $customer->contact->website ?? '') }}">
@error('website')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Endereço -->
<div class="row g-3 mb-4">
<div class="col-12">
<div class="card border-0 shadow-sm">
<div class="card-header bg-transparent border-0">
<h6 class="mb-0">Endereço</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8">
<label class="form-label small fw-bold text-muted text-uppercase">Logradouro *</label>
<input type="text"
name="address"
class="form-control @error('address') is-invalid @enderror"
value="{{ old('address', $customer->address->address ?? '') }}" required>
@error('address')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">Número *</label>
<input type="text"
name="address_number"
class="form-control @error('address_number') is-invalid @enderror"
value="{{ old('address_number', $customer->address->address_number ?? '') }}" required>
@error('address_number')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Complemento</label>
<input type="text"
name="address_complement"
class="form-control @error('address_complement') is-invalid @enderror"
value="{{ old('address_complement', $customer->address->address_complement ?? '') }}">
@error('address_complement')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">Bairro *</label>
<input type="text"
name="neighborhood"
class="form-control @error('neighborhood') is-invalid @enderror"
value="{{ old('neighborhood', $customer->address->neighborhood ?? '') }}" required>
@error('neighborhood')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">CEP *</label>
<input type="text"
name="cep"
class="form-control @error('cep') is-invalid @enderror"
value="{{ old('cep', $customer->address->cep ?? '') }}" required>
@error('cep')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">Cidade *</label>
<input type="text"
name="city"
class="form-control @error('city') is-invalid @enderror"
value="{{ old('city', $customer->address->city ?? '') }}" required>
@error('city')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-4">
<label class="form-label small fw-bold text-muted text-uppercase">Estado *</label>
<input type="text"
name="state"
class="form-control @error('state') is-invalid @enderror"
value="{{ old('state', $customer->address->state ?? '') }}" required>
@error('state')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label class="form-label small fw-bold text-muted text-uppercase">País</label>
<input type="text"
name="country"
class="form-control @error('country') is-invalid @enderror"
value="{{ old('country', $customer->address->country ?? 'Brasil') }}">
@error('country')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
</div>
<
…(truncated)