{{-- multipart because this tab carries file uploads; the others are PUT forms. --}}
<form method="POST" action="{{ route('settings.branding.update') }}" enctype="multipart/form-data">
    @csrf

    <div class="row g-3">
        <div class="col-12 col-lg-6">
            <div class="px-panel p-3 p-md-4 h-100">
                <h2 class="h6 fw-semibold mb-4 pb-3 border-bottom"
                    style="border-color: var(--px-border) !important;">
                    {{ __('settings::messages.branding.heading') }}
                </h2>

                <div class="mb-4">
                    <label for="logo" class="px-field-label">{{ __('settings::messages.branding.logo') }}</label>

                    {{-- What is currently in use, shown before the control that
                         replaces it — an upload field alone gives no way to tell
                         whether anything is set. --}}
                    <div class="d-flex align-items-center gap-3 mb-2">
                        @if ($logoUrl)
                            <img src="{{ $logoUrl }}" alt="{{ __('settings::messages.branding.logo') }}"
                                 style="max-height: 56px; max-width: 200px; border-color: var(--px-border);"
                                 class="rounded p-1 bg-white border">
                        @else
                            <span class="px-chip">{{ __('settings::messages.branding.none_uploaded') }}</span>
                        @endif

                        @if ($logoUrl && $canUpdate)
                            <div class="form-check">
                                <input type="checkbox" id="remove_logo" name="remove_logo" value="1" class="form-check-input">
                                <label for="remove_logo" class="form-check-label small">{{ __('settings::messages.branding.remove') }}</label>
                            </div>
                        @endif
                    </div>

                    <input type="file" id="logo" name="logo" accept="image/png,image/jpeg,image/webp" @disabled(! $canUpdate)
                           class="form-control px-input @error('logo') is-invalid @enderror">
                    <span class="px-hint">{{ __('settings::messages.branding.logo_help') }}</span>
                    @error('logo')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-0">
                    <label for="favicon" class="px-field-label">{{ __('settings::messages.branding.favicon') }}</label>

                    <div class="d-flex align-items-center gap-3 mb-2">
                        @if ($faviconUrl)
                            <img src="{{ $faviconUrl }}" alt="{{ __('settings::messages.branding.favicon') }}"
                                 style="height: 32px; width: 32px; border-color: var(--px-border);"
                                 class="rounded bg-white border">
                        @else
                            <span class="px-chip">{{ __('settings::messages.branding.none_uploaded') }}</span>
                        @endif

                        @if ($faviconUrl && $canUpdate)
                            <div class="form-check">
                                <input type="checkbox" id="remove_favicon" name="remove_favicon" value="1" class="form-check-input">
                                <label for="remove_favicon" class="form-check-label small">{{ __('settings::messages.branding.remove') }}</label>
                            </div>
                        @endif
                    </div>

                    <input type="file" id="favicon" name="favicon" accept="image/png,image/x-icon" @disabled(! $canUpdate)
                           class="form-control px-input @error('favicon') is-invalid @enderror">
                    <span class="px-hint">{{ __('settings::messages.branding.favicon_help') }}</span>
                    @error('favicon')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="px-panel p-3 p-md-4 h-100">
                <h2 class="h6 fw-semibold mb-4 pb-3 border-bottom"
                    style="border-color: var(--px-border) !important;">
                    {{ __('settings::messages.branding.appearance') }}
                </h2>

                @php($default = \App\Support\Branding\BrandingPalette::DEFAULT)
                @php($colour = old('primary_colour', $settings->get('branding.primary_colour') ?: $default))

                <div class="mb-3">
                    <label for="primary_colour" class="px-field-label">{{ __('settings::messages.branding.primary_colour') }}</label>

                    <div class="d-flex gap-2 align-items-center flex-wrap">
                        <input type="color" id="primary_colour" name="primary_colour" @disabled(! $canUpdate)
                               value="{{ $colour }}"
                               class="form-control form-control-color @error('primary_colour') is-invalid @enderror">

                        <code class="small text-body-secondary">{{ $colour }}</code>

                        {{-- Its own submit, so it needs no script and cannot be
                             confused with saving a colour. A clinic that has
                             already gone back to the shipped violet is not
                             offered a button that would do nothing. --}}
                        @if ($canUpdate && strtolower($colour) !== $default)
                            <button type="submit" name="reset_colour" value="1"
                                    class="btn btn-sm px-btn-ghost">
                                {{ __('settings::messages.branding.reset_colour') }}
                            </button>
                        @endif
                    </div>

                    <span class="px-hint">{{ __('settings::messages.branding.primary_colour_help') }}</span>

                    @error('primary_colour')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-0">
                    <label for="login_message" class="px-field-label">{{ __('settings::messages.branding.login_message') }}</label>
                    <textarea id="login_message" name="login_message" rows="3" @disabled(! $canUpdate)
                              class="form-control px-input @error('login_message') is-invalid @enderror">{{ old('login_message', $settings->get('branding.login_message')) }}</textarea>
                    <span class="px-hint">{{ __('settings::messages.branding.login_message_help') }}</span>
                    @error('login_message')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    {{--
        The letterhead.

        Clinics have this artwork designed rather than assembled from fields —
        a band across the top of the sheet and one across the bottom — and hand
        it over as an image. Used on printed documents only: it is the paper,
        not the application.
    --}}
    <div class="px-panel p-3 p-md-4 mt-3">
        <h2 class="px-aside__title">{{ __('settings::messages.branding.letterhead') }}</h2>
        <p class="px-hint mt-0">{{ __('settings::messages.branding.letterhead_help') }}</p>

        <div class="row g-4">
            @foreach ([
                ['print_header', $printHeaderUrl, 'print_header_label', 'print_header_help'],
                ['print_footer', $printFooterUrl, 'print_footer_label', 'print_footer_help'],
            ] as [$field, $current, $labelKey, $helpKey])
                <div class="col-12 col-lg-6">
                    <label for="{{ $field }}" class="px-field-label">
                        {{ __('settings::messages.branding.'.$labelKey) }}
                    </label>

                    {{-- What is in use, before the control that replaces it. --}}
                    <div class="d-flex align-items-center gap-3 mb-2">
                        @if ($current)
                            <img src="{{ $current }}" alt="{{ __('settings::messages.branding.'.$labelKey) }}"
                                 style="max-height: 64px; max-width: 260px; border-color: var(--px-border);"
                                 class="rounded p-1 bg-white border">
                        @else
                            <span class="px-chip">{{ __('settings::messages.branding.none_uploaded') }}</span>
                        @endif

                        @if ($current && $canUpdate)
                            <div class="form-check">
                                <input type="checkbox" id="remove_{{ $field }}" name="remove_{{ $field }}"
                                       value="1" class="form-check-input">
                                <label for="remove_{{ $field }}" class="form-check-label small">
                                    {{ __('settings::messages.branding.remove') }}
                                </label>
                            </div>
                        @endif
                    </div>

                    <input type="file" id="{{ $field }}" name="{{ $field }}"
                           accept="image/png,image/jpeg,image/webp" @disabled(! $canUpdate)
                           class="form-control px-input @error($field) is-invalid @enderror">
                    <span class="px-hint">{{ __('settings::messages.branding.'.$helpKey) }}</span>
                    @error($field)<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>
            @endforeach
        </div>
    </div>

    @if ($canUpdate)
        <div class="mt-4">
            <button type="submit" class="btn px-btn-primary">{{ __('common.save') }}</button>
        </div>
    @endif
</form>