<div class="card shadow-sm mb-4">
    <div class="card-body">

        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Previous Names
            <button class="btn btn-primary btn-sm" wire:click="showAdd">
                <i class="mdi mdi-plus"></i>
            </button>
        </h4>

        @if($client->previousNames()->count())
        <ul class="list-group">
            @foreach($client->previousNames as $previousName)
            <li class="list-group-item bg-light  d-flex justify-content-between align-items-center">
                {{ $previousName->name_first }} {{ $previousName->name_middle }} {{ $previousName->name_last }}
                <span>
                    <i class="mdi mdi-pencil action-icon me-2 btn btn-md" wire:click="loadEdit({{ $previousName->id }})"></i>
                    <i class="mdi mdi-trash-can action-icon text-danger btn btn-md" wire:click="deleteName({{ $previousName->id }})"></i>
                </span>
            </li>
            @endforeach
        </ul>
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-account-details" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No previous names have been added.</p>
            </div>
        @endif

    </div>

    @if($show)
        <div>
            <div class="offcanvas offcanvas-end  show"  tabindex="-1" style="--bs-offcanvas-width: 600px;" role="dialog">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">{{ $editing ? 'Edit' : 'Add' }} Previous Name</h5>
                    <button type="button" class="btn-close text-dark" wire:click.prevent="hideAdd"></button>
                </div>

                <div class="offcanvas-body  bg-light">
                    @if($editing)
                        <form method="post" wire:submit="editName({{ $previous_name->id }})">
                    @else
                    <form method="post" wire:submit="addName">
                        @endif
                        @csrf

                        <div class="mb-3">
                            <label class="form-label">First Name</label>
                            <input type="text" class="form-control" placeholder="First Name" wire:model.live="name_first">
                            @error('name_first')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Middle Name</label>
                            <input type="text" class="form-control" placeholder="Middle Name" wire:model.live="name_middle">
                            @error('name_middle')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Last Name</label>
                            <input type="text" class="form-control" placeholder="Last Name" wire:model.live="name_last">
                            @error('name_last')
                            <div class="invalid-feedback">
                                {{ $message }}
                            </div>
                            @enderror
                        </div>

                        <x-ui.button class="btn-success w-100 btn-lg">{{ $editing ? 'Edit' : 'Add' }}</x-ui.button>
                    </form>

                </div>
            </div>
        </div>
    @endif
</div>