@extends('layouts.admin.theme')
@section('title', env('APP_NAME') . ' :: Abrir Chamado TI')

@push('after-scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const setorSelect = document.getElementById('setor_id');
            const assuntoSelect = document.getElementById('assunto_id');
            const subSelect = document.getElementById('subassunto_id');
            const urlAssuntos = setorSelect.dataset.urlAssuntos;
            const urlSubassuntos = assuntoSelect.dataset.urlSubassuntos;

            (function() {
                const input = document.getElementById('eq-busca-portal');
                const hidden = document.getElementById('eq-id-portal');
                const sugest = document.getElementById('eq-sugest-portal');
                if (!input) return;
                const url = input.dataset.url;
                let timer;
                input.addEventListener('input', function() {
                    clearTimeout(timer);
                    hidden.value = '';
                    const q = input.value.trim();
                    if (q.length < 2) {
                        sugest.innerHTML = '';
                        sugest.classList.add('d-none');
                        return;
                    }
                    timer = setTimeout(() => {
                        fetch(url + '?q=' + encodeURIComponent(q))
                            .then(r => r.json())
                            .then(data => {
                                sugest.innerHTML = '';
                                if (!data.length) {
                                    sugest.classList.add('d-none');
                                    return;
                                }
                                data.forEach(eq => {
                                    const btn = document.createElement('button');
                                    btn.type = 'button';
                                    btn.className =
                                        'list-group-item list-group-item-action small py-1 px-2';
                                    btn.textContent = eq.label;
                                    btn.addEventListener('click', () => {
                                        input.value = eq.label;
                                        hidden.value = eq.id;
                                        sugest.innerHTML = '';
                                        sugest.classList.add('d-none');
                                    });
                                    sugest.appendChild(btn);
                                });
                                sugest.classList.remove('d-none');
                            });
                    }, 300);
                });
                document.addEventListener('click', function(e) {
                    if (!sugest.contains(e.target) && e.target !== input) {
                        sugest.classList.add('d-none');
                    }
                });
            }());

            function resetSelect(el, placeholder) {
                el.innerHTML = `<option value="">${placeholder}</option>`;
                el.disabled = true;
            }

            setorSelect.addEventListener('change', function() {
                resetSelect(assuntoSelect, '{{ __('Selecione o assunto...') }}');
                resetSelect(subSelect, '{{ __('Selecione o subassunto...') }}');

                if (!this.value) return;

                fetch(urlAssuntos.replace('__ID__', this.value))
                    .then(r => r.json())
                    .then(data => {
                        assuntoSelect.disabled = false;
                        data.forEach(a => {
                            const opt = document.createElement('option');
                            opt.value = a.id;
                            opt.textContent = a.nome;
                            assuntoSelect.appendChild(opt);
                        });
                    });
            });

            assuntoSelect.addEventListener('change', function() {
                resetSelect(subSelect, '{{ __('Selecione o subassunto (opcional)...') }}');

                if (!this.value) return;

                fetch(urlSubassuntos.replace('__ID__', this.value))
                    .then(r => r.json())
                    .then(data => {
                        subSelect.disabled = false;
                        data.forEach(s => {
                            const opt = document.createElement('option');
                            opt.value = s.id;
                            opt.textContent = s.nome;
                            subSelect.appendChild(opt);
                        });
                    });
            });
        });
    </script>
@endpush

