@extends('page')

@section('content')
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" >
<style>
  .error{
    color: red;
  }
.List_product_box {
        display: flex;
        align-items: center;
        }
    .Product_image {
        width: 100px;
        height: 100px;
        }
    .Product_image img{
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .List_product_box h4, .List_product_box p{ 
        margin: 0 5px;
    }
    .product_details {
        width: 350px;
    }
    .product_details .p_titles{
        display: flex;
    }
    
    .List_product_box p {
  font-size: 14px;
  font-weight: 100;
    }
</style>

<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Order # {{$order->id}}</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('orders.index') }}">List Orders</a></li>
            <li class="breadcrumb-item active">Order Details</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>
<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-9">
          <div class="card card-info  card-outline">
            <!-- /.card-header -->
            <div class="row" style="padding: 1.25rem 1.25rem 0 1.25rem;">
                  @if(Auth::user()->hasRole(3) || Auth::user()->hasRole(4) ||Auth::user()->hasRole(5) )
                    <div class="col-xs-5 col-sm-5 col-md-5">
                      <div class="form-group">
                          <h6><b>PLACED BY  : </b> @if($company->id == 1 && $order->print_status == 1 && $order->companyCreator) {{$order->companyCreator->name}}  @else {{$order->creator->name}} @endif</h6>
                      </div>
                      <div class="form-group">
                          <h6><b>VERIFIER : </b> @if($company->id == 1 && $order->print_status == 1 && $order->companyVerifier) {{$order->companyVerifier->name}}  @else {{$order->userVerifier->name }} @endif</h6>
                      </div>

                      <div class="form-group">
                          <h6><b>APPROVER : </b> @if($company->id == 1 && $order->print_status == 1 && $order->companyApprover) {{$order->companyApprover->name}}  @else {{$order->approver->name }} @endif</h6>
                      </div>
                    </div>
                  @endif
                  @if(Auth::user()->hasRole(4) || Auth::user()->hasRole(5))
                    <div class="col-xs-5 col-sm-5 col-md-5">
                      <div class="form-group">
                          <label>STATUS : </label>
                                                        @if($order->status == -1 && $order->print_status == 0 )
                                <small class="badge badge-danger">Approver Rejection</small>
                            @elseif($order->status == 0  && $order->print_status == 0 )
                                <small class="badge badge-danger">Rejected</small>
                            @elseif($order->status == 1 &&  $order->print_status == 0)
                                <small class="badge badge-primary">Veification Pending</small>
                            @elseif($order->status == 2 &&  $order->print_status == 0)
                                <small class="badge badge-secondary">Verified</small>
                            @elseif($order->status == 3 &&  $order->print_status == 0)
                                <small class="badge badge-info">Approved</small>
                            @elseif($order->status == 4 &&  $order->print_status == 0)
                                <small class="badge badge-success">Printed</small>'
                            @elseif($order->company_print_status == -1 && $order->print_status == 1 )
                                <small class="badge badge-danger">Company Approver Rejection</small>
                            @elseif($order->company_print_status == 0  && $order->print_status == 1 )
                                <small class="badge badge-danger">Company Rejected</small>
                            @elseif($order->company_print_status == 1 &&  $order->print_status == 1)
                                <small class="badge badge-primary">
                                @if($company->id  != 1)
                                    Transfered to getOroigin
                                @else
                                    New Order
                                @endif
                                </small>
                            @elseif($order->company_print_status == 2 &&  $order->print_status == 1)
                                <small class="badge badge-secondary">
                                    Verified
                                </small>
                            
                            @elseif($order->company_print_status == 3 &&  $order->print_status == 1)
                                <small class="badge badge-info">
                                    Approved
                                </small>                            
                            @elseif($order->company_print_status == 4 &&  $order->print_status == 1)
                                <small class="badge badge-success">Printed</small>
                            @endif
                      </div>

                      <div class="form-group">
                          <h6><b>ORDER DATE :</b>{{date('d-m-Y', strtotime($order->date))}}</h6>
                      </div>
                    </div>

                  @endif
              </div>
           
            <div class="card-body input_fields_wrap">
                <div class="row">
                  @php $x     = 1; @endphp
                    @if($order)
                      <table class="table table-responsive table-bordered table-striped dataTable dtr-inline" cellspacing="0"  width="100%">
                          <thead> 
                            <tr>
                              <th>#</th>
                              <th>Product Details</th>
                              <th>Label Count</th>
                              <th></th>
                            </tr>
                          </thead>
                      @foreach($order->products as $dkey =>  $details) 
                            <tbody>
                              <tr>
                                <td>{{$x}}</td>
                                <td class="pro_displaybox_form">
                                    <div class="img_wrap " style="float:left">
                                        <img src="{{asset('../storage/app/images/'.$details->products->product_image)}}" width="60"/>
                                    </div> 
                                    <div class="col-md-11" style="float:left">
                                        <div class="pro_details_box">
                                            @if($details->products->product_code !='')
                                            <div class="prod_code">{{$details->products->product_code}}</div>
                                            @endif
                                            @if($details->products->product_name !='')
                                            <div class="separator">|</div>
                                            <div class="prod_name">{{$details->products->product_name}}</div>
                                            @endif
                                            @if($details->products->brand_name !='')
                                            <div class="separator">|</div>  
                                            <div class="prod_brand">{{$details->products->brand_name}}</div>
                                            <div class="separator">|</div>
                                            @endif
                                            @if($details->products->model_number !='')
                                            <div class="prod_modeln">{{$details->products->model_number}}</div>
                                            @endif
                                            @if($details->products->category)
                                                <div class="separator">|</div>
                                                <div class="prod_category">{{$details->products->category->category}}</div>
                                            @endif
                                        </div>
                                        <div style="font-size:13px;">{{$details->products->description}}</div> 
                                    </div>
                                </td>
                                <td>{{$details->label_count}}</td>
                                <td><button data-order-id="{{$details->products->id}}" product-data='{{json_encode($details->products)}}' class="order_preview btn btn-info">Preview</button></td>
                              </tr>

                            </tbody>
                      @php $x++; @endphp
                      @endforeach
                      </table>
                    @endif
                  
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                        <div class="form-group">
                            <label>Creator Note</label>
                            <p>@if($order->order_note != ''){{$order->order_note}} @else -- @endif</p>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                        <div class="form-group">
                            <label>Verifier Note</label>
                            <p>@if($order->verifier_note != ''){{$order->verifier_note}} @else -- @endif</p>
                        </div>
                    </div>

                    @if(Auth::user()->hasRole(5) && $order->print_status == 0 && ($order->status == 2 || $order->status == 3 || $order->status == -1))

                    {!! Form::open(array('route' => 'orders_approve','method'=>'POST','id' => 'product_form' , "class" => "col-xs-12 col-sm-12 col-md-12")) !!}
                      <div class="row">
                        
                        <div class="col-xs-6 col-sm-6 col-md-6"> 
                            <div class="form-group">
                                <label>Print Type</label>
                                <select class="form-control form-control-sm" name="print_type" id="print_type">
                                  <option value="0" @if(old('print_type') == 0 || $order->print_status == 0 ) selected='selected' @endif>Self Print</option>
                                  <option value="1" @if(old('print_type') == 1 || $order->print_status == 1 ) selected='selected' @endif>GetOrigin Print</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label>Receiver</label>
                                <select class="form-control form-control-sm" name="receiver" id="receiver" @if($order->print_status == 1) disabled='disabled' @endif>
                                    <option value="">-- Select One --</option>
                                    @if(isset($receivers))
                                        @foreach($receivers as $receiver)
                                        <option value="{{$receiver->id}}" @if($order->receiver == $receiver->id) selected='selected' @endif>{{$receiver->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                                @if($errors->has('receiver'))
                                  <div class="error" >{{ $errors->first('receiver') }}</div>
                                @endif
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                              <div class="form-group">
                                  <label>Approver Note</label>
                                  {!! Form::textarea('approver_note', $order->approver_note, array('placeholder' => 'Approver Note','class' => 'form-control form-control-sm', 'id' => 'tags_create', 'rows' => '2')) !!}
                              </div>
                          </div>
                    </div>
                        
                        <div class="row card-body">
                            <input type="hidden" name="order_id" value="{{$order->id}}">
                            <div class="col-xs-6 col-sm-6 col-md-6 text-left"> 
                                <input name="reject" type="submit" class="btn btn-default" value="Reject">
                            </div>

                            <div class="col-xs-6 col-sm-6 col-md-6 text-right"> 
                                <input name="approve_order" type="submit" class="btn btn-primary" value="Approve">
                            </div>
                        </div>
                    {!! Form::close() !!}


                    @elseif(Auth::user()->hasRole(5) && $order->print_status == 1 && ($order->company_print_status == 2 || $order->company_print_status == 3 || $order->company_print_status == -1))

                    {!! Form::open(array('route' => 'orders_approve','method'=>'POST','id' => 'product_form' , "class" => "col-xs-12 col-sm-12 col-md-12")) !!}

                        <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label>Receiver</label>
                                <select class="form-control form-control-sm" name="receiver" id="receiver">
                                    <option value="">-- Select One --</option>
                                    @if(isset($receivers))
                                        @foreach($receivers as $receiver)
                                        <option value="{{$receiver->id}}" @if($order->receiver == $receiver->id) selected='selected' @endif>{{$receiver->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                                @if($errors->has('receiver'))
                                  <div class="error" >{{ $errors->first('receiver') }}</div>
                                @endif
                            </div>
                        </div>

                      <div class="row">
                      <div class="col-xs-6 col-sm-6 col-md-6">
                            <div class="form-group">
                                <label>Receiver</label>
                                <select class="form-control form-control-sm" name="receiver" id="receiver">
                                    <option value="">-- Select One --</option>
                                    @if(isset($receivers))
                                        @foreach($receivers as $receiver)
                                        <option value="{{$receiver->id}}" @if($order->receiver == $receiver->id) selected='selected' @endif>{{$receiver->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                                @if($errors->has('receiver'))
                                  <div class="error" >{{ $errors->first('receiver') }}</div>
                                @endif
                            </div>
                        </div>
                    
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12">
                              <div class="form-group">
                                  <label>Approver Note</label>
                                  {!! Form::textarea('approver_note', $order->company_approver_note, array('placeholder' => 'Approver Note','class' => 'form-control form-control-sm', 'id' => 'tags_create', 'rows' => '2')) !!}
                              </div>
                          </div>
                    </div>
                          
                        <div class="row card-body">
                            <input type="hidden" name="order_id" value="{{$order->id}}">
                            <div class="col-xs-6 col-sm-6 col-md-6 text-left"> 
                                <input name="company_reject" type="submit" class="btn btn-danger" value="Reject">
                            </div>

                            <div class="col-xs-6 col-sm-6 col-md-6 text-right"> 
                                <input name="company_approve_order" type="submit" class="btn btn-primary" value="Approve">
                            </div>
                        </div>
                    {!! Form::close() !!}
                    @endif
                </div>
            <!-- /.card-body -->
            </div>
          <!-- /.card -->
            </div>
        </div>
        <div class="col-3">
          @include('components.dashboard.vertical')
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->

      <div class="modal fade show" id="modal-product-details" style="" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg "> 
          <div class="modal-content">  
              <div class="modal-header"> 
                  <!-- <h4 class="modal-title" id="product-model-name">Product</h4> -->
                  <div id="product_details_div">
                    
                  </div>
                  <button type="button" class="close close-model" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                  </button>
              </div>
              <div class="modal-body" style="height: 200px;">
                  <div class="row">
                    
                    <div class="col-md-6" >
                      <h5>Label</h5>
                        <div id="wrapper">
                            <img id="overlayImage" src="{{asset('../storage/app/qr_code/qr.png')}}" alt="overlay image"> <!--Overlay QRcode comes here-->
                            <img id="product-model-label" src="" alt="product label"> <!--Uploaded  Image comes here-->
                        </div>
                    </div>
                    <div class="col-md-6">
                      <h5>Label 2</h5>
                        <div id="wrapper2">
                            <img id="overlayImage2" src="{{asset('../storage/app/qr_code/qr.png')}}" alt="overlay image"> <!--Overlay QRcode comes here-->
                            <img id="product-model-label2" src="" alt="product label"> <!--Uploaded  Image comes here-->
                        </div>
                    </div>
                    <div class="col-md-12">  &nbsp;
                    </div>
                  </div>                  
              </div>

              <div class="row" style="display:none"> 
                <input type="number" class="form-control form-control-sm" name="qrcode_size" id="qrcodeSize"  value="" min="0" max="">
                <input type="number" class="form-control form-control-sm" name="qrcode_top" id="overlayTop" min="0" max="" value="">
                <input type="number" class="form-control form-control-sm" name="qrcode_left" id="overlayLeft" min="0" max="" value="">
                <input type="number" class="form-control form-control-sm" name="qrcode_left" id="product_id" min="0" max="" value="">

                <input type="number" class="form-control form-control-sm" name="qrcode_size" id="qrcodeSize2"  value="" min="0" max="">
                <input type="number" class="form-control form-control-sm" name="qrcode_top" id="overlayTop2" min="0" max="" value="">
                <input type="number" class="form-control form-control-sm" name="qrcode_left" id="overlayLeft2" min="0" max="" value="">


              </div>
              <div class="modal-footer justify-content-between">
                  <button type="button" class="btn btn-default close-model" data-dismiss="modal">Close</button>
              </div>
          </div>
        </div>

    </div>
    </div>
  <script>

  $(document).ready(function() {
    $('.close-model').click(function(){
        $('#modal-product-details').modal('hide');
    });
    $('.order_preview').click(function() {
        var image_url           = '{{asset("storage/app/")}}'

        var product_details     = JSON.parse($(this).attr('product-data'));

        $('#qrcodeSize').val(product_details.qrcode_size);
        $('#overlayTop').val(product_details.qrcode_top);
        $('#overlayLeft').val(product_details.qrcode_left);
        $('#product_id').val(product_details.id);

        $('#product-model-name').html(product_details.product_name);
        //$('#product-model-image').attr('src',image_url+'/images/'+product_details.product_image);
        $('#product-model-label').attr('src',image_url+'/product_label/'+product_details.product_label);

        $('#qrcodeSize2').val(product_details.qrcode_size2);
        $('#overlayTop2').val(product_details.qrcode_top2);
        $('#overlayLeft2').val(product_details.qrcode_left2);
        $('#product-model-label2').attr('src',image_url+'/product_label2/'+product_details.product_label2);

        var   product_details_html    = '<div class="col-md-3" style="float:left">'+
                '<img src="'+image_url+'/images/'+product_details.product_image+'" width="60"/>'+
            '</div>'+
            '<div class="col-md-9" style="float:left">'+
                '<div class="pro_details_box">';
                  if(product_details.product_code != ''){
                    product_details_html += '<div class="prod_code">'+product_details.product_code+'</div>';
                  }
                  if(product_details.product_name != ''){
                    product_details_html +='<div class="separator">|</div>'+
                    '<div class="prod_name">'+product_details.product_name+'</div>';
                  }
                  if(product_details.brand_name != ''){
                    product_details_html += '<div class="separator">|</div>  '+
                    '<div class="prod_brand">'+product_details.brand_name+'</div>';
                  }
                  if(product_details.model_number != ''){
                    '<div class="separator">|</div>'+
                    '<div class="prod_modeln">'+product_details.model_number+'</div>';
                  }
                    if(product_details.category){
                        product_details_html    +='<div class="separator">|</div>';
                        product_details_html    +='<div class="prod_category">'+product_details.category.category+'</div>';
                    }
                product_details_html    +='</div>';
                if(product_details.description != ''){
                  product_details_html    +='<div style="font-size:13px;">'+product_details.description+'</div> ';
                }
            product_details_html    +='</div>';

        $('#product_details_div').html(product_details_html);
        
        $('#modal-product-details').modal('show');

        productLabel();
    });
});
  function productLabel(){

        var product_id=$("#product_id").val();
        var top = $("#overlayTop").val();
        var left = $("#overlayLeft").val();
        var qrcodeSize = $("#qrcodeSize").val();

        var top2 = $("#overlayTop2").val();
        var left2 = $("#overlayLeft2").val();
        var qrcodeSize2 = $("#qrcodeSize2").val();


        if(product_id !=null) {
            $("#overlayImage").css({
                "top": top + "px",
                "left": left + "px",
                "width": qrcodeSize + "px",
                "height": qrcodeSize + "px"
                
            });

            $("#overlayImage2").css({
                "top": top2 + "px",
                "left": left2 + "px",
                "width": qrcodeSize2 + "px",
                "height": qrcodeSize2 + "px"
                
            });
        }
    }

    $('#print_type').change(function(){
      if($(this).val() == 1){
          $('#receiver').attr('disabled', 'disabled')
          $('#receiver').val($("#receiver option:first").val());
      }else{
          $('#receiver').removeAttr('disabled');
      }
    })
  </script>
@endsection