@extends('layout')

@section('pageTitle', $productName."｜".config('globals.app_name'))
{{-- @endsection --}}

{{-- @section('breadcrumb')
@php
    $breadcrumb = [
        ['name' => __("menu.LOC_BONUS_SETTINGS")],
        ['name' => __('menu.LOC_BONUSES')],
        ['name' => __('other.LOC_EDIT')],
    ];
    $moduleName = __('menu.LOC_BONUSES');
    $backBtn = "/bonus/bonus/";

@endphp
@endsection --}}

@section('content')
<link rel="stylesheet" href="{{ asset('css/product.css?'.rand(10000,99999)) }}">
<section class="container">
    <div class="row mb-5">
        <div class="col-12">
            <nav style="padding: 20px 0;">
                <ol class="bread-ol">
                  <li class="bread-li"><a href="/">首頁</a></li>
                  <li class="bread-li"><a href="/products">嚴選商品</a></li>
                  <li class="bread-li active">{{ $productName }}</li>
                </ol>
            </nav>
        </div>
        <div class="col-md-5 col-12">
            <div class="imgbox">
                <div class="firstImg">
                    <img src="{{ $ProductImg[0]->pImgSrc }}" class=" " alt="">
                </div>
                <div class="otherbox">
                    <div class="prebtn">
                        <i class="fas fa-chevron-left"></i>
                    </div>
                    <div class="otherImg scroll-container">
                        @foreach ($ProductImg as $item => $row)
                            @if ($loop->first)
                                <img src="{{ $row->pImgSrc }}" class="productImg active" alt="">
                            @else
                                <img src="{{ $row->pImgSrc }}" class="productImg" alt="">
                            @endif
                        @endforeach
                    </div>
                    <div class="nextbtn">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            {{-- @foreach ($ProductImg as $item)
            <img src="{{ $item['pImgSrc'] }}" class="productImg" alt="">
            @endforeach --}}
        </div>
        <div class="col-md-7 col-12 d-flex">
            <div class="mx-auto " style="width: 440px;" >
                <h3 class="product-h3">{{ $productName }}</h3>
                <div class="product-p my-3">
                    <h4>NT$： <span class="price">
                        @php
                            $firstItem = reset($AmountArray);
                            $firstAmount = $firstItem['Amount'];
                            echo $firstAmount;
                        @endphp
                        {{-- {{ array_values($AmountArray)[0] }} --}}
                    </span></h4>
                </div>
                <div class="product-p">
                    <p>
                        {{-- 「皮滷」的雞翅滷味選用上等新鮮雞翅，經過多道嚴謹工序與獨家滷汁精心熬製。<br><br>
                        每一隻雞翅都在滷鍋中吸收滿滿的香料與醬汁，滷至入味又不失肉質的嫩滑。<br><br>
                        獨特的滷香隨著每一口撲鼻而來，讓人食慾大增。<br><br>
                        雞翅本身的豐富膠質與滷汁的完美結合，不僅增加了口感的層次感，還帶來更深的風味。<br><br>
                        這款雞翅滷味特別適合搭配啤酒或當作聚會小食，無論是品味下酒還是分享美食，都能讓每一位饕客回味無窮。<br><br> --}}
                        {!! $Product->describe !!}
                    </p>
                </div>
                <div class="product-p my-3">
                    @foreach ($AmountArray as $key => $val)
                        @if ($loop->first)
                            <button class="btn btn-color price-btn active" data-max="{{ $val['Inventory'] }}" data-price="{{ $val['Amount'] }}">{{ $key }}</button>
                        @else
                            <button class="btn btn-color price-btn ml-2" data-max="{{ $val['Inventory'] }}" data-price="{{ $val['Amount'] }}">{{ $key }}</button>
                        @endif

                    @endforeach
                </div>
                <div class="product-p my-3">
                    <button class="fas-btn minus" ><i class="fas fa-minus"></i></button>
                    <input type="text" name="count" value="1" class="quantity" onkeyup = "value=value.replace(/[^\d]/g,'')">
                    <button class="fas-btn plus"><i class="fas fa-plus"></i></button>
                    <span class="ml-2" style="letter-spacing: 1px">商品數量:<span class="inventory"></span></span>
                </div>
                <div class="product-p my-3">
                    <button class="btn-lg btn-set btn-block input-car mr-2" >加入購物車</button>
                    <button class="btn-lg btn-set btn-block no-car mr-2" style="display:none;    background: rgb(227 206 167);cursor: no-drop;" disabled >補貨中</button>
                    {{-- <button class="btn goto-pay ">立即購買</button> --}}
                </div>
            </div>
        </div>
        <style>
            .message-box-bk{
                background: rgba(0,0,0,0.7);
                display: flex;
                align-items: center;
                justify-content: center;
                position: fixed;
                left: 0;
                top: 0;
                width: 100vw;
                height: 100vh;
                z-index: 99999;
                display: none;
            }
            .message-box{
                background: rgb(222,222,222);
                min-height: 40px;
                min-width: 200px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 12px;
            }
        </style>
        {{-- <div class="col-12 my-3">
            <img src="/images/product/長圖範例.jpg" alt="">
        </div> --}}
    </div>
    <div class="message-box-bk">
        <div class="message-box">
            <h4 class="m-0">成功加入購物車</h4>
        </div>
    </div>
    <script src="{{ asset('js/product.js?'.rand(10000,99999)) }}"></script>
    @csrf
    <script>
        $(document).ready(function(){

            $('.input-car').data('productid',"{{ $ProductId }}");

            $('.input-car').click(function(){

                let product_id = $(this).data('productid');
                let product_quantity = $('.quantity').val();
                let product_bagActive = $('.price-btn.active').text().trim();
                let Mode = {
                    productId:product_id
                    ,quantity:product_quantity
                    ,bagActive:product_bagActive
                }
                show_message();
                $.post( "process/addcart",Mode,function( result ) {
                    // $( ".result" ).html( data );
                    console.log(result);
                    getCartCount();
                    setTimeout(() => {
                        hide_message();
                    }, 800);
                });
            });
            init();
            check_inventory();
        });

        function init(){
            var max_inventory = $('.price-btn.active').data('max');
            $('.inventory').text(max_inventory);
        }

        function show_message(){
            $('.message-box-bk').css('display','flex');
        }
        function hide_message(){
            $('.message-box-bk').hide();
        }

        function check_inventory(){
            var max_inventory = $('.price-btn.active').data('max');
            var now_quantity = $('.quantity').val();
            if(now_quantity > max_inventory){
                // $('.input-car').attr('disabled','disabled');
                $('.input-car').hide();
                $('.no-car').show();
            }
            else{
                // $('.input-car').removeAttr('disabled');
                $('.input-car').show();
                $('.no-car').hide();

            }
        }

    </script>
</section>
@endsection