@extends('layouts.empresas')

@section('title', 'Configurações')

@section('content')
  <div class="max-w-3xl">
    <div class="mb-6">
      <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Configurações do canal de assédio moral</h1>
      <p class="text-sm text-gray-500">Defina como o canal público de denúncias deve funcionar para sua empresa.</p>
    </div>

    @if(session('success'))
      <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
        {{ session('success') }}
      </div>
    @endif

    @if($errors->any())
      <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-800">
        <div class="font-medium">Ocorreram erros ao salvar as configurações:</div>
        <ul class="mt-2 list-inside list-disc text-sm">
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
      <div class="border-b border-gray-200 px-4 py-4 sm:px-6">
        <h2 class="text-base font-semibold text-gray-900">Canal de denúncias</h2>
        <p class="text-sm text-gray-500">Configure a disponibilidade do formulário público e o e-mail responsável pelo atendimento.</p>
      </div>

      <form action="{{ route('empresa.settings.update') }}" method="POST" class="space-y-6 px-4 py-6 sm:px-6">
        @csrf
        @method('PUT')

        <div class="flex flex-col gap-4">
          <label class="flex items-start gap-3">
            <input id="protocolo_assedio_moral_ativo" name="protocolo_assedio_moral_ativo" type="checkbox" value="1" class="mt-1 h-5 w-5 rounded border-gray-300 text-primary-600 focus:ring-primary-500" {{ old('protocolo_assedio_moral_ativo', $protocoloAssedioMoralAtivo) ? 'checked' : '' }}>
            <span>
              <span class="text-sm font-medium text-gray-900">Ativar canal de denúncias de assédio moral</span>
              <span class="mt-1 block text-sm text-gray-500">Quando ativo, colaboradores com o link poderão preencher o formulário anônimo.</span>
            </span>
          </label>

          <div class="pl-8">
            <label for="protocolo_assedio_moral_email" class="block text-sm font-medium text-gray-700">E-mail para receber denúncias</label>
            <input
              type="email"
              id="protocolo_assedio_moral_email"
              name="protocolo_assedio_moral_email"
              value="{{ old('protocolo_assedio_moral_email', $protocoloAssedioMoralEmail) }}"
              class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500"
              placeholder="rh@empresa.com"
            >
            @if($errors->has('protocolo_assedio_moral_email'))
              <p class="mt-1 text-xs text-red-600">{{ $errors->first('protocolo_assedio_moral_email') }}</p>
            @else
              <p class="mt-1 text-xs text-gray-500">Use o e-mail que deve receber as notificações e será usado no link do formulário.</p>
            @endif
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 border-t border-gray-200 pt-4">
          <a href="{{ route('empresa.dashboard') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Cancelar</a>
          <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">
            <i class="fa-solid fa-floppy-disk"></i>
            Salvar alterações
          </button>
        </div>
      </form>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    const toggleInputState = () => {
      const checkbox = document.getElementById('protocolo_assedio_moral_ativo');
      const emailInput = document.getElementById('protocolo_assedio_moral_email');

      if (!checkbox || !emailInput) {
        return;
      }

      const isChecked = checkbox.checked;
      emailInput.disabled = !isChecked;
      emailInput.required = isChecked;
    };

    document.getElementById('protocolo_assedio_moral_ativo')?.addEventListener('change', toggleInputState);
    toggleInputState();
  </script>
@endpush