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

 <link rel="stylesheet" href="{{asset ('css/product-detail-page.css')}}">
 <link rel="stylesheet" href="{{ asset('css/home.css') }}">


  <!--ABOUT US TOP BORDER-->
  <section class="about-top-border">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 about-h1">
                <h1 class="text-break">Product Detail Page</h1>

            </div>
            <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                <!-- <button type="submit" class="btn btn-md btn-primary myy">Request Funding</button> -->
                <a href="" type="submit" class="btn btn-md btn-primary myy"
                 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')
                <p class=" home-bar-text"><img src="{{asset('slicing/My Shout About Us/icons8-home.svg')}}" class="img-fluid text-center"> Home / <span>Pages /</span ><span class="blue text-break"> Product Detail </span></p>
            </div>
        </div>
        @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

    </div>
</section>

<!-- FUNDING SECTION-->
<section class="funding-section">
<div class="container-fluid funding-section-fluid">
    <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="text" id="pro_detail" name="fix_img_id" style="color:white; border-color:white; border-width: inherit;width: 0px;"  >
            {{-- <input type="hidden" name="prod_id" value="{{$productdetail->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">
                    <p class="funding-p">{{ucwords($productdetail->name)}} </p>
                </div>
                {{-- @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 --}}

                <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">

                    ${{$point_price * $productdetail->price }}




                            </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 type="number" class="form-control"> --}}
                        <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">
                        @for($i=0; $i<5; $i++)
                            @if($productdetail->rating > $i)
                                <span class="fa fa-star checked star"></span>
                            @else
                                <span class="fa fa-star star"></span>
                            @endif
                        @endfor

                        {{-- <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-btn"
                            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>

<!-- DESCRIPTION SECTION-->
<section>
<div class="container-fluid description-container">
    <div id="accordion">
        <div class="row ">
        <div class="col-12 link-row ">
            <div class="col-12 text-center">
            <a class="card-link text-decoration-none" id="active" data-toggle="collapse" href="#collapseOne" onclick="cardLink();">
              Description
            </a>
            <script>
                function cardLink() {
                    var x = document.getElementById("active");
                    var y = ".card-link-selected";
                    if (x === ".card-link-selected") {
                        y = value;
                    }
                }
            </script>
            <a class="collapsed text-decoration-none card-link" data-toggle="collapse" href="#collapseTwo">
              Story
            </a>
            {{-- <a class="collapsed text-decoration-none card-link" data-toggle="collapse" href="#collapseThree">
              Discussion 91
            </a> --}}
        </div>
        </div>
        </div>
        <div class="row">
            <div id="collapseOne" class="col-12 collapse show" data-parent="#accordion">
                <div class="card-body">
                  <div class="row">
                      <div class="col-12">
                          <h4>Description</h4>
                      </div>
                      {{-- <div class="col-12">
                          <br>
                          <h5>Lorem ipsum dolor sit amet, consectetuer adipi</h5>
                      </div> --}}
                      <div class="col-12">
                          {{-- {{ dd($productdetail->products_fundings->description)}} --}}

                          @foreach ($productdetail->products_fundings as  $pf)


                          <p class="p-sm">
                              {!!$pf->description!!}


                        </p>
                        @endforeach
                      </div>
                  </div>
                </div>
              </div>
              <div id="collapseTwo" class="col-12 collapse" data-parent="#accordion">
                <div class="card-body">
                    @foreach ($productdetail->products_fundings as  $pf)
                    {!!$pf->story!!}


                  @endforeach

                </div>
              </div>
              {{-- <div id="collapseThree" class="col-12 collapse" data-parent="#accordion">
                <div class="card-body">
                  Lorem ipsum 3..
                </div>
              </div> --}}
        </div>
      </div>
</div>
</section>
    <!-- Modal -->
    <div class="container">

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog ">

                <!-- Modal content-->
                <div class="modal-content modalbg">
                    <div class="modal-body">
                        <div class="text-center">
                            <img src="{{ asset('images/tick.png') }}" alt="">
                            <h4 class="taxt-center"><strong>{!! $productdetail->name!!} </strong></h4>
                            {{-- <h4><strong>has been added to your cart. </strong></h4> --}}
                            <div class="row text-cnter">
                                <div class="col-sm-12">
                                    <a href='{{url('user/shop')}}' class="btn btn-lg btncontinuueshoping">

                                    <span> <img src="{{ asset('images/left.png') }}"/>
                                        </span>Continue Shopping</a>
                                    <a href="{{url('user/cart')}}" class="btn btn-lg btngotocart">
                                        <span> <img src="{{ asset('images/right.png') }}"/></span> Go to Cart</a>
                                </div>
                                <div class="col-sm-4"></div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
    @endsection


    @section('app_jquery')
     <script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

    <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) ;





        }


    </script>

    @endsection