@extends('layouts.app')

@section('content')

    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                        <div class="page-title text-danger">Sin Sucursal</div>
                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li><i class="fa fa-square"></i>&nbsp;<a class="parent-item" href="{{ url('/puestos') }}">Listado de Rutas</a>
                        &nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">{{isset($edit) ? 'Actualizar' : 'Crear'}} - Ruta</li>
                    </ol>
                </div>
            </div>
            <!-- start widget -->
            <!-- start admited patient list -->
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>{{isset($edit) ? 'Actualizar' : 'Crear'}} - Ruta</header>
                        </div>
                        
                        <div class="card-body">
                            @if(isset($edit))

                            @else
                                {!! Form::open(['url' => 'cobros/cobrador/rutas','method'=>'POST','role'=>'form','id'=>'frmRutas1']) !!}
                            @endif
                            <div class="row col-md-12">
                                 {!! Form::mtext('nombre',isset($edit) ? $edit->ruta_nombre : null,'Nombre de Ruta',$errors,6,true,true,[['onkeyup'=>'javascript:this.value=this.value.toUpperCase()']]) !!}

                                 {!! Form::mselect('estado',['1'=>'Activo','0'=>'Inactivo'],isset($edit) ? $edit->ruta_estado == '1' ? $edit->ruta_estado : '0' : '1','Estado',$errors,6) !!}

                            </div>
                            
                            {!! Form::close() !!}
                            @isset($edit)
                              <div class="row col-md-12" style="background: #f3f3f3;">
                                  <div class="col-md-6">

                                      <legend>Clientes Sin Ruta Asociada
                                        {!! Form::open(['url' => 'cobros/cobrador/rutas/'.$edit->ruta_id.'/editar','method'=>'get','id'=>'frmFiltros']) !!}
                                            {!! Form::select('nombres_clientes', [],null,['id'=>'nombres_clientes','class'=>'form-control','placeholder'=> '-- Cliente -','onchange'=>'filtrar()']) !!}
                                        {!! Form::close() !!}
                                      </legend>
                                      <div id="list-A" class="cotnten-list" style="max-height: 500px; overflow-y: scroll; overflow-x: hidden;">
                                          <ul id="w1" class="sortable list kv-connected cursor-move" data-krajee-kvhtml5sortable="kvHtml5Sortable_697c48f1" aria-dropeffect="move">
                                              
                                            @if(count($notclients)>0)
                                                @foreach($notclients as $key => $item)
                                                <li id="at{{$item->cliente_id }}" class="no-padding" draggable="true" role="option" aria-grabbed="false">
                                                    <table id="item-79" class="table no-margin">
                                                        <tbody>
                                                            <tr>
                                                                <td class="text-left vertical-middle" style="width: 25%;">{{$item->cliente_nombres.' '.$item->cliente_apellido1.' '.$item->cliente_apellido2}}</td>
                                                                <td class="text-left vertical-middle" style="width: 25%;">{{$item->cliente_direccion}}</td>
                                                                <td class="text-left vertical-middle" style="width: 15%;">
                                                                    {{ str_replace("]" , "", str_replace('"', "", str_replace("[", "", $item->cliente_telefonos))) }}
                                                                  {{--   (", ", $array); --}}
                                                                </td>
                                                                <td style="width: 30%;">
                                                                    <input type="hidden" class="form-control" name="ruta_por_cliente_id[]" value="{{$item->ruta_por_cliente_id}}" />
                                                                    <input type="hidden" class="form-control" name="ruta_por_cliente_cliente_id[]" value="{{$item->cliente_id}}" />
                                                                    <input type="text" class="form-control" name="ruta_por_cliente_observaciones[]" value="{{$item->ruta_por_cliente_observaciones}}" placeholder="Observaciones..." />
                                                                </td>
                                                                <td class="text-center vertical-middle"><span class="fa fa-trash fa-lg" style="cursor: pointer;" onclick="removeItem({{$item->cliente_id }})"></span></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </li>

                                                @endforeach
                                            @endif
                                          </ul>
                                      </div>
                                  </div>
                                    
                                  <div class="col-md-6">
                                    @if(isset($edit))
                                        {!! Form::model($edit,['url' => ['cobros/cobrador/rutas/actualizar/'.$edit->ruta_id],'method'=>'PATCH','id'=>'frmRutas2']) !!}
                                    @else

                                    @endif
                                      <div class="row">
                                          <legend>Clientes en la Ruta</legend>
                                          <div id="list-B" class="cotnten-list" style="max-height: 500px; overflow-y: scroll; overflow-x: hidden;">
                                              <ul id="w2" class="sortable list kv-connected cursor-move" data-krajee-kvhtml5sortable="kvHtml5Sortable_697c48f1" aria-dropeffect="move">
                                                
                                                    <input type="hidden" name="nnombre" id="nnombre" />
                                                    <input type="hidden" name="eestado" id="eestado" />
                                                    <li id="nulled" class="no-padding" style="width: 1200px;" draggable="true" role="option" aria-grabbed="false">
                                                        <table id="item-79" class="table no-margin">
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-left vertical-middle" style="width: 25%;"></td>
                                                                    <td class="text-left vertical-middle" style="width: 25%;"></td>
                                                                    <td class="text-left vertical-middle" style="width: 15%;"></td>
                                                                    <td style="width: 30%;">
                                                                    </td>
                                                                    <td class="text-center vertical-middle"></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </li>
                                                @if(count($clients)>0)
                                                    @foreach($clients as $key => $item)
                                                    <li id="at{{$item->cliente_id }}" class="no-padding" draggable="true" role="option" aria-grabbed="false">
                                                        <table id="item-79" class="table no-margin">
                                                            <tbody>
                                                                <tr>
                                                                    <td class="text-left vertical-middle" style="width: 25%;">{{$item->cliente_nombres.' '.$item->cliente_apellido1.' '.$item->cliente_apellido2}}</td>
                                                                    <td class="text-left vertical-middle" style="width: 25%;">{{$item->cliente_direccion}}</td>
                                                                    <td class="text-left vertical-middle" style="width: 15%;">
                                                                        {{str_replace("]" , "", str_replace('"', "", str_replace("[", "", $item->cliente_telefonos)))}}
                                                                        
                                                                    </td>
                                                                    <td style="width: 30%;">
                                                                        <input type="hidden" class="form-control" name="ruta_por_cliente_id[]" value="{{$item->ruta_por_cliente_id}}" />
                                                                        <input type="hidden" class="form-control" name="ruta_por_cliente_cliente_id[]" value="{{$item->ruta_por_cliente_cliente_id}}" />
                                                                        <input type="text" class="form-control" name="ruta_por_cliente_observaciones[]" value="{{$item->ruta_por_cliente_observaciones}}" placeholder="Observaciones..." />
                                                                    </td>
                                                                    <td class="text-center vertical-middle"><span class="fa fa-trash fa-lg" style="cursor: pointer;" onclick="removeItem({{$item->cliente_id }})"></span></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </li>
                                                    @endforeach
                                                @endif
                                                
                                              </ul>
                                          </div>
                                      </div>
                                      <div class="row">
                                          <div class="col-md-12 text-center">
                                              <div class="row">
                                                  <div class="row">
                                                      <div class="col-sm-6">
                                                          <input type="hidden" id="ruta-ruta_nombre" name="" value="MARVIN" maxlength="200" placeholder="Nombre de Ruta" />
                                                      </div>

                                                      <div class="col-sm-6">
                                                          <input type="hidden" id="ruta-ruta_estado" name="" value="1" placeholder="Estado" />
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>

                                      {!! Form::close() !!}

                                  </div>

                              </div>
                            @endif

                        </div>
                        <div class="row">
                        <div class="col-6">
                            @isset($edit)
                                @if(count($notclients)>0)
                                    {{ $notclients->appends([ ])->links() }}
                                @endif
                            @endif
                        </div>
                      </div>
                        <div class="card-footer text-center">
                            <div class="text-center">
                                <button type="button" onclick="clickSubmit()" class="btn bg-success">Aceptar</button>
                                <a class="btn bg-danger" href="{{ url('cobros/cobrador/rutas/listar') }}">Cancelar</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
