<div>
    @if(!isset($solicitor) || !$solicitor->exists)
        <div class="alert alert-warning">No solicitor context available.</div>
    @else
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="fw-bold mb-4">Logo</h4>

                {{-- Current Logo --}}
                <div class="mb-4">
                    <p class="text-muted small mb-2">Current Logo</p>
                    @if($solicitor->logo_path)
                        <div class="d-flex align-items-start gap-3">
                            <div class="border rounded p-3 bg-light d-inline-block">
                                <img src="{{ Storage::url($solicitor->logo_path) }}"
                                     alt="Solicitor Logo"
                                     style="max-height: 120px; max-width: 320px; object-fit: contain;">
                            </div>
                            @can('solicitors.edit')
                            <button type="button"
                                    class="btn btn-outline-danger btn-sm mt-1"
                                    wire:click="deleteLogo"
                                    wire:confirm="Remove the current logo?">
                                <i class="mdi mdi-delete-outline me-1"></i>Remove Logo
                            </button>
                            @endcan
                        </div>
                    @else
                        <div class="border rounded p-4 bg-light text-center text-muted" style="max-width: 400px;">
                            <i class="mdi mdi-image-off-outline" style="font-size: 40px;"></i>
                            <p class="mb-0 mt-2 small">No logo uploaded</p>
                        </div>
                    @endif
                </div>

                <hr>

                {{-- Upload New Logo --}}
                @can('solicitors.edit')
                <div class="mt-4" style="max-width: 480px;">
                    <p class="text-muted small mb-2">{{ $solicitor->logo_path ? 'Replace Logo' : 'Upload Logo' }}</p>

                    <div class="mb-3">
                        <input type="file"
                               class="form-control @error('logo') is-invalid @enderror"
                               wire:model="logo"
                               accept="image/png,image/jpeg,image/jpg,image/svg+xml,image/webp">
                        @error('logo')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">PNG, JPG, SVG or WebP. Max 2 MB.</div>
                    </div>

                    {{-- Live preview of selected file --}}
                    @if($logo)
                        <div class="border rounded p-3 bg-light mb-3 d-inline-block">
                            <p class="text-muted small mb-1">Preview</p>
                            <img src="{{ $logo->temporaryUrl() }}"
                                 alt="Preview"
                                 style="max-height: 100px; max-width: 280px; object-fit: contain;">
                        </div>
                    @endif

                    <div>
                        <button type="button"
                                class="btn btn-primary"
                                wire:click="uploadLogo"
                                wire:loading.attr="disabled"
                                @if(!$logo) disabled @endif>
                        <span wire:loading.remove wire:target="uploadLogo">
                            <i class="mdi mdi-upload me-1"></i>Upload
                        </span>
                            <span wire:loading wire:target="uploadLogo">
                            <span class="spinner-border spinner-border-sm me-1"></span> Uploading...
                        </span>
                        </button>
                    </div>
                </div>
                @endcan
            </div>
        </div>
    @endif
</div>