@extends('layouts.app')

@section('title', 'General Settings')
@section('heading', 'General Settings')

@section('content')
@php
    $tab = (string) ($tab ?? request('tab', 'general'));
@endphp

<div class="mx-auto max-w-5xl space-y-4">
    @if(session('success'))
        <div class="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    @include('settings.partials.nav', ['settingsActive' => $tab])

    <x-card class="!p-0 overflow-hidden">
        <div class="border-b border-slate-100 bg-slate-50/50 px-5 py-3">
            @if($tab === 'branding')
                <h2 class="text-sm font-semibold text-slate-800">Branding</h2>
                <p class="text-xs text-slate-500">Logo and visual identity</p>
            @elseif($tab === 'security')
                <h2 class="text-sm font-semibold text-slate-800">Security</h2>
                <p class="text-xs text-slate-500">Company-wide two-factor authentication policy</p>
            @else
                <h2 class="text-sm font-semibold text-slate-800">Company</h2>
                <p class="text-xs text-slate-500">Legal details, contact info, and employee ID format</p>
            @endif
        </div>
        <div class="p-5">
            @if($tab === 'branding')
                @include('settings.tabs.branding')
            @elseif($tab === 'security')
                @include('settings.tabs.security')
            @else
                @include('settings.tabs.general')
            @endif
        </div>
    </x-card>
</div>
@endsection

@push('scripts')
@if($tab === 'general')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/company-settings-form-validation.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const prefixInput = document.getElementById('employee_number_prefix');
        const digitsInput = document.getElementById('employee_number_digits');
        const example = document.getElementById('employee_number_example');

        if (!prefixInput || !digitsInput || !example) {
            return;
        }

        const sanitizePrefix = function (value) {
            return (value || '').toUpperCase().replace(/[^A-Z0-9_#-]/g, '');
        };

        const updateEmployeeNumberExample = function () {
            const limit = parseInt(prefixInput.getAttribute('maxlength') || '', 10);
            const sanitizedPrefix = sanitizePrefix(prefixInput.value);
            const prefix = Number.isNaN(limit) ? sanitizedPrefix : sanitizedPrefix.slice(0, limit);
            if (prefixInput.value !== prefix) {
                prefixInput.value = prefix;
            }

            const digitsValue = parseInt(digitsInput.value, 10);
            const digits = Math.min(10, Math.max(1, Number.isNaN(digitsValue) ? 1 : digitsValue));

            example.textContent = prefix + String(1).padStart(digits, '0');
        };

        prefixInput.addEventListener('input', updateEmployeeNumberExample);
        digitsInput.addEventListener('input', updateEmployeeNumberExample);
        updateEmployeeNumberExample();
    });
</script>
@endif
@endpush