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

<div class="col">
    <div class="card">
        <div class="card-header">
            <h3>Cadastrar Nova Ura</h3>
        </div>
    </div>
    
    <form action="{{route('uras.store')}}" method="post" id="formulario" enctype="multipart/form-data">
        {{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">
                <div class="card-body">
                    <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[1][op]" class="form-control"  id="1" 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%">
                                                @if(count($ramais) > 0)
                                                <tr>
                                                    <td><input type="radio" name="opcao[1][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[1][ramal]">
                                                            @foreach($ramais as $ramal)
                                                            <option value="{{ $ramal->id }}">{{ $ramal->alias_name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                @endif
                                                @if(count($filas) > 0)
                                                <tr>
                                                    <td><input type="radio" name="opcao[1][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[1][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[1][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[1][ura]">
                                                            @foreach($uras as $ura)
                                                            <option value="{{ $ura->id }}">{{ $ura->nome }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                @endif
                                                <tr>
                                                    <td><input type="radio" name="opcao[1][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[1][funcao_interna]">
                                                            <option value="hangup">Desligar Chamada</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                @if(count($horarios) > 0)
                                                <tr>
                                                    <td><input type="radio" name="opcao[1][redir]" 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[1][horario]">
                                                            @foreach($horarios as $horario)
                                                            <option value="{{ $horario->id }}">{{ $horario->nome }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                </tr>
                                                @endif
                                            </table>
                                        </td>
                                        {{-- <td style="width: 50px">
                                            <a id="" title="Remover item de Ura" onClick="javascript:removerItem()"; class="btn btn-warning btn-sm" href="#"> <i class="fa fa-minus"></i> </a>
                                        </td> --}}
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                
            </div> <!-- Fim da <div id="divitens"> -->
                <div class="card-footer">
                    <input class="btn bg-{{ session('template')->nome }}" type="submit" value="Cadastrar">    
                </div>
            </form>
        </div>
    </div>
    @endsection
    
    
    <script>
        a=1;
        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 removeropura(){
            if(a > 1){
                $("#op"+ a +"").remove();
                a = a-1;
            }
        }
        */
       
        function removerItem(a){
            if(a > 1){
                $("#op"+ a +"").remove();
                a = a-1;
            }
        }
        
        
        
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>