@section('title', '- Detail Product')

@extends('layouts.app')

@section('section')

<div class="container">
  <input type="hidden" id="token" name="" value="{{csrf_token()}}">
  <div class="section-content" id="article-detail">
    <div class="col-md-8" >
      <div class="panel panel-default">
        <div class="panel-content">
          @include('alerts.success')
          @include('alerts.warning')
          <div class="row">
            <div class="col-md-12">
              @if($article->status=='expired')
                <div class="alert alert-danger">
                    @lang('products.expired_not_buy')
                </div>
              @endif

                @if($article->status=='deleted')
                  <div class="alert alert-danger">
                    This product was deleted.
                  </div>
                @endif

              @if($article->stock==0 && $article->service == false)
                <div class="alert alert-danger">
                    @lang('products.sold')
                </div>
              @endif
            </div>
            <div class="col-md-10">
              <h3>{{$article->name}}</h3>
            </div>
            <div class="col-md-2 text-center">
              <i class="fa fa-2x @if(isset($article->whislist) && $article->whislist==1) fa-heart color-red @else fa-heart-o @endif add-whishlist" style='margin-top: 20px;' data-id='{{$article->id}}' aria-hidden="true"></i>
            </div>
            <!--
            <div class="col-md-2 text-center">
              <i class="fa fa-2x @if(isset($article->favorite) && $article->favorite==1) fa-heart color-red @else fa-heart-o @endif add-favorite" style='margin-top: 20px;' data-id='{{$article->id}}' aria-hidden="true"></i>
            </div>
            -->
          </div>

          <div class="col-md-12">
            <h4 class="text-price-detail">{{$article->price}} eBits</h4>
          </div>
          <div class="image-container">

            <img id="active-image" src="{{$article->photos[0]->file}}" class="img-responsive product_image" alt="">

            <div class="row">
              <br>
              @foreach ($article->photos as $photo)
              <div class="col-md-2 col-xs-3">
                <img src="{{$photo->file}}" style='height: 80px;' class="img-responsive center-block select-image thumbnail_img" alt="">
              </div>
              @endforeach
            </div>
          </div>
          <div class="articles-description">
            {{ltrim($article->description)}}
          </div>
        </div>
      </div>
    </div>

    <!--Seller Data-->
    <div class="col-md-4">
      <div class="panel panel-gray">
        <div class="panel-content">
          <div class="row">
            <div class="col-md-12">
              <h4>@lang('profile.seller_detail')</h4>
              @php
              $id_seller = $article->user->id;
              @endphp
              <p class="seller_name">{{$article->user->first_name}} {{$article->user->last_name}} (<a href='{{url("/seller/$id_seller")}}' class="without_under">@lang('profile.see_more_seller')</a>)</p>
              <span class="sales_por">@lang('products.por') ({{number_format($article->user->purchases_percent,2)}}%)</span>
              <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{$article->user->purchases_percent}}%;">
                  <span class="sr-only">{{$article->user->purchases_percent}} complete</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    @if($article->negotiable==1 && $article->status!='expired' && ($article->stock!=0 || $article->service == true)  )
    <div class="col-md-4">
      <div class="panel panel-gray">
        <div class="panel-content">
          <div class="row">
            <div class="col-md-12">
              <h4>@lang('products.make_offer')</h4>
              <button type="" name="button" data-toggle="modal" data-target="#modal-offer" class='btn btn-ebit center-block'>@lang('products.make_offer')</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endif

    <div class="col-md-4">
      <div class="panel panel-gray">
        <div class="panel-content">
          <div class="row">
            @if(session('user'))
            <div class="col-md-4 col-xs-4">
              @if(!session('user')->avatar)
              <img src="{{url('/imagenes/user.png')}}" class='center-block img-responsive' alt="">
              @else
              <img src="{{session('user')->avatar}}" class="img-responsive img-circle img-user-asks" alt="">
              @endif

            </div>
            <div class="col-md-8">
              <h3 class="name-user-asks">{{session('user')->first_name}} {{session('user')->last_name}}</h3>
            </div>
            @endif
            <div class="col-md-12">
              @if(session('user'))
              <textarea name="name" placeholder='@lang("products.do_question")' class="form-control form-asks" rows="4" cols="80" id="question">
              </textarea>
              <button type="button" class="btn btn-gray btn-block" name="button" data-id="{{$article->id}}" id="send-question" data-loading-text='Proccess comment <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'>@lang('products.send_msg')</button>
              <hr class="hr-asks">
              @endif
              <div class="" id="preview-questions">
                <h4 class="title-asks">@lang('products.last_comments')</h4>
                <div class="" id="allComments">

                  @foreach($comments as $comment)
                  @if($comment->response!=null || (session('user') and session('user')->id==$article->user_id))
                  <div class="row">
                    <div class="col-md-12">
                      <p class="Text-Style-2">{{$comment->first_name}} {{$comment->last_name}}</p>
                      <div class="row">
                        <div class="col-md-10">
                          <p class="Text-Style-3">{{$comment->comment}}</p>
                        </div>
                        <div class="col-md-2">
                          @if((session('user') && session('user')->id==$article->user_id) && $comment->response==null)
                            <i class="fa fa-reply make-answer" data-comment="{{$comment->comment}}" data-user="{{$comment->first_name}} {{$comment->last_name}}" data-id="{{$comment->id}}" aria-hidden="true"></i>
                          @endif
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="answer" id="answer-{{$comment->id}}">
                    @if($comment->response!=null)
                    <div class="ask-thread"></div>
                    <p class="Text-Style-2">@lang('products.seller')</p>
                    <p class="Text-Style-3">{{$comment->response}}</p>
                    @endif
                  </div>
                  <div class="ask-separator"></div>
                  @endif
                  @endforeach

                </div>
              </div>
              @if(($article->status!='expired' && $article->status!='deleted' ) && ($article->stock!=0 || $article->service == true ) && $verify == 'none')
              {{-- <a class="btn btn-ebit btn-block"  href='{{url("buy/product/$article->id/addressselect")}}'>@lang('products.buy_article')  </a> --}}
              <a class="btn btn-ebit btn-block"  href='{{url("articles/add/$article->id")}}'>@lang('products.add_to_cart')  </a>
              @endif

              @if($verify == 'mark')
                <a class="btn btn-ebit btn-block"  href="{{url('/shopping-cart')}}"> @lang('products.added_to_cart')  </a>
              @endif
              
              </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class= "col-md-12 panel panel-default">
        <h3>@lang('products.related')</h3>
        <ul class="list-inline">  
          @foreach ($related as $key => $r)
            <li class="col-md-2 col-xs-12 related opacity">
              <a href='{{url("/articles/$r->id")}}'>
                <div class="img-related-container">
                  <img src="{{$r->photos[0]->file}}" class="img-responsive" alt="{{$r->name}}" title="{{$r->name}}">  
                </div>
                <p class="text-small-product">{{ str_limit($r->name, 45) }}</p>
                <p class="text-small-product text-ebits-price">{{$r->price }} eBits</p>
              </a>
            </li>
          @endforeach
        </ul>
      </div>
    </div>
    <div class="container">
      @if(count($article->details) > 0)
        <div class= "col-md-6 panel panel-default">
          <h3>Product information</h3>
          <table class="table table-bordered">
            <tbody>
              @foreach($article->details as $detail)
                <tr>
                  <td>{{ ucfirst($detail->key) }}</td>
                  @if($detail->key == 'weight')
                    <td>{{ $detail->value }} pounds</td>
                  @else
                    <td>{{ $detail->value }} inches</td>
                  @endif
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
        <div class= "col-md-6">
          <img src="{{url('/imagenes/publi1.jpg')}}" class="img-responsive">
        </div>
      @else
        <div>
          <img src="{{url('/imagenes/publi2.jpg')}}" class="img-responsive">
        </div>
      @endif
    </div>

  </div>

  <div class="section-content" id="article-confirm" style="display: none;">
    <div class="row">
      <div class="col-md-10 col-md-offset-1">
        <div class="panel panel-default">
          <div class="panel-content">
            <h3>@lang('products.buy_detail')</h3>
            <hr>
            <div class="row">
              <div class="col-md-12">
                <div class="" id="purchase-confirm">
                  <div class="col-md-4">
                    <img id="" src="{{$article->photos[0]->file}}" class="img-responsive img-circle" alt="">
                  </div>
                  <div class="col-md-8">
                    @if(!session('user'))
                      <div class="alert alert-danger">
                          <p>@lang('products.need_logged_buy')</p>
                      </div>
                    @endif
                    <h3>{{$article->name}}</h3>
                    <p>{{$article->description}}</p>

                    <p><b>@lang('products.seller'):</b><a href='{{url("/seller/$id_seller")}}' class="without_under"> {{$article->user->first_name}} {{$article->user->last_name  }}</a></p>
                    <h4 class="text-price-confirm"><b>Price: </b>{{$article->price}} eBits</h4>
                    @if(session('user'))
                      <button type="button" class="btn btn-ebit btn-block" data-id="{{$article->id}}" id="request-purchase" name="button" data-loading-text='Processing purchase <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'>   @lang('products.confirm_buy')</button>
                    @endif
                    <button type="button" class="btn btn-gray btn-block" id="btn-back" name="button">@lang('products.back')</button>
                  </div>

                  <div class="col-md-12" id="box-btn">
                  </div>
                </div>
                <div class="" id="purchase-finish" style="display: none;" align="center">
                  <img src="{{url('/imagenes/if_check_1930264.png')}}" style="width: 200px" class="img-responsive">
                  <h4 class="article-text">@lang('products.msg_info1')</h4>
                  <p class="Text-Style-2 text-big">@lang('products.msg_info2').</p>
                  <div class="text-center">
                    <a href="{{url('/account/purchases')}}" class="btn btn-ebit " id="back-purchase" name="button">@lang('products.go_pur')</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="modal-answer" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">@lang('products.response_ques')</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <label for="" id="name-question"></label>
              <p id="content-question"></p>
              <br>
              <input type="hidden" id="id-question" name="" value="">
              <textarea name="name" class="form-control" rows="4" id="answer" cols="80"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-ebit" id="send-answer">@lang('products.send_response')</button>
        </div>
      </div>
    </div>
  </div>



  <div class="modal fade" id="modal-offer" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">@lang('products.offer')</h4>
        </div>
        <form class="" action="{{url('/offers')}}" method="post">


          <div class="modal-body">
            <div class="row">
              <div class="col-md-10 col-md-offset-1">

                {{csrf_field()}}

                <label for="">@lang('products.amounts_offer')</label>
                <input type="hidden" name="product_id" value="{{$article->id}}">
                <input type="number" class="form-control" name="offer" value="0">

              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-ebit">@lang('products.make_offer')</button>
          </div>
        </div>

      </form>
    </div>
  </div>


