@extends('modules.head') @section('contenido')
<div class="box-header">
<a class="btn btn-app btnReportProducts" href="{{url('/comments/report')}}">
    <i class="fa fa-cloud-download"></i> {{ Lang::get('messages.screen_comments_tag9')}}
  </a>
</div>
<!-- LIST lines-->
<div class="box">
    <div class="box-header">
        <h3 class="box-title">{{ Lang::get('messages.screen_comments_tag1')}} </h3>
    </div>
    <!-- /.box-header -->
    <div class="box-body table-responsive">
        <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag2')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag8')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag3')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag4')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag5')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag6')}}</th>
                    <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">{{ Lang::get('messages.screen_comments_tag7')}}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


<!-- /.MODAL VER INFO admin -->
<div class="modal fade in modal-information" id="modal-info-comment">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">{{ Lang::get('messages.screen_info_comments_tag1')}}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_info_comments_tag2')}}</label>
                        </div>
                        <div class="col-xs-6">
                            <p id="order"></p>
                        </div>
                    </div>
                    <div id="info_type_sale">
                        <div class="row">
                            <div class="col-xs-3">
                                <label>{{Lang::get('messages.screen_info_comments_tag3')}}</label>
                            </div>
                            <div class="col-xs-6">
                                <p id="client"></p>
                            </div>
                        </div>
                        <div class="row" id="file_info_client">
                            <div class="col-xs-3">
                                <label>{{Lang::get('messages.screen_info_comments_tag4')}}</label>
                            </div>
                            <div class="col-xs-6">
                                <p id="client_comment"></p>
                            </div>
                        </div>
                        <div class="row" id="file_info_direction">
                            <div class="col-xs-3">
                                <label>{{ Lang::get('messages.screen_info_comments_tag5')}}</label>
                            </div>
                            <div class="col-xs-6">
                                <div class="rating-stars">
                                    <ul id="clientStars">
                                        <li class="star" title="{{Lang::get('messages.screen_comments_stars_tag1')}}" data-value="1" id="li1">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag2')}}" data-value="2" id="li2">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag3')}}" data-value="3" id="li3">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag4')}}" data-value="4" id="li4">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag5')}}" data-value="5" id="li5">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> <br>
                    <div id="info_tipo_traslado">
                        <div class="row">
                            <div class="col-xs-3">
                                <label>{{ Lang::get('messages.screen_info_comments_tag6')}}</label>
                            </div>
                            <div class="col-xs-6">
                                <p id="admin"></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-3">
                                <label>{{ Lang::get('messages.screen_info_comments_tag7')}}</label>
                            </div>
                            <div class="col-xs-6">
                                <p id="admin_comment"></p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_info_comments_tag8')}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div class="rating-stars">
                                    <ul id="adminStars">
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag1')}}" data-value="1" id="li1">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag2')}}" data-value="2" id="li2">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag3')}}" data-value="3" id="li3">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag4')}}" data-value="4" id="li4">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag5')}}" data-value="5" id="li5">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                    </div><br>
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_info_comments_tag9')}}</label>
                        </div>
                        <div class="col-xs-6">
                            <p id="delivery_man"></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_info_comments_tag10')}}</label>
                        </div>
                        <div class="col-xs-6">
                            <p id="delivery_man_comment"></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_info_comments_tag11')}}</label>
                        </div>
                        <div class="col-xs-6">
                            <div class="rating-stars">
                                    <ul id="deliveryManStars">
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag1')}}" data-value="1" id="li1">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag2')}}" data-value="2" id="li2">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag3')}}" data-value="3" id="li3">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag4')}}" data-value="4" id="li4">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                        <li class="star" title="{{ Lang::get('messages.screen_comments_stars_tag5')}}" data-value="5" id="li5">
                                            <i class="fa fa-star fa-fw starsSmall"></i>
                                        </li>
                                    </ul>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">{{
                    Lang::get('messages.screen_info_comments_tag12')}}</button>
                <button type="button" data-dismiss="modal" class="btn btnBox">Ok</button>
            </div>
        </div>
    </div>
</div>


