@php
    $brandingCards = [
        'website_logo' => [
            'title' => 'Website Logo',
            'description' => 'Used in the topbar, error pages, QR exports, and general website surfaces.',
            'guidance' => 'PNG, JPG, or WebP. A transparent square image is recommended.',
            'accept' => '.png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp',
        ],
        'sidebar_logo' => [
            'title' => 'Sidebar Logo',
            'description' => 'Used in the expanded and collapsed sidebar brand area.',
            'guidance' => 'PNG, JPG, or WebP. Use a compact square logo with safe padding.',
            'accept' => '.png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp',
        ],
        'login_logo' => [
            'title' => 'Login Logo',
            'description' => 'Used exclusively on the sign-in screen.',
            'guidance' => 'PNG, JPG, or WebP. A transparent image works best on the blue panel.',
            'accept' => '.png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp',
        ],
        'favicon' => [
            'title' => 'Browser Favicon',
            'description' => 'Displayed in browser tabs, bookmarks, and shortcuts.',
            'guidance' => 'PNG or ICO, maximum 1 MB. A square 32×32 or 64×64 image is recommended.',
            'accept' => '.png,.ico,image/png,image/x-icon,image/vnd.microsoft.icon',
        ],
    ];
    $brandingErrorType = (string) session('branding_error_type', '');
@endphp

<div class="row g-3">
    @foreach($brandingCards as $brandingType => $card)
        @php
            $brandingAsset = $branding[$brandingType] ?? [
                'url' => URL::asset('build/images/uhs-logo.png'),
                'configured' => false,
            ];
        @endphp
        <div class="col-12 col-lg-6">
            <div class="card branding-asset-card">
                <div class="card-body p-3 p-xl-4">
                    <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                        <div>
                            <h5 class="mb-1 fs-15 fw-semibold">{{ __($card['title']) }}</h5>
                            <p class="mb-0 text-muted fs-12">{{ __($card['description']) }}</p>
                        </div>
                        <span class="badge {{ $brandingAsset['configured'] ? 'bg-success-subtle text-success' : 'bg-light text-muted' }}">
                            {{ $brandingAsset['configured'] ? __('Custom') : __('Default') }}
                        </span>
                    </div>

                    <div class="branding-asset-preview {{ $brandingType === 'favicon' ? 'is-favicon' : '' }} mb-3">
                        <img src="{{ $brandingAsset['url'] }}" alt="{{ __($card['title']) }}" data-branding-preview="{{ $brandingType }}">
                    </div>

                    <p class="branding-guidance mb-3">{{ __($card['guidance']) }}</p>

                    <form method="POST" action="{{ route('admin.branding.update', $brandingType) }}" enctype="multipart/form-data" class="branding-upload-form">
                        @csrf
                        @method('PUT')
                        <label class="form-label fs-12" for="brandingAsset{{ Str::studly($brandingType) }}">{{ __('Choose replacement image') }}</label>
                        <input
                            type="file"
                            class="form-control branding-file-input {{ $brandingErrorType === $brandingType && $errors->has('asset') ? 'is-invalid' : '' }}"
                            id="brandingAsset{{ Str::studly($brandingType) }}"
                            name="asset"
                            accept="{{ $card['accept'] }}"
                            data-branding-input="{{ $brandingType }}"
                            required
                        >
                        @if($brandingErrorType === $brandingType)
                            @error('asset')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        @endif
                        <div class="d-flex flex-wrap justify-content-end gap-2 mt-3">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="ri-upload-2-line me-1"></i>{{ __('Upload Logo') }}
                            </button>
                        </div>
                    </form>

                    @if($brandingAsset['configured'])
                        <form method="POST" action="{{ route('admin.branding.destroy', $brandingType) }}" class="mt-2 text-end branding-restore-form">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-light btn-sm">
                                <i class="ri-restart-line me-1"></i>{{ __('Restore Default') }}
                            </button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    @endforeach
</div>

<script>
    document.querySelectorAll('[data-branding-input]').forEach(function (input) {
        input.addEventListener('change', function () {
            var file = input.files && input.files[0];
            var preview = document.querySelector('[data-branding-preview="' + input.dataset.brandingInput + '"]');
            if (!file || !preview) return;

            var previewUrl = URL.createObjectURL(file);
            preview.addEventListener('load', function releasePreviewUrl() {
                URL.revokeObjectURL(previewUrl);
                preview.removeEventListener('load', releasePreviewUrl);
            });
            preview.src = previewUrl;
        });
    });

    document.querySelectorAll('.branding-restore-form').forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (form.dataset.confirmed === '1') {
                return;
            }

            event.preventDefault();

            if (typeof Swal === 'undefined') {
                form.dataset.confirmed = '1';
                form.submit();
                return;
            }

            Swal.fire({
                title: '{{ __('Restore Default') }}',
                text: '{{ __('Restore this asset to the default image?') }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '{{ __('Restore Default') }}',
                cancelButtonText: '{{ __('Cancel') }}',
                customClass: {
                    confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                    cancelButton: 'btn btn-light w-xs mt-2'
                },
                buttonsStyling: false
            }).then(function (result) {
                if (result.value) {
                    form.dataset.confirmed = '1';
                    form.submit();
                }
            });
        });
    });
</script>