@php
    $brandingAssetUrl = static function (mixed $path): ?string {
        if (! is_string($path) || trim($path) === '') {
            return null;
        }

        $path = ltrim(str_replace('\\', '/', trim($path)), '/');

        if (preg_match('#^https?://#i', $path) === 1) {
            return $path;
        }

        return str_starts_with($path, 'storage/')
            ? asset($path)
            : asset('storage/'.$path);
    };

    $brandingImages = [
        'logo' => [
            'label' => __('Logo'),
            'help' => __('Recommended: approximately 500×200px. PNG, JPG, SVG and WebP supported. Maximum 2MB.'),
            'accept' => '.png,.jpg,.jpeg,.webp,.svg',
            'url' => $brandingAssetUrl($general->logo),
        ],
        'logo_light' => [
            'label' => __('Logo Light'),
            'help' => __('Use this version on dark backgrounds. Recommended: approximately 500×200px. Maximum 2MB.'),
            'accept' => '.png,.jpg,.jpeg,.webp,.svg',
            'url' => $brandingAssetUrl($general->logo_light),
        ],
        'app_icon' => [
            'label' => __('Favicon'),
            'help' => __('Recommended: 64×64px or 32×32px. ICO, PNG and SVG supported. Maximum 512KB.'),
            'accept' => '.ico,.png,.svg',
            'url' => $brandingAssetUrl($general->app_icon),
        ],
    ];
@endphp

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-0 py-3">
        <h5 class="fw-700 mb-1">
            <i class="fas fa-palette text-primary me-2"></i>{{ __('Branding Settings') }}
        </h5>
        <p class="text-muted small mb-0">
            {{ __('Manage the logos, browser icon, colours and footer description used throughout the application.') }}
        </p>
    </div>

    <div class="card-body">
        <div class="row g-4">
            @foreach($brandingImages as $field => $image)
                <div class="col-xl-4 col-md-6">
                    <div class="branding-upload-card h-100">
                        <label for="{{ $field }}" class="form-label fw-700">
                            {{ $image['label'] }}
                        </label>

                        <div class="branding-preview mb-3 {{ $field === 'logo_light' ? 'branding-preview-dark' : '' }}">
                            <img
                                id="{{ $field }}Preview"
                                src="{{ $image['url'] ?? '' }}"
                                alt="{{ $image['label'] }}"
                                class="{{ $image['url'] ? '' : 'd-none' }}"
                            >
                            <div
                                id="{{ $field }}Placeholder"
                                class="text-muted text-center {{ $image['url'] ? 'd-none' : '' }}"
                            >
                                <i class="fas {{ $field === 'app_icon' ? 'fa-icons' : 'fa-image' }} fa-2x mb-2 d-block"></i>
                                <span class="small">{{ __('No image uploaded') }}</span>
                            </div>
                        </div>

                        <input
                            type="file"
                            id="{{ $field }}"
                            name="{{ $field }}"
                            accept="{{ $image['accept'] }}"
                            class="form-control @error($field) is-invalid @enderror"
                            data-branding-preview="{{ $field }}Preview"
                            data-branding-placeholder="{{ $field }}Placeholder"
                        >

                        @error($field)
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <div class="form-text">{{ $image['help'] }}</div>

                        @if($image['url'])
                            <div class="form-check mt-3">
                                <input type="hidden" name="remove_{{ $field }}" value="0">
                                <input
                                    type="checkbox"
                                    id="remove_{{ $field }}"
                                    name="remove_{{ $field }}"
                                    value="1"
                                    class="form-check-input"
                                    @checked(old('remove_'.$field))
                                >
                                <label for="remove_{{ $field }}" class="form-check-label text-danger small">
                                    {{ __('Remove current :image', ['image' => strtolower($image['label'])]) }}
                                </label>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 py-3">
                <h6 class="fw-700 mb-0">
                    <i class="fas fa-droplet text-primary me-2"></i>{{ __('Brand Colours') }}
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    <label for="site_color" class="form-label fw-600">{{ __('Primary Color') }}</label>
                    <div class="input-group">
                        <input
                            type="color"
                            id="site_color_picker"
                            class="form-control form-control-color"
                            value="{{ old('site_color', $general->site_color ?: '#00a99d') }}"
                            title="{{ __('Choose primary color') }}"
                        >
                        <input
                            type="text"
                            id="site_color"
                            name="site_color"
                            value="{{ old('site_color', $general->site_color ?: '#00a99d') }}"
                            class="form-control text-uppercase @error('site_color') is-invalid @enderror"
                            maxlength="7"
                            pattern="#[0-9A-Fa-f]{6}"
                            required
                        >
                        @error('site_color')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div>
                    <label for="secondary_color" class="form-label fw-600">{{ __('Secondary Color') }}</label>
                    <div class="input-group">
                        <input
                            type="color"
                            id="secondary_color_picker"
                            class="form-control form-control-color"
                            value="{{ old('secondary_color', $general->secondary_color ?: '#1a202c') }}"
                            title="{{ __('Choose secondary color') }}"
                        >
                        <input
                            type="text"
                            id="secondary_color"
                            name="secondary_color"
                            value="{{ old('secondary_color', $general->secondary_color ?: '#1a202c') }}"
                            class="form-control text-uppercase @error('secondary_color') is-invalid @enderror"
                            maxlength="7"
                            pattern="#[0-9A-Fa-f]{6}"
                            required
                        >
                        @error('secondary_color')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 py-3">
                <h6 class="fw-700 mb-0">
                    <i class="fas fa-align-left text-primary me-2"></i>{{ __('Footer Content') }}
                </h6>
            </div>
            <div class="card-body">
                <label for="about_footer" class="form-label fw-600">{{ __('Footer Text') }}</label>
                <textarea
                    id="about_footer"
                    name="about_footer"
                    rows="6"
                    maxlength="1000"
                    class="form-control @error('about_footer') is-invalid @enderror"
                    placeholder="{{ __('Describe your marketplace or company.') }}"
                >{{ old('about_footer', $site->about_footer) }}</textarea>
                @error('about_footer')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
                <div class="form-text">
                    {{ __('This text appears beneath the logo in the public footer.') }}
                </div>
            </div>
        </div>
    </div>
