@extends('forms.ti.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">Suporte & TI</div>
        <h2>Chamado <i class="bi bi-ticket-perforated ms-2" style="color:#0284c7;"></i></h2>
    </div>
@endsection

@section('form')
    <form enctype="multipart/form-data" action="{{ route('chamados.store') }}" method="post" id="contact-form">
        @csrf
        <div class="row">

            <div class="form-group col-md-4 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'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-4 col-sm-6 col-xs-12 mt-3">
                <label for="categoria" class="col-form-label">Categoria <span class="required-mark">*</span></label>
                <select class="form-control categ" id="categoria" name="categoria" required>
                    <option value="">Selecione a categoria…</option>
                    @foreach ($categories as $c)
                        <option value="{{ $c['id'] }}" {{ old('categoria') == $c['id'] ? 'selected' : '' }}>
                            {{ $c['name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-4 col-sm-6 col-xs-12 mt-3">
                <label for="tipo" class="col-form-label">Tipo <span class="required-mark">*</span></label>
                <select class="form-control" id="tipo" name="tipo_chamado" required>
                    <option value="">Selecione o tipo…</option>
                    @foreach ($types as $c)
                        <option value="{{ $c['id'] }}" {{ old('tipo_chamado') == $c['id'] ? 'selected' : '' }}>
                            {{ $c['name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label for="setor" class="col-form-label">Setor <span class="required-mark">*</span></label>
                <select class="form-control" id="setor" name="setor" required>
                    <option value="">Selecione o setor…</option>
                    @foreach ($setores as $c)
                        <option value="{{ $c['id'] }}" {{ old('setor') == $c['id'] ? 'selected' : '' }}>
                            {{ $c['name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-3">
                <label class="col-form-label">Prioridade <span class="required-mark">*</span></label>
                <div class="priority-group">
                    <input class="priority-radio" type="radio" name="prioridade" id="prio_baixa" value="2"
                        {{ old('prioridade', '') == '2' ? 'checked' : '' }} required>
                    <label class="priority-pill low" for="prio_baixa">
                        <i class="bi bi-circle-fill" style="font-size:8px;"></i> Baixa
                    </label>

                    <input class="priority-radio" type="radio" name="prioridade" id="prio_media" value="3"
                        {{ old('prioridade', '') == '3' ? 'checked' : '' }}>
                    <label class="priority-pill medium" for="prio_media">
                        <i class="bi bi-circle-fill" style="font-size:8px;"></i> Média
                    </label>

                    <input class="priority-radio" type="radio" name="prioridade" id="prio_alta" value="4"
                        {{ old('prioridade', '') == '4' ? 'checked' : '' }}>
                    <label class="priority-pill high" for="prio_alta">
                        <i class="bi bi-circle-fill" style="font-size:8px;"></i> Alta
                    </label>
                </div>
            </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 sua solicitação com o máximo de detalhes…"></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" id="user_recipient" name="user_recipient" value="56">
        <input type="hidden" id="form_type" name="form_type" value="generic">
    </form>
@endsection

@section('info')
    <li>
        <i class="bi bi-exclamation-triangle-fill"></i>
        <p>Este formulário <strong>NÃO</strong> é para solicitações relacionadas ao Core Business.</p>
    </li>
    <li>
        <i class="bi bi-check2-circle"></i>
        <p>Campos marcados com <span style="color:#ef4444; font-weight:700;">*</span> são obrigatórios.</p>
    </li>
    <li>
        <i class="bi bi-card-text"></i>
        <p>Descreva o máximo de detalhes sobre a sua solicitação.</p>
    </li>
    <li>
        <i class="bi bi-telephone"></i>
        <p>Em caso de urgência, ligue para o suporte diretamente.</p>
    </li>
@endsection