@section('content')
    <div class="card shadow-sm border-0">

        @include('components.buttons._headLineButtonsBackAdd', [
            'headLine' => "<i class='fa-solid fa-plus-circle'></i> " . __('Abrir Chamado TI'),
            'routeBack' => 'admin.contaAngra.chamados.index',
            'routeBackParams' => [],
            'nameBack' => __('Meus Chamados'),
        ])

        <div class="card-body">

            @include('errors.messageFlash')

            <form action="{{ route('admin.contaAngra.chamadosTi.store') }}" method="POST" class="mt-3">
                @csrf

                <div class="row g-3">

                    <div class="col-12">
                        <label class="form-label fw-semibold" for="titulo">
                            {{ __('Título') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="titulo" name="titulo"
                            class="form-control @error('titulo') is-invalid @enderror"
                            placeholder="{{ __('Descreva brevemente o problema ou solicitação...') }}"
                            value="{{ old('titulo') }}" required autofocus>
                        @error('titulo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="setor_id">
                            {{ __('Setor') }} <span class="text-danger">*</span>
                        </label>
                        <select id="setor_id" name="setor_id" class="form-select @error('setor_id') is-invalid @enderror"
                            data-url-assuntos="{{ route('admin.demandas.ti.assuntos', ['setor' => '__ID__']) }}" required>
                            <option value="">{{ __('Selecione o setor...') }}</option>
                            @foreach ($setores as $setor)
                                <option value="{{ $setor->id }}" @selected(old('setor_id') == $setor->id)>
                                    {{ $setor->nome }}
                                </option>
                            @endforeach
                        </select>
                        @error('setor_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="assunto_id">
                            {{ __('Assunto') }} <span class="text-danger">*</span>
                        </label>
                        <select id="assunto_id" name="assunto_id"
                            class="form-select @error('assunto_id') is-invalid @enderror"
                            data-url-subassuntos="{{ route('admin.demandas.ti.subassuntos', ['assunto' => '__ID__']) }}"
                            disabled required>
                            <option value="">{{ __('Selecione o setor primeiro...') }}</option>
                        </select>
                        @error('assunto_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="subassunto_id">
                            {{ __('Subassunto') }}
                        </label>
                        <select id="subassunto_id" name="subassunto_id"
                            class="form-select @error('subassunto_id') is-invalid @enderror" disabled>
                            <option value="">{{ __('Selecione o assunto primeiro...') }}</option>
                        </select>
                        @error('subassunto_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label class="form-label fw-semibold" for="local">
                            {{ __('Local') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="local" name="local"
                            class="form-control @error('local') is-invalid @enderror"
                            placeholder="{{ __('Onde fica o setor / equipamento (ex: sala 12, 2º andar, prédio B)') }}"
                            value="{{ old('local') }}" maxlength="255" required>
                        @error('local')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <label class="form-label fw-semibold" for="descricao">
                            {{ __('Descrição detalhada') }}
                        </label>
                        <textarea id="descricao" name="descricao" rows="5" class="form-control @error('descricao') is-invalid @enderror"
                            placeholder="{{ __('Descreva o problema com mais detalhes...') }}">{{ old('descricao') }}</textarea>
                        @error('descricao')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12 col-md-6">
                        <label class="form-label fw-semibold" for="eq-busca-portal">
                            {{ __('Equipamento com problema') }}
                            <small class="text-muted fw-normal">{{ __('(opcional)') }}</small>
                        </label>
                        <div class="position-relative">
                            <input type="text" id="eq-busca-portal"
                                class="form-control @error('equipamento_id') is-invalid @enderror"
                                placeholder="{{ __('Digite o patrimônio ou etiqueta TI...') }}" autocomplete="off"
                                data-url="{{ route('admin.ativosTi.equipamentos.buscar') }}"
                                value="{{ old('eq_label', '') }}">
                            <input type="hidden" name="equipamento_id" id="eq-id-portal"
                                value="{{ old('equipamento_id', '') }}">
                            <div id="eq-sugest-portal" class="list-group position-absolute w-100 shadow-sm d-none"
                                style="z-index:1000">
                            </div>
                        </div>
                        @error('equipamento_id')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small
                            class="text-muted">{{ __('Informe o número de patrimônio ou etiqueta do equipamento afetado.') }}</small>
                    </div>

                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa-solid fa-paper-plane me-1"></i>{{ __('Abrir Chamado') }}
                        </button>
                        <a href="{{ route('admin.contaAngra.chamados.index') }}" class="btn btn-outline-secondary">
                            {{ __('Cancelar') }}
                        </a>
                    </div>

                </div>
            </form>

        </div>
    </div>
@endsection