{% extends "base.html.twig" %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css') }}">
{% endblock %}
{% block titulo %} - <a href="{{ path('projectInitial',{ 'idproyectos':idproyectos}) }}">{{ proyectos.proyecto }}</a> -
    <a
    href="{{ path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule}) }}">{{ modulo.modulo }}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-12 col-xs-12">
        <div>

            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

        </div>


    </div>
{% endblock %}

{% block dashboard %}
    <style>
        .js-example-basic-single {
            width: 100%;
        }

        .js-example-basic-single .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }

        .js-example-basic-single .select2-choice {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        .js-example-basic-single .select2-choice:focus {
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }

        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}
        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }

    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>

        $(function () {
            $("#btnCancel").click(function(){
                window.history.back();

            });

            $("#networkelementID").change(function(){
                var id = $('#networkelementID').val();
                var proceso = $('#proceso').val();
                //alert(id);
                $.ajax({
                    type:"GET",
                    async:true,
                    url:"{{path('siteExiste',{'idproyectos':idproyectos})}}?id="+id+"&proceso="+proceso
                }).done(function (msj){
                    if (msj == 'existe'){
                        swal({title: "", text: "Ya existe un sitio con este ID, ingrese ID de sitio diferente", type: "warning"});
                        $("#networkelementID").val('');
                    }
                });

            });

            $("#btnSaveForm").click(function(){
                networkelementName= $("#networkelementName").val();
                networkelementID= $("#networkelementID").val();
                region = $("#region").val();
                mrd= $("#mrd").val();
                latitude = $("#latitude").val();
                langitude = $("#langitude").val();
                proyectoamx = $("#proyectoamx").val();
                SiteSurveyCrane = $("#SiteSurveyCrane").val();
                rbsInstallationA = $("#rbsInstallationA").val();
                ntp = $("#ntp").val();
                sid = $("#sid").val();
                proceso = $("#proceso").val();
                bodega = $("#bodega").val();
                $.isLoading({
                    text: "Loading"
                });
                $.ajax({
                    type: 'POST',
                    url: '{{ path('createNewServicePR',{'idproyectos':idproyectos}) }}',
                    data: {$networkelementName:networkelementName,
                        $networkelementID:networkelementID,
                        $latitude:latitude, $langitude:langitude,
                        $SiteSurveyCrane:SiteSurveyCrane, $rbsInstallationA:rbsInstallationA, $sid:sid,$mrd:mrd,$ntp:ntp,$proceso:proceso,$region:region,$proyectoamx: proyectoamx,$bodega:bodega }

                }).done(function(){
                  $.isLoading('hide');
                  swal(
                          'Bien !',
                          'Servicio Creado con Exito',
                          'success'
                  )
                  location.reload();
                });

            });
        })
    </script>
    <div class="col-lg-12">
        <h1 class="text-center" style="font-size: 36px;
    color: #428bca;"><label>
                Crear Servicio
            </label></h1>

        <div class="col-lg-6 col-lg-offset-3 bordered" style="margin-top: 50px">
            {% if idproyectos==261 %}
                <div class="row">
                    <div class="col-lg-8">
                        <label>Proyecto:</label>
                        <select class="form-control" id="proceso">
                            <option></option>
                            {%for project in projects %}
                                <option value="{{project.proceso}}">{{project.proceso}}</option>
                            {%endfor%}
                        </select>
                    </div>               
                    <div class="col-lg-4">
                        <label>Bodega:</label>
                        <select class="form-control" id="bodega">
                            <option></option>
                            <option value="SPS">SPS</option>
                            <option value="TGU">TGU</option>
                        </select>
                    </div>
                </div>
            {% else %}
                <div class="row">
                    <div class="col-lg-12">
                        <label>Proyecto:</label>
                        <select class="form-control" id="proceso">
                            <option></option>
                            {%for project in projects %}
                                <option value="{{project.proceso}}">{{project.proceso}}</option>
                            {%endfor%}
                        </select>
                    </div> 
                </div>
            {% endif %}
            {%if idproyectos > 1000 %}
            <div class="row">
                <div class="col-lg-12">
                    <label>Region:</label>
                    <select class="form-control" id="region">
                        <option></option>
                        {%for region in regiones %}
                            <option value="{{region.region}}">{{region.region}}</option>
                        {%endfor%}
                    </select>
                </div>
            </div>
            {%endif%}
            <div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <label> Network Element ID/Site ID:</label>
                    <input class="form-control" type="text" id="networkelementID">
                </div>
                <div class="col-lg-6">
                    <label>Network Element Name/Site Name:</label>
                    <input class="form-control" type="text" id="networkelementName">
                </div>
            </div>
            <div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <label>Latidud:</label>
                    <input class="form-control" type="text" id="latitude">
                </div>
                <div class="col-lg-6">
                    <label>Longitud:</label>
                    <input class="form-control" type="text" id="langitude">
                </div>
            </div>

            {% if idproyectos==230 %}
                <div class="row" style="margin-top: 20px">
                    <div class="col-lg-6">
                        <label>Proyecto por Sitio:</label>
                        <input class="form-control" type="text" id="proyectoamx">
                    </div>
                    <div class="col-lg-6">
                    </div>
                </div>
            {% endif %}
            <!--<div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <label>Site Survey Crane:</label>
                    <select class="form-control" id="SiteSurveyCrane">
                        <option>Pending Predecessors</option>
                        <option>Ready to Start</option>
                        <option>Started</option>
                        <option>Completed</option>
                    </select>
                </div>
                <div class="col-lg-6">
                    <label>RBS Installation_A:</label>
                    <select class="form-control" id="rbsInstallationA">
                        <option>Pending Predecessors</option>
                        <option>Ready to Start</option>
                        <option>Started</option>
                        <option>Completed</option>
                    </select>
                </div>
            </div>

            <div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <label>SID:</label>
                    <select class="form-control" id="sid">
                        <option>Pending Predecessors</option>
                        <option>Ready to Start</option>
                        <option>Started</option>
                        <option>Completed</option>
                    </select>
                </div>
                <div class="col-lg-6">
                    <label>NTP:</label>
                    <select class="form-control" id="ntp">
                        <option>Pending Predecessors</option>
                        <option>Ready to Start</option>
                        <option>Started</option>
                        <option>Completed</option>
                    </select>
                </div>
            </div>

            <div class="row" style="margin-top: 20px">
                <div class="col-lg-6">
                    <label>MRD:</label>
                    <select class="form-control" id="mrd">
                        <option>Pending Predecessors</option>
                        <option>Ready to Start</option>
                        <option>Started</option>
                        <option>Completed</option>
                    </select>
                </div>
            </div>-->

            <div class="center" style="text-align: right; margin-top: 20px">
                <button class="btn btn-info" id="btnSaveForm">
                    <i class="fa fa-save"></i>
                </button>
                <button class="btn btn-default" id="btnCancel">
                    <i class="fa fa-arrow-left"></i>
                </button>
            </div>

        </div>

    </div>
{% endblock %}