@extends('page')

@section('content')

<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>Label Preview</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"><a href="{{ url('order/order-batch/'.$order_product_details->order_id) }}">Order Details</a></li>
            <li class="breadcrumb-item active">Lable Preview</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">
            <div class="card-header">
              <!-- <h3 class="card-title">{{$order_product_details->products->product_name}} Details</h3> -->
                                <div class="pro_displaybox_form">
                                    <div class="img_wrap " style="float:left">
                                        <img src="{{asset('../storage/app/images/'.$order_product_details->products->product_image)}}" width="60"/>
                                    </div> 
                                    <div class="col-md-11" style="float:left">
                                        <div class="pro_details_box">
                                            @if($order_product_details->products->product_code !='')
                                            <div class="prod_code">{{$order_product_details->products->product_code}}</div>
                                            @endif
                                            @if($order_product_details->products->product_name !='')
                                            <div class="separator">|</div>
                                            <div class="prod_name">{{$order_product_details->products->product_name}}</div>
                                            @endif
                                            @if($order_product_details->products->brand_name !='')
                                            <div class="separator">|</div>  
                                            <div class="prod_brand">{{$order_product_details->products->brand_name}}</div>
                                            <div class="separator">|</div>
                                            @endif
                                            @if($order_product_details->products->model_number !='')
                                            <div class="prod_modeln">{{$order_product_details->products->model_number}}</div>
                                            @endif
                                            @if($order_product_details->products->category)
                                                <div class="separator">|</div>
                                                <div class="prod_category">{{$order_product_details->products->category->category}}</div>
                                            @endif
                                        </div>
                                        <div style="font-size:13px;">{{$order_product_details->products->description}}</div> 
                                    </div>
                                </div>

            </div>  
            {!! Form::open(array('route' => ['orders.label_print_preview', [$order_product_details->id]],'method'=>'POST', 'id' => 'batch_form')) !!}
            <div class="col-sm-12 col-md-12 col-xs-12 row">
                <div class="col-sm-12 col-md-12 col-xs-12" style="border-right: solid 1px #ccc;">
                    <input type="hidden" name="order_product_id" value="{{$order_product_details->id}}">
                        <div class="row" style="padding: 1.25rem 1.25rem 0 1.25rem;">
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <label>Label Ordered</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <label>{{$order_product_details->label_count}}</label>
                            </div>
                        </div> 
            
                        <div class="row" style="padding: 1.25rem 1.25rem 0 1.25rem;">
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <label>Paper Size</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <select name="paper_size" class="form-control form-control-sm">
                                    <option value="">Select Paper Size</option>

                                    {{--
                                        <option value="A0" @if(old('paper_size') == 'A0') selected @endif>A0</option>
                                    --}}
                                    <option value="A1" @if(old('paper_size') == 'A1') selected @endif>A1</option>
                                    <option value="A2" @if(old('paper_size') == 'A2') selected @endif>A2</option>
                                    <option value="A3" @if(old('paper_size') == 'A3') selected @endif>A3</option>
                                    <option value="A4" @if(old('paper_size') == 'A4') selected @endif>A4</option>
                                    {{-- 
                                    <option value="A5" @if(old('paper_size') == 'A5') selected @endif>A5</option>
                                    <option value="A6" @if(old('paper_size') == 'A6') selected @endif>A6</option>
                                    <option value="A7" @if(old('paper_size') == 'A7') selected @endif>A7</option>
                                    <option value="A8" @if(old('paper_size') == 'A8') selected @endif>A8</option>
                                    --}}
                                </select>
                                @error('paper_size')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>  

                </div>                
            </div>
            <div class="row">
                <div class="row card-body">
                    <div class="col-xs-6 col-sm-6 col-md-6 text-left"> 
                        <a href="{{url('order/order-batch/'.$order_product_details->order_id) }}"> <span class="btn btn-secondary">Back </span> </a>
                    </div>
                    {{--
                    <a target="_blank" class="print_button_status" href="{{url('print_label_preview/'.$details->products->id)}}"><button class="btn btn-default"> Preview</button> </a>
                    --}}
                    <div class="col-xs-6 col-sm-6 col-md-6 text-right"> 
                        <input name="print_preview" type="submit" class="btn btn-info" value="Print Preview">
                    </div>
                </div>
            </div>
            {!! Form::close() !!}
            <!-- /.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">Large Modal</h4>
                  <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>Image</h5>
                      <img id="product-model-image" height="60px">
                    </div>
                    <div class="col-md-6" >
                      <h5>Label</h5>
                      <img id="product-model-label" height="60px">
                    </div>
                    <div class="col-md-12"> 
                    </div>
                  </div>                  
              </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'));
        $('#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);
        $('#modal-product-details').modal('show');

    });
});
  </script>
@endsection