</div>


@push('css')
<style media="screen">

  .color-red{
    color: red;
  }
  #box-btn{
    margin-top: 40px;
  }

  #btn-back
  {
    margin-top: 30px;
    margin-bottom: 50px;
  }

  #back-purchase{
    margin-top: 30px;
    margin-bottom: 50px;
  }
  .article-text{
    font-family: Roboto;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #404148;
  }
  .filters-container{
    opacity: 0.80;
    border-radius: 3px;
    background-color: #ecf0f1;

  }
  .related_img{
    height: 60px;
    margin: 0 auto;
  }
  .filters-heading{

    background-color: #404148;
    padding: 10px;
    margin-bottom: 10px;
  }

  .filters-heading > h4{


    color: #f6f8f8;
    font-family: Roboto;
    font-size: 16px !important;
    font-weight: bold;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .title_related{
    text-align: center;
  }

  .filters-body{
    padding: 15px;
  }

  .img-user-asks{

    height: 100px;

  }

  .name-user-asks{
    padding-top: 15px;
  }

  .form-asks{
    margin-top: 10px;
    background: white;
    border-radius: 3px;
  }

  .hr-asks
  {
    height: 1px;
    background-color: #404148;
    border-top: 1px solid #404148;
  }

  .title-asks{
    font-family: Roboto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #404148;
  }

  .ask-article{
    font-family: Roboto;
    font-size: 14px;
    text-align: left;
    color: #404148;
  }

  .anwers-article{

  }

  .ask-separator{
    height: 1px;
    opacity: 0.39;
    background-color: #404148;
    margin: 10px 0px 10px 0px;
  }

  .ask-thread{
    width: 1px;
    height: 14px;
    background-color: #404148;
  }

  .answer
  {
    padding-left: 15px
  }

  .relationed-container{
    padding: 10px 10px 10px 10px;
    background: white;
    margin: 10px;
    height: 150px;
  }

  .text-price-confirm{
    font-family: Roboto;
    font-weight: bold;
    text-align: left;
    color: #f8c82d;
  }


  .make-answer{
    cursor: pointer;
  }
  .make-answer:hover{
    cursor: pointer;
    color: white;
  }
  .product_image{
    height: 400px;
    margin: 0 auto;
  }

  #allComments{
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
@endpush
@push('js')
<script type="text/javascript">
  var error;
</script>
<script type="text/javascript">
  $("#question").val("");
  $('#show-filters').on('click',function(){
    var element=$('#body-filters');
    if(element.hasClass('hidden-xs')){
      element.removeClass('hidden-xs');
    }else {
      element.addClass('hidden-xs');
    }
  });

  $(document).on('click','.select-image',function(){

    var url=$(this).attr('src');
    $('#active-image').attr('src',url);
  });

  $(document).on('click','#btn-back',function(){
    $('#article-confirm').hide();
    $('#article-detail').show();
  });

  /*$(document).on('click','#btn-purchase',function(){
    $('#article-confirm').show();
    $('#article-detail').hide();
  });*/

  $(document).on('click','#request-purchase',function(){
    var $btn=$(this).button('loading');
    var token=$('#token').val();
    var id=$(this).data('id');
    var url_project="{{url('/')}}";
    $.ajax({
      url: url_project+'/purchase',
      headers:{'X-CSRF-TOKEN': token},
      type: 'POST',
      dataType:'JSON',
      data:{id:id},
      success:function(res){
        $btn.button('reset')
        if(res['code']==200){
         $('#purchase-finish').show();
         $('#purchase-confirm').hide();
         $('#purchase-confirm').remove();
         $('#article-detail').remove();
       }

       else if(res['error']==422){
        console.log(res['message']['error']);
        if(res['message']['error'] && res['message']['error']=='insufficient_balance')
        {
          swal({
            title: "Error",
            text: 'Insufficient balance, do you want to buy ebits?',
            type: "error",
            showCancelButton: true,
            closeOnConfirm: false,
            showLoaderOnConfirm: false,
          },
          function(){
            window.location.replace('{{url('/ebits')}}')
          });
          return 0;
        }
        else if(res.message.error == 'product_not_published'){
          swal({
            title: "Error",
            text: 'Product without inventory or inactive',
            type: "error",
            showCancelButton: false,
            closeOnConfirm: false,
            showLoaderOnConfirm: false,
          });
          return 0;
        }
      }
      else if(res['error']==401)
        window.location.replace('{{url('/login')}}')
      else {

        swal("Ooops!","An unexpected error occurred, try to buy later.", "error");
      }




    },
    error:function (xhr, status, errorThrown){

      $btn.button('reset')

      if(xhr['status']==401)
      {
        window.location.replace(url_project+'/login');
        return 0;
      }
      swal("Ooops!","Apparently something went wrong, try to buy the item later.", "error");


    },

  });
  });

  $(document).on('click','#send-question',function(){
    var $btn=$(this).button('loading');
    var token=$('#token').val();
    var question=$('#question').val();
    var id=$(this).data('id');
    var url_project="{{url('/')}}";

    if(!question){

      swal('Oops!',"@lang('errors.comment_not_provided')",'error');
      return 0;

    } 
    $.ajax({
      url: url_project+'/comments',
      headers:{'X-CSRF-TOKEN': token},
      type: 'POST',
      dataType:'JSON',
      data:{id:id,question:question},
      success:function(res){

        $btn.button('reset')
        if(res['code']==200){
          swal("Question Sent", "We will notify you by email when your seller responds the same", "success");
        }
        else if(res['code']==409){
          swal("Ooops!",res['message'], "error");
        }
        else if(res['code']==401)
          window.location.replace('{{url('/login')}}')
        else {
          swal("Ooops!","An unexpected error occurred, try to submit your question later.", "error");
        }
        $('#question').val("");
      },
      error:function (xhr, status, errorThrown){
        $btn.button('reset')
        if(xhr['status']==401)
        {
          window.location.replace(url_project+'/login');
          return 0;
        }
        swal("Ooops!","An unexpected error occurred, try to submit your question later.", "error");
      },
    });
  });

  $(document).on('click','.make-answer',function(){

    var comment=$(this).data('comment');
    var token=$('#token').val();
    var user=$(this).data('user');
    var id=$(this).data('id');

    $('#name-question').html(user);
    $('#content-question').html(comment);
    $('#id-question').val(id);
    $('#modal-answer').modal('show');
  });

  $(document).on('click','#send-answer',function(){
    var $btn=$(this).button('loading');
    var token=$('#token').val();
    var answer=$('#answer').val();
    var id=$('#id-question').val();
    var url_project="{{url('/')}}";

    $.ajax({
      url: url_project+'/comments/'+id,
      headers:{'X-CSRF-TOKEN': token},
      type: 'PUT',
      dataType:'JSON',
      data:{id:id,answer:answer},
      success:function(res){

        $btn.button('reset')

        if(res['code']==200){
          var strHtml="";
          strHtml+='<div class="ask-thread"></div>';
          strHtml+='<p class="Text-Style-2">'+res['name']+'</p>';
          strHtml+='<p class="Text-Style-3">'+answer+'</p>';
          $('#answer').val('');
          $('#answer-'+id).html(strHtml);
          $('#modal-answer').modal('hide');
        }
        else if(res['code']==409){
          swal("Ooops!",res['message'], "error");
        }
        else if(res['code']==401)
          window.location.replace('{{url('/login')}}')
        else {
          swal("Ooops!","An unexpected error occurred, try to submit your question later.", "error");
        }
        $('#question').val("");
      },
      error:function (xhr, status, errorThrown){
        $btn.button('reset')
        if(xhr['status']==401)
        {
          window.location.replace(url_project+'/login');
          return 0;
        }
        swal("Ooopps!","An unexpected error occurred, try to submit your question later.","error");
      },
    });
  });


  var url_project="{{url('/')}}";

</script>
<script type="text/javascript">
    var message_no_login="@lang('products.no_login_fav')";
</script>
<script src="{{url('/js/favorite.js')}}"></script>
@endpush

@endsection