@extends('layouts.argo')
@section('content')

<div class="col">
    <div class="card">
        <div class="card-header">
            <h3>Atualizar URA</h3>
        </div>
    </div>
    <form action="{{route('uras.update', $ura->id)}}" method="post" id="formulario" enctype="multipart/form-data">
        @method(' PUT')
        {{csrf_field()}}
        
        @include('Admin.uras._form')
        
        <div class="card">
            <div class="card-body">
                
                <th>
                    Menu de Opções da URA <a href="#" class="red-tooltip" title="Crie as opções (tecla 1, 2, 3 etc) da URA da sua empresa e selecione o que será feito quando o cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a>
                    {{-- <button type="button" class="btn-warning btn-xs" style="float: right;margin-left:3px;" title="Remover Opção na URA" onClick="javascript:removeropura();">
                        <span class="fa fa-minus" aria-hidden="true"></span>
                    </button> --}}
                    
                    <button type="button" class="btn-primary btn-xs" style="float: right;" title="Adiciona Opção na URA" onClick="javascript:adicionaOpcaoURA();">
                        <span class="fa fa-plus" aria-hidden="true"></span>
                    </button>
                </th>
                
            </div>
        </div>
        <div class="card">
            <div id="divitens">
                @php
                $a = 1 ;
                @endphp
                @foreach($opcoes as $opcao)
                <div id="op{{$a}}" class="box-branco">
                    <div class="form-group row">
                        <div class="col-md-12" >
                            <table class="table table-striped">
                                <tbody id="topcoes">
                                    <tr id="det0">
                                        <td class="col-md-1" valign="center" style="width:120px;">
                                            <label for="">Opção:</label>
                                            <select name="opcao[{{$a}}][op]" class="form-control"  id="{{$a}}" style="width: 80px;" onChange="javascript:Keys(this);" required>
                                                <option value=""></option>
                                                <option {{ $opcao->opcao == 0 ? "selected" : "" }} value="0">0</option>
                                                <option {{ $opcao->opcao == 1 ? "selected" : "" }} value="1">1</option>
                                                <option {{ $opcao->opcao == 2 ? "selected" : "" }} value="2">2</option>
                                                <option {{ $opcao->opcao == 3 ? "selected" : "" }} value="3">3</option>
                                                <option {{ $opcao->opcao == 4 ? "selected" : "" }} value="4">4</option>
                                                <option {{ $opcao->opcao == 5 ? "selected" : "" }} value="5">5</option>
                                                <option {{ $opcao->opcao == 6 ? "selected" : "" }} value="6">6</option>
                                                <option {{ $opcao->opcao == 7 ? "selected" : "" }} value="7">7</option>
                                                <option {{ $opcao->opcao == 8 ? "selected" : "" }} value="8">8</option>
                                                <option {{ $opcao->opcao == 9 ? "selected" : "" }} value="9">9</option>
                                                <option {{ $opcao->opcao == 99 ? "selected" : "" }} value="99">Sem opção</option>
                                            </select>
                                            <div id="key1" style="margin-top: 10px;"></div>
                                        </td>
                                        <td>
                                            <table width="100%">
                                                <tr>
                                                    <td><input type="radio" name="opcao[{{ $a }}][redir]" {{ $opcao->redir == "R" ? "checked" : "" }} value="R"></td>
                                                    <td>Ramal: <a href="#" class="red-tooltip" title="Você pode selecionar um ramal já criado para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td>
                                                    <td>
                                                        <select class="form-control"  name="opcao[{{$a}}][ramal]">
                                                            {{-- <option value=""></option> --}}
                                                            @foreach($ramais as $ramal)
                                                            <option {{ $opcao->forward_num == $ramal->name ? "selected" : "" }} value="{{ $ramal->id }}">{{ $ramal->alias_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><input type="radio" name="opcao[{{$a}}][redir]" {{ $opcao->redir == "Q" ? "checked" : "" }} value="Q"></td>
                                                    <td>Grupo de Ramais: <a href="#" class="red-tooltip" title="Você pode selecionar um Grupo de Ramais para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td>
                                                    <td>
                                                        <select class="form-control" name="opcao[{{ $a }}][queue]">
                                                            {{-- <option value=""></option> --}}
                                                            @foreach($filas as $fila)
                                                            <option {{ $opcao->forward_num == $fila->name ? "selected" : "" }} value="{{ $fila->id }}"> {{ $fila->descricao }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                @if(count($uras) > 0)
                                                <tr>
                                                    <td><input type="radio" name="opcao[{{$a}}][redir]" {{ $opcao->redir == "U" ? "checked" : "" }} value="U"></td>
                                                    <td>URA: <a href="#" class="red-tooltip" title="Você pode escolher uma OUTRA URA para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td>
                                                    <td>
                                                        <select class="form-control" name="opcao[{{ $a }}][ura]">
                                                            {{-- <option value=""></option> --}}
                                                            @foreach($uras as $ura)
                                                            <option {{ $opcao->forward_num == $ura->id ? "selected" : "" }} value="{{ $ura->id }}">{{ $ura->nome }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                @endif
                                                <tr>
                                                    <td><input type="radio" name="opcao[{{$a}}][redir]" {{ $opcao->redir == "F" ? "checked" : "" }} value="F"> </td>
                                                    <td>Funções internas: <a href="#" class="red-tooltip" title="Você pode escolher uma função interna e como por exemplo: Desligar a chamada." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td>
                                                    <td>
                                                        <select class="form-control" name="opcao[{{ $a }}][funcao_interna]">
                                                            {{-- <option value=""></option> --}}
                                                            <option {{ $opcao->forward_num == "hangup" ? "selected" : "" }} value="hangup">Desligar Chamada</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                @if(count($horarios) > 0)
                                                <tr>
                                                    <td><input type="radio" name="opcao[{{$a}}][redir]" {{ $opcao->redir == "H" ? "checked" : "" }} value="H"> </td>
                                                    <td>Regras de Horário: <a href="#" class="red-tooltip" title="Você pode escolher uma função interna e como por exemplo: Desligar a chamada." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td>
                                                    <td>
                                                        <select class="form-control" name="opcao[{{ $a }}][horario]">
                                                            {{-- <option value=""></option> --}}
                                                            @foreach($horarios as $horario)
                                                            <option {{ $opcao->forward_num == $horario->id ? "selected" : "" }} value="{{ $horario->id }}">{{ $horario->nome}}</option>
                                                            @endforeach
                                                            
                                                        </select>
                                                    </td>
                                                </tr>
                                                @endif
                                            </table>
                                        </td>

                                        <td style="width: 50px"><a title="Remover item de Ura" onClick="javascript:removerItem({{$a}})"; class="btn btn-warning btn-sm" href="#"> <i class="fa fa-minus"></i> </a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @php
                $a ++;
                @endphp            
                
                
                @endforeach 
                
            </div> <!-- Fim da <div id="divitens"> -->
                
                <div class="card-footer">
                    <input class="btn bg-{{ session('template')->nome }}" type="submit" value="Atualizar">    
                    
                </div>
                
                
                <div class="" >
                    <input type="hidden" id="variavelA" value="{{$total}}">
                </div>
            </form>
            
        </div>
    </div>
    @endsection
    
    <script>
        var a = ;
        
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
            
        });
        
        function adicionaOpcaoURA(){
            a = a+1;
 
            $('#divitens').append('<div id="op'+ a + '" class="box-branco"><div class="form-group row"><div class="col-md-12" ><table class="table table-striped"><tbody id="topcoes"><tr id="det0"><td class="col-md-1" valign="center" style="width:120px;"><label for="">Opção:</label><select name="opcao['+a+'][op]" class="form-control"  id="'+a+'" style="width: 80px;" onChange="javascript:Keys(this);" required><option value=""></option><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="99">Sem opção</option></select><div id="key1" style="margin-top: 10px;"></div></td><td><table width="100%"> <tr><td><input type="radio" checked name="opcao['+a+'][redir]" value="R"></td><td>Ramal: <a href="#" class="red-tooltip" title="Você pode selecionar um ramal já criado para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td><td><select class="form-control"  name="opcao['+a+'][ramal]">@foreach($ramais as $ramal)<option value="{{ $ramal->id }}">{{ $ramal->alias_name}}</option>@endforeach</select></td></tr>@if(count($filas) > 0 ) <tr><td><input type="radio" name="opcao['+a+'][redir]" value="Q"></td><td>Grupo de Ramais: <a href="#" class="red-tooltip" title="Você pode selecionar um Grupo de Ramais para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td><td><select class="form-control" name="opcao['+a+'][queue]">@foreach($filas as $fila)<option value="{{ $fila->id}}"> {{ $fila->descricao }}</option>@endforeach</select></td></tr>@endif  @if(count($uras) > 0)<tr><td><input type="radio" name="opcao['+a+'][redir]" value="U"></td><td>URA: <a href="#" class="red-tooltip" title="Você pode escolher uma OUTRA URA para a chamada ser direcionada quando um cliente selecionar essa opção." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td><td><select class="form-control" name="opcao['+a+'][ura]">@foreach($uras as $ura)<option value="{{ $ura->id }}">{{ $ura->nome }}</option>@endforeach</select></td></tr>@endif<tr><td><input type="radio" name="opcao['+a+'][redir]" value="F"> </td><td>Funções internas: <a href="#" class="red-tooltip" title="Você pode escolher uma função interna e como por exemplo: Desligar a chamada." data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td><td><select class="form-control" name="opcao['+a+'][funcao_interna]"><option value="hangup">Desligar Chamada</option></select></td></tr>@if(count($horarios) > 0) <tr><td><input type="radio" name="opcao['+a+'][redir]" value="H"> </td><td>Regras de Horário: <a href="#" class="red-tooltip" title="Escolha uma regra de horário " data-toggle="tooltip" data-placement="bottom" ><i class="fa fa-question-circle" style="color: #777777;"></i></a></td><td><select class="form-control" name="opcao['+a+'][horario]">@foreach($horarios as $horario)<option value="{{ $horario->id }}">{{ $horario->nome }}</option>@endforeach</select></td></tr>@endif</table></td><td style="width: 50px"><a title="Remover item de Ura" onClick="javascript:removerItem('+ a + ')"; class="btn btn-warning btn-sm" href="#"> <i class="fa fa-minus"></i> </a></td></tr></tbody></table></div></div></div>');        
        }
        
        function removerItem(a){

            console.log('Eu cliquei para remover');
            console.log(a)
            
                $("#op"+ a +"").remove();
                a = a-1;
            
        }
        
        /*
        function removeropura(){
            if(a > 1){
                $("#op"+ a +"").remove();
                a = a-1;
            }
        }
        */
        /*
        function Keys(obj){
            var num = obj.value;
            var id = obj.id;
            if(num == 99){
                $("#key"+ id).html('<img src="../../../../ura/key.png">');
            }else if(num == ""){
                $("#key"+ id).html('<img src="../../../../ura/key.png">');
            }else{
                $("#key"+ id).html('<img src="../../../../ura/'+ num +'.png">');
            }
        }
        */
    </script>