{{-- Two equal columns rather than px-layout's main-plus-aside: neither of
     these panels is subordinate to the other, and pushing regional settings
     into a 20rem rail would squeeze eight controls into a column meant for
     summaries. --}}
<form method="POST" action="{{ route('settings.general.update') }}">
    @csrf
    @method('PUT')

    <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.general.heading') }}
                </h2>

                <div class="mb-3">
                    <label for="clinic_name" class="px-field-label">{{ __('settings::messages.general.clinic_name') }}</label>
                    <input type="text" id="clinic_name" name="clinic_name" required @disabled(! $canUpdate)
                           value="{{ old('clinic_name', $settings->get('clinic.name')) }}"
                           class="form-control px-input @error('clinic_name') is-invalid @enderror">
                    @error('clinic_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-3">
                    <label for="clinic_registration_number" class="px-field-label">{{ __('settings::messages.general.registration_number') }}</label>
                    <input type="text" id="clinic_registration_number" name="clinic_registration_number" @disabled(! $canUpdate)
                           value="{{ old('clinic_registration_number', $settings->get('clinic.registration_number')) }}"
                           class="form-control px-input @error('clinic_registration_number') is-invalid @enderror">
                    @error('clinic_registration_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="row g-3">
                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_phone" class="px-field-label">{{ __('settings::messages.general.phone') }}</label>
                        <input type="text" id="clinic_phone" name="clinic_phone" @disabled(! $canUpdate)
                               value="{{ old('clinic_phone', $settings->get('clinic.phone')) }}"
                               class="form-control px-input @error('clinic_phone') is-invalid @enderror">
                        @error('clinic_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_email" class="px-field-label">{{ __('settings::messages.general.email') }}</label>
                        <input type="email" id="clinic_email" name="clinic_email" @disabled(! $canUpdate)
                               value="{{ old('clinic_email', $settings->get('clinic.email')) }}"
                               class="form-control px-input @error('clinic_email') is-invalid @enderror">
                        @error('clinic_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="mb-0">
                    <label for="clinic_address" class="px-field-label">{{ __('settings::messages.general.address') }}</label>
                    <textarea id="clinic_address" name="clinic_address" rows="3" @disabled(! $canUpdate)
                              class="form-control px-input @error('clinic_address') is-invalid @enderror">{{ old('clinic_address', $settings->get('clinic.address')) }}</textarea>
                    @error('clinic_address')<div class="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.general.regional') }}
                </h2>

                <div class="mb-3">
                    <label for="clinic_timezone" class="px-field-label">{{ __('settings::messages.general.timezone') }}</label>
                    <select id="clinic_timezone" name="clinic_timezone" @disabled(! $canUpdate)
                            class="form-select px-select @error('clinic_timezone') is-invalid @enderror">
                        @foreach ($timezones as $tz)
                            <option value="{{ $tz }}" @selected(old('clinic_timezone', $settings->get('clinic.timezone')) === $tz)>{{ $tz }}</option>
                        @endforeach
                    </select>
                    <span class="px-hint">{{ __('settings::messages.general.timezone_help') }}</span>
                    @error('clinic_timezone')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="row g-3">
                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_locale" class="px-field-label">{{ __('settings::messages.general.locale') }}</label>
                        <select id="clinic_locale" name="clinic_locale" @disabled(! $canUpdate)
                                class="form-select px-select @error('clinic_locale') is-invalid @enderror">
                            @foreach ($locales as $code => $locale)
                                <option value="{{ $code }}" @selected(old('clinic_locale', $settings->get('clinic.locale')) === $code)>
                                    {{ $locale['native'] ?? $code }}
                                </option>
                            @endforeach
                        </select>
                        @error('clinic_locale')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_week_starts_on" class="px-field-label">{{ __('settings::messages.general.week_starts_on') }}</label>
                        <select id="clinic_week_starts_on" name="clinic_week_starts_on" @disabled(! $canUpdate)
                                class="form-select px-select @error('clinic_week_starts_on') is-invalid @enderror">
                            @foreach ([0 => 'Sunday', 1 => 'Monday', 6 => 'Saturday'] as $value => $label)
                                <option value="{{ $value }}" @selected((int) old('clinic_week_starts_on', $settings->get('clinic.week_starts_on')) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('clinic_week_starts_on')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                <div class="row g-3">
                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_currency" class="px-field-label">{{ __('settings::messages.general.currency') }}</label>
                        <input type="text" id="clinic_currency" name="clinic_currency" maxlength="3" required @disabled(! $canUpdate)
                               value="{{ old('clinic_currency', $settings->get('clinic.currency')) }}"
                               class="form-control px-input text-uppercase font-monospace @error('clinic_currency') is-invalid @enderror">
                        <span class="px-hint">{{ __('settings::messages.general.currency_help') }}</span>
                        @error('clinic_currency')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-sm-6 mb-3">
                        <label for="clinic_currency_symbol" class="px-field-label">{{ __('settings::messages.general.currency_symbol') }}</label>
                        <input type="text" id="clinic_currency_symbol" name="clinic_currency_symbol" maxlength="8" required @disabled(! $canUpdate)
                               value="{{ old('clinic_currency_symbol', $settings->get('clinic.currency_symbol')) }}"
                               class="form-control px-input @error('clinic_currency_symbol') is-invalid @enderror">
                        @error('clinic_currency_symbol')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>

                {{-- Each option carries today's date rendered in that format, so
                     the choice is made by recognising the result rather than by
                     decoding the tokens. --}}
                <div class="row g-3">
                    <div class="col-12 col-sm-6 mb-0">
                        <label for="clinic_date_format" class="px-field-label">{{ __('settings::messages.general.date_format') }}</label>
                        <select id="clinic_date_format" name="clinic_date_format" @disabled(! $canUpdate)
                                class="form-select px-select @error('clinic_date_format') is-invalid @enderror">
                            @foreach (['Y-m-d', 'd/m/Y', 'm/d/Y', 'd-M-Y'] as $format)
                                <option value="{{ $format }}" @selected(old('clinic_date_format', $settings->get('clinic.date_format')) === $format)>
                                    {{ $format }} — {{ now()->format($format) }}
                                </option>
                            @endforeach
                        </select>
                        @error('clinic_date_format')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12 col-sm-6 mb-0">
                        <label for="clinic_time_format" class="px-field-label">{{ __('settings::messages.general.time_format') }}</label>
                        <select id="clinic_time_format" name="clinic_time_format" @disabled(! $canUpdate)
                                class="form-select px-select @error('clinic_time_format') is-invalid @enderror">
                            @foreach (['H:i', 'h:i A'] as $format)
                                <option value="{{ $format }}" @selected(old('clinic_time_format', $settings->get('clinic.time_format')) === $format)>
                                    {{ $format }} — {{ now()->format($format) }}
                                </option>
                            @endforeach
                        </select>
                        @error('clinic_time_format')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>
    </div>

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