@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" href="{{route('go_see_traba')}}" style="text-align: right"> <button class="btn btn-success">Trabajadores</button></a> 

@endif

@if ( session('mensaje') )

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

@endif

<div class="container">
<br>
    <h2>Asignar Sucursal Usuario</h2>

    <form action="{{route('add_sucursales_trabajador')}}" method="POST">
        {{-- <form action="" method="POST"> --}}
          @csrf


    <div class="row">


    <div class="col-sm" class="overflow-auto"><br>
        <label for="">Clientes</label>
        <input class="form-control" type="text" name="" id="propi" placeholder="BUSCAR">
            <select name="" id="mi_select" class="form-control" size="23" class="overflow-auto">
                    @foreach ($cliente as $item)

                      <option name="" id="" value="{{$item->id}}">{{$item->razon_social}}</option>
                        
                    @endforeach
            </select>

    </div>
    <div class="col-sm">
        <br>
        <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">
        <br>
        <input style="display:none" type="text" value="{{$id_trabajado}}" name="id_trabajador">
        <label for="">Seleccionados</label>
             <input class="form-control" type="text" name="" id="propi_3" placeholder="" disabled>
        {{-- <select name="mis_sucursales" name="" id="mi_select_3" class="form-control" size="23" class="overflow-auto" > --}}
            <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>
       <br>
            {{-- <button type="submit" style="text-align: right" class="btn btn-primary btn-lg ">Guardar</button>   --}}
     
    </div>
  
  </div>
  <div class="row" style="float: right;">       
    <button type="submit" style="text-align: right" class="btn btn-primary btn-lg ">Guardar</button>  
</div>
</form>

</div>

<div class="container">

  

</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>