@extends('forms.ti.base_form')

@php
    $filiaisRede = \App\Models\Location::where('is_recursive', 1)
        ->select('id', 'comment', 'cnpj', 'address', 'building', 'postcode', 'town', 'state', 'bairro',
                 'gerente', 'telefone', 'email', 'semanal', 'off_semanal')
        ->orderBy('comment')
        ->get();
@endphp

@section('title')
    <div class="sec-title">
        <div class="title">Maquininhas & POS</div>
        <h2>Chamado REDE <i class="bi bi-credit-card-2-front-fill ms-2" style="color:#0284c7;"></i></h2>
    </div>
@endsection

@section('form')
    <style>
        #contact-form .form-control[readonly] {
            background: #f1f5f9;
            cursor: not-allowed;
            opacity: .75;
            color: #64748b;
        }
    </style>

    <form action="{{ route('suppliers_post') }}" method="post" id="contact-form" enctype="multipart/form-data">
        @csrf

        {{-- ─── Filial ─── --}}
        <div class="row align-items-end">
            <div class="col-12">
                <p class="section-heading">Selecione a filial</p>
            </div>
            <div class="form-group col-md-6 col-12">
                <label for="rede-filial-pub" class="col-form-label">
                    Filial <span class="required-mark">*</span>
                </label>
                <select id="rede-filial-pub" name="filial" class="form-control" required>
                    <option value="">— Selecione a filial —</option>
                    @foreach ($filiaisRede as $f)
                        <option value="{{ $f->id }}" {{ old('filial') == $f->id ? 'selected' : '' }}>{{ $f->comment }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 col-12 mb-3">
                <p class="mb-0" style="font-size:12px;color:var(--form-text-muted);line-height:1.5;">
                    <i class="bi bi-magic me-1" style="color:var(--form-accent);"></i>
                    Os dados do estabelecimento e responsável são preenchidos automaticamente ao selecionar a filial.
                </p>
            </div>
        </div>

        <div class="col-12"><hr class="divider-modern"></div>

        {{-- ─── Solicitação ─── --}}
        <div class="row">
            <div class="col-12">
                <p class="section-heading">Solicitação</p>
            </div>

            {{-- Tipo --}}
            <div class="form-group col-12 mt-2">
                <label class="col-form-label">Tipo de solicitação <span class="required-mark">*</span></label>
                <div class="d-flex flex-wrap mt-1" style="gap:.6rem;">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="tipo_solicitacao"
                            id="tipo_instalacao" value="Instalação" required
                            {{ old('tipo_solicitacao') == 'Instalação' ? 'checked' : '' }}>
                        <label class="form-check-label" for="tipo_instalacao">Instalação</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="tipo_solicitacao"
                            id="tipo_troca" value="Troca"
                            {{ old('tipo_solicitacao') == 'Troca' ? 'checked' : '' }}>
                        <label class="form-check-label" for="tipo_troca">Troca</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="tipo_solicitacao"
                            id="tipo_desinstalacao" value="Desinstalação"
                            {{ old('tipo_solicitacao') == 'Desinstalação' ? 'checked' : '' }}>
                        <label class="form-check-label" for="tipo_desinstalacao">Desinstalação</label>
                    </div>
                </div>
            </div>

            {{-- Motivo da troca (condicional) --}}
            <div class="form-group col-12" id="campo_motivo_troca"
                style="display:{{ old('tipo_solicitacao') == 'Troca' ? 'block' : 'none' }};">
                <label for="motivo_troca" class="col-form-label">
                    Motivo da troca <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="motivo_troca" id="motivo_troca"
                    placeholder="Descreva o motivo da troca"
                    value="{{ old('motivo_troca') }}"
                    {{ old('tipo_solicitacao') == 'Troca' ? 'required' : '' }}>
            </div>

            {{-- Tecnologia + Quantidade --}}
            <div class="form-group col-md-8 col-sm-12 col-xs-12 mt-2">
                <label for="tecnologia" class="col-form-label">
                    Tipo de Tecnologia <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="tecnologia" id="tecnologia" required
                    placeholder="Ex: POS, TEF, Smart POS"
                    value="{{ old('tecnologia') }}">
            </div>

            <div class="form-group col-md-4 col-sm-6 col-xs-12 mt-2">
                <label for="quantidade" class="col-form-label">
                    Quantidade <span class="required-mark">*</span>
                </label>
                <select class="form-control" name="quantidade" id="quantidade" required>
                    <option value="">Selecione…</option>
                    @for ($i = 1; $i <= 10; $i++)
                        <option value="{{ $i }}" {{ old('quantidade') == $i ? 'selected' : '' }}>{{ $i }}</option>
                    @endfor
                    <option value="10+" {{ old('quantidade') == '10+' ? 'selected' : '' }}>10+</option>
                </select>
            </div>

            {{-- Terminal --}}
            <div class="form-group col-12 mt-2">
                <label for="terminal" class="col-form-label">Identificação do(s) terminal(s)</label>
                <input type="text" class="form-control" name="terminal" id="terminal"
                    placeholder="Números de série ou identificadores (opcional)"
                    value="{{ old('terminal') }}">
            </div>
        </div>

        <div class="col-12"><hr class="divider-modern"></div>

        {{-- ─── Estabelecimento (auto) ─── --}}
        <div class="row">
            <div class="col-12 d-flex align-items-center">
                <p class="section-heading mb-0 mr-2">Estabelecimento</p>
            </div>

            <div class="form-group col-12 mt-2">
                <label for="rede-estab-pub" class="col-form-label">
                    CNPJ <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="estabelecimento" id="rede-estab-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('estabelecimento') }}" readonly>
            </div>

            <div class="form-group col-12">
                <label for="rede-endereco-pub" class="col-form-label">
                    Endereço e CEP <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="endereco" id="rede-endereco-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('endereco') }}" readonly>
            </div>
        </div>

        <div class="col-12"><hr class="divider-modern"></div>

        {{-- ─── Responsável (auto) ─── --}}
        <div class="row">
            <div class="col-12">
                <p class="section-heading">Responsável pelo estabelecimento</p>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <label for="rede-gerente-pub" class="col-form-label">
                    Nome <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="responsavel_nome" id="rede-gerente-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('responsavel_nome') }}" readonly>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <label for="rede-telefone-pub" class="col-form-label">
                    Telefone <span class="required-mark">*</span>
                </label>
                <input type="tel" class="form-control" name="responsavel_telefone" id="rede-telefone-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('responsavel_telefone') }}" readonly>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <label for="rede-email-pub" class="col-form-label">
                    E-mail <span class="required-mark">*</span>
                </label>
                <input type="email" class="form-control" name="responsavel_email" id="rede-email-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('responsavel_email') }}" readonly>
            </div>

            <div class="form-group col-md-6 col-sm-6 col-xs-12">
                <label for="rede-horarios-pub" class="col-form-label">
                    Horários disponíveis <span class="required-mark">*</span>
                </label>
                <input type="text" class="form-control" name="horarios" id="rede-horarios-pub" required
                    placeholder="Preenchido ao selecionar a filial"
                    value="{{ old('horarios') }}" readonly>
            </div>
        </div>

        <div class="col-12"><hr class="divider-modern"></div>

        {{-- ─── Observações ─── --}}
        <div class="row">
            <div class="col-12">
                <p class="section-heading">Observações</p>
            </div>
            <div class="form-group col-12">
                <label for="msg" class="col-form-label">Informações adicionais</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="Informações adicionais para a Rede (opcional)…"></div>
                    <input type="hidden" name="msg" id="msg">
                </div>
            </div>
        </div>

        <div class="form-group col-12 mt-2">
            <button type="submit" class="theme-btn btn-style-one">
                <i class="bi bi-send me-1"></i> Enviar solicitação para Rede
            </button>
        </div>

        <input type="hidden" name="suppliers_id" value="9">
        <input type="hidden" name="user_recipient" value="56">
        <input type="hidden" name="tipo_chamado" value="1">
        <input type="hidden" name="categoria" value="9">
        <input type="hidden" name="setor" value="1">
        {{-- `filial` vem do select "Filial" acima (#rede-filial-pub) — o chamado
             fica com a location real da filial, não mais fixo na Matriz. --}}
        <input type="hidden" id="form_type" name="form_type" value="supplier_rede">
    </form>

    <script>
    (function () {
        var filialMap = @json($filiaisRede->keyBy('id'));

        var sel = document.getElementById('rede-filial-pub');

        var fields = {
            estab:    document.getElementById('rede-estab-pub'),
            endereco: document.getElementById('rede-endereco-pub'),
            gerente:  document.getElementById('rede-gerente-pub'),
            telefone: document.getElementById('rede-telefone-pub'),
            email:    document.getElementById('rede-email-pub'),
            horarios: document.getElementById('rede-horarios-pub'),
        };

        function fill(el, val) {
            if (!el) return;
            el.value = val || '';
            el.style.borderColor = val ? 'var(--form-border-focus)' : '';
            el.style.boxShadow   = val ? '0 0 0 3px var(--form-shadow-focus)' : '';
        }

        function buildEstab(f) {
            return f.cnpj || '';
        }

        function buildEndereco(f) {
            var p = [];
            if (f.address)  p.push(f.address + (f.building ? ', ' + f.building : ''));
            else if (f.building) p.push(f.building);
            if (f.bairro)   p.push(f.bairro);
            if (f.town)     p.push(f.town + (f.state ? '/' + f.state : ''));
            if (f.postcode) p.push('CEP ' + f.postcode);
            return p.join(', ');
        }

        function buildHorarios(f) {
            var parts = [];
            if (f.semanal)     parts.push('Seg a Sex: ' + f.semanal);
            if (f.off_semanal) parts.push('Sáb: ' + f.off_semanal);
            return parts.join(' / ');
        }

        function applyFilial(id) {
            var f = id ? filialMap[id] : null;
            fill(fields.estab,    f ? buildEstab(f)    : '');
            fill(fields.endereco, f ? buildEndereco(f) : '');
            fill(fields.gerente,  f ? f.gerente  || '' : '');
            fill(fields.telefone, f ? f.telefone || '' : '');
            fill(fields.email,    f ? f.email    || '' : '');
            fill(fields.horarios, f ? buildHorarios(f) : '');
        }

        sel && sel.addEventListener('change', function () { applyFilial(this.value); });

        // Motivo da troca — exibe/oculta dinamicamente
        document.querySelectorAll('input[name="tipo_solicitacao"]').forEach(function (r) {
            r.addEventListener('change', function () {
                var campo = document.getElementById('campo_motivo_troca');
                var input = document.getElementById('motivo_troca');
                var isTroca = this.value === 'Troca';
                campo.style.display = isTroca ? 'block' : 'none';
                input.required      = isTroca;
                if (!isTroca) input.value = '';
            });
        });
    })();
    </script>
@endsection

@section('info')
    <li>
        <i class="bi bi-geo-alt-fill"></i>
        <p>Selecione a filial e os dados do estabelecimento e responsável serão preenchidos automaticamente.</p>
    </li>
    <li>
        <i class="bi bi-arrow-right-circle-fill"></i>
        <p>A solicitação é enviada diretamente para a <strong>REDE</strong>.</p>
    </li>
    <li>
        <i class="bi bi-arrow-repeat"></i>
        <p>Em caso de <strong>Troca</strong>, o campo de motivo aparece automaticamente.</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