@extends('layouts.app')
@section('css')
<style>
    .filter-option,
    .filter-option-inner-inner {
        margin: 0px !important;
        padding: 3px 0 !important;
    }

    #elementsExpand {
        margin-top: 20px;
    }
</style>
@endsection
@section('content')
<ol class="breadcrumb">
    <li class="breadcrumb-item active class_select"><a href="{{ URL('/home') }}">Inicio</a></li>
    <li class="breadcrumb-item">Líder</li>
    <li class="breadcrumb-item active">Transferencia</li>
</ol>
<div class="row justify-content-between">
    <div class="col-12 col-xl-8" style="padding: 0 0 0 20px">
        <h1 class="page-title">Transferencia de <span class="fw-semi-bold">Líder</span></h1>
    </div>
    <div class="col-12 col-xl-4 text-right">

    </div>
</div>

<div class="clearfix"></div>

@include('flash::message')

<div class="clearfix"></div>

<section class="widget" style="padding:0px!important; margin-top:25px!important;">
    <header style="padding:0px 20px!important">
        <div class="content_div">
            <h4 style=" padding: 20px 50px 0!important;">Realiza una tranferencia de un Líder a un Grupo de
                Sección</h4>
            <hr class="divider_tarjet " style="margin-top:15px; margin-bottom:0px;">
        </div>
    </header>
    @include('adminlte-templates::common.errors')
    {!! Form::open(['route' => 'gerenteSupervisors.store_transferencia', 'class' => 'form-horizontal','files' => true, 'style'=>'width:100%' , 'id' => 'formulario_tranferencia_gerente_supervisor']) !!}
    <div class="widget-body" style="padding: 0px 50px ">

        <div class="row">
            <div class="form-group col-xl-6 col-lg-6 col-md-12 col-sm-12  class_transferencia_border"
                style="border:none; border-right:1px solid #c9c9c9; padding:20px 20px 50px; margin:0">
                <h4 style="color:#495057; font-size:14px;"> Líder:</h4>
                {!! Form::label('gerente_supervisor', 'Selecciona un líder a transferir:',
                ['class'=>'labels']) !!}<br />
                <div style="height:15px!important;"></div>
                <select class="selectpicker form-control" data-style="btn-default" data-width="100%"
                    name="gerente_supervisor" tabindex="-1" id="gerente_supervisor">
                    <option value="0" disabled selected>--</option>
                    @foreach($supervisor as $value)
                    <option value="{!! $value->id !!}">{!! $value->user->name !!}</option>
                    @endforeach
                </select>
                @if($errors->validator->has('name'))
                <div class="alert alert-danger alert-transparent alert-sm">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {!! $errors->validator->first('name')!!}
                </div>
                @endif
                <div class="row" style="padding-top:50px;display:none; " id="transferencia_gerente">
                    <div class="col-xl-12">
                        <h4 style="color:#495057; font-size:14px;">Información del Supervisor:</h4>
                    </div>
                    <div class="col-xl-12 ">
                        <label class="labels">Nombre del Líder:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;" id="Nombre">
                        </h5>
                    </div>
                    <div class="col-xl-6 col-md-6 col-sm-12  " style="float:left; ">
                        <label class="labels" style="margin-top:15px!important;">Grupo de Sección Actual:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;" id="grupo_seccion_text">
                        </h5>
                    </div>
                    <div class="col-xl-6 col-md-6 col-sm-12" style="float:right">
                        <label class="labels" style="margin-top:15px!important;">Código:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;" id="Codigo">
                        </h5>
                    </div>
                </div>
            </div>
            <div class="form-group col-xl-6 col-lg-6 col-md-12 col-sm-12 " style="padding:20px ">
                <h4 style="color:#495057; font-size:14px;">Grupo de Secciones:</h4>
                {!! Form::label('grupo_seccion', 'Selecciona la Secciones para transferir:', ['class'=>'labels']) !!}<br />
                <div style="height:15px!important;"></div>
                <select class="selectpicker form-control" data-style="btn-default" data-width="100%" name="grupo_seccion"
                    tabindex="-1" id="grupo_seccion">
                    <option value="0" disabled selected>--</option>
                    @foreach($secciones as $value)
                    <option value="{!! $value->id !!}">{!! $value->nombre !!}</option>
                    @endforeach
                </select>
                @if($errors->validator->has('name'))
                <div class="alert alert-danger alert-transparent alert-sm">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {!! $errors->validator->first('name')!!}
                </div>
                @endif
                <div class="row" style="padding-top:50px;display:none; " id="transferencia_Secciones">
                    <div class="col-xl-12">
                        <h4 style="color:#495057; font-size:14px;">Información del Grupo de Secciones:</h4>
                    </div>
                    <div class="col-xl-12 ">
                        <label class="labels">Nombre del Grupo Secciones:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;" id="NombreS">
                        </h5>
                    </div>
                    <div class="col-xl-6 col-md-6 col-sm-12  " style="float:left;">
                        <label class="labels" style="margin-top:15px!important;">Dirección:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;"
                            id="DireccionS"></h5>
                    </div>
                    <div class="col-xl-6 col-md-6 col-sm-12 " style="float:right">
                        <label class="labels" style="margin-top:15px!important;">Clave:</label><br>
                        <h5 class="fw-normal" style="color:#a2a2a2!important; margin-top:10px!important;" id="Clave">
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="contnedor_transfer" style="padding:0 20px 15px">
        <div class="row top_line">
            <div class="form-group col-12 class_button_flex" style="margin-top:25px; margin-bottom:0px!important;">
                <button type="button" id="transferir" class="btn5 btnImage" data-toggle="tooltip"
                    title="Selecciona un Líder y un Grupo de Secciones para transferir">guardar</button>
                <a href="#" id="btnCancel" class="btnDanger btn1">Cancelar</a>
            </div>
        </div>
    </div>

    <div class="modal fade" id="Asignar" tabindex="-1" role="dialog" aria-labelledby="AsignarLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="AsignarLabel">Asigna un Supervisor a una Sección libre</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-sm-12">
                            <h4 style="color:#495057; font-size:14px;">Hey! Para poder realizar la transferencia, es
                                necesario asignar un Líder a un Grupo de Secciones que ha dejado de tener
                                un Supervisor.</h4>
                            {!! Form::label('grupo_seccion', 'Sección libre:', ['class'=>'labels']) !!}<br />
                            <label id="grupo_seccion_libre" class="labels" style="margin-top:10px!important;"></label>
                        </div>
                        <div class="form-group col-sm-12" id="hide_gerente">
                            {!! Form::label('gerente_supervisor_2', 'Supervisor libre:',
                            ['class'=>'labels','style'=>'margin: 15px 0 0!important']) !!}<br />
                            <select class="selectpicker form-control" data-style="btn-default" data-width="100%"
                                name="gerente_supervisor_2" tabindex="-1" id="gerente_supervisor_2">
                                <option value="0" disabled selected>--</option>
                                @foreach($supervisor_sin_asignar as $value)
                                <option value="{!! $value->id !!}">{!! $value->user->name !!}</option>
                                @endforeach
                            </select>
                            @if($errors->validator->has('name'))
                            <div class="alert alert-danger alert-transparent alert-sm">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                {!! $errors->validator->first('name')!!}
                            </div>
                            @endif
                        </div>
                        <div class="col-sm-12" style="margin-top:35px;" id="crearGerente">
                            <h4 style="color:#495057; font-size:14px;">Si no exite un Líder libre, puedes
                                crear uno:</h4>
                            <input type="radio" name="pago_radio" id="pago_esperado" value=""
                                onchange="clickRadio(this);">
                            <input type="hidden" name="crear_gerente_supervisor_radio_val" id="crear_gerente_supervisor_radio_val">
                            <label for="pago_radio" class="labels" style="margin-top:15px!important">Crear un Gerente
                                Supervisor:</label>
                            <div id="txt_pago_esperado" style="padding:5px 0 10px;"></div>
                            <div class="row" id="hide_formulario">

                                <div class="col-12" style="position:relative;">
                                    {!! Form::label('name', 'Nombre:', ['class' => 'label_class']) !!}
                                    {!! Form::text('name', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('name'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('name')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('a_paterno', 'Apellido paterno:', ['class' => 'label_class']) !!}
                                    {!! Form::text('a_paterno', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('a_paterno'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('a_paterno')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('a_materno', 'Apellido materno:', ['class' => 'label_class']) !!}
                                    {!! Form::text('a_materno', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('a_materno'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('a_materno')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('email', 'Correo electrónico:', ['class' => 'label_class']) !!}
                                    {!! Form::email('email', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('email'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('email')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('telefono', 'Teléfono:', ['class' => 'label_class']) !!}
                                    {!! Form::text('telefono', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('telefono'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('telefono')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('telefono_casa', 'Teléfono fijo:', ['class' => 'label_class']) !!}
                                    {!! Form::text('telefono_casa', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('telefono_casa'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('telefono_casa')!!}
                                    </div>
                                    @endif
                                </div>
                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('fecha_nacimiento', 'Fecha de nacimiento:', ['class' =>
                                    'label_class']) !!}
                                    {!! Form::text('fecha_nacimiento', '', ['class' => 'form-control class_input','id'
                                    => 'fecha_nacimiento']) !!}
                                    @if($errors->validator->has('fecha_nacimiento'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('fecha_nacimiento')!!}
                                    </div>
                                    @endif
                                </div>

                                <div class="col-md-6 col-12" style="position:relative; margin-top:35px">
                                    {!! Form::label('codigo_supervisor', 'Código de supervisor:', ['class' =>
                                    'label_class']) !!}
                                    {!! Form::text('codigo_supervisor', '', ['class' => 'form-control class_input']) !!}
                                    @if($errors->validator->has('codigo_supervisor'))
                                    <div class="alert alert-danger alert-transparent alert-sm">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-hidden="true">×</button>
                                        {!! $errors->validator->first('codigo_supervisor')!!}
                                    </div>
                                    @endif
                                </div>
                                <input type="hidden" value="Gerente supervisor" name="tipo_usuario">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="margin-top:25px;">
                    <button type="submit" class="btn5 btnImage" id="btnAccept" data-toggle="tooltip"
                        title="Selecciona un Gerente para que sea asignado a una grupo_seccion libre">guardar</button>
                    <button type="button" class="btnDanger btn1" id="cancel" data-dismiss="modal">cancelar</button>
                </div>
            </div>
        </div>
    </div>

    {!! Form::close() !!}
</section>


<div class="modal fade" id="CancelTransfer" tabindex="-1" role="dialog" aria-labelledby="CancelTransferLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="CancelTransferLabel">¡Advertencia!</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-sm-12">
                        <h5>Al aceptar la Transferencia del Supervisor será cancelada.</h5>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn2 btnSucces" id="btnCancelTransfer">Aceptar</button>
                <button type="button" class="btnDanger btn1" data-dismiss="modal">cancelar</button>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
<script src="{!! asset('template') !!}/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script>
    //variables globales
    var grupo_gerente_supervisor = 0;

    $(document).ready(function() {
       /*OBTENGO LA INFORMACION DE UN GERENTE grupo_seccion */
        let url_dinamica = "{!! URL::to('/') !!}";
        $('#gerente_supervisor').on('change', function() {
            let id = $(this).val();
            if(id != 0){/*VALIDO QUE EL VALUE->ID DEL SELECT NO SEA 0*/
                $.ajax({
                    url:  url_dinamica+"/api/getInfoGpoSupervisor/"+id,
                    method:"GET",
                    dataType:"json",
                    success:function(value){
                        console.log(value);

                    /*ASIGNO LA INFORMACION DE UN GERENTE grupo_seccion */

                        $('#Nombre').text(value.data.user.name + ' ' + value.data.user.a_paterno + ' ' + value.data.user.a_materno );
                        $('#Codigo').text(value.data.codigo_gerente_supervisor );
                        if(value.data.grupo_secciones_id != null){

                            grupo_gerente_supervisor = value.data.grupo_secciones_id;

                            $('#grupo_seccion_text ').text(value.data.grupo_secciones.nombre);
                            $('#grupo_seccion_libre').text(value.data.grupo_secciones.nombre);
                        }
                        else{
                            $('#grupo_seccion_text').text(value.data.agencia);
                        }
                    },
                    error:function(xhr,estado,error)
                    {

                    }
                });
                $('#transferencia_gerente').css('display','block');
            }
            else{
                $('#transferencia_gerente').css('display','none');
                $('#transferir').attr('type','button');
                $('#transferir').removeClass('btn2 btnSucces');
                $('#transferir').addClass('btn5 btnImage');
                $('#transferir').attr('data-original-title','Selecciona un Líder y un Grupo de Secciones para transferir');
            }
        });

        /*OBTENGO LA INFORMACION DE UNA grupo_seccion */
        $('#grupo_seccion').on('change', function() {
            let id = $(this).val();
            if(id != 0){
                $.ajax({
                    url:  url_dinamica+"/api/getInfoGpoSeccion/"+id,
                    method:"GET",
                    dataType:"json",
                    success:function(value){
                        console.log(value);



                        $('#NombreS').text(value.data.nombre);
                        $('#DireccionS').text(value.data.direccion );
                        $('#Clave').text(value.data.clave);
                    },
                });
                $('#transferencia_Secciones').css('display','block');
                $('#transferir').attr('type','submit');
                $('#transferir').removeClass('btn5 btnImage');
                $('#transferir').addClass('btn2 btnSucces');
                $('#transferir').removeAttr('data-original-title');
            }
            else{
                $('#transferencia_grupo_seccion').css('display','none');
                $('#transferir').attr('type','button');
                $('#transferir').removeClass('btn2 btnSucces');
                $('#transferir').addClass('btn5 btnImage');
                $('#transferir').attr('data-original-title','Selecciona un Líder y un Grupo de Secciones para transferir');
            }
        });


        $('#transferir').on('click', function(e){
            e.preventDefault()
            var validacion = validarSelects();
            // validar si supervisor esta asignado a algo
            if(validacion && grupo_gerente_supervisor != 0){
                $('#Asignar').modal('show');
            }
            else
            {
                $('#formulario_tranferencia_gerente_supervisor').submit();
            }
        });



    });


    function validarSelects(){
        if($('#gerente_supervisor').val() != 0 && $('#grupo_seccion').val()){
            return true;
        }else{
            return false;
        }
    }

    $('#hide_formulario').hide();
   function clickRadio(id){
       $('#hide_gerente').css('display','none');
        $('#hide_formulario').show();
        $('#btnAccept').attr('type','submit');
        $('#btnAccept').removeClass('btn5 btnImage');
        $('#btnAccept').addClass('btn2 btnSucces');
        $('#btnAccept').removeAttr('data-original-title');
        $('#crear_gerente_supervisor_radio_val').val('on');
        $(id).bind('touchstart mousedown', function() {
            this.checked = !this.checked;
            if(this.checked == false){
                $('#crear_gerente_supervisor_radio_val').val('off');
                $('#hide_formulario').hide();
                $('#btnAccept').attr('type','submit');
                $('#btnAccept').addClass('btn5 btnImage');
                $('#btnAccept').removeClass('btn2 btnSucces');
                $('#btnAccept').attr('data-original-title','Selecciona un Líder y un Grupo de Secciones para transferir');
                $('#hide_gerente').css('display','block');
            }
            else{
                $('#hide_gerente').css('display','none');
                $('#hide_formulario').show();
                $('#btnAccept').attr('type','submit');
                $('#btnAccept').removeClass('btn5 btnImage');
                $('#btnAccept').addClass('btn2 btnSucces');
                $('#btnAccept').removeAttr('data-original-title');
            }
        }).bind('click touchend', function(e) {
            e.preventDefault()
        });
   }
   $('#gerente_supervisor_2').on('change',function(){
        let id = $(this).val();
        if(id != 0){
            $('#btnAccept').attr('type','submit');
            $('#btnAccept').removeClass('btn5 btnImage');
            $('#btnAccept').addClass('btn2 btnSucces');
            $('#btnAccept').removeAttr('data-original-title');

        }
        else{
            $('#btnAccept').attr('type','submit');
            $('#btnAccept').addClass('btn5 btnImage');
            $('#btnAccept').removeClass('btn2 btnSucces');
            $('#btnAccept').attr('data-original-title','Selecciona un Líder y un Grupo de Secciones para transferir');
        }
   });
    $(window).load(function() {
        console.log();
        if($('.class_input').val() == ' '){
            $('.class_input').parent().find('.label_class').addClass('active2');
        }
    });
    $('.class_input').on('focusin', function() {
        $(this).parent().find('.label_class').addClass('active2');
    });

    $('.class_input').on('focusout', function() {
        if (!this.value) {
            $(this).parent().find('.label_class').removeClass('active2');
        }
    });
    $('#btnCancel').click(function(){
        if($('#Nombre').text() == ""){

        }
        else{
            $('#CancelTransfer').modal('show');
        }
    });
    $('#btnCancelTransfer').click(function(){
        location.reload();
    })

</script>
@endsection