@endsection
@section('script')
    <script>
        function filtrar(){
            var prm_filtro = $('#nombres_clientes').val();
            if(prm_filtro != ''){
                document.getElementById('frmFiltros').submit();
            }
        }
        $(document).ready(function () {
            
             //Initialize Select2 Elements
            //$('.select2').select2()

             $('#nombres_clientes').select2({
                ajax: {
                    dataType: 'json',
                    url: '{{ url("cobros/cobrador/lista_nombre/clientes") }}',
                    delay: 250,
                    //minimumInputLength: 3,
                    data: function(param) {
                            let q = param.term.toLowerCase()
                            var query = {
                                search: q
                            }
    
                        console.log('query :', query)
                        return query;
                    },
                    processResults: function (data, page) {
                    return {
                        results: data
                    };
                    },
                    theme: "classic"
                }
            });


          $('#frmRutas').validate({
                rules: {
                  nombre: {
                    required: true
                  },
                   estado: {
                    required: true
                  }, 
                },
                messages: {
                  nombre: {
                    required: "Nombre de Ruta no puede estar vacío."
                  },
                  estado: {
                    required: "Campo estado es requerido"
                  },
                },
                errorElement: 'span',
                errorPlacement: function (error, element) {
                  error.addClass('invalid-feedback');
                  element.closest('.form-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {
                  $(element).addClass('is-invalid');
                },
                unhighlight: function (element, errorClass, validClass) {
                  $(element).removeClass('is-invalid');
                }
              });
            });
    </script>

    <script>
      jQuery(function ($) {

        var oldList, newList, item;
        $('.sortable').sortable({
            start: function(event, ui) {
                item = ui.item;
                newList = oldList = ui.item.parent().parent();
            },
            stop: function(event, ui) {          
                // alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
            },
            change: function(event, ui) {  
                if(ui.sender) newList = ui.placeholder.parent().parent();
            },
            connectWith: ".sortable"
        }).disableSelection();

      });
    </script>

    <script>
        function removeItem(el) {
            var elementnum = 'at' + el;
            var element = document.getElementById(elementnum);
            // console.log(element);
            element.parentNode.removeChild(element);
            // element.classList.add("hidden");
        }
    </script>

    <script>
        function clickSubmit() {
            if(jQuery("#nnombre").val() != null){
                jQuery('#nnombre').val(jQuery("#nombre").val())
                jQuery('#eestado').val(jQuery("#estado").val())
                document.getElementById("frmRutas2").submit();
            }else{
                document.getElementById("frmRutas1").submit();
            }

        };
    </script>
@endsection