@extends('layout')

@section('pageTitle', "商品列表｜".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')
    <style>
        .bannerFont{
            border-top: 1px solid rgb(222,222,222);
            border-bottom: 1px solid rgb(222,222,222);
            padding: 2rem;
        }

        .leftSideMenu{
            margin: 0;
            list-style: none;
        }
        .leftSideMenu li{
            width: 100%;
            background-color: white;
            padding: 12px;
            border-bottom: 1px solid rgb(222,222,222);
            font-size: 16px;
            color: var(--base-title);
            text-align: center;
            cursor: pointer;
        }
        .leftSideMenu li.active{
            /* background-color: rgb(222,222,222); */
            color: var(--base-big-title);
        }
        .leftSideMenu li:hover{
            /* background-color: rgb(222,222,222); */
            color: var(--base-big-title);
        }

        .product-no{
            background: #f34242;
            position: absolute;
            left: 40%;
            top: 40%;
            font-size: 18px;
            color: #f7f7f7;
            border-radius: 6px;
            padding: 4px 8px;
            font-weight: 900;
        }

    </style>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="color-all-title big-title p-3">｜嚴選商品｜</h1>
                <p class="bannerFont">
                    " 用心做好所有產品， "
                </p>
            </div>
            <div class="col-md-3 col-12">
                <ul class="leftSideMenu p-0">
                    <li class="active">全部商品</li>
                    @foreach ($ProductList as $item => $row)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>

            </div>
            <div class="col-md-9 col-12">
                @foreach ($ProductList as $item => $row)

                <div class="ProductDetail-description mb-0" id="productDescription">
                    <h1 class="color-all-title big-title p-4 font-big" style="font-weight: 900">{{ $item }}</h1>
                    <div class="d-flex"  style="flex-wrap: wrap;">
                    @foreach ($row as $key => $products)
                        @php
                            // dd($products);
                            $money_range = json_decode($products->AmountJson,true);
                            $total_inventory = 0;
                            $min = 0;
                            $max = 0;
                            foreach($money_range as $key1 => $bag_array){
                                $money = $bag_array['Amount'];
                                if($min == 0 || $min > $money){
                                    $min = $money;
                                }
                                if($max == 0 || $max < $money){
                                    $max = $money;
                                }
                                $total_inventory+= $bag_array['Inventory'];
                            }

                            if($min == $max){
                                $show = $min;
                            }
                            else{
                                $show = $min .' - '.$max;
                            }

                        @endphp
                        <div class="col-md-4 col-6 mb-3 more-img" >
                            <a href="product?send={{ $products->id }}" style="text-decoration: none;">
                                <div class="product-img" >
                                    <img src="@hasProductImg($products->pImgSrc)" alt="{{ $products->Name.'｜'.config('globals.app_name') }}" style="{{ ( $total_inventory == 0 )?'-webkit-filter: brightness(.6);':'' }}">
                                    @if ($total_inventory == 0)
                                        <div class="product-no">已售空</div>
                                    @endif
                                </div>
                                <div class="product-title">
                                    {{ $products->Name }}
                                </div>
                                <div class="product-price">
                                    NT$
                                    {{ $show }}
                                    {{-- {{ $products->Amount }} --}}
                                </div>
                            </a>
                        </div>
                    @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>


@endsection