@extends('forms.ti.base_form')

@section('title')
    <div class="sec-title">
        <div class="title">
            <i class="bi bi-camera-video-fill" style="font-size:2.5rem;color:#4a6077;"></i>
        </div>
        <h2>Chamado Krhonos <i class="bi bi-shield-check ms-2" style="color:#4f7942;"></i></h2>
    </div>
@endsection

@section('form')
    <form action="{{ route('suppliers_post') }}" method="post" id="contact-form" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-12">
                <p class="section-heading">Informações do Chamado</p>
            </div>

            <div class="form-group col-md-4 col-sm-6 col-xs-12 mt-2">
                <label for="filial" class="col-form-label">Filial <span class="required-mark">*</span></label>
                <select class="form-control" name="filial" id="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-2">
                <label for="setor" class="col-form-label">Setor <span class="required-mark">*</span></label>
                <select class="form-control" name="setor" id="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-4 col-sm-6 col-xs-12 mt-2">
                <label for="tipo_equipamento" class="col-form-label">Tipo de Equipamento <span class="required-mark">*</span></label>
                <select class="form-control" name="tipo_equipamento" id="tipo_equipamento" required>
                    <option value="">Selecione…</option>
                    <option value="Câmera" {{ old('tipo_equipamento') == 'Câmera' ? 'selected' : '' }}>Câmera</option>
                    <option value="DVR" {{ old('tipo_equipamento') == 'DVR' ? 'selected' : '' }}>DVR</option>
                    <option value="Gravador" {{ old('tipo_equipamento') == 'Gravador' ? 'selected' : '' }}>Gravador</option>
                    <option value="Outro" {{ old('tipo_equipamento') == 'Outro' ? 'selected' : '' }}>Outro</option>
                </select>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12 mt-2">
                <label for="contato" class="col-form-label">Contato no local <span class="required-mark">*</span></label>
                <input type="text" name="contato" id="contato" required
                    placeholder="Nome e telefone do responsável"
                    value="{{ old('contato') }}">
            </div>

            <div class="form-group col-12 mt-2">
                <label for="msg" class="col-form-label">Descrição do problema <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 o problema com o equipamento…" required></div>
                    <input type="hidden" name="msg" id="msg">
                </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>
                    <small>Formatos: JPG, PNG, PDF, DOCX (máx. 10 MB por arquivo)</small>
                </div>
            </div>

            <div class="col-12"><hr class="divider-modern"></div>
            <div class="col-12">
                <p class="section-heading">Organização</p>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <label for="time_to_resolve" class="col-form-label">Data prevista</label>
                <input type="date" class="form-control" name="time_to_resolve"
                    value="{{ old('time_to_resolve') }}">
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <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">
                <button type="submit" class="theme-btn btn-style-one">
                    <i class="bi bi-send"></i> Enviar chamado
                </button>
            </div>

            <input type="hidden" id="tipo_chamado" name="tipo_chamado" value="1">
            <input type="hidden" id="suppliers_id" name="suppliers_id" value="10">
            <input type="hidden" id="user_recipient" name="user_recipient" value="56">
            <input type="hidden" id="form_type" name="form_type" value="supplier_krhonos">
        </div>
    </form>
@endsection

@section('info')
    <li>
        <i class="bi bi-arrow-right-circle-fill"></i>
        <p>Chamados enviados diretamente para a equipe Krhonos.</p>
    </li>
    <li>
        <i class="bi bi-camera-video"></i>
        <p>Utilizado para câmeras, DVRs, gravadores e equipamentos de CFTV.</p>
    </li>
    <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>
@endsection