<!-- /.MODAL send message admin -->
<div class="modal fade in modal-information" id="modal-send-comment" data-id="5">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">{{ Lang::get('messages.screen_send_comment_tag1')}}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <div id="info_type_sale">
                        <div class="row">
                            <div class="col-xs-3">
                                <label>{{Lang::get('messages.screen_info_comments_tag3')}}</label>
                            </div>
                            <div class="col-xs-8">
                                <select  class="form-control" name="sucursal" id="sucursal">
                                    <option value="0"  selected="selected">{{Lang::get('messages.screen_send_comment_tag4')}}</option>
                                @foreach($offices as $office) 
                                    @if($office->active==1)
                                    <option value="{{$office->id}}">{{$office->name}}</option>
                                    @endif 
                                @endforeach
                                </select>
                            </div>
                        </div>
                    </div><br>
                    <div class="row">
                        <div class="col-xs-3">
                            <label>{{ Lang::get('messages.screen_send_comment_tag2')}}</label>
                        </div>
                        <div class="col-xs-8">
                        <textarea class="form-control" name="commentTxt" rows="3" id="commentTxt"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">{{Lang::get('messages.screen_send_comment_tag5')}}</button>
                <button type="button" class="btn btnBox"  onClick="createAdminComment()">{{Lang::get('messages.screen_send_comment_tag6')}}</button>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/comments.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
              
        _table = $('#example2').DataTable({
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'info'        : true,
            'autoWidth'   : true,
            "order": [[ 1, "desc" ]],
            responsive: true,
            processing: true,
            serverSide: true,
            "language": { 
                url: 'https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json'
            },
            ajax: '{{ route('comment.table') }}',
            columns: [   
                { data: 'code', name: 'orders.code'  },
                { data: 'creation_date',name: 'orders.creation_date' },
                { data: 'name', name: 'users.first_name'  },
                { data: 'document', name: 'users.document'  },
                { data: 'observation', name: 'observations_client'  },
                { data: 'rate', name: 'qualification_client'  },
                { data: 'actions', name: 'actions'  },
                
            ]

          });

           setTimeout( function(){
          
          $('#example2_filter > label > input').unbind();
          $('#example2_filter > label > input').bind('keyup', function (e) {
            
            if (e.keyCode == 13){
              _table.search(this.value).draw();
            }
          });
          
        },500);
  
  
    var info = '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Código, Nombre y Teléfono</p></div>';
  
        $('#example2_filter').append(info);
        $('#btn-info-busqueda').on('click', function () {
            $('#menuBusqueda').toggle();
         });
         

         

        /* 2. Action to perform on click */
        $('#stars li').on('click', function () {
            var onStar = parseInt($(this).data('value'), 10); // The star currently selected
            var stars = $(this).parent().children('li.star');
            console.log($(this).parent());

            for (i = 0; i < stars.length; i++) {
            $(stars[i]).removeClass('selected');

            }

            for (i = 0; i < onStar; i++) {
            $(stars[i]).addClass('selected');
            }

            // valor de calificacion
            var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10);
            // segun el valor se cambia el texto
            switch (ratingValue) {
            case 1:
                $('#etiquetaCalificacion').text('Malo');
                break;
            case 2:
                $('#etiquetaCalificacion').text('Regular');
                break;
            case 3:
                $('#etiquetaCalificacion').text('Bueno');
                break;
            case 4:
                $('#etiquetaCalificacion').text('Muy Bueno');
                break;
            case 5:
                $('#etiquetaCalificacion').text('Excelente!');
                break;

            default:
                $('#etiquetaCalificacion').text(' ');

                break;
            }
            console.log(ratingValue);
        });

        function hacerCalificacion(id) {

var stars = $('#stars li').parent().children('li.star');

for (i = 0; i < stars.length; i++) {
  $(stars[i]).removeClass('selected');
  $(stars[i]).removeClass('disabledStar');

}
$('#etiquetaCalificacion').text(' ');
$('#btnCalificacion').attr('data-id', id);
$('#observaciones_admin').val('');
$('#btnCalificacion').prop('disabled', false);
$('#observaciones_admin').prop('disabled', false);
$('#stars').prop('disabled', true);
$("#modal-calificacion").modal('show');
}
    });




    
  
  </script>
@endsection