@if($company)
    <form action="{{ route('settings.company.update') }}" method="POST" class="space-y-5" novalidate data-company-settings-form="company">
        @csrf
        @method('PUT')
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="sm:col-span-2">
                <label for="company_name" class="block text-xs font-medium text-slate-500">Company name <span class="text-red-500">*</span></label>
                <input type="text" name="name" id="company_name" value="{{ old('name', $company->name) }}" maxlength="255"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="name" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div>
                <label for="short_name" class="block text-xs font-medium text-slate-500">Short name</label>
                <input type="text" name="short_name" id="short_name" value="{{ old('short_name', $company->short_name) }}" maxlength="100"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('short_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="company_gstin" class="block text-xs font-medium text-slate-500">GSTIN</label>
                <input type="text" name="gstin" id="company_gstin" value="{{ old('gstin', $company->gstin) }}" maxlength="15" autocomplete="off"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm uppercase focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500" placeholder="15-character GSTIN">
                @error('gstin')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label for="company_email" class="block text-xs font-medium text-slate-500">Email</label>
                <input type="email" name="email" id="company_email" value="{{ old('email', $company->email) }}"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="email" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div>
                <label for="company_phone" class="block text-xs font-medium text-slate-500">Phone</label>
                <input type="text" name="phone" id="company_phone" value="{{ old('phone', $company->phone) }}" maxlength="10" inputmode="numeric"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('phone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="phone" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div class="sm:col-span-2">
                <label for="company_website" class="block text-xs font-medium text-slate-500">Website</label>
                <input type="text" name="website" id="company_website" value="{{ old('website', $company->website) }}" maxlength="255" placeholder="https://"
                       class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                @error('website')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div class="sm:col-span-2">
                <label for="company_address" class="block text-xs font-medium text-slate-500">Address</label>
                <textarea name="address" id="company_address" rows="2" maxlength="1000"
                          class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">{{ old('address', $company->address) }}</textarea>
                @error('address')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="address" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
        </div>

        <div class="rounded-lg border border-slate-200 bg-slate-50/80 p-4">
            <p class="text-sm font-medium text-slate-800">Employee ID format</p>
            <div class="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label for="employee_number_prefix" class="block text-xs font-medium text-slate-500">Prefix</label>
                    <input type="text" name="employee_number_prefix" id="employee_number_prefix" value="{{ old('employee_number_prefix', $employeeNumberPrefix ?? 'EMP') }}" maxlength="5" autocomplete="off" pattern="[A-Za-z0-9_#-]+"
                        class="mt-1 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm uppercase focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500" placeholder="EMP">
                    @error('employee_number_prefix')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label for="employee_number_digits" class="block text-xs font-medium text-slate-500">Digits</label>
                    <input type="number" name="employee_number_digits" id="employee_number_digits" value="{{ old('employee_number_digits', $employeeNumberDigits ?? 1) }}" min="1" max="6"
                        class="mt-1 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500">
                    @error('employee_number_digits')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>
            <p class="mt-2 text-xs text-slate-500">
                Example: <b id="employee_number_example">{{ old('employee_number_prefix', $employeeNumberPrefix ?? null) . str_pad('1', max(1, min(10, (int) old('employee_number_digits', $employeeNumberDigits ?? 1))), '0', STR_PAD_LEFT) }}</b>
                · numbering continues from the last generated ID.
            </p>
        </div>

        <div class="flex justify-end border-t border-slate-100 pt-4">
            <button type="submit" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Save company</button>
        </div>
    </form>
@else
    <p class="text-sm text-slate-600">No company is linked to your account.</p>
@endif