@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>Order # {{$order_product_details->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"><a href="{{ url('order/order-batch/'.$order_product_details->order_id) }}">Order Details</a></li>
            <li class="breadcrumb-item active">Create Batch</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.create.batches', [$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>Batch Id</label>
                        </div>
                        <div class="col-sm-6 col-md-6 col-xs-6">
                            <label>{{$batch_number}}</label>
                            <input type="hidden" value="{{$batch_number}}" name="batch_id">
                            {{-- <input placeholder="Batch ID"  minlength="3" maxlength="3" class="form-control form-control-sm batch-id" name="batch_id" type="text"  value="{{old('batch_id',$batch_number)}}" autocomplete="off" required>
                            @error('batch_id')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                            --}}
                        </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>Start No</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <input placeholder="Start NO" value="{{old('start_no')}}" class="form-control form-control-sm batch-id" name="start_no" type="number" min="1" autocomplete="off" required>
                                @error('start_no')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </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="A1">A1</option>
                                    <option value="A2">A2</option>
                                    <option value="A3">A3</option>
                                    <option value="A4">A4</option>                                    
                                </select>
                            </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>Label 1 Paper Width (in cm)</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <input placeholder="Label 1 Paper Width (in cm)" value="{{old('label1_paper_width')}}" class="form-control form-control-sm batch-id" name="label1_paper_width" type="number" min="1" autocomplete="off" required>
                            </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>Label 1 Paper Height (in cm)</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <input placeholder="Label 1 Paper Height (in cm)" value="{{old('label1_paper_height')}}" class="form-control form-control-sm batch-id" name="label1_paper_height" type="number" min="1" autocomplete="off" required>
                            </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>Label 2 Paper Width (in cm)</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <input placeholder="Label 2 Paper Width (in cm)" value="{{old('label2_paper_width')}}" class="form-control form-control-sm batch-id" name="label2_paper_width" type="number" min="1" autocomplete="off" required>
                            </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>Label 2 Paper Height (in cm)</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <input placeholder="Label 2 Paper Height (in cm)" value="{{old('label2_paper_height')}}" class="form-control form-control-sm batch-id" name="label2_paper_height" type="number" min="1" autocomplete="off" required>
                            </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>Number of Labels In Batch</label>
                            </div>
                            <div class="col-sm-6 col-md-6 col-xs-6">
                                <select name="batch_count" class="form-control form-control-sm" required>
                                    <option value="">Select Batch Count</option>
                                    @if($order_product_details->label_count > 99)
                                        @for($i=1; $i<=15;$i++)
                                            <option value="{{$i}}" @if(old('batch_count') == $i) selected @endif>{{$i}} (~{{floor($order_product_details->label_count / $i)}} Labels)</option>
                                        @endfor
                                    @else
                                        <option value="1"> 1 ({{ $order_product_details->label_count }} Labels)</option>
                                    @endif
                                </select>
                                @error('batch_count')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                                {{--  <input placeholder="Batch Label Count" value="{{$order_product_details->label_count/2}}" class="form-control form-control-sm batch-id" name="batch_label_count" type="text" autocomplete="off">

                                --}}
                                
                            </div>
                        </div>
                </div>
                {{--
                <div class="col-sm-6 col-md-6 col-xs-6">

                    <div id="wrapper">
                        <h4>Sticker 1</h4>
                        <img id="overlayImage" src="{{asset('../storage/app/qr_code/qr.png')}}" alt="overlay image" style="top: {{$order_product_details->products->qrcode_top}}px; left:{{$order_product_details->products->qrcode_left}}px; width: {{$order_product_details->products->qrcode_size}}px; height: {{$order_product_details->products->qrcode_size}}px"> <!--Overlay QRcode comes here-->
                        <img id="product-model-label" src="{{asset('../storage/app/product_label/'.$order_product_details->products->product_label)}}" alt="product label"> <!--Uploaded  Image comes here-->
                    </div>

                    <div class="col-sm-6 col-md-6 col-xs-6">
                                                <div id="wrapper2">
                            <h4>Sticker 2</h4>
                            <img id="overlayImage2" src="{{asset('../storage/app/qr_code/qr.png')}}" alt="overlay image" style="top: {{$order_product_details->products->qrcode_top2}}px; left:{{$order_product_details->products->qrcode_left2}}px; width: {{$order_product_details->products->qrcode_size2}}px; height: {{$order_product_details->products->qrcode_size2}}px"> <!--Overlay QRcode comes here-->
                            <img id="product-model-label2" src="{{asset('../storage/app/product_label2/'.$order_product_details->products->product_label2)}}" alt="product label"> <!--Uploaded  Image comes here-->
                        </div>


                    </div>
                </div>
                --}}
            </div>
            <div class="row">
                <div class="row card-body">
                    <div class="col-xs-3 col-sm-3 col-md-3 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-3 col-sm-3 col-md-3 text-right"> 
                        <!-- <a href="{{url('order/label_preview/'.$order_product_details->id)}}" target="_blank"> -->
                            <input  type="submit" name="label_preview_1" class="btn btn-info" value="Label 1 Preview">
                        <!-- </button>
                        </a> -->
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 text-right"> 
                        <!-- <a href="{{url('order/label_preview_2/'.$order_product_details->id)}}" target="_blank"> -->
                            <input type="submit" name="label_preview_2" class="btn btn-info" value="Label 2 Preview">
                        <!-- </button>
                        </a> -->
                    </div>

                    <div class="col-xs-3 col-sm-3 col-md-3 text-right"> 
                        <a href=""> <button class="btn btn-info">Save PDF </button> </a>
                    </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