@extends('page')

@section('content')
<style>
  .error{
    color: red;
  }
</style>
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" >


<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>ORDER DETAILS # {{$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;">
                  
                    <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>

                  
                    <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
                                @elseif($order->company_verifier && $order->company_approver )
                                  Veification Pending
                                @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>
              </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>
                @if($order->order_note != '')
                <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                    <div class="form-group">
                        <label>Creator Note</label>
                        <p> {{$order->order_note}} </p>
                    </div>
                </div>
                @endif
                @if($order->verifier_note != '' && !Auth::user()->hasRole(4))
                  <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                      <div class="form-group">
                          <label>Verifier Note</label>
                          <p> {{$order->verifier_note}} </p>
                      </div>
                  </div>
                @endif
                @if($order->approver_note != "")
                  <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                      <div class="form-group">
                          <label>Approver Note</label>
                          <p> {{$order->approver_note}} </p>
                      </div>
                  </div>
                @endif


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

            @if(Auth::user()->id == $order->verifier && Auth::user()->id == $order->signatory)
                
                    <div class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6"> 
                            <div class="form-group">
                                <label>Print Type</label>
                                <p> @if($order->print_status == 0 || request('print_type') == 0)
                                       Self Print 
                                    @else
                                      @if($company->id != 1)
                                        @if($order->print_status == 1 || request('print_type') == 1)
                                          GetOrigin Print
                                        @endif
                                      @endif
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>

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

                      <div class="">
                          <div class="col-xs-6 col-sm-6 col-md-6 text-left"> 
                              <a href="{{ url()->previous() }}"> <button class="btn btn-secondary">
                                Back
                               </button> </a>
                          </div>
                      </div>
            @elseif(Auth::user()->hasRole(4) && (Auth::user()->id == $order->verifier) && ($order->status == 0 ||$order->status == 1 || $order->status == 2))
                  <div class="">
                      <div class="form-group">
                          
                          @if($order->verifier_note != "")
                            <label>Verifier Note</label>
                            <div class="col-xs-12 col-sm-12 col-md-12" style="float:left;">
                                <div class="form-group">
                                    <label>Verifier Note</label>
                                    <p> {{$order->$order->verifier_note}} </p>
                                </div>
                            </div>
                          @endif
                      </div>
                  </div>
            @elseif(Auth::user()->hasRole(4) && (Auth::user()->id == $order->company_verifier) && ($order->print_status == 1) && ($order->status == 3 || $order->company_print_status == 1 || $order->company_print_status == 2) && ($order->company_verifier != $order->company_approver))                    
                    <div class="">
                        <div class="form-group">
                          @if($order->company_verifier_note != '')
                            <label>Company Verifier Note</label>
                            <p> {{$order->company_verifier_note?$order->company_verifier_note:''}}</p>
                          @endif
                        </div>
                    </div>
            @elseif(Auth::user()->id == $order->company_verifier && Auth::user()->id == $order->company_approver)
                    <div class="">
                        <div class="form-group">
                          @if($order->company_approver_note != '')
                            <label>Get Origin Approver Note</label>
                            <p>$order->company_approver_note, </p>
                          @endif
                        </div>
                    </div>
            @else

                  <div class="">
                    <div class="col-xs-6 col-sm-6 col-md-6 text-left"> 
                        <a href="{{ url()->previous() }}"> <button class="btn btn-secondary">
                          Back
                         </button> </a>
                    </div>
                  </div>
            @endif
              </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </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 1</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"> 
                    </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>
  <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();
    });

    $('#order_approve_btn').click(function(e){
        e.preventDefault();
        $('.error').hide();
        var error_count              = 0;
        if(!$('#declaration').is(':checked')){
          $('.declaration_content .error').html('Please Verify and Approve').show();
          error_count++;
        }

        if($('#print_type').val() != 1){
            if($('#receiver').val() == ''){
                $('.receiver_content .error').html('Receiver is required ').show();
            }
        }
        if(error_count == 0){
            $('#order_approve_btn').prop("disabled", true);
            $('#order_form .btn').prop("disabled", true);
            $("#order_approve_btn").html('<i class="fa fa-spinner fa-spin"></i>');
            //$('<i class="fa fa-spinner fa-spin"></i>').insertAfter("#order_approve_btn");
            $('#order_form').submit();
        }
    })

});


  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