@extends('template.layoutAdmin')
@section('title')
{{  trans('campaña.campaña') }}				

@endsection
@section('cabecera')
    <h1>
        {{  trans('campaña.campaña') }}				

    </h1>
    <style>
.menuss:hover{
    color:#DB3920 ;

}
.activea{
    color:#DB3920 ;

}
a:focus {
    color:#DB3920 ;

}

    </style>
@endsection

@section('contenido')
    <div class="row">
        <div class="col-12">
            @if(Session::has('message'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😉 {{Session::get('message')}} 😉
                </div>
            @endif
            @if(Session::has('message_error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😓 {{Session::get('message_error')}} 😒
                </div>
            @endif

            <div class="row">
                <div class="col  text-center" >

                    <a href="javascript:;" onclick="verSms()"  id="opSms"  >
                            <div class="box menuss">
                                <span>
                                    <i class="fa fa-comments fa-4x" aria-hidden="true"></i>
                                </span>

                                <span>  {{  trans('campaña.sms') }}				
                                </span>

                            </div>

                    </a>
                </div>

                <div class="col text-center"  >
                    <a href="javascript:;" onclick="verMail()" id="opMail" >
                        <div class="box menuss" >
                            <i class="fa fa-envelope fa-4x" aria-hidden="true"></i>
                            {{  trans('campaña.mail') }}				
                        </div>
                    </a>
                </div>
                <div class="col text-center">
                    <a href="javascript:;" onclick="verPush()">
                        <div class="box menuss"  id="opPush">
                            <i class="fa fa-bell fa-4x" aria-hidden="true"></i>
                            {{  trans('campaña.push') }}				

                        </div>
                    </a>

                </div>
            </div>


            {{-- Menos --}}
            <form  action="{{ route('campañaPost') }}" accept-charset="UTF-8" enctype="multipart/form-data" method="post" >
@csrf

            <div class="row" id="rowSms" style="display: none;">
                <div class="col">
                    <div class="box">
                        <div class="box-body">
                            <h4 class="box-title">
                                {{  trans('campaña.sms') }}				
                            </h4>
                            <div class="form-group">
                                <label for="Mensaje">
                                    {{  trans('campaña.mensaje') }}				
                                </label>
                                <textarea name="sms" id="sms" cols="30" rows="5" class="form-control" >

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" id="rowMail" style="display: none;">
                <div class="col">
                    <div class="box">
                        <div class="box-body">
                            <h4 class="box-title"> {{  trans('campaña.mail') }}				
                            </h4>
                            <div class="form-group">
                                <label for="Asunto"> {{  trans('campaña.asunto') }}				
                                  </label>
                               <input type="text" name="mail" id="mail" class="form-control" placeholder="{{  trans('campaña.asunto') }}">
                            </div>
                            <div class="form-group">
                                <label for="Body"> {{  trans('campaña.body') }}				
                                    </label>
                                <textarea name="editor" id="editor" rows="10" cols="80"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="Imagen"> {{  trans('campaña.imagen') }}				
                                </label>
                               <input type="file" name="imgMail" id="imgMail" class="form-control" accept="image/*" >
                            </div>

                        </div>
                    </div>
                </div>
            </div>



            <div class="row" id="rowPush" style="display: none;">
                <div class="col">
                    <div class="box">
                        <div class="box-body">
                            <h4 class="box-title"> {{  trans('campaña.push') }}				
                            </h4>

                            <div class="form-group">
                                <label for="Body"> {{  trans('campaña.body') }}				
                                </label>
                                <textarea name="push" id="body" cols="30" rows="5" class="form-control" >

                                </textarea>
                            </div>


                        </div>
                    </div>
                </div>
            </div>


            <div class="row" id="rowDestina" style="display: none;">
                <div class="col ">
                    <div class="box">
                        <div class="box-body">
                            <h4 class="box-title"> {{  trans('campaña.enviarA') }}				
                            </h4>

                            <div class="form-group">
                                <label for="Destinatario"> {{  trans('campaña.destinatario') }}				
                                </label>
                                <select name="destinatarios" id="destinatarios" class="form-control" onchange="obtenerDescrip()" >
                                    <option value="-1" disabled selected> {{  trans('campaña.seleccioneDestinatario') }}				
</option>
                                    @foreach ($TipoEnvio as $item)
                                    <option value="{{ $item->idValorParametro }}">{{ $item->nombre }}</option>

                                    @endforeach
                                </select>

                                <small id="descrip"> </small>
                            </div>

                            <div class="form-group" style="display: none;" id="pais">
                                <label for="">Pais</label>
                                <select name="pais" id="pais" class="form-control" onchange="departamentoCambio(this.value)">
                                    <option value="-1" selected disabled> {{  trans('campaña.seleccioneUnPais') }}				
                                    </option>
                                    @foreach ($Pais as $item)
                                        <option value="{{ $item->idPais }}">{{ $item->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-group" style="display: none;" id="departamento">
                                        <label for="Departamento">  {{  trans('campaña.departamento') }}     </label>
                                        <select name="listDepart" id="listDepart" class="form-control" onchange="ciudadCambio(this.value)">
                                    <option value="-1" selected disabled> {{  trans('campaña.seleccioneDepartamento') }}				
                                    </option>

                                        </select>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="form-group" style="display: none;" id="ciudadRow">
                                        <label for="">Ciudad</label>
                                        <select name="ciudad" id="ciudad" class="form-control" >
                                            <option value="-1" selected disabled> {{  trans('campaña.seleccioneCiudad') }}				
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" id="barrios" style="display: none;" >
                                <label for="">Barrios</label>
                                <select class='mi-selector' name='zonas[]' style="width: 100%"  multiple='multiple'>
                                    <option value=''disabled > {{  trans('campaña.seleccioneZona') }}				
                                    </option>
                                    @foreach ($zonas as $item)
                                    <option value='{{ $item->idZona }}' >{{ $item->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>


                            <button type="submit" class="btn btn-primary mt-10" id="Enviar" onclick="abrircarga()" > {{  trans('campaña.enviar') }}				
                            </button>
                        </div>
                    </form>

                    </div>
                </div>
            </div>



@endsection

@section('js')
<script>

var sms=false;
var mail=false;
var push=false;
CKEDITOR.replace('editor');

function abrircarga(){
    swal({
                    title: " {{  trans('aforo.cargando') }}	",
                    text: " {{  trans('aforo.espereUnMomento') }}",
                    showConfirmButton: false
                });
}
function departamentoCambio(pais){

 var data={
     'value':pais
 }
    var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/pais/listDepart",
        data: data,
      	type: 'post',
      	dataType: 'json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      	},
        beforeSend: function () {
          $('#listDepart').empty();
          $('#listCiudad').empty();

      	},
        success: function(response){
            $('#listDepart').empty();
            $("#listDepart").append("<option value='-1'selected disabled>Seleccionar Departamento</option>");

            $.each(response, function(j, listDepart){
                $("#listDepart").append("<option value='"+listDepart.idDepartamento+"'>"+listDepart.nombre+"</option>");
            });
        },
        error: function(xhr){
            swal("Error!", " {{  trans('aforo.errorIntenteloMasTarde') }}", "error");
      	}
      });
}

function ciudadCambio(departamento){


    var data={
     'value':departamento
 }
    var host = "{{$_SERVER["HTTP_HOST"]}}";
      $.ajax({
        url: UrlHost_+"/departCiudad/departData",
        data: data,
      	type: 'post',
      	dataType: 'json',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      	},
        beforeSend: function () {
          $('#ciudad').empty();
          $('#ciudad').empty();

      	},
        success: function(response){
            $('#ciudad').empty();
            $("#ciudad").append("<option value='-1' selected disabled>Seleccionar ciudad</option>");

            $.each(response, function(j, listDepart){
                $("#ciudad").append("<option value='"+listDepart.idCiudad+"'>"+listDepart.nombre+"</option>");
            });
        },
        error: function(xhr){
            swal("Error!", " {{  trans('aforo.errorIntenteloMasTarde') }}", "error");
      	}
      });

}

function validarRowSms(){
    var vali=document.getElementById('destinatarios').value;

        if (vali==-1) {
            document.getElementById('Enviar').disabled=true;
        }else{
            document.getElementById('Enviar').disabled=false;
        }
    if (sms==false && mail==false && push==false) {
    document.getElementById('rowDestina').style.display='none';

    }else{
        document.getElementById('rowDestina').style.display='block';
    }

}
    function verSms(){
        if(sms==false){
            document.getElementById('rowSms').style.display='block';
            document.getElementById('sms').value="";
        document.getElementById('opSms').className +=' activea';
        sms=true;
        validarRowSms();
        }else{
            document.getElementById('rowSms').style.display='none';
            document.getElementById('sms').value="";
        document.getElementById('opSms').classList.remove("activea");
        sms=false;

        validarRowSms();


        }
    }


    function verMail(){
        if(mail==false){
            document.getElementById('rowMail').style.display='block';
        document.getElementById('opMail').className +=' activea';
        mail=true;
        validarRowSms();

        }else{
            document.getElementById('rowMail').style.display='none';
        document.getElementById('opMail').classList.remove("activea");
        mail=false;
        validarRowSms();
        }
    }

    function verPush(){
        if(push==false){
            document.getElementById('rowPush').style.display='block';
            document.getElementById('body').value="";
        document.getElementById('opPush').className +=' activea';
        push=true;
        validarRowSms();
        }else{
            document.getElementById('body').value="";
        document.getElementById('rowPush').style.display='none';
        document.getElementById('opPush').classList.remove("activea");
        push=false;
        validarRowSms();

        }
    }

    jQuery(document).ready(function($){
    $(document).ready(function() {
        $('.mi-selector').select2();
    });
});



function obtenerDescrip(){
    validarRowSms();
    var vali=document.getElementById('destinatarios').value;
    // console.log(vali);
    var host = "{{$_SERVER["HTTP_HOST"]}}";
    var data = {
        'idVal':vali
            }
    $.ajax({
                    url: UrlHost_+"/administrator/notificacion",
                    data: data,
                    type: 'get',
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                    //    console.log("cargar");

                    },
                    success: function(response){
                        // console.log(response);
                        document.getElementById('descrip').innerHTML=response.refValor;

                        if (vali==52) {
                            document.getElementById('barrios').style.display='block';

                            }else{
                                document.getElementById('barrios').style.display='none';

                            }

                        if (vali==51 || vali==50 ) {
                            document.getElementById('pais').style.display='block';

                            if (vali==50 ) {
                                document.getElementById('departamento').style.display='block';
                                document.getElementById('ciudadRow').style.display='block';

                            }else{
                                document.getElementById('ciudadRow').style.display='none';
                                document.getElementById('departamento').style.display='none';
                            }
                        }else{
                                document.getElementById('departamento').style.display='none';
                              document.getElementById('pais').style.display='none';
                              document.getElementById('ciudadRow').style.display='none';

                         }
                    }
                });


}


</script>
@endsection