@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 form">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="fa fa-user"></i> Vincular Clientes</span>
                                        <a href="{{ route('admin.dids') }}" class="right btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Voltar para consulta de dids"><i class="fa fa-arrow-circle-left"></i>  Voltar</a>
                                    <hr>
                                </div>
                                @if (count($errors) > 0)
                                    <div class="alert alert-danger">
                                        <strong> O Formulário está com os erros abaixo:</strong><br><br>
                                        <ul>
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                
                                {!! Form::open(['route' => $action->route, 'method' => $action->method, 'files' => true, 'id' => 'frmVinculo']) !!}
                                    {!! Form::hidden('id', $did->id) !!} 
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                {!! Form::select('user_id', $customers, $did->user_id, ['id'=>'user', 'class'=>'form-control select2','data-rule-min'=>'1' , 'data-msg-min'=>"Selecione um cliente!"])!!}
                                                 {!! Form::label('Cliente', 'Cliente') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                {!! Form::select('provider_id', $providers, $did->provider_id, ['class'=>'form-control']) !!}
                                                 {!! Form::label('provider_id', 'Fornecedor', ['class' => 'control-label']) !!}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div id="clone_numero">
                                    </div>

                                    <div  id="modelo" class="row">
                                        <div class="form-group col-md-3">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                {!! Form::text('login[]', $did->login, ['class' => 'form-control', 'autocomplete' => 'off', 'id' =>'login']) !!}
                                                {!! Form::label('login', 'Login') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                 {!! Form::text('password[]', $did->password, ['class' => 'form-control', 'autocomplete' => 'off', 'id' =>'password']) !!}
                                                  {!! Form::label('password', 'Senha') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-1">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                {!! Form::text('ddd[]', $did->ddd, ['class' => 'form-control', 'id' => 'mask_ddd', 'autocomplete' => 'off']) !!}
                                                {!! Form::label('ddd[]', 'DDD') !!}
                                            </div>
                                        </div>
                                        <div class="form-group col-md-3">
                                            <div class="form-group form-md-line-input form-md-floating-label has-personalizado">
                                                {!! Form::text('number[]', $did->number, ['class' => 'form-control','id' => 'mask_phone2', 'autocomplete' => 'off']) !!}
                                                {!! Form::label('number', 'Número') !!}
                                            </div>
                                        </div>                                    
                                    </div>
                                    
                                    <div class="row">
                                        <div class="form-group col-md-9">
                                            <span class="btn blue-madison popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Adicione mais de um número clicando aqui" id="btn_add"><i class="fa fa-plus-circle"></i> Adicionar Números</span>
                                            <button type="submit" name="Salvar" value='Salvar' class="btn green-jungle popovers"  data-container="body" data-trigger="hover" data-placement="top" data-content="Salvar Informações">
                                                <i class=" fa fa-save"></i> Salvar
                                            </button>
                                            <a href="{{route('admin.dids')}}" 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-profile')   
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script> 
    <script src="{{ asset('/assets/global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/fancybox/source/jquery.fancybox.js?v=2.1.5') }}" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets/global/plugins/fancybox/source/jquery.fancybox.css?v=2.1.5') }}" media="screen" />
    <link href="{{ asset('/assets/global/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('/assets/global/plugins/select2/css/select2-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('/assets/global/plugins/select2/js/select2.full.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/components-select2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js') }}" type="text/javascript"></script>

    <script>
        $(document).ready( function() {  
            $('.fancybox').fancybox();
            $("#frmVinculo").validate({
                rules: {
                    user: "required",
                },
            });
        });

        $("body").on('click', '#btn_remove', function(){
            var linha = $(this).closest('.row');
            swal({  
                title: "Atenção",
                text: "Tem certeza que deseja remover este número?",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Sim",
                cancelButtonText: "Não",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {
                    linha.remove();
                }else{
                    return false;
                }
            });
        });

        $("body").on('submit', 'form', function(event){

            $.post($(this).attr('action'), $(this).serialize(), function(data){
                if(data.tipo == 'error'){                    
                    swal({"title":"Ops","text":data.mensagem,"showConfirmButton":true,"type":"error","html":true});
                } else{
                    window.location.href = "{{ route('admin.numbers') }}";
                }
            });

            event.preventDefault();
        });
        /*Mascara no ddd e number*/
        $(function(){
            $("#mask_phone2").inputmask({
                "mask": "9999-9999",
                placeholder: ""
            });

            $("#mask_ddd").inputmask({
                "mask": "99",
                placeholder: ""
            });

            $("#btn_add").click(function(){
                var linha_modelo = $("#modelo").clone();
                linha_modelo.find('#mask_phone2').inputmask({
                    "mask": "9999-9999",
                    placeholder: ""
                });
                $("#modelo input[id=login]").eq(0).val('');
                $("#modelo input[id=password]").eq(0).val('');
                $("#modelo input[id=mask_ddd]").eq(0).val('');
                $("#modelo input[id=mask_phone2]").eq(0).val('');
                $("#clone_numero").append(linha_modelo.attr('id', '').append('<div class="form-group col-md-2"><div class="form-group form-md-line-input form-md-floating-label has-personalizado"><button type="button" class="btn red popovers" id="btn_remove"><i class="fa fa-times"></i></button></div></div>'));
            });
        });
    </script>
@stop()