@extends('user.layouts.index')
 @section('page_content')

 <link rel="stylesheet" href="{{asset ('css/single-special-deal.css')}}">
 <link rel="stylesheet" href="{{ asset('css/home.css') }}">


          <!-- BANNER -->
        <!-- BANNER -->
        <div class="jumbotron jumbotron-fluid jumbo-col text-center py-5">
            <img src="{{$productdetail->promotion->avatar}}" class="img-fluid">
        </div>


        <!-- FUNDING SECTION-->
    <section class="funding-section">
        <div class="container-fluid funding-section-fluid">
            @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        @if ($message = Session::get('success_review'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>{{ $message }}</strong>
        </div>
    @endif
    <a href="" type="submit" class="btn btn-md btn-primary myyo"
    data-toggle="modal" data-target=".detail_video">
           Request Funding
<!-- <span class=" badge bg-info btn-success">Request Funding</span> -->
           </a>
         @include('user.productdetailpage.video_modal')
            <div class="row">


                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    {!! Form::open(['id'=>'my_form','method' => 'POST', 'route' => ['cart.save' ], 'files'=>true]) !!}
                    <input type="hidden" name="prod_id" value="{{$productdetail->id}}">
                    <input type="hidden" name="promotion_id" value="{{$productdetail->promotion->id}}">
                    <img src="{{$productdetail->avatar}}" id="myimg" class=" myimg">
                    <div class="row">
                        <div class="col-12">
                            <div id="demo" class="carousel slide" data-interval="false" data-ride="carousel">

                                <!-- The slideshow -->
                                <div class="carousel-inner carousel-imgs text-center">
                                    <div class="carousel-item img-item active">
                                  @foreach($productdetail->product_color as $pro_color)

                                      <img src="{{$pro_color->avatar}}" id="imger" onclick="change_img('{{$pro_color->avatar}}','{{$pro_color->id}}')" class="img-fluid slide-img myimg">
                                      @endforeach
                                    </div>
                                    <div class="carousel-item img-item">
                                      @foreach($productdetail->product_color as $pro_color)

                                      <img src="{{$pro_color->avatar}}"   onclick="change_img('{{$pro_color->avatar}}','{{$pro_color->id}}')" class="img-fluid slide-img myimg">
                                      @endforeach
                                   </div>
                                  </div>

                                <!-- Left and right controls -->
                                <a class="carousel-control-prev prev" href="#demo" data-slide="prev">
                                    <img src="{{asset('slicing/my-shout-crowdfunding-2-inner-pages/asset 2.png')}}" class="img-fluid">
                                  </a>
                                  <a class="carousel-control-next next" href="#demo" data-slide="next">
                                    <img src="{{asset('slicing/my-shout-crowdfunding-2-inner-pages/asset 1.png')}}" class="img-fluid">
                                  </a>

                              </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 funding-col">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 deal-cart-col">
                            <h1 class="funding-p text-break">{{ucwords($productdetail->name)}} Special Deal</h1>
                        </div>
                        {{-- <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 funding-row">
                            <span class="fa fa-star checked star"></span>
                            <span class="fa fa-star checked star"></span>
                            <span class="fa fa-star checked star"></span>
                            <span class="fa fa-star checked star"></span>
                            <span class="fa fa-star star"></span>
                            <button class="btn btn-sm btn-primary review-btn"><i class="far fa-edit write-a-review-btn"> Write A Review</i></button>
                        </div> --}}
                        <div class="col-12 strikethrough-col">

                            <del class="striketrough"><span class="text-dark">
                                @if( $productdetail->promotion)
                                    <del>${{$point_price * $productdetail->price }}</del>
                                @endif

                             </span>
                            </del>
                                        <span class="non-strikethrough">

                                           @if( $productdetail->promotion)
                                $ {{$point_price * $productdetail->promotion->value }}
                                @else
                                ${{$point_price * $productdetail->price }}
                                @endif



                                        </span>
                            </div>
                        <div class="col-12 pt border-bottom">
                            <p >Lorem ipsum dolor sit amet, consectetuer adipiscing
                                elit, sed diam nonummy nibh euismod tincidunt ut
                                laoreet dolore magna ali</p>
                        </div>
                        <div class="row pt2">
                        <div class="col-12 col-sm-4 col-lg-4  ">
                            <input class="form-control" type="number" min="1" name="qty" placholder="01" required>
                        </div>
                        <div class="col-12 col-sm-8 col-lg-6 padding-top-in-responsive">
                            {{-- <a href="" type="submit" class="btn btn-md btn-primary">ADD TO CART</a> --}}
                            <button type="submit" class="btn btn-md btn-primary">Add to Cart</button>
                            </div>
                            </div>
                            {!! Form::close() !!}

                            <div class="col-12 pt star-col-responsive">
                                <b>Share</b>
                                <i class="fa fa-twitter  fa-2x spanicon"></i>
                                 <i class="fa fa-facebook  fa-2x spanicon"></i>
                                 <i class="fa fa-linkedin  fa-2x spanicon"></i>
                                 <i class="fa fa-instagram  fa-2x spanicon"></i>

                                 <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 funding-row">
                                     <span class="fa fa-star checked star"></span>
                                     <span class="fa fa-star checked star"></span>
                                     <span class="fa fa-star checked star"></span>
                                     <span class="fa fa-star checked star"></span>
                                     <span class="fa fa-star star"></span>
                                     {{-- <button class="btn btn-sm btn-primary review-btn">
                                         <i class="far fa-edit write-a-review-btn"> Write A Review</i></button> --}}
                                         <a href="" type="submit" class="btn btn-sm btn-primary review-btnerrr"
                                         data-toggle="modal" data-target=".detail_review">
                                         Write A Review

                                                </a>
                                              @include('user.productdetailpage.detail_review')
                                 </div>
                             </div>
                        {{-- <div class="col-12 pt wishlist-col-responsive">
                            <i class="far fa-heart"> <b>Add To Wishlist</b></i>
                        </div> --}}

                    </div>
                </div>
            </div>
        </div>
    </section>


   @endsection

   @section('app_jquery')

   <script>
       function change_img(a,i){
       // var update_img =  document.getElementById("myimg").src;
       // var imgees =  document.getElementById("imger").src;
       // console.log('----',update_img) ;
       // console.log('---------------------',i) ;

        var fix_image_change = document.getElementById("myimg").src=a;
             console.log('---------------------fix-img--',fix_image_change) ;
             var fix_image_id =  document.getElementById("pro_detail").value = i;
           console.log('---------------------fix-id--',fix_image_id) ;





       }
//         $(document).ready(function(){
//     $("img").click(function(){
//         // Change src attribute of image
//         $("#myimg").attr("src", "{{ asset('images/right.png') }}");
//     });
// });

   </script>
     <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
   @endsection