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

  <link rel="stylesheet" href="{{asset ('css/crowdfundinginnerpage.css')}}">
  <link rel="stylesheet" href="{{ asset('css/home.css') }}">

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


            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">


                <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;"  >
                <img src="{{$productdetail->product->avatar}}" class="img-fluid mainImage MYIMGERD"   id="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="../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="../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-6 col-lg-6 col-xl-6">
                        <p class="funding-p">FUNDING</p>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 funding-row">
                        <img src="../slicing/my-shout-crowdfunding-1/icon-2.png" class="img-fluid">
                        {{-- <span class=" span-sm-2">13 DAYS LEFT</span> --}}
                    </div>
                    <div class="col-12 ">
                        <h1>
                            {{$productdetail->product->detail}}
                        </h1>
                    </div>
                    <div class="col-12 pt">
                        <p >
                            {{-- Lorem ipsum dolor sit amet, consectetuer adipiscing
                            elit, sed diam nonummy nibh euismod tincidunt ut
                            laoreet dolore magna ali --}}
                        </p>
                    </div>
                    <div class="col-6 col-lg-6 crowd-price pt ">
                        <p class="price">
                            <b>
                                {{$productdetail->product->price}}
                                 <span>
                                     AUD
                                     </span>
                                    </b>
                                    </p>
                    </div>
                    <br />
<b>Notice</b>:  Undefined variable: productdetail in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
<br />
<b>Notice</b>:  Trying to get property 'points_collected' of non-object in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
<br />
<b>Notice</b>:  Undefined variable: productdetail in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
<br />
<b>Notice</b>:  Trying to get property 'product' of non-object in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
<br />
<b>Notice</b>:  Trying to get property 'price' of non-object in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
<br />
<b>Warning</b>:  Division by zero in <b>/home/demohatinco/public_html/my_shout_backend/resources/views/user/crowdfundinginner/index.blade.php</b> on line <b>108</b><br />
                    <div class="col-6 col-lg-6 crowd-price pt ">
                        <p class="text-secondary price price-2">  {{$productdetail->product->price}} <span>AUD</span></p>
                    </div>
                    <div class="col-12">
                        <div class="progress" >
                            <div class="progress-bar progress-bar-striped progress-bar-animated " style="width: {!!$per!!}%">
                                {!! $per  !!} %
                            </div>
                        </div>
                    </div>
                    <div class="col-12 pt ">
                        <span class="float-right"><small class="text-secondary">COLLECTED</small></span>
                    </div>
                    <div class="col-6 col-lg-6 button pt ">
                        <a href="" type="button" class="btn btn-md btn-primary myy"
                        data-toggle="modal" data-target=".points_donate">
                        Donate Points
                    </a>



                        </a>
                      @include('user.crowdfundinginner.video_modal')

                    </div>
                    <div class="col-6 col-lg-6 funding-social-icon pt ">
                        <img src="../slicing/my-shout-crowdfunding-2-inner-pages/facebook.png" class="img-fluid">
                        <img src="../slicing/my-shout-crowdfunding-2-inner-pages/instagram.png" class="img-fluid">
                        <img src="../slicing/my-shout-crowdfunding-2-inner-pages/in.png" class="img-fluid">
                        <img src="../slicing/my-shout-crowdfunding-2-inner-pages/twitter.png" class="img-fluid">
                    </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" id="description">
                <a class="card-link text-decoration-none " id="active " onclick="cardLink()" data-toggle="collapse" href="#collapseOne">
                  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>

            </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">
                            <p class="p-sm">
                                {!!$productdetail->description!!}


                          </p>
                          </div>
                      </div>
                    </div>
                  </div>
                  <div id="collapseTwo" class="col-12 collapse" data-parent="#accordion">
                    <div class="card-body">
                    {!!$productdetail->story!!}
                    </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