@php $logo = $logo ?? app(\App\Support\BrandLogoManager::class)->appLogoStatus(); @endphp

@if(!empty($compact))
<div class="d-flex align-items-center gap-3 mb-3">
    <div class="branding-preview-thumb">
        <x-app-logo context="login" />
    </div>
    <div class="flex-grow-1" style="font-size:13px">
        @if($logo['is_custom'])
            <span class="badge bg-success-subtle text-success border border-success-subtle">Custom application logo</span>
            <div class="text-muted mt-1" style="font-size:12px">{{ $logo['filename'] }}</div>
        @else
            <span class="text-muted">Using default {{ config('app.name') }} logo</span>
        @endif
    </div>
    <a href="{{ route('sadmin.branding') }}" class="btn btn-outline-secondary btn-sm">Manage</a>
</div>
@else
<div class="branding-preview-grid mb-4">
    <div class="branding-preview-card">
        <div class="branding-preview-label">Login page</div>
        <x-app-logo context="login" />
    </div>
    <div class="branding-preview-card dark">
        <div class="branding-preview-label">On dark background</div>
        <x-app-logo context="login" />
    </div>
    <div class="branding-preview-card">
        <div class="branding-preview-label">Top bar (in app)</div>
        <x-app-logo context="topbar" />
    </div>
</div>
@endif

@if($logo['is_custom'] && empty($compact))
<div class="alert alert-light border d-flex align-items-center gap-3 mb-4" style="font-size:13px">
    <i class="bi bi-check-circle text-success fs-5"></i>
    <div>
        <strong>Custom application logo active</strong>
        <div class="branding-meta">
            {{ $logo['filename'] }}
            @if($logo['size_kb']) &middot; {{ $logo['size_kb'] }} KB @endif
            @if($logo['updated_at']) &middot; Updated {{ \Carbon\Carbon::createFromTimestamp($logo['updated_at'])->diffForHumans() }} @endif
        </div>
    </div>
</div>
@elseif(empty($compact))
<div class="alert alert-info d-flex align-items-center gap-2 mb-4" style="font-size:13px">
    <i class="bi bi-info-circle"></i>
    This logo appears on <strong>login</strong>, <strong>select-company</strong>, and the <strong>top bar</strong>. Company logos are set separately in each company's Settings.
</div>
@endif

@if(!($logo['storage_writable'] ?? true))
<div class="alert alert-danger mb-3" style="font-size:13px">
    <i class="bi bi-exclamation-octagon me-1"></i>
    <strong>Upload blocked:</strong> <code>storage/app/public/branding</code> is not writable on this server. Ask your host to fix folder permissions.
</div>
@endif

<form method="POST" action="{{ route('sadmin.branding.update') }}" enctype="multipart/form-data" class="sadmin-branding-upload-form">
    @csrf
    <label class="branding-drop-zone d-block mb-3" for="logoInput{{ $formId ?? '' }}">
        <i class="bi bi-cloud-upload fs-2 text-primary d-block mb-2"></i>
        <span class="fw-semibold">Click to choose application logo</span>
        <div class="branding-meta mt-1">PNG recommended &middot; max 2 MB</div>
        @if(empty($compact))
        <div class="branding-meta mt-1">Use your full horizontal <strong>axis</strong> wordmark, cropped tight (no large empty margins). Not the company logo.</div>
        @endif
        <input type="file" name="logo" id="logoInput{{ $formId ?? '' }}" accept="image/png,image/jpeg,image/svg+xml,image/webp" class="d-none" required>
    </label>
    @error('logo')<div class="text-danger small mb-3">{{ $message }}</div>@enderror
    <div class="sadmin-branding-filename small text-muted mb-3" style="display:none"></div>
    <button type="submit" class="btn btn-primary btn-sm" @if(!($logo['storage_writable'] ?? true)) disabled @endif>
        <i class="bi bi-upload me-1"></i>Upload Application Logo
    </button>
</form>

@once
@push('scripts')
<script>
document.querySelectorAll('.sadmin-branding-upload-form input[type="file"]').forEach(function (input) {
    input.addEventListener('change', function () {
        const label = this.closest('form')?.querySelector('.sadmin-branding-filename');
        if (label && this.files?.[0]) {
            label.style.display = 'block';
            label.textContent = 'Selected: ' + this.files[0].name;
        }
    });
});
</script>
@endpush
@endonce