@include('dashboard.include.header')

  
  <div class="content-wrapper">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Product Details</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/home">Home</a></li>
              <li class="breadcrumb-item active">Product Details</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
   
    <section class="content">
      <div class="container-fluid">

            <div class="card">
            <div class="card-body">
                <div class="row">
                @foreach($product as $pdata)
                    <div class="col-md-8">
                        <h6>Product name - {{$pdata->name}}</h6>
                    </div>
                    <div class="col-md-2">
                        <h6>Sell Price - {{$pdata->sell_price}}</h6>
                    </div>
                    <div class="col-md-2">
                        <h6>Stock - {{$pdata->stock}}</h6>
                    </div>
                @endforeach
                </div><br><br>

                @foreach($prodata as $prod)
                <input type="hidden" value="{{$prod->id}}" name="id">
                <input type="hidden" value="{{$prod->product_id}}" name="proid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Image 1</h3>
                                </div>
                            <div class="card-body">
                                    <img id="target1" style="height: 70px; object-fit: cover;" src="{{ env('BACKEND_URL') . "uploads/$prod->img1"}}" class="imgdisplay target1"/>
                            </div>
                        </div>

                        <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Image 2</h3>
                                </div>
                            <div class="card-body">
                                    <img id="target2" style="height: 70px; object-fit: cover;" src="{{ env('BACKEND_URL') . "uploads/$prod->img2"}}" class="imgdisplay target2"/>
                            </div>
                        </div>
                    
                    </div>
                    <div class="col-md-6">
                        <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Image 3</h3>
                                </div>
                            <div class="card-body">
                                    <img id="target3" style="height: 70px; object-fit: cover;" src="{{ env('BACKEND_URL') . "uploads/$prod->img3"}}" class="imgdisplay target3"/>
                            </div>
                        </div>

                        <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Image 4</h3>
                                </div>
                            <div class="card-body">
                                    <img id="target4" style="height: 70px; object-fit: cover;" src="{{ env('BACKEND_URL') . "uploads/$prod->img4"}}" class="imgdisplay target4"/>
                            </div>
                        </div>
                    
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
 
                        <div class="form-group" >
                            <textarea class="summernote" style="min-height: 500px;" name="description">{{$prod->description}}</textarea>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                    <div class="form-group">
                        <label>Description</label>
                        <textarea type="text" placeholder=""rows="20" id="note" name="note" class="form-control" required>
                            @if($prod->urlstatus == 1)
                            <iframe width="727" height="409" src="http://www.youtube.com/embed/{{$prod->uturl}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <br><br>
                            @endif                        
                        </textarea>
                    </div> 


                    </div>
                </div>



                @endforeach
            </form>
            </div>
        </div>
      </div>
    </section>
  </div>
 


  @include('dashboard.include.footer');
<script type="text/javascript">
    $(document).ready(function() {
        $('.summernote').summernote();
    });
</script>
<script>
function showImage(src, target) {
            var fr = new FileReader();
             fr.onload = function(){
      target.src = fr.result;
    }
           fr.readAsDataURL(src.files[0]);
}

function putImage1() {
    var src = document.getElementById("img1");
    var target = document.getElementById("target1");
    $('.target1').show();
    showImage(src, target);
}
function putImage2() {
    var src = document.getElementById("img2");
    var target = document.getElementById("target2");
    $('.target2').show();
    showImage(src, target);
}
function putImage3() {
    var src = document.getElementById("img3");
    var target = document.getElementById("target3");
    $('.target3').show();
    showImage(src, target);
}
function putImage4() {
    var src = document.getElementById("img4");
    var target = document.getElementById("target4");
    $('.target4').show();
    showImage(src, target);
}
</script>



