@extends('menu/menu')
<script
			  src="https://code.jquery.com/jquery-3.4.1.js"
			  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
			  crossorigin="anonymous"></script>

<script src="{{ asset('select2/select2.min.js') }}" defer></script>

 {{-- {{$trabajadores}} --}}

@section('content') 
{{-- {{$cliente}} --}}

@if ( session('mensaje_error') )

    <div class="alert alert-danger">{{ session('mensaje_error') }}</div>
    <a class="dropdown-item text-right" href="{{route('go_see_traba')}}">
        <button class="btn btn-prim w-25">Trabajadores</button>
    </a> 

@endif

@if ( session('mensaje') )

    <div class="alert alert-success">{{ session('mensaje') }}</div>
    <a class="dropdown-item text-right" href="{{route('go_see_traba')}}">
        <button class="btn btn-prim w-25">Trabajadores</button>
    </a> 

@endif

<div class="container mt-5">
    <div class="title-vista mt-4">Asignar Sucursal Usuario</div>
</div>

<div class="container">
    <form action="{{route('add_sucursales_trabajador')}}" method="POST">
    @csrf
        <div class="row">
            <div class="col-sm-4 form-group">
                <label for="">Clientes</label>
                <input class="form-control mayuscula" type="text" name="" id="propi" placeholder="BUSCAR">
                <select name="" id="mi_select" class="custom-selct overflow-auto" size="23">
                    @foreach ($cliente as $item)
                        <option name="" id="" value="{{$item->id}}">{{$item->razon_social}}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-sm-4 form-group">
                <label for="">Sucursales</label>
                <input class="form-control" type="text" name="" id="propi_2" placeholder="BUSCAR">
                <select name="" id="mi_select_2" class="form-control" size="23" class="overflow-auto">

                </select>
            </div>
            <div class="col-sm-4 form-group">
                <input style="display:none" type="text" value="{{$id_trabajado}}" name="id_trabajador">
                <label for="">Seleccionados</label>
                <select class="form-control" type="text" name="" id="propi_3" placeholder="" disabled>
                    <span id="mi_select_3">
                        @foreach ($mis_sucursales as $item)
                            <input type="checkbox"  name="selecionados[]" checked value="{{$item->id_sucursals}}"> {{$item->razon_social}} <br> ({{$item->nombre}})<br>
                        @endforeach
                    </span>
                </select>
            </div>
        </div>

        
    </form>
</div>

<div class="container">
    <div class="mt-5 text-center">       
        <button type="submit" class="btn btn-prim w-25">Guardar</button>  
    </div>
  

</div>

@endsection

<script type="text/javascript">
    // Write on keyup event of keyword input element
    $(document).ready(function(){


    $("#propi").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#mi_select option"), function() {
    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
    $(this).hide();
    else
    $(this).show();
    });
    });


    $("#propi_2").keyup(function(){
    _this = this;
    // Show only matching TR, hide rest of them
    $.each($("#mi_select_2 option"), function() {
    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
    $(this).hide();
    else
    $(this).show();
    });
    });

    $("#mi_select").change(function(){

            buscar_sucursales_por_cliente($('select[id=mi_select]').val());

    });
    
    
    $("#mi_select_2").change(function(){

                var id_nombre = $('select[id=mi_select_2]').val();
                var opt = id_nombre.split("--");

            
                // $("select[id=mi_select_2]").find("option[value='"+$('select[id=mi_select_2]').val()+"']").prop("disabled",true);

                // var opciones = "<option selected  value="+opt[0]+" multiple>"+opt[1]+"</opciones>";

                var opciones= '<input type="checkbox"  checked id="'+opt[0]+'" name="selecionados[]" value="'+opt[0]+'">' +opt[1]+'<br> ';


            $('#mi_select_3').append(opciones);

	});


    // $("#mi_select_3").change(function(){

    //         var id_nombre = $('select[id=mi_select_3]').val();

    //         $('#mi_select_3 option[value="'+id_nombre+'"]').remove();
          
    //         });


    $(document).on('change','input[type="checkbox"]',function(e){

        // alert(this.checked);
        if(this.checked == false){
             $('checkbox[value="'+this.value+'"]').remove();
           
        }

    });

   });

   


   function buscar_sucursales_por_cliente(id_cliente){



    urls = "../buscar_sucursal_ciente";

    $.ajax({

        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

        type: 'POST',

        url: urls,

        data: { 'id_cliente': id_cliente },

        success: function(data) {

            $('#mi_select_2').empty();
            $('#mi_select_2').append(data);
       //     alert(data);

      
        },

        error: function(xhr, status) {

            alert('Disculpe, ha ocurrido un problema, intente mas tarde');

        }

    });


   }
  </script>