@props([
    'linhas',
    'relatoMax' => 2000,
    'usuarioLogado' => null,
])

<form action="{{ route('mobiangra.fale_conosco.store') }}"
      method="post"
      enctype="multipart/form-data"
      class="mobiangra-fale-conosco-form"
      id="mobiangra-fale-conosco-form"
      novalidate>
    @csrf

    @if ($usuarioLogado)
        <div class="alert alert-light border mb-4" role="status">
            <p class="mb-1 fw-semibold">{{ __('Manifestação vinculada à sua Conta Angra') }}</p>
            <p class="mb-0 small text-muted">
                {{ __('Solicitante') }}: {{ $usuarioLogado->name }} -
                {{ $usuarioLogado->email }}
            </p>
        </div>
    @endif

    <fieldset class="mb-4">
        <legend class="h6 fw-bold text-primary mb-3">{{ __('Descrição da ocorrência') }}</legend>

        <div class="row g-3">
            <div class="col-md-6">
                <label for="linha" class="form-label">{{ __('Linha') }}</label>
                <input type="text"
                       name="linha"
                       id="linha"
                       class="form-control @error('linha') is-invalid @enderror"
                       value="{{ old('linha') }}"
                       maxlength="120"
                       list="mobiangra-linhas-datalist"
                       autocomplete="off"
                       placeholder="{{ __('Nº ou nome da linha') }}">
                <datalist id="mobiangra-linhas-datalist">
                    @foreach ($linhas as $linha)
                        <option value="{{ $linha->codigo }} - {{ $linha->nome }}"></option>
                    @endforeach
                </datalist>
                @error('linha')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label for="sentido" class="form-label">{{ __('Sentido') }}</label>
                <select name="sentido"
                        id="sentido"
                        class="form-select @error('sentido') is-invalid @enderror">
                    <option value="">{{ __('Selecione') }}</option>
                    <option value="ida" @selected(old('sentido') === 'ida')>{{ __('Ida') }}</option>
                    <option value="volta" @selected(old('sentido') === 'volta')>{{ __('Volta') }}</option>
                    <option value="nao_informado" @selected(old('sentido') === 'nao_informado')>{{ __('Não informado') }}</option>
                </select>
                @error('sentido')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="horario" class="form-label">{{ __('Horário') }}</label>
                <input type="text"
                       name="horario"
                       id="horario"
                       class="form-control @error('horario') is-invalid @enderror"
                       value="{{ old('horario') }}"
                       maxlength="40"
                       placeholder="{{ __('Ex.: 08:30') }}">
                @error('horario')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-8">
                <label for="local" class="form-label">{{ __('Local') }}</label>
                <input type="text"
                       name="local"
                       id="local"
                       class="form-control @error('local') is-invalid @enderror"
                       value="{{ old('local') }}"
                       maxlength="255"
                       placeholder="{{ __('Ponto, bairro ou referência') }}">
                @error('local')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-6">
                <label for="numero_veiculo" class="form-label">{{ __('Número do veículo') }}</label>
                <input type="text"
                       name="numero_veiculo"
                       id="numero_veiculo"
                       class="form-control @error('numero_veiculo') is-invalid @enderror"
                       value="{{ old('numero_veiculo') }}"
                       maxlength="40"
                       inputmode="numeric">
                @error('numero_veiculo')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="mt-3">
            <label for="relato" class="form-label fw-semibold">
                {{ __('Relato da ocorrência') }} <span class="text-danger">*</span>
            </label>
            <textarea name="relato"
                      id="relato"
                      rows="6"
                      class="form-control @error('relato') is-invalid @enderror"
                      maxlength="{{ $relatoMax }}"
                      required
                      aria-describedby="relato-contador">{{ old('relato') }}</textarea>
            <div class="d-flex justify-content-between align-items-center mt-1">
                <div id="relato-contador" class="form-text" aria-live="polite">
                    {{ __('Caracteres restantes:') }} <span id="relato-restantes">{{ $relatoMax - strlen((string) old('relato')) }}</span>
                </div>
                <span class="form-text">{{ __('Máximo: :max caracteres', ['max' => $relatoMax]) }}</span>
            </div>
            @error('relato')
                <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>

        <div class="mt-3">
            <label for="imagem" class="form-label">{{ __('Imagem (opcional)') }}</label>
            <input type="file"
                   name="imagem"
                   id="imagem"
                   class="form-control @error('imagem') is-invalid @enderror"
                   accept="image/jpeg,image/png,image/webp">
            @error('imagem')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </fieldset>

    <div class="mb-4">
        <div class="form-check">
            <input class="form-check-input @error('lgpd_consentimento') is-invalid @enderror"
                   type="checkbox"
                   name="lgpd_consentimento"
                   id="lgpd_consentimento"
                   value="1"
                   {{ old('lgpd_consentimento') ? 'checked' : '' }}
                   required>
            <label class="form-check-label" for="lgpd_consentimento">
                {{ __('Declaro que li e concordo com o tratamento dos meus dados conforme a LGPD, para fins de análise desta manifestação.') }}
                <span class="text-danger">*</span>
            </label>
            @error('lgpd_consentimento')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    @if (config('recaptcha.enabled'))
        <div class="mb-3">
            <div class="g-recaptcha"
                 data-sitekey="{{ config('recaptcha.site_key') }}"
                 data-callback="mobiangraRecaptchaCallback"></div>
            @error('g-recaptcha-response')
                <div class="text-danger small mt-1">{{ $message }}</div>
            @enderror
        </div>
    @endif

    <div class="d-grid d-md-flex gap-2">
        <button type="submit"
                class="btn btn-primary btn-lg"
                id="btn-enviar-manifestacao"
                @if (config('recaptcha.enabled')) disabled @endif>
            <i class="fa-solid fa-paper-plane me-1" aria-hidden="true"></i>
            {{ __('Enviar manifestação') }}
        </button>
    </div>
</form>