@extends('adminlte::page')

@section('title','Novo Motivo')

@section('content_header')
    <h1>Novo Funil de Processos</h1>
@endsection

@section('content')

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    <h5> <i class="icon fas fa-ban"></i>Ocorreu um erro</h5>
                    @foreach ($errors->all() as $error)
                        <li>{{$error}}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="card">
            <div class="card-body">
                <form action="{{route('cadastroFunil.store')}}" method="POST" class="form-horizontal">
                    @csrf
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Nome</label>
                        <div class="col-sm-10">
                            <input type="text" name="funil_nome" class="form-control @error('funil_nome') is-invalid @enderror" value="{{old('funil_nome')}}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Tipo</label>
                        <div class="col-sm-10">
                            <select class="col-sm-10 form-control" name="vd_tipo" id="vd_tipo">
                                <option value="1" {{ old('vd_tipo') == 1 ? 'selected' : '' }}>Particular</option>
                                <option value="2" {{ old('vd_tipo') == 2 ? 'selected' : '' }}>Convênio</option>
                                {{-- <option value="3" {{ old('vd_tipo') == 3 ? 'selected' : '' }}>Particular/Convênio</option> --}}
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label">Status</label>
                        <div class="col-sm-10">
                            <select class="col-sm-12 form-control" name="vd_status" id="vd_status" {{ old('vd_tipo') ? '' : 'disabled' }}>
                                <option value="">Selecione o Tipo primeiro</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label  class="col-sm-2 col-form-label">TAG Funil</label>
                        <div class="col-sm-10">
                            <select class="col-sm-10 form-control" name="funil_tag" id="funil_tag">
                                <option value="PARTICULAR-LEADS-RECEBIDOS">Particular - Recebimento Lead</option>
                                <option value="PARTICULAR-EM-NEGOCIACAO">Particular - Em negociação</option>
                                <option value="PARTICULAR-VENDIDO">Particular - Vendido</option>
                                <option value="PARTICULAR-PERDIDO">Particular - Perdido</option>
                                <option value="PARTICULAR-PRE-CIRURGIA">Particular - Pré Cirurgia</option>
                                <option value="PARTICULAR-CIRURGIA">Particular - Cirurgia</option>
                                <option value="PARTICULAR-POS-CIRURGIA">Particular - Pós Cirurgia</option>
                                <option value="PARTICULAR-FINALIZADO">Particular - Finalizado</option>
                                <option value="CONVENIO-RECEBIMENTO-LEAD">Convênio - Recebimento de Lead</option>
                                <option value="CONVENIO-EM-ANALISE">Convênio - Em análise</option>
                                <option value="CONVENIO-NAO-AUTORIZADO">Convênio - Não Autorizado</option>
                                <option value="CONVENIO-TRANSFORMADO-PARTICULAR">Convênio - Transformado em Particular</option>
                                <option value="CONVENIO-AUTORIZADO">Convênio - Autorizado</option>
                                <option value="CONVENIO-VENDIDO">Convênio - Vendido</option>
                                <option value="CONVENIO-PERDIDO">Convênio - Perdido</option>
                                <option value="CONVENIO-PRE-CIRURGIA">Convênio - Pré Cirurgia</option>
                                <option value="CONVENIO-CIRURGIA">Convênio - Cirurgia</option>
                                <option value="CONVENIO-POS-CIRURGIA">Convênio - Pós Cururgia</option>
                                <option value="CONVENIO-FINALIZADO">Convênio - Finalizado</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label  class="col-sm-2 col-form-label"></label>
                        <div class="col-sm-10">
                            <input type="submit" class="btn btn-success" value="Cadastrar">
                        </div>
                    </div>
                </form>
            </div>
        </div>
@endsection
@push('js')
    <script>
        (function() {
        const vdTipo = document.getElementById('vd_tipo');
        const vdStatus = document.getElementById('vd_status');
        const oldStatus = "{{ old('vd_status') }}";

        const particular = [
            {v: 10, t: 'Leads Recebidos'},
            {v: 1,  t: 'Em negociação'},
            {v: 2,  t: 'Vendido'},
            {v: 3,  t: 'Perdido'},
            {v: 4,  t: 'Pré Cirurgia'},
            {v: 5,  t: 'Cirurgia'},
            {v: 6,  t: 'Pós Cirurgia'},
            {v: 7,  t: 'Finalizado'},
            {v: 8,  t: 'Inativado'},
        ];

        const convenio = [
            {v: 9,  t: 'Recebimento de Lead'},
            {v: 10, t: 'Em análise'},
            {v: 11, t: 'Não Autorizado'},
            {v: 12, t: 'Transformado em Particular'},
            {v: 13, t: 'Autorizado'},
            {v: 14, t: 'Vendido'},
            {v: 15, t: 'Perdido'},
            {v: 16, t: 'Pré Cirurgia'},
            {v: 17, t: 'Cirurgia'},
            {v: 18, t: 'Pós Cirurgia'},
            {v: 19, t: 'Finalizado'},
            {v: 20, t: 'Inativado'},
        ];

        function setOptions(tipo) {
            vdStatus.innerHTML = '';
            vdStatus.disabled = false;

            // helper para criar option
            const addOpt = (val, text) => {
            const o = document.createElement('option');
            o.value = val;
            o.textContent = text;
            if (String(val) === String(oldStatus)) o.selected = true;
            vdStatus.appendChild(o);
            };

            if (tipo === '1') { // Particular
            addOpt('', 'Selecione...');
            particular.forEach(o => addOpt(o.v, o.t));
            } else if (tipo === '2') { // Convênio
            addOpt('', 'Selecione...');
            convenio.forEach(o => addOpt(o.v, o.t));
            } else if (tipo === '3') { // Ambos: usa optgroup
            vdStatus.appendChild(new Option('Selecione...', ''));
            const grp1 = document.createElement('optgroup');
            grp1.label = 'Particular';
            particular.forEach(o => {
                const opt = new Option(o.t, o.v, false, String(o.v) === String(oldStatus));
                grp1.appendChild(opt);
            });
            const grp2 = document.createElement('optgroup');
            grp2.label = 'Convênio';
            convenio.forEach(o => {
                const opt = new Option(o.t, o.v, false, String(o.v) === String(oldStatus));
                grp2.appendChild(opt);
            });
            vdStatus.appendChild(grp1);
            vdStatus.appendChild(grp2);
            } else {
            vdStatus.disabled = true;
            addOpt('', 'Selecione o Tipo primeiro');
            }
        }

        // inicializa conforme old('vd_tipo')
        if (vdTipo.value) setOptions(vdTipo.value);

        vdTipo.addEventListener('change', function() {
            // limpa seleção anterior ao trocar tipo
            vdStatus.value = '';
            setOptions(this.value);
        });
        })();
    </script>
@endpush