</div>

@once
@push('styles')
<style>
    .branding-upload-card {
        border: 1px solid #e7edf3;
        border-radius: .75rem;
        padding: 1rem;
    }
    .branding-preview {
        align-items: center;
        background: #f8f9fa;
        border: 1px dashed #ced4da;
        border-radius: .6rem;
        display: flex;
        height: 150px;
        justify-content: center;
        overflow: hidden;
        padding: 1rem;
    }
    .branding-preview-dark {
        background: #1a202c;
    }
    .branding-preview img {
        max-height: 115px;
        max-width: 100%;
        object-fit: contain;
    }
    .form-control-color {
        max-width: 64px;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-branding-preview]').forEach(function (input) {
        input.addEventListener('change', function () {
            var file = this.files && this.files[0];
            var preview = document.getElementById(this.dataset.brandingPreview);
            var placeholder = document.getElementById(this.dataset.brandingPlaceholder);

            if (!file || !preview) return;

            var reader = new FileReader();
            reader.addEventListener('load', function (event) {
                preview.src = event.target.result;
                preview.classList.remove('d-none');
                if (placeholder) placeholder.classList.add('d-none');
            });
            reader.readAsDataURL(file);
        });
    });

    [
        ['site_color_picker', 'site_color'],
        ['secondary_color_picker', 'secondary_color']
    ].forEach(function (pair) {
        var picker = document.getElementById(pair[0]);
        var text = document.getElementById(pair[1]);

        if (!picker || !text) return;

        picker.addEventListener('input', function () {
            text.value = picker.value.toUpperCase();
        });

        text.addEventListener('input', function () {
            if (/^#[0-9A-Fa-f]{6}$/.test(text.value)) {
                picker.value = text.value;
            }
        });
    });
});
</script>
@endpush
@endonce