<?php $__env->startSection('title', $product->title); ?>

<?php $__env->startSection('content'); ?>
  <div class="row">
    <div class="col-lg-10 offset-lg-1">
      <div class="card">
        <div class="card-body product-info">
          <div class="row">
            <div class="col-5">
              <img class="cover" src="<?php echo e($product->image_url, false); ?>" alt="">
            </div>
            <div class="col-7">
              <div class="title"><?php echo e($product->long_title ?: $product->title, false); ?></div>
              <!-- 众筹商品模块开始 -->
              <?php if($product->type === \App\Models\Product::TYPE_CROWDFUNDING): ?>
                <div class="crowdfunding-info">
                  <div class="have-text">已筹到</div>
                  <div class="total-amount"><span class="symbol">￥</span><?php echo e($product->crowdfunding->total_amount, false); ?></div>
                  <!-- 这里使用了 Bootstrap 的进度条组件 -->
                  <div class="progress">
                    <div class="progress-bar progress-bar-success progress-bar-striped"
                         role="progressbar"
                         aria-valuenow="<?php echo e($product->crowdfunding->percent, false); ?>"
                         aria-valuemin="0"
                         aria-valuemax="100"
                         style="min-width: 1em; width: <?php echo e(min($product->crowdfunding->percent, 100), false); ?>%">
                    </div>
                  </div>
                  <div class="progress-info">
                    <span class="current-progress">当前进度：<?php echo e($product->crowdfunding->percent, false); ?>%</span>
                    <span class="float-right user-count"><?php echo e($product->crowdfunding->user_count, false); ?>名支持者</span>
                  </div>
                  <!-- 如果众筹状态是众筹中，则输出提示语 -->
                  <?php if($product->crowdfunding->status === \App\Models\CrowdfundingProduct::STATUS_FUNDING): ?>
                    <div>此项目必须在
                      <span class="text-red"><?php echo e($product->crowdfunding->end_at->format('Y-m-d H:i:s'), false); ?></span>
                      前得到
                      <span class="text-red">￥<?php echo e($product->crowdfunding->target_amount, false); ?></span>
                      的支持才可成功，
                      <!-- Carbon 对象的 diffForHumans() 方法可以计算出与当前时间的相对时间，更人性化 -->
                      筹款将在<span class="text-red"><?php echo e($product->crowdfunding->end_at->diffForHumans(now()), false); ?></span>结束！
                    </div>
                  <?php endif; ?>
                </div>
            <?php else: ?>
              <!-- 原普通商品模块开始 -->
                <div class="price"><label>价格</label><em>￥</em><span><?php echo e($product->price, false); ?></span></div>
                <div class="sales_and_reviews">
                  <div class="sold_count">累计销量 <span class="count"><?php echo e($product->sold_count, false); ?></span></div>
                  <div class="review_count">累计评价 <span class="count"><?php echo e($product->review_count, false); ?></span></div>
                  <div class="rating" title="评分 <?php echo e($product->rating, false); ?>">评分
                    <span class="count"><?php echo e(str_repeat('★', floor($product->rating)), false); ?><?php echo e(str_repeat('☆', 5 - floor($product->rating)), false); ?></span>
                  </div>
                </div>
                <!-- 原普通商品模块结束 -->
            <?php endif; ?>
            <!-- 众筹商品模块结束 -->
              <div class="skus">
                <label>选择</label>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                  <?php $__currentLoopData = $product->skus; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sku): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <label
                        class="btn sku-btn"
                        data-price="<?php echo e($sku->price, false); ?>"
                        data-stock="<?php echo e($sku->stock, false); ?>"
                        data-toggle="tooltip"
                        title="<?php echo e($sku->description, false); ?>"
                        data-placement="bottom">
                      <input type="radio" name="skus" autocomplete="off" value="<?php echo e($sku->id, false); ?>"> <?php echo e($sku->title, false); ?>

                    </label>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
              </div>
              <div class="cart_amount"><label>数量</label><input type="text" class="form-control form-control-sm" value="1"><span>件</span><span class="stock"></span></div>
              <div class="buttons">
                <?php if($favored): ?>
                  <button class="btn btn-danger btn-disfavor">取消收藏</button>
                <?php else: ?>
                  <button class="btn btn-success btn-favor">❤ 收藏</button>
                <?php endif; ?>
                <!-- 众筹商品下单按钮开始 -->
                  <?php if($product->type === \App\Models\Product::TYPE_CROWDFUNDING): ?>
                    <?php if(Auth::check()): ?>
                      <?php if($product->crowdfunding->status === \App\Models\CrowdfundingProduct::STATUS_FUNDING): ?>
                        <button class="btn btn-primary btn-crowdfunding">参与众筹</button>
                      <?php else: ?>
                        <button class="btn btn-primary disabled">
                          <?php echo e(\App\Models\CrowdfundingProduct::$statusMap[$product->crowdfunding->status], false); ?>

                        </button>
                      <?php endif; ?>
                    <?php else: ?>
                      <a class="btn btn-primary" href="<?php echo e(route('login'), false); ?>">请先登录</a>
                    <?php endif; ?>
                    <!-- 秒杀商品下单按钮开始 -->
                  <?php elseif($product->type === \App\Models\Product::TYPE_SECKILL): ?>
                    <?php if(Auth::check()): ?>
                      <?php if($product->seckill->is_before_start): ?>
                        <button class="btn btn-primary btn-seckill disabled countdown">抢购倒计时</button>
                      <?php elseif($product->seckill->is_after_end): ?>
                        <button class="btn btn-primary btn-seckill disabled">抢购已结束</button>
                      <?php else: ?>
                        <button class="btn btn-primary btn-seckill">立即抢购</button>
                      <?php endif; ?>
                    <?php else: ?>
                      <a class="btn btn-primary" href="<?php echo e(route('login'), false); ?>">请先登录</a>
                    <?php endif; ?>
                  <!-- 秒杀商品下单按钮结束 -->
                  <?php else: ?>
                    <button class="btn btn-primary btn-add-to-cart">加入购物车</button>
                <?php endif; ?>
                <!-- 众筹商品下单按钮结束 -->
              </div>
            </div>
          </div>
          <div class="product-detail">
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" href="#product-detail-tab" aria-controls="product-detail-tab" role="tab" data-toggle="tab" aria-selected="true">商品详情</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#product-reviews-tab" aria-controls="product-reviews-tab" role="tab" data-toggle="tab" aria-selected="false">用户评价</a>
              </li>
            </ul>
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="product-detail-tab">
                <!-- 产品属性开始 -->
                <div class="properties-list">
                  <div class="properties-list-title">产品参数：</div>
                  <ul class="properties-list-body">
                    <?php $__currentLoopData = $product->grouped_properties; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $name => $values): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                      <li><?php echo e($name, false); ?>：<?php echo e(join(' ', $values), false); ?></li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </ul>
                </div>
                <!-- 产品属性结束 -->
                <!-- 在商品描述外面包了一层 div -->
                <div class="product-description">
                  <?php echo $product->description; ?>

                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="product-reviews-tab">
                <!-- 评论列表开始 -->
                <table class="table table-bordered table-striped">
                  <thead>
                  <tr>
                    <td>用户</td>
                    <td>商品</td>
                    <td>评分</td>
                    <td>评价</td>
                    <td>时间</td>
                  </tr>
                  </thead>
                  <tbody>
                  <?php $__currentLoopData = $reviews; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $review): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr>
                      <td><?php echo e($review->order->user->name, false); ?></td>
                      <td><?php echo e($review->productSku->title, false); ?></td>
                      <td><?php echo e(str_repeat('★', $review->rating), false); ?><?php echo e(str_repeat('☆', 5 - $review->rating), false); ?></td>
                      <td><?php echo e($review->review, false); ?></td>
                      <td><?php echo e($review->reviewed_at->format('Y-m-d H:i'), false); ?></td>
                    </tr>
                  <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                  </tbody>
                </table>
                <!-- 评论列表结束 -->
              </div>
            </div>
          </div>
          <!-- 猜你喜欢开始 -->
          <?php if(count($similar) > 0): ?>
            <div class="similar-products">
              <div class="title">猜你喜欢</div>
              <div class="row products-list">
                <!-- 这里不能使用 $product 作为 foreach 出来的变量，否则会覆盖掉当前页面的 $product 变量 -->
                <?php $__currentLoopData = $similar; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                  <div class="col-3 product-item">
                    <div class="product-content">
                      <div class="top">
                        <div class="img">
                          <a href="<?php echo e(route('products.show', ['product' => $p->id]), false); ?>">
                            <img src="<?php echo e($p->image_url, false); ?>" alt="">
                          </a>
                        </div>
                        <div class="price"><b>￥</b><?php echo e($p->price, false); ?></div>
                        <div class="title">
                          <a href="<?php echo e(route('products.show', ['product' => $p->id]), false); ?>"><?php echo e($p->title, false); ?></a>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
              </div>
            </div>
          <?php endif; ?>
          <!-- 猜你喜欢结束 -->
        </div>
      </div>
    </div>
  </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scriptsAfterJs'); ?>
  <!-- 如果是秒杀商品并且尚未开始秒杀，则引入 momentjs 类库 -->
  <?php if($product->type == \App\Models\Product::TYPE_SECKILL && $product->seckill->is_before_start): ?>
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.min.js"></script>
  <?php endif; ?>
  <script>
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip({trigger: 'hover'});
      $('.sku-btn').click(function () {
        $('.product-info .price span').text($(this).data('price'));
        $('.product-info .stock').text('库存：' + $(this).data('stock') + '件');
      });

      // 监听收藏按钮的点击事件
      $('.btn-favor').click(function () {
        axios.post('<?php echo e(route('products.favor', ['product' => $product->id]), false); ?>')
          .then(function () {
            swal('操作成功', '', 'success')
              .then(function () {  // 这里加了一个 then() 方法
                location.reload();
              });
          }, function(error) {
            if (error.response && error.response.status === 401) {
              swal('请先登录', '', 'error');
            }  else if (error.response && error.response.data.msg) {
              swal(error.response.data.msg, '', 'error');
            }  else {
              swal('系统错误', '', 'error');
            }
          });
      });

      $('.btn-disfavor').click(function () {
        axios.delete('<?php echo e(route('products.disfavor', ['product' => $product->id]), false); ?>')
          .then(function () {
            swal('操作成功', '', 'success')
              .then(function () {
                location.reload();
              });
          });
      });

      // 加入购物车按钮点击事件
      $('.btn-add-to-cart').click(function () {

        // 请求加入购物车接口
        axios.post('<?php echo e(route('cart.add'), false); ?>', {
          sku_id: $('label.active input[name=skus]').val(),
          amount: $('.cart_amount input').val(),
        })
          .then(function () {
            swal('加入购物车成功', '', 'success')
              .then(function() {
                location.href = '<?php echo e(route('cart.index'), false); ?>';
              });
          }, function (error) { // 请求失败执行此回调
            if (error.response.status === 401) {

              // http 状态码为 401 代表用户未登陆
              swal('请先登录', '', 'error');

            } else if (error.response.status === 422) {

              // http 状态码为 422 代表用户输入校验失败
              var html = '<div>';
              _.each(error.response.data.errors, function (errors) {
                _.each(errors, function (error) {
                  html += error+'<br>';
                })
              });
              html += '</div>';
              swal({content: $(html)[0], icon: 'error'})
            } else {

              // 其他情况应该是系统挂了
              swal('系统错误', '', 'error');
            }
          })
      });

      // 参与众筹 按钮点击事件
      $('.btn-crowdfunding').click(function () {
        // 判断是否选中 SKU
        if (!$('label.active input[name=skus]').val()) {
          swal('请先选择商品');
          return;
        }
        // 把用户的收货地址以 JSON 的形式放入页面，赋值给 addresses 变量
        var addresses = <?php echo json_encode(Auth::check() ? Auth::user()->addresses : []); ?>;
        // 使用 jQuery 动态创建一个表单
        var $form = $('<form></form>');
        // 表单中添加一个收货地址的下拉框
        $form.append('<div class="form-group row">' +
          '<label class="col-form-label col-sm-3">选择地址</label>' +
          '<div class="col-sm-9">' +
          '<select class="custom-select" name="address_id"></select>' +
          '</div></div>');
        // 循环每个收货地址
        addresses.forEach(function (address) {
          // 把当前收货地址添加到收货地址下拉框选项中
          $form.find('select[name=address_id]')
            .append("<option value='" + address.id + "'>" +
              address.full_address + ' ' + address.contact_name + ' ' + address.contact_phone +
              '</option>');
        });
        // 在表单中添加一个名为 购买数量 的输入框
        $form.append('<div class="form-group row">' +
          '<label class="col-form-label col-sm-3">购买数量</label>' +
          '<div class="col-sm-9"><input class="form-control" name="amount">' +
          '</div></div>');
        // 调用 SweetAlert 弹框
        swal({
          text: '参与众筹',
          content: $form[0], // 弹框的内容就是刚刚创建的表单
          buttons: ['取消', '确定']
        }).then(function (ret) {
          // 如果用户没有点确定按钮，则什么也不做
          if (!ret) {
            return;
          }
          // 构建请求参数
          var req = {
            address_id: $form.find('select[name=address_id]').val(),
            amount: $form.find('input[name=amount]').val(),
            sku_id: $('label.active input[name=skus]').val()
          };
          // 调用众筹商品下单接口
          axios.post('<?php echo e(route('crowdfunding_orders.store'), false); ?>', req)
            .then(function (response) {
              // 订单创建成功，跳转到订单详情页
              swal('订单提交成功', '', 'success')
                .then(() => {
                  location.href = '/orders/' + response.data.id;
                });
            }, function (error) {
              // 输入参数校验失败，展示失败原因
              if (error.response.status === 422) {
                var html = '<div>';
                _.each(error.response.data.errors, function (errors) {
                  _.each(errors, function (error) {
                    html += error+'<br>';
                  })
                });
                html += '</div>';
                swal({content: $(html)[0], icon: 'error'})
              } else if (error.response.status === 403) {
                swal(error.response.data.msg, '', 'error');
              } else {
                swal('系统错误', '', 'error');
              }
            });
        });
      });
      // 如果是秒杀商品并且尚未开始秒杀
      <?php if($product->type == \App\Models\Product::TYPE_SECKILL && $product->seckill->is_before_start): ?>
      // 将秒杀开始时间转成一个 moment 对象
      var startTime = moment.unix(<?php echo e($product->seckill->start_at->getTimestamp(), false); ?>);
      // 设定一个定时器
      var hdl = setInterval(function () {
        // 获取当前时间
        var now = moment();
        // 如果当前时间晚于秒杀开始时间
        if (now.isAfter(startTime)) {
          // 将秒杀按钮上的 disabled 类移除，修改按钮文字
          $('.btn-seckill').removeClass('disabled').removeClass('countdown').text('立即抢购');
          // 清除定时器
          clearInterval(hdl);
          return;
        }

        // 获取当前时间与秒杀开始时间相差的小时、分钟、秒数
        var hourDiff = startTime.diff(now, 'hours');
        var minDiff = startTime.diff(now, 'minutes') % 60;
        var secDiff = startTime.diff(now, 'seconds') % 60;
        // 修改按钮的文字
        $('.btn-seckill').text('抢购倒计时 '+hourDiff+':'+minDiff+':'+secDiff);
      }, 500);
      <?php endif; ?>

      // 秒杀按钮点击事件
      $('.btn-seckill').click(function () {
        // 如果秒杀按钮上有 disabled 类，则不做任何操作
        if($(this).hasClass('disabled')) {
          return;
        }
        if (!$('label.active input[name=skus]').val()) {
          swal('请先选择商品');
          return;
        }
        // 把用户的收货地址以 JSON 的形式放入页面，赋值给 addresses 变量
        var addresses = <?php echo json_encode(Auth::check() ? Auth::user()->addresses : []); ?>;
        // 使用 jQuery 动态创建一个下拉框
        var addressSelector = $('<select class="form-control"></select>');
        // 循环每个收货地址
        addresses.forEach(function (address) {
          // 把当前收货地址添加到收货地址下拉框选项中
          addressSelector.append("<option value='" + address.id + "'>" + address.full_address + ' ' + address.contact_name + ' ' + address.contact_phone + '</option>');
        });
        // 调用 SweetAlert 弹框
        swal({
          text: '选择收货地址',
          content: addressSelector[0],
          buttons: ['取消', '确定']
        }).then(function (ret) {
          // 如果用户没有点确定按钮，则什么也不做
          if (!ret) {
            return;
          }
          // 从地址列表中找出当前用户选择的地址对象
          var address = _.find(addresses, {id: parseInt(addressSelector.val())});
          var req = {
            // 将地址对象中的字段放入 address 参数
            address: _.pick(address, ['province','city','district','address','zip','contact_name','contact_phone']),
            sku_id: $('label.active input[name=skus]').val()
          };
          // 调用秒杀商品下单接口
          axios.post('<?php echo e(route('seckill_orders.store'), false); ?>', req)
            .then(function (response) {
              swal('订单提交成功', '', 'success')
                .then(() => {
                  location.href = '/orders/' + response.data.id;
                });
            }, function (error) {
              // 输入参数校验失败，展示失败原因
              if (error.response.status === 422) {
                var html = '<div>';
                _.each(error.response.data.errors, function (errors) {
                  _.each(errors, function (error) {
                    html += error+'<br>';
                  })
                });
                html += '</div>';
                swal({content: $(html)[0], icon: 'error'})
              } else if (error.response.status === 403) {
                swal(error.response.data.msg, '', 'error');
              } else {
                swal('系统错误', '', 'error');
              }
            });
        });
      });

    });
  </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH E:\workspace\markdown\resources\views/products/show.blade.php ENDPATH**/ ?>