@extends('layouts.portal')

@section('title', __('Company settings'))

@section('content')
    <div class="portal-page">
        @include('partials.portal-header')

        <main class="module-main">
            <div class="module-heading">
                <div>
                    <p class="eyebrow">{{ __('SETTINGS') }}</p>
                    <h1>{{ __('Company settings') }}</h1>
                    <p>{{ __('This information appears on the letterhead of every printed report and on the system screens.') }}</p>
                </div>
            </div>

            @if(session('status'))
                <p class="status-message" role="status">{{ session('status') }}</p>
            @endif

            @if($errors->any())
                <p class="form-error" role="alert">{{ __('Please review the highlighted fields.') }}</p>
            @endif

            <form class="form-panel" method="POST" action="{{ route('settings.company.update') }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <h2 class="section-heading">{{ __('Identification') }}</h2>
                <div class="form-grid">
                    <div class="form-field">
                        <label for="legal_name">{{ __('Legal name') }}</label>
                        <input id="legal_name" name="legal_name" value="{{ old('legal_name', $settings->legal_name) }}" maxlength="255" required>
                        @error('legal_name')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="trade_name">{{ __('Trade name') }}</label>
                        <input id="trade_name" name="trade_name" value="{{ old('trade_name', $settings->trade_name) }}" maxlength="255">
                        @error('trade_name')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="tax_id">{{ __('Tax ID') }}</label>
                        <input id="tax_id" name="tax_id" value="{{ old('tax_id', $settings->tax_id) }}" maxlength="40">
                        @error('tax_id')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="registration_number">{{ __('Registration No.') }}</label>
                        <input id="registration_number" name="registration_number" value="{{ old('registration_number', $settings->registration_number) }}" maxlength="40">
                        @error('registration_number')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field form-field-wide">
                        <label for="business_activity">{{ __('Business activity') }}</label>
                        <input id="business_activity" name="business_activity" value="{{ old('business_activity', $settings->business_activity) }}" maxlength="255">
                        @error('business_activity')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <h2 class="section-heading">{{ __('Contact') }}</h2>
                <div class="form-grid">
                    <div class="form-field">
                        <label for="phone">{{ __('Phone') }}</label>
                        <input id="phone" name="phone" value="{{ old('phone', $settings->phone) }}" maxlength="60">
                        @error('phone')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="email">{{ __('Email') }}</label>
                        <input id="email" name="email" type="email" value="{{ old('email', $settings->email) }}" maxlength="255">
                        @error('email')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field form-field-wide">
                        <label for="website">{{ __('Website') }}</label>
                        <input id="website" name="website" value="{{ old('website', $settings->website) }}" maxlength="255">
                        @error('website')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field form-field-wide">
                        <label for="address">{{ __('Address') }}</label>
                        <textarea id="address" name="address" maxlength="500" rows="2">{{ old('address', $settings->address) }}</textarea>
                        @error('address')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="city">{{ __('City') }}</label>
                        <input id="city" name="city" value="{{ old('city', $settings->city) }}" maxlength="120">
                        @error('city')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        <label for="country_code">{{ __('Country') }}</label>
                        <select id="country_code" name="country_code" required>
                            @foreach(\App\Support\AddressRegions::OPERATING_COUNTRIES as $code => $name)
                                <option value="{{ $code }}" @selected(old('country_code', $settings->country_code ?: \App\Models\CompanySetting::DEFAULT_COUNTRY) === $code)>{{ __($name) }}</option>
                            @endforeach
                        </select>
                        <small>{{ __('Default country for addresses and the list of states or departments.') }}</small>
                        @error('country_code')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-field">
                        @php($selectedTimezone = old('timezone', \App\Models\CompanySetting::timezone()))
                        <label for="timezone">{{ __('Time zone') }}</label>
                        <select id="timezone" name="timezone" required>
                            @foreach(\App\Models\CompanySetting::TIMEZONES as $country => $timezones)
                                <optgroup label="{{ __(\App\Support\AddressRegions::OPERATING_COUNTRIES[$country]) }}" data-country="{{ $country }}">
                                    @foreach($timezones as $identifier => $label)
                                        <option value="{{ $identifier }}" @selected($selectedTimezone === $identifier)>{{ __($label) }} · UTC{{ now($identifier)->format('P') }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </select>
                        <small>{{ __('Defines the business day and the time shown on screens and reports. Data is stored in UTC.') }}</small>
                        @error('timezone')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <h2 class="section-heading">{{ __('Letterhead') }}</h2>
                <div class="form-grid">
                    <div class="form-field">
                        <label for="logo">{{ __('Logo') }}</label>
                        @if($settings->logoUrl())
                            <img src="{{ $settings->logoUrl() }}" alt="{{ __('Current logo') }}" style="display: block; max-width: 220px; max-height: 90px; margin-bottom: 10px; object-fit: contain">
                        @endif
                        <input id="logo" name="logo" type="file" accept="image/png,image/jpeg">
                        <small>{{ __('PNG or JPG, up to 1 MB.') }}</small>
                        @error('logo')<span class="validation-error">{{ $message }}</span>@enderror
                        @if($settings->logoUrl())
                            <label style="display: flex; gap: 8px; align-items: center; margin-top: 8px; font-weight: 400"><input type="checkbox" name="remove_logo" value="1" style="width: auto; min-height: 0"> {{ __('Remove current logo') }}</label>
                        @endif
                    </div>
                    <div class="form-field">
                        <label for="document_footer">{{ __('Document footer') }}</label>
                        <textarea id="document_footer" name="document_footer" maxlength="500" rows="3">{{ old('document_footer', $settings->document_footer) }}</textarea>
                        <small>{{ __('Optional text printed at the bottom of every PDF page.') }}</small>
                        @error('document_footer')<span class="validation-error">{{ $message }}</span>@enderror
                    </div>
                </div>

                <div class="form-actions">
                    <a class="module-link" href="{{ route('dashboard') }}">{{ __('Cancel') }}</a>
                    <button class="action-button" type="submit">{{ __('Save company settings') }}</button>
                </div>
            </form>
        </main>
    </div>

    <script>
        (() => {
            const country = document.getElementById('country_code');
            const timezone = document.getElementById('timezone');

            const syncTimezones = () => {
                let selectedAllowed = false;

                timezone.querySelectorAll('optgroup').forEach((group) => {
                    const allowed = group.dataset.country === country.value;
                    group.hidden = ! allowed;
                    group.querySelectorAll('option').forEach((option) => {
                        option.hidden = ! allowed;
                        option.disabled = ! allowed;
                        selectedAllowed ||= allowed && option.selected;
                    });
                });

                if (! selectedAllowed) {
                    timezone.value = timezone.querySelector(`optgroup[data-country="${country.value}"] option`)?.value ?? '';
                }
            };

            country.addEventListener('change', syncTimezones);
            syncTimezones();
        })();
    </script>
@endsection