@extends('forms.logistica.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">Dev</div>
        <h2>Chamado <i class="bi bi-code-slash ms-2" style="color:#4d7cf5;"></i></h2>
    </div>
@endsection

@section('form')
    <form enctype="multipart/form-data" action="{{ route('dev.form.store') }}" method="post" id="contact-form">
        @csrf
        <input type="hidden" name="form_type" value="dev_chamado">
        <input type="hidden" name="user_recipient" value="59">
        <input type="hidden" name="tipo_chamado" id="tipo_chamado" value="{{ old('tipo_chamado', 1) }}">
        <input type="hidden" name="gitea_repo" id="gitea_repo" value="{{ old('gitea_repo') }}">

        <div class="row">

            <div class="form-group col-md-5 col-sm-6 col-xs-12 mt-3">
                <label for="filial" class="col-form-label">Filial <span class="required-mark">*</span></label>
                <select class="form-control" id="filial" name="filial" required>
                    <option value="">Selecione a filial…</option>
                    @foreach ($filiais as $f)
                        <option value="{{ $f->id }}" {{ old('filial') == $f->id ? 'selected' : '' }}>
                            {{ $f->comment ?: $f->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-5 offset-md-2 col-sm-6 col-xs-12 mt-3">
                <label for="projeto" class="col-form-label">Projeto <span class="required-mark">*</span></label>
                @php $selectedProjeto = old('projeto', request('projeto', '')); @endphp
                <select class="form-control" id="projeto" name="projeto" required>
                    <option value="">Selecione o projeto…</option>
                    @foreach ($projetos as $projeto)
                        <option value="{{ $projeto->slug }}" data-repo="{{ $projeto->gitea_repo }}" {{ $selectedProjeto === $projeto->slug ? 'selected' : '' }}>{{ $projeto->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-5 col-sm-6 col-xs-12 mt-3">
                <label for="categoria" class="col-form-label">Categoria <span class="required-mark">*</span></label>
                @php $selectedCat = old('categoria', request('categoria', '')); @endphp
                <select class="form-control" id="categoria" name="categoria" required>
                    <option value="">Selecione a categoria…</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}" {{ (string)$selectedCat === (string)$cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-12 mt-3">
                <label for="titulo" class="col-form-label">Título <span class="required-mark">*</span></label>
                <input type="text" class="form-control" id="titulo" name="titulo"
                    placeholder="Descreva brevemente o assunto…" value="{{ old('titulo') }}" required maxlength="255">
            </div>

            <div class="form-group col-12 mt-3">
                <label for="msg" class="col-form-label">Descrição <span class="required-mark">*</span></label>
                <div class="rt-wrap">
                    <div class="rt-toolbar">
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'b')"
                            title="Negrito"><b>B</b></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'i')" title="Itálico"
                            style="font-style:italic">I</button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'u')"
                            title="Sublinhado"><u>U</u></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'s')"
                            title="Riscado"><s>S</s></button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'code')" title="Código"
                            style="font-family:monospace;font-size:.65rem">&lt;/&gt;</button>
                        <div class="rt-sep"></div>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ul')"
                            title="Lista com marcadores"><i class="bi bi-list-ul"></i></button>
                        <button type="button" class="rt-btn" onmousedown="rtFormat(event,'ol')"
                            title="Lista numerada"><i class="bi bi-list-ol"></i></button>
                    </div>
                    <div contenteditable="true" data-name="msg" data-placeholder="Descreva detalhadamente o chamado…"></div>
                    <input type="hidden" name="msg" id="msg" required>
                </div>
            </div>

            <div class="form-group col-12 mt-2">
                <label class="col-form-label">Anexos</label>
                <div class="file-upload-wrapper">
                    <div class="file-input-row">
                        <i class="bi bi-paperclip"></i>
                        <input type="file" id="imagem" name="imagem[]" multiple>
                    </div>
                    <div class="file-name-display" aria-live="polite"></div>
                    <small>Formatos: JPG, PNG, PDF, DOCX (máx. 10 MB por arquivo)</small>
                </div>
            </div>

            <div class="form-group col-12 mt-2">
                <button type="submit" class="theme-btn btn-style-one">
                    <i class="bi bi-send"></i> Enviar chamado
                </button>
            </div>

        </div>
        <input type="hidden" name="setor" id="setor" required value="1">

    </form>
@endsection

@section('info')
    <li>
        <i class="bi bi-check2-circle"></i>
        <p>Campos com <span style="color:#ef4444; font-weight:700;">*</span> são obrigatórios.</p>
    </li>
    <li id="info-gitea" style="display:none;">
        <i class="bi bi-git"></i>
        <p>Uma issue será criada automaticamente no repositório do projeto selecionado.</p>
    </li>
    <li id="info-novo" style="display:none;">
        <i class="bi bi-ticket"></i>
        <p>Projeto novo: o chamado será registrado normalmente, sem integração com o Gitea.</p>
    </li>
    <li>
        <i class="bi bi-clock-history"></i>
        <p>O time dev receberá uma notificação assim que o chamado for enviado.</p>
    </li>
@endsection

@push('scripts')
    <script>
        (function() {
            const projeto    = document.getElementById('projeto');
            const repoInput  = document.getElementById('gitea_repo');
            const infoGitea  = document.getElementById('info-gitea');
            const infoNovo   = document.getElementById('info-novo');

            function syncRepo() {
                const opt  = projeto.options[projeto.selectedIndex];
                const repo = opt ? (opt.dataset.repo || '') : '';
                repoInput.value = repo;

                const isNovo = opt && opt.value === 'Novo';
                const hasRepo = repo !== '';

                if (infoGitea) infoGitea.style.display = hasRepo  ? '' : 'none';
                if (infoNovo)  infoNovo.style.display  = isNovo   ? '' : 'none';
            }

            projeto.addEventListener('change', syncRepo);
            syncRepo();

            // categoria → tipo_chamado automático
            const catToType = { 40: 3, 41: 21, 42: 1, 43: 13, 44: 1 };
            const categoria  = document.getElementById('categoria');
            const tipoInput  = document.getElementById('tipo_chamado');

            function syncTipo() {
                const id = parseInt(categoria.value, 10);
                tipoInput.value = catToType[id] ?? 1;
            }

            categoria.addEventListener('change', syncTipo);
            syncTipo();
        })();
    </script>
@endpush