@extends('fragments.fullTemplate')
@section('titulo')
    Clientes
@endsection
@section('contenido')
@php
    //use App\Http\Controllers\plaza_de_cobros;
    //$objPlaza = new plaza_de_cobros();
@endphp
    <div class="ui big breadcrumb">
        <div class="section">Catálogo</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Clientes</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('warning'))
            <div class="alert alert-warning text-center">
                <strong>{{ session()->get('warning') }}</strong>
            </div>
            @endif
            @if(session()->has('success'))
                <div class="alert alert-success text-center">
                    <strong>{{ session()->get('success') }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
            
        </div>
    </div>
    <div class="ui segment">
        <form class="ui form" action="clientes_search" method="get">
            <div class="inline fields sx-remove-margin">
                <div class="twelve wide field">
                    <input type="search" name="search" id="search" placeholder="Nombre del cliente...">
                </div>
                <div class="four wide field">
                    <input class="ui button" type="submit" name="" value="Buscar cliente">
                </div>
            </div>
        </form>
    </div>
    <a class="ui button fluid primary" id="new_cliente">
        <i class="pencil alternate icon"></i> Nuevo Clientes
    </a>
    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <p class="text-center" >{{$clientes->count()}}</strong> resultados en esta página</p>
            <table class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th class="text-center collapsing">Tipo de cliente</th>
                        <th class="text-center collapsing">Nombre</th>
                        <th class="text-center collapsing">Razón social</th>
                        <th class="text-center collapsing">Email</th>
                        <th class="text-center collapsing">Teléfono oficina</th>
                        <th class="text-center collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($clientes->count())
                    @foreach ($clientes as $cliente)
                        <tr>
                            <td class="text-center">
                                @if ($cliente->tipo_cliente == 'Gestor')
                                    <a id="gestor{{$cliente->id_cliente}}" class="empresas_gestor ui orange label" data-id_cliente="{{$cliente->id_cliente}}" data-permiso_actualizar="{{$permisos->actualizar}}">
                                        {{ $cliente->tipo_cliente }}
                                    </a>
                                @else
                                    <button disabled class="ui purple label">
                                        {{ $cliente->tipo_cliente }}
                                    </button>
                                @endif
                            </td>
                            <td>{{$cliente->nombre}}</td>
                            <td>
                                @if($cliente->razon_social)
                                    {{$cliente->razon_social}}
                                @endif
                            </td>
                            <td>{{$cliente->email}}</td>
                            <td>{{$cliente->tel_oficina}}</td>
                            <td>
                                <div class="ui tiny icon buttons">
                                    @if ($permisos->actualizar == 1)
                                      <!-- Editar -->                                    
                                      <a class="ui button green edit_cliente" 
                                         title="Modifica" 
                                         id="cliente{{$cliente->id_cliente}}"
                                         
                                         data-id_cliente="{{$cliente->id_cliente}}">
                                          <i class="pencil alternate icon"></i>
                                      </a>


                                        
                                    @endif
                                    
                                      <!-- Eliminar -->
                                      {{--<form action="{{action('usuarios@destroy', $usuario->id_usuario)}}" method="post">
                                          {{csrf_field()}}
                                          <input name="_method" type="hidden" value="DELETE">
                                          <button class="ui button red" type="submit">
                                              <i class="trash alternate icon"></i>
                                          </button>
                                      </form>--}}
                                    
                                    @if ($permisos->eliminar == 1)
                                      <button class="ui button red delete_cliente" data-id_cliente="{{$cliente->id_cliente}}" data-nombre_completo="{{$cliente->nombre." ".$cliente->apaterno}}">
                                          <i class="trash alternate icon"></i>
                                      </button>
                                    @endif
                                    @if($id_tipo_usuario == 4)
                                    <a class="ui button orange edit" 
                                            title="Agregar nota" 
                                            id="nota_usuario"
                                            data-id="{{$cliente->id_cliente}}">
                                            <i class="sticky note icon"></i>
                                    </a>
                                    
                                    @elseif($id_tipo_usuario != 4)
                                        @if($nota = $cliente->nota)
                                            @if($nota->nota)
                                            <a class="ui button orange" 
                                                    title="Mensaje" 
                                                    data-tooltip="{{$nota->nota}}"
                                                    data-position="left center">
                                                    <i class="exclamation circle icon"></i>
                                            </a>
                                            @endif
                                        @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            {{$clientes->links("pagination::bootstrap-4")}}
        </div>
    </div>
    <!---WIZARD--------------------->
   <style type="text/css">
    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    /*.stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }**/

    .stepwizard-row:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-order: 0;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
    }
   </style> 
    @include('Clientes.new_cliente')
    <script>
        $(document).ready(function(){


            $('#new_cliente').click(function(){
                $('#ModalCliente').modal('show');
                let navListItems = $('div#insert_cliente div.setup-panel div a'),
                allWells = $('div#insert_cliente .setup-content'),
                allNextBtn = $('div#insert_cliente .nextBtn');
                allBackBtn = $('div#insert_cliente .backBtn');

                navListItems.click(function (e) {
                    e.preventDefault();
                    var $target = $($(this).attr('href')),
                            $item = $(this);

                    if (!$item.hasClass('disabled')) {
                        navListItems.removeClass('btn-primary').addClass('btn-default');
                        $item.addClass('btn-primary').removeClass('disabled');
                        allWells.hide();
                        $target.show();
                        //$target.find('input:eq(0)').focus();
                    }
                });

                allNextBtn.click(function(){
                    var curStep = $(this).closest("div#insert_cliente .setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div#insert_cliente div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;

                    $(".form-group").removeClass("has-error");
                        navListItems.addClass('disabled');
                        nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
                });

                allBackBtn.click(function(){
                    var curStep = $(this).closest("div#insert_cliente .setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div#insert_cliente div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;

                    $(".form-group").removeClass("has-error");
                        navListItems.addClass('disabled');
                        nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
                });

                $('div.setup-panel div a.btn-primary').trigger('click');
            });

            $('#tipo_cliente').change(function(){
                if($(this).val() == 'Directo'){

                    if(!($('.change_gestor').attr('hidden'))){
                        $('.change_gestor').attr('hidden','true');
                    }

                    $('.change_directo').removeAttr('hidden');

                }else if($(this).val() == 'Gestor'){

                    if(!($('.change_directo').attr('hidden'))){
                        $('.change_directo').attr('hidden', 'true');
                    }

                    $('.change_gestor').removeAttr('hidden');
                     
                }
            });
        });

        

            
    </script>
    @include('Clientes.modify_modal')
    <script>
        var resultData = {};
        $(document).ready(function(){
            $('a.edit_cliente').on('click', function(){

                let navListItems = $('div#update_cliente div.setup-panel div a'),
                allWells = $('div#update_cliente .setup-content'),
                allNextBtn = $('div#update_cliente .nextBtn');
                allBackBtn = $('div#update_cliente .backBtn');
                

                navListItems.click(function (e) {
                    e.preventDefault();
                    var $target = $($(this).attr('href')),
                            $item = $(this);

                    if (!$item.hasClass('disabled')) {
                        navListItems.removeClass('btn-primary').addClass('btn-default');
                        $item.addClass('btn-primary').removeClass('disabled');
                        allWells.hide();
                        $target.show();
                        //$target.find('input:eq(0)').focus();
                    }
                });

                allNextBtn.click(function(){
                    var curStep = $(this).closest("div#update_cliente .setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div#update_cliente div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;

                    $(".form-group").removeClass("has-error");
                        navListItems.addClass('disabled');
                        nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
                });

                allBackBtn.click(function(){
                    var curStep = $(this).closest("div#update_cliente .setup-content"),
                        curStepBtn = curStep.attr("id"),
                        nextStepWizard = $('div#update_cliente div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                        curInputs = curStep.find("input[type='text'],input[type='url']"),
                        isValid = true;

                    $(".form-group").removeClass("has-error");
                        navListItems.addClass('disabled');
                        nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
                });

                $('div.setup-panel div a.btn-primary').trigger('click');
                
                idCliente = $(this).attr('id');
                id_cliente = $('#'+idCliente).data('id_cliente');
               
                //alert(id_cliente);
                
                $.ajax({
                    url:"show_clientes",
                    method:"POST",
                    data:{'id_cliente': id_cliente, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                        $('#modify_modal').modal('show');
                    }
                });
            });
        });

        $('div#modify select#tipo_cliente').change(function(){

                if($(this).val() == 'Directo'){
                    
                    if(!($('.change_gestor_modify').attr('hidden'))){
                        $('.change_gestor_modify').attr('hidden','true');
                    }

                    $('.change_directo_modify').removeAttr('hidden');

                }else if($(this).val() == 'Gestor'){
                    
                    if(!($('.change_directo_modify').attr('hidden'))){
                        $('.change_directo_modify').attr('hidden', 'true');
                    }

                    $('.change_gestor_modify').removeAttr('hidden');
                     
                }
            });
        
        $('#modify_modal').on('show.bs.modal', function () {
            $('#id_clnt').val(id_cliente);
           
            $("#modify_modal :input").each(function(){
                input = $(this).attr('id');
                if(input in resultData){
                    
                    $('#modify_modal #'+input).val(resultData[input]);
                    if(input == "tipo_cliente"){
                        console.log('funciona');
                        if(resultData[input] == 'Directo'){
                            
                            if(!($('.change_gestor_modify').attr('hidden'))){
                                $('.change_gestor_modify').attr('hidden','true');
                            }

                            $('.change_directo_modify').removeAttr('hidden');

                        }else if(resultData[input] == 'Gestor'){
                            
                            if(!($('.change_directo_modify').attr('hidden'))){
                                $('.change_directo_modify').attr('hidden', 'true');
                            }

                            $('.change_gestor_modify').removeAttr('hidden');
                            
                        }
                    }
                    
                }
            });
        });
        
    </script>
    @include('Clientes.delete_modal')
    <script>
        $(document).on('click','.delete_cliente',function(){
            var id_cliente=$(this).attr('data-id_cliente');
            var nombre_completo=$(this).attr('data-nombre_completo');
            //alert(id_cliente);
            $('#id_clnt_destroy').val(id_cliente);
            $('#nombre_clnt').html(nombre_completo);
            //alert(nombre_completo+' '+id_cliente);

            $('#delete_cliente_modal').modal('show'); 
        });
    </script>
    @include('Clientes.empresas_gestor_modal')
    <script>
        var resultData = {};
        $(document).ready(function(){
            $('#nuevo_cliente').bind("submit", function(){
                var btnEnviar = $("#btnEnviar");
                $.ajax({
                    type: $(this).attr("method"),
                    url: $(this).attr("action"),
                    data:$(this).serialize(),
                    beforeSend: function(){
                        /*
                        * Esta función se ejecuta durante el envió de la petición al
                        * servidor.
                        * */
                        // btnEnviar.text("Enviando"); Para button 
                        btnEnviar.val("Enviando"); // Para input de tipo button
                        btnEnviar.attr("disabled","disabled");
                    },
                    complete:function(data){
                        /*
                        * Se ejecuta al termino de la petición
                        * */
                        btnEnviar.val("Enviar formulario");
                        btnEnviar.removeAttr("disabled");
                    },
                    success: function(data){
                        /*
                        * Se ejecuta cuando termina la petición y esta ha sido
                        * correcta
                        * */
                        result = JSON.parse(data); 
                        resultData = result.data;
                        permiso_actualizar = 1;
                        $('#ModalCliente').modal('hide')
                        $('#empresas_gestor_modal').modal('show');
                    },
                    error: function(response, textStatus, errorThrown){
                        /*
                        * Se ejecuta si la peticón ha sido erronea
                        * */
                        //alert("Problemas al tratar de enviar el formulario");
                        //data = JSON.parse(response)
                        var errors = '';
                        $('div#errors').html('');
                        $.each(response.responseJSON.errors, function(key,value) {
                            $('div#errors').append('<div class="alert alert-danger" role="alert">'+value+'</div>');
                        });
                    }
                });
                // Nos permite cancelar el envio del formulario
                return false;
                
            });
            $('a.empresas_gestor').on('click', function(){
                
                idCliente = $(this).attr('id');
                id_cliente = $('#'+idCliente).data('id_cliente');
                $('#id_cliente_gestor').val(id_cliente);

                permiso_actualizar = $('#'+idCliente).data('permiso_actualizar');
                //alert(permiso_actualizar);
                
                $.ajax({
                    url:"show_empresas_gestor",
                    method:"POST",
                    data:{'id_cliente': id_cliente, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                        //alert(resultData);
                        $('#empresas_gestor_modal').modal('show');
                    }
                });
            });
        });
        $('#empresas_gestor_modal').on('show.bs.modal', function () {
            //console.log(resultData.length);
            if (permiso_actualizar == 1) {
                tabla_empresas = "<table class='ui celled table unstackable'><thead><tr><th class='text-center'>RFC</th><th class='text-center'>Razón social</th><th class='text-center collapsing'>Acciones</th></tr></thead><tbody>";
                if (resultData.length > 0) {
                    $.each(resultData, function(key, value_empresas_gestor) {
                        tabla_empresas +="<tr><td>"+ (value_empresas_gestor['rfc']?value_empresas_gestor['rfc']:'') +"</td><td>"+value_empresas_gestor['nombre_empresa']+"</td><td><div class='ui tiny icon buttons'><a class='ui button green edit_modify_empresa_modal' title='Modifica' id='id_empresa"+value_empresas_gestor['id_empresa']+"' data-id_empresa='"+value_empresas_gestor['id_empresa']+"'><i class='pencil alternate icon'></i></a><a class='ui button secondary unlink_empresa' data-id_empresa='"+value_empresas_gestor['id_empresa']+"' data-nombre_empresa='"+value_empresas_gestor['nombre_empresa']+"' data-id_cliente='"+value_empresas_gestor['id_cliente']+"'><i class='unlink icon'></i></a></div></td></tr>";
                    });
                }else{
                    tabla_empresas +="<tr><td class='text-center' colspan='8'>No se encontraron registros</td></tr>" 
                } 
                tabla_empresas +="</tbody></table>";
                $('#empresas_de_gestores').html(tabla_empresas);
            }else{
                tabla_empresas = "<table class='ui celled table unstackable'><thead><tr><th class='text-center'>RFC</th><th class='text-center'>Razón social</th><th class='text-center collapsing'>Acciones</th></tr></thead><tbody>";
                if (resultData.length > 0) {
                    $.each(resultData, function(key, value_empresas_gestor) {
                        tabla_empresas +="<tr><td>"+ (value_empresas_gestor['rfc']?value_empresas_gestor['rfc']:'') +"</td><td>"+value_empresas_gestor['nombre_empresa']+"</td><td><div class='ui tiny icon buttons'><a class='ui button secondary unlink_empresa' data-id_empresa='"+value_empresas_gestor['id_empresa']+"' data-nombre_empresa='"+value_empresas_gestor['nombre_empresa']+"' data-id_cliente='"+value_empresas_gestor['id_cliente']+"'><i class='unlink icon'></i></a></div></td></tr>";
                    });
                }else{
                    tabla_empresas +="<tr><td class='text-center' colspan='8'>No se encontraron registros</td></tr>" 
                } 
                tabla_empresas +="</tbody></table>";
                $('#empresas_de_gestores').html(tabla_empresas);
            }

        });
        
    </script>
    @include('Clientes.new_empresa')
    <script>
        $(document).ready(function(){
            $('#new_empresa').click(function(){
                $('#Modal_nueva_empresa').modal('show');
            });
/*
            $('#tipo_cliente').change(function(){
                if($(this).val() == 'Directo'){

                    if(!($('#change_gestor').attr('hidden'))){
                        $('#change_gestor').attr('hidden','true');
                    }

                    $('#change_directo').removeAttr('hidden');

                }else if($(this).val() == 'Gestor'){

                    if(!($('#change_directo').attr('hidden'))){
                        $('#change_directo').attr('hidden', 'true');
                    }

                    $('#change_gestor').removeAttr('hidden');
                     
                }
            });*/
        });
    </script>
    @include('Clientes.unlink_empresa_modal')
    <script>
        $(document).on('click','.unlink_empresa',function(){

            var id_empresa=$(this).attr('data-id_empresa');
            var nombre_empresa=$(this).attr('data-nombre_empresa');
            var id_cliente=$(this).attr('data-id_cliente');
            //alert(nombre_empresa);
            $('#id_empresa_unlink').val(id_empresa);
            $('#id_cliente_unlink').val(id_cliente);
            $('#nombre_empresa').html(nombre_empresa);
            //alert(nombre_completo+' '+id_cliente);

            $('#unlink_empresa_modal').modal('show'); 
        });
    </script>
    @include('Clientes.modify_empresa_modal')
    <script>
        var resultData = {};
        $(document).ready(function(){
            $(document).on('click','.edit_modify_empresa_modal',function(){
                idEmpresa = $(this).attr('id');
                id_empresa = $('#'+idEmpresa).data('id_empresa');
                //$('#id_cliente_gestor').val(id_empresa);
                //alert(id_empresa);
                  
                $.ajax({
                    url:"show_edit_empresas",
                    method:"POST",
                    data:{'id_empresa': id_empresa, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                            
                        //alert(resultData);
                        $('#Modal_edit_empresa').modal('show');
                    }
                });
            });
        });
        $('#Modal_edit_empresa').on('show.bs.modal', function () {
            $('#id_edit_empresa_modify').val(id_empresa);
            $("#Modal_edit_empresa :input").each(function(){
                input = $(this).attr('id');
                //alert(input); // This is the jquery object of the input, do what you will
                //console.log(input);
                if(input in resultData){
                    
                    $('#Modal_edit_empresa #'+input).val(resultData[input]);
                    
                }
            });
        });
   
        
        </script>
     @include('Clientes.notas')
    <script>
        var id_cliente = 0;
        var resultData1 = {};
        $(document).ready(function(){
            $('a#nota_usuario').click(function(){
                id_cliente = $(this).data('id');
                $.ajax({
                    url:"show_cliente_notas",
                    method:"POST",
                    data:{'id_cliente': id_cliente, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        result = JSON.parse(response); 
                        resultData1 = result.data;
                        $('#modalNotas').modal('show');
                    }
                });
            });
        });

        $('#modalNotas').on('show.bs.modal', function () {
            $('#modal-form-modify input#id_cliente').val(id_cliente);
            if(resultData1){
                if($('#modal-form-modify input#id_nota')){
                    $('#modal-form-modify').append('<input type="text" class="form-control" id="id_nota" name="id_nota" hidden>')
                }
            
                $("#modal-form-modify :input").each(function(){
                    input = $(this).attr('id');
                    if(input in resultData1){
                        
                        $('#modal-form-modify #'+input).val(resultData1[input]);
                        
                    }
                });
            }else{
                $('#modal-form-modify #nota').val('');
                if($('#modal-form-modify input#id_nota')){
                    $('input#id_nota').remove();
                }
                
            }
            
        });
    </script>
@endsection