@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-send"></i> Gerar Venda de Plano</span>
                                        <a href="{{ route('admin.sales') }}" class="right btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Voltar para a consulta de vendas"><i class="fa fa-arrow-circle-left"></i> Voltar</a>
                                        <hr>
                                    </div>
                                </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, 'id' => 'sale']) !!}
                                    <div class="row">                                       
                                        @if(routeAcess('admin.customers.create'))
                                            <div class="form-group col-md-1">
                                                <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 um nov cliente" href="{{route('admin.customers.create_sale',['prod'=>'prod'])}}"><i class="fa fa fa-plus-circle"></i> Add.</a>
                                                </div>
                                            </div>
                                        @endif
                                         <div class="form-group col-md-6">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <div class="input-group left-addon">
                                                    <span class="input-group-addon has-personalizado">
                                                        <i class="fa fa-user-plus"></i>
                                                    </span>
                                                    {!! Form::select('client_id', $customers, '', ['class'=>'form-control select2', 'id'=>'customer','onchange'=>'carregDadosCliente()','data-rule-min'=>'1' , 'data-msg-min'=>"Selecione um cliente!"]) !!}
                                                    {!! Form::label('client_id', 'Cliente', ['class' => 'control-label']) !!}
                                                </div>
                                            </div>
                                        </div>  
                                        <div class="form-group col-md-3">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <div class="input-group left-addon">
                                                    <span class="input-group-addon has-personalizado">
                                                        <i class="fa fa-send"></i>
                                                    </span>
                                                    {!! Form::text('customer_email', '', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'customer_email','readonly'=>'readonly']) !!}
                                                    {!! Form::label('customer_email', 'Email', ['class' => 'control-label']) !!}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-2">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <div class="input-group left-addon">
                                                    <span class="input-group-addon has-personalizado">
                                                        <i class="fa fa-phone"></i>
                                                    </span>
                                                    {!! Form::text('customer_phone', '', ['class' => 'form-control', 'autocomplete' => 'off','id'=>'mask_phone','readonly'=>'readonly']) !!}
                                                    {!! Form::label('customer_phone', 'Telefone', ['class' => 'control-label']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        @if(routeAcess('admin.plans.create'))
                                            <div class="form-group col-md-1">
                                                <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 um novo plano" href="{{route('admin.plans.create_sale',['prod'=>'prod'])}}"><i class="fa fa fa-plus-circle"></i> Add.</a>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="form-group col-md-6">
                                            <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                <div class="input-group left-addon">
                                                    <span class="input-group-addon has-personalizado">
                                                        <i class="fa fa-toggle-on"></i>
                                                    </span>
                                                    {!! Form::select('plan', $plans, '', ['id'=>'plan', 'class'=>'form-control select2', 'data-rule-minlength'=>'1' , 'data-msg-minlength'=>'Selecione um plano!', 'onchange'=>'chekInput(this.value)']) !!}
                                                    {!! Form::label('plano_id', 'Selecione', ['class' => 'control-label']) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <p>&nbsp;</p>
                                    {!! Form::hidden('totalNumber', '1',['id'=>'totalNumber']) !!}
                                    <span id="newInput"></span>

                                    <p>&nbsp;</p>

                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <button type="submit" name="Salvar" value='Salvar' class="btn green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Salvar e gerar a Venda">
                                                <i class=" fa fa-save"></i> Salvar
                                            </button>
                                            <a href="{{ route('admin.sales') }}" class="btn red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Ao cancelar você perderá 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-did')
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/ui-blockui.min.js') }}" type="text/javascript"></script>
    <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/apps/scripts/jquery.maskMoney.js') }}" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $("#sale").validate({
                highlight: function (element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function (element) {
                    element.text('').closest('.control-group').removeClass('error').addClass('success');
                },
            });
            $('.fancybox').fancybox();
        });

        $( "#sale" ).submit(function() {
            var plan = $("#plan").val();
            var client_id = $("#client_id").val();
            if(client_id != '0' && plan != '0'){
                $.blockUI({ message: "{!! Auth::user()->name !!}, por favor aguarde um momento enquanto a venda e faturas são geradas <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });    
            }
        });

        function editaInputCustomerSelect(valor){
            $('#select2-customer-container').html(valor);
        }   
        
        function editaInputPlanSelect(valor){
            $('#select2-plan-container').html(valor);
        }

        function chekInput(plan) {
            var data = plan.split('|');
            var max  = data[1];
            var html = '';
            $("#totalNumber").val('1');

            html += '<div class="row">';
                html += '<div class="form-group col-md-6"><strong>Números Virtuais</strong></div>';

                if (max > 1) {
                    html += '<div class="form-actions right">';
                        html += '<span onclick="new_number('+max+'); return false;" class="btn green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Clicando aqui você pode adicionar um novo número"><i class="fa fa-plus"></i> Add. Número</a>';
                    html += '</div>';
                }

            html += '</div>';

            html += '<div class="row">';
                html += '<div class="addField">';
                    html += '<div class="col-md-4">';
                        html += '<div class="form-group">';
                            html += '<select name="ddd" class="form-control" onchange="selNumber(this.value, 1);" return false;">';
                                html += '<option value="0">Escolha um DDD</option>';
                                @foreach($dids as $did)
                                    html += '<option value="{{$did->ddd}}">{{$did->ddd}}</option>';
                                @endforeach
                            html += '</select>';
                        html += '</div>';
                    html += '</div>';

                    html += '<div class="col-md-6">';
                        html += '<div class="form-group" id="editNumber_1">';
                            html += '<select name="virtual_number[]" class="form-control">';
                                html += '<option value="">Selecione um Número</option>';
                            html += '</select>';
                        html += '</div>';
                    html += '</div>';
                html += '</div>';
            html += '</div>';

            html += '<div class="row">';
                html += '<div class="form-group col-md-6"><strong>Portabilidade</strong></div>';
            html += '</div>';

            for (var i = 0; i < max; i++) {

                if (i % 2 == 0) {
                    var color = '';
                } else {
                    var color = '#C1CDCD';
                }

                html += '<div class="row">';
                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<select name="ddd_portability[]" class="form-control">';
                            html += '<option value="0">DDD</option>';
                            html += '@foreach($ddds as $ddd)';
                                html += '<option value="{{$ddd}}">{{$ddd}}</option>';
                            html += '@endforeach';
                        html += '</select>';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="number_portability[]" class="form-control" placeholder="Número">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="origin_operator[]" class="form-control" placeholder="Operadora Origem">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="company_name[]" class="form-control" placeholder="Razão Social/Nome">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="cpf_cnpj[]" class="form-control" placeholder="CPF/CNPJ">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="zip_code[]" class="form-control" placeholder="CEP" id="zip_code_'+i+'" onblur="zip_code('+i+'); return false;">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="address[]" id="address_'+i+'" class="form-control" placeholder="Endereço">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="number_residencial[]" class="form-control" placeholder="Número Residência">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="complement[]" id="complement_'+i+'" class="form-control" placeholder="Complemento">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="neighborhood[]" id="neighborhood_'+i+'" class="form-control" placeholder="Bairro">';
                    html += '</div>';

                    html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                        html += '<input type="text" name="city[]" id="city_'+i+'" class="form-control" placeholder="Cidade">';
                    html += '</div>';

                    html += '<div class="row">';
                        html += '<div class="form-group col-md-2" style="background-color:'+color+'">';
                            html += '<select name="state[]" id="state_'+i+'" class="form-control">';
                                html += '<option value="0">Estado</option>';
                                html += '@foreach($states as $key => $state)';
                                    html += '<option value="{{$key}}">{{$state}}</option>';
                                html += '@endforeach';
                            html += '</select>';
                        html += '</div>';
                    html += '</div>';

                html += '</div>';
            }

            $('#newInput').html(html);
        }

        function selNumber(ddd, row) { 
            if(ddd > 0){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                })
                
                $("#editNumber_"+row).html("<p>Aguarde enquanto os números disponíveis são validados no Siptek <img src='{{ asset('/assets/global/img/loading.gif') }}'></p>");
                
                $.ajax({ 
                    type: "GET", 
                    url: '{{ route('admin.sales.number') }}', 
                    data: {ddd: ddd}, 
                    success: function(data) {
                        $("#editNumber_"+row).html(data);
                    } 
                });        
            }
            else{
                $("#editNumber_"+row).html('<select class="form-control" name="virtual_number[]"><option value="">Selecione um Número</option></select>');
            }    
        }   

        function zip_code(line) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            $.ajax({ 
                type: "GET", 
                url: '{{ route('search.zipcode') }}', 
                data: {zip_code: $('#zip_code_'+line).val()}, 
                success: function(data) { 
                    var json = JSON.parse(data);
                    console.log(json); 

                    $("#address_"+line).val(json.logradouro);
                    $("#complement_"+line).val(json.complemento);
                    $("#neighborhood_"+line).val(json.bairro);
                    $("#city_"+line).val(json.localidade);
                    $("#state_"+line).val(json.uf);
                } 
            });
        }

        var x = 1; 
    
        function new_number(max_fields) { 
            var html = '';
            var totalNumber = $("#totalNumber").val();
            if (totalNumber < max_fields) {
                var count = x + 1; 
                html += '<div class="addField'+count+'">';
                    html += '<div class="col-md-4">';
                        html += '<div class="form-group">';
                            html +='<select name="ddd" class="form-control" onchange="selNumber(this.value, '+count+'); return false;">';
                                html += '<option value="0">Escolha um DDD</option>';
                                html +=' @foreach($dids as $did)';
                                    html += '<option value="{{$did->ddd}}">{{$did->ddd}}</option>';
                                html += '@endforeach';
                            html += '</select>';
                        html += '</div>';
                    html += '</div>';

                    html += '<div class="col-md-6">'
                        html += '<div class="form-group" id="editNumber_'+count+'">';
                            html += '<select name="" class="form-control">';
                                html += '<option value="">Escolha seu Número Virtual</option>';
                            html += '</select>';
                        html += '</div>';
                    html += '</div>';

                html += '</div>';

                $('.addField').append(html);
                totalNumber++;
                $("#totalNumber").val(totalNumber);
            } else {
                swal("","Não é possível adicionar mais números", "warning");
            }
        }

        function carregDadosCliente(){

           var customer_id = $('#customer').val();

            if(customer_id == 0){
                $("#customer_email").focus().val('');
                $("#mask_phone").focus().val('');
                return;
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            
            $.ajax({ 
                type: "GET", 
                url: "{{ route('admin.customers.get.email') }}",
                data: {user_id: customer_id}, 
                success: function(data) { 
                    var json = JSON.parse(data);
                    $("#customer_email").focus().val(json.email);
                    $("#mask_phone").focus().val(json.phone);
                    $("#customer-error").hide();
                } 
            });

        }

    </script>
@stop()