@extends('layouts.admin')

@section('header-content')

@endsection
@section('content')
    
<style type="text/css">
    img {
    transition:transform 0.25s ease;
}

img:hover {
    -webkit-transform:scale(1.5);
    transform:scale(10.5);
    position:absolute; 
   
  z-index:99;
 
  
}
</style>

       
            <div class="panel panel-white">
              <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-framed table-hover">
                        <thead>
                       <th>#</th>
                       <th>Images</th>
                       <th>Remarks</th>
                        <th>Date Created</th>
                       <<th>Log created user</th>
                       <th>User Remarks</th>
                        </thead>
                        <tbody>
                        @foreach($data as $key=>$product)
                        <tr>
                            <td>{{$key+1}}</td>
                            <td><img src="{{ $product['image_url'] }}" class="hover_img" height="30px" width="30px" /></td>
                            <td>{!! $product->remarks !!}</td>
                            <td>{{$product->created_at}}</td>
                            <td>{{$product->user_detail->firstname}}</td>
                            <td>{{ $product->user_remarks }}</td>
                           
                             
                             
                            
                        </tr>
                        
                        
                        @endforeach
                        </tbody>
                    </table>
                </div>
                <br>
                <div align="center">
                    
                </div>
            </div>
            
        </div>
        <!-- /bordered panel body table -->

        <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
       
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
@endsection

@section('footer-content')
    <script src="{{URL::asset('js/jquery-ui.min.js')}}"></script>
    <script>
        $("#selector").autocomplete({
            minLength: 1,
            source: function (request, response) {
                $.ajax({
                    url: '{{url('/search/')}}/' ,
                    type: "GET",
                    data: 'type=Product&search_term=' + $('#selector').val(),
                    dataType: 'json'
                }).done(function (data) {
                    response($.map(data, function (obj) {
                        return {
                            label: '('+obj.name+')('+obj.type+')('+obj.product_code+')('+obj.retail_price+')',
                            value: obj.id
                        };
                    }));
                });
            },
            select: function (event, ui) {
                // Prevent value from being put in the input:
                this.value = ui.item.label;
                // Set the next input's value to the "value" of the item.
                $("#selector").val(this.value);
                $("#selector_id").val(ui.item.value);
                event.preventDefault();
            }
        });
    </script>
    <script type="text/javascript">

  $(".update").click(function (e) {
   
            let orderid = $(this).attr('orderid');
           

            $('.order_id').val(orderid);            

        });




  $(function(){
    $('#ma').change(function(){
       var opt = $(this).val();
        if(opt == 'delivered'){
            $('.monthly-btn').hide();
            $('.annual-btn').show();
        }else{
            $('.monthly-btn').show();
            $('.annual-btn').hide();
        }
    });
});
</script>


@endsection