@extends('template')

@section('content')

<div class="page-content">
    <div class="container-fluid">
        <div class="page-content-inner">
            <div class="row"> 
                <div class="col-md-12">
                    <div class="portlet light">
                        <div class="portlet-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="fa fa-cog"></i> Configuração PABX</span>
                                    <a href="{{ route('admin.ativacao.pabx') }}" class="right btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Voltar para consulta de PABX"><i class="fa fa-arrow-circle-left"></i>  Voltar</a>
                                    <hr>
                                </div>
                            </div>
                            
                            {!! Form::open(['route' => 'admin.ativacao.pabx.enviar', 'method' => 'post', 'id'=>'formPABX']) !!}
                                {!! Form::hidden('id',$ativacao->id) !!}
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                            {!! Form::label('tronco', 'Contas Voip - Cadastradas no Telefonia Corporativa') !!}
                                            @if(!empty($contasVoip))
                                                @foreach($contasVoip as $key => $conta)
                                                <h5>{{$conta['conta']}} &nbsp; <b>Tipo: </b>{{ $conta['tipo']}}</h5>
                                                @endforeach
                                            @else
                                                <h4>Nenhuma conta cadastrada</h4>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                            <a class="btn green-jungle popovers fancybox fancybox.iframe" data-container="body" data-trigger="hover" data-placement="top" data-content="Clicando aqui você pode adicionar uma conta voip" href="{{ route('admin.customers.acounts-tipo', ['id' => $proposta->user_id,'tipo' =>'pabx']) }}"><i class="fa fa fa-plus-circle"></i> Add.</a>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-5">
                                        <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                            {!! Form::label('tronco', 'Dids') !!}
                                            @if(!empty($dids))
                                                @foreach($dids as $did)
                                                <h5>{{$did}}</h5>
                                                @endforeach
                                            @else
                                                <h4>Nenhum número encontrado</h4>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="portlet light ">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-fax font-blue-madison"></i>
                                            <span class="caption-subject font-blue-madison bold uppercase">Ramais</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::select('tipo',[
                                                ''=>'::Selecione::',
                                                'range'=>'Range',
                                                'quantidade'=>'Quantidade'],''
                                                , ['class'=>'form-control', 'onchange'=>'habilitaCampos(this.value);','id'=>'selecttipo']) !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-2 quantidade" style="display:none">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <input type="text" min="0" max="9999" class="form-control" name="qtd_ramais" onkeyup="addRamais(this.value);" onchange="addRamais(this.value);" id="qtd_ramais">
                                                {!! Form::label('qtd', 'Qtd.Ramais', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" id="ramais" class="ramais"></div>
                                    <div class="row">
                                        <div class="form-group col-md-1 range" style="display:none">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('de','', ['class'=>'mask-number form-control','maxlength'=>'4', 'onkeypress'=>'return event.charCode >= 48 && event.charCode <= 57','id'=>'de'])!!}
                                                {!! Form::label('de', 'De') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-1 range" style="display:none">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::text('ate','', ['class'=>'ate form-control','minlength'=>'4','maxlength'=>'4', 'onkeypress'=>'return event.charCode >= 48 && event.charCode <= 57','id' =>'ate'])!!}
                                                {!! Form::label('ate', 'Até') !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="portlet light ">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <i class="fa fa-fax font-blue-madison"></i>
                                            <span class="caption-subject font-blue-madison bold uppercase">Pabx</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                {!! Form::label('servidor', 'Servidor') !!}
                                                {!! Form::select('pabx', $pabxs,'', ['class'=>'form-control', 'id'=>'pabx']) !!}
                                                
                                            </div>
                                        </div>
                                        <div class="form-group col-md-3 permissoes" style="display: none">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label" id="permissoes">
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <button name="Enviar" name="Salvar" value='Salvar' class="btn green-jungle popovers"  data-container="body" data-trigger="hover" data-placement="top" data-content="Salvar Informações" onclick = "block();" id="btnSalvar">
                                            <i class=" fa fa-save"></i> Salvar
                                        </button>
                                        
                                        <a href="{{route('admin.ativacao.pabx')}}" class="btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Ao cancelar você perderá todas as informações não salvas!"><i class="fa fa-close"></i> Cancelar</a>
                                    </div>                          
                                </div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT INNER --> 
    </div>
</div>

@stop()
@section('js-admin-terms')
<script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready( function() { 
        $("#formPABX").validate({
            rules: {
                de: {
                    required: true,
                    minlength: 4
                },
                ate: {
                    required: true,
                    minlength: 4
                },
            },
            messages: {
                de: {
                required: "Informe o range",
                minlength: "Obrigatório 4 dígitos"
                },
                ate: {
                    required: "Informe o range",
                    minlength: "Obrigatório 4 dígitos"
                },
            }
        });
    });

    //mensagens de erros
    @if (count($errors) > 0)
        swal({"title":"Atenção","text":"<b>O Formulário está com os erros abaixo:</b><br>@foreach ($errors->all() as $error){{ $error }}<br>@endforeach","showConfirmButton":true,"type":"error","html":true});
    @endif
    
    function block(){
        var select = $("#selecttipo").val();
        var pabx   = $("#pabx").val();
        if(select != '' && pabx != ''){
            $.blockUI({ message: "Olá {!! Auth::user()->name !!}, por favor aguarde um momento enquanto o PABX é criado <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });
        }
    }

    //verifica se o valor do range é correto
    $("#ate").on("change",function (){
        var ate = $(this).val();
        var de  = $("#de").val();
        if(de >= ate){
            swal({"title":"Atenção","text":"O ramal inicial (De) não pode ser igual ou menor do que o ramal final (Até).","showConfirmButton":true,"type":"error"});
            $(this).val('');
        }
    });
    
    function habilitaCampos($habilitar){
        if($habilitar == 'range'){
            $('.range').show('slow');
            $('.quantidade').hide('slow');
            $('.quantidade').val(''); 
        }
        if($habilitar == 'quantidade'){
            $('.range').hide('slow');
            $("#de").val('');
            $("#ate").val('');
            $('.quantidade').show('slow');
        }
        if($habilitar == ''){
            $('.range').hide('slow');
            $("#de").val('');
            $("#ate").val('');
            $('.quantidade').hide('slow');
        }
    }

    function addRamais(qtdRamais){
        if(qtdRamais == 0){
            $("#ramais").hide('slow');
        }else{
            $("#ramais").html("");
            for(i=0;i<qtdRamais;i++){
                var indice = i+1;
                var ramais = '<div class="form-group col-md-1 quantidade" id="'+i+'"><div class="form-group form-md-line-input has-personalizado form-md-floating-label"><input type="text" maxlength="4" minlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="ramais[]" class="form-control" id="ramal"><label for="ramais[]">Ramal '+indice+'</label></div></div>';
                $("#ramais").append(ramais);
            }
            $("#ramais").show("slow");

        }
    }

    $("#pabx").on("change",function (){
        var pabx = $(this).val();
        if(pabx == 0){
            $('.permissoes').hide('slow');
        }else{
            $.ajax({ 
                type: "GET", 
                url: '{{ route('admin.pabx.permissoes') }}', 
                data: {_token   : "{{ csrf_token() }}",id: pabx}, 
                success: function(data) {
                    var permissoes = data;
                    $('.permissoes').show('slow');
                    $("#permissoes").html("");
                    var select = '<label for="permissoes">Permissões do PABX</label><select id="permissoes" name="permissoes" class="form-control"><option value="">::Selecione::</option>';
                    $.each( permissoes, function( id, label ) {
                        select += '<option value="'+id+'">'+label+'</option>';
                    });
                    select += '</select>';
                    $("#permissoes").append(select);
                }
            });
        }
    });

</script>
@stop()