@php
    use App\Enums\ShippingTemperatureForSystem;use App\Libraries\Icon;
    use App\Libraries\Text;
    use App\Models\Admin;use App\Models\Product;
    use App\Models\ProductCategory;
@endphp

@extends('cms.layouts.frame')

@section('scripts')
    @viteIfExist(['resources/js/cms/product/index.js'])
@endsection

@section('content')
    <main>
        <input type="hidden" class="productId" value="{{ $request->productId ?? "" }}">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link {{ $activeNavLink("index") }}" id="nav-index-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-index" type="button" role="tab" aria-controls="nav-index"
                        aria-selected="true"> 產品列表
                </button>

                @can("productCategoryViewAny", ProductCategory::class)
                    <li class="nav-item">
                        <a class="nav-link"
                           href="{{ route("cms.productCategory.index", ["redirect" => url()->full()]) }}">分類</a>
                    </li>
                @endcan
            </div>
        </nav>
        <div class="tab-content pt-2" id="nav-tabContent">

            {{-- 列表 --}}
            <div class="tab-pane fade {{ $activeTabPane("index") }}" id="nav-index" role="tabpanel"
                 aria-labelledby="nav-index-tab" tabindex="0">

                <form method="get" action="{{ route("cms.product.index") }}">
                    <div class="row">
                        <div class="col-auto mt-1">
                            <input name="keyword" class="form-control" type="search" placeholder="搜尋產品名稱"
                                   value="{{ $keyword }}">
                        </div>
                        <div class="col-auto mt-1 g-2">
                            <button class="form-control btn btn-primary" type="submit">搜尋</button>
                        </div>
                        @can("productCreate", Product::class)
                            <div class="col-auto mt-1 mb-1 g-2">
                                <a class="btn btn-primary"
                                   role="button"
                                   href="{{ route("cms.product.create", ["redirect" => url()->full()]) }}">新增
                                </a>
                            </div>
                        @endcan
                        <div class="col-auto mt-1 mb-1 g-2">

                            <button class="btn btn-secondary    "
                                    data-bs-toggle="collapse"
                                    data-bs-target=".collapse"
                                    aria-expanded="false"
                                    type="button"
                            >
                                展開
                            </button>
                        </div>
                    </div>
                </form>


                {{-- 多分類選單，傳入篩選的分類編號 --}}
                <livewire:c-m-s.product.product-category-selector
                    filterProductCategoryIdsJson="{!! $filterProductCategoryIdsJson !!}"/>

                <form class="products" method="post"
                      data-csrf-token="{{ csrf_token() }}"
                      data-action-destroy-special-promotion="{{ route("cms.product.specialPromotionDestroy") }}"
                      data-action-store-special-promotion="{{ route("cms.product.specialPromotionStore") }}">


                    <div class="row px-2">


                        @can("isSuperAdmin", Admin::class)
                            @can("productUpdate", Product::class)
                                <div class="col-auto mt-1 mb-1 g-2">
                                    <button class="btn btn-secondary addToSpecialPromotion">
                                        加入優惠活動
                                    </button>
                                </div>
                                <div class="col-auto mt-1 mb-1 g-2">
                                    <button class="btn btn-secondary deleteFromSpecialPromotion">
                                        移除優惠活動
                                    </button>
                                </div>
                            @endcan
                        @endcan
                    </div>

                    <div
                        data-update-url="{{ route("cms.product.sortUpdate") }}"
                        data-csrf="{{ csrf_token() }}"
                        class="mt-5 product-cards">

                        @foreach($products as $product)
                            <div id="card-{{ $product->id }}" class="card mb-4" data-product-id="{{ $product->id }}">
                                <div class="card-header">

                                    <div class="form-group row">
                                        <label class="col-auto col-form-label">
                                            <div>
                                                <input id="product-{{ $product->id }}" class="form-check-input"
                                                       type="checkbox" name="productIds[]" value="{{ $product->id }}">
                                                <label class="text-secondary" for="product-{{ $product->id }}">
                                                    #{{ $product->id }}
                                                </label>

                                                <span
                                                    class="collapse-id-{{ $product->id }}"
                                                    class="fw-bold"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#productContent{{ $product->id }}"
                                                    aria-expanded="false"
                                                    style="cursor:pointer;">
                                                    {{ $product->title }}
                                                </span>

                                                {{-- 這裡的判斷應該要包含上架時間 狀態 --}}
                                                @if($product->status === "active")
                                                    <span class="badge bg-success">上架</span>
                                                @elseif($product->status === "inactive")
                                                    <span class="badge bg-danger">下架</span>
                                                @elseif($product->status === "template")
                                                    <span class="badge bg-secondary">模板</span>
                                                @endif

                                                @if ($isNowBetweenStartAndEnd($product))
                                                    <span class="badge bg-success"
                                                          data-bs-toggle="tooltip"
                                                          data-bs-placement="top"
                                                          data-bs-title="{{ $product->start_at }} 至 {{ $product->end_at }}">
                                                        銷售期間
                                                    </span>
                                                @elseif($isSaleExpired($product))
                                                    <span class="badge bg-danger"
                                                          data-bs-toggle="tooltip"
                                                          data-bs-placement="top"
                                                          data-bs-title="{{ $product->start_at }} 至 {{ $product->end_at }}"
                                                    >
                                                        銷售截止
                                                    </span>
                                                @elseif($isSaleNotStart($product))
                                                    <span class="badge bg-warning"
                                                          data-bs-toggle="tooltip"
                                                          data-bs-placement="top"
                                                          data-bs-title="{{ $product->start_at }} 至 {{ $product->end_at }}"
                                                    >
                                                        銷售未開始
                                                    </span>
                                                @endif

                                                @if($product->type === "product")
                                                    <span class="badge bg-success">商品</span>
                                                @elseif($product->type === "freebie")
                                                    <span class="badge bg-secondary">贈品</span>
                                                @elseif($product->type === "addOn")
                                                    <span class="badge bg-info">加購</span>
                                                @endif

                                                @if($product->temperature === ShippingTemperatureForSystem::Normal->value)
                                                    <span class="badge bg-info">常溫</span>
                                                @elseif($product->temperature === ShippingTemperatureForSystem::Refrigerated->value)
                                                    <span class="badge bg-warning">冷藏</span>
                                                @elseif($product->temperature === ShippingTemperatureForSystem::Frozen->value)
                                                    <span class="badge bg-danger">冷凍</span>
                                                @endif

                                                <a
                                                    @if($product->extOrderTotalCount > 0)
                                                        href="{{ route("cms.order.index", ['productId' => $product->id]) }}"
                                                    @endif
                                                >
                                                    共 {{ $product->extOrderTotalCount }} 張單
                                                </a>
                                                /

                                                完成交易 {{ $product->extOrderDetailPaidCount ?? 0 }} 單位
                                                @php
                                                    // dump($product->toArray());
                                                @endphp
                                            </div>

                                        </label>
                                        <div class="col-auto ms-auto">
                                            @can("productUpdate", Product::class)

                                                @if($isShowSortButton)
                                                    <span class="btn btn-primary js-sort-handle" style="cursor: move">
                                                        {!! Icon::sort() !!}
                                                    </span>
                                                @endif

                                                <a href="{{ route("cms.product.edit", [$product->id, 'redirect' => route("cms.product.index", ['productId' => $product->id, "#card-{$product->id}"])]) }}"
                                                   class="btn btn-primary"
                                                   role="button">
                                                    {!! Icon::edit() !!}
                                                </a>
                                            @endcan

                                            <a
                                                href="{{ route("cms.product.cloneStore", ["product" => $product, "redirect" => url()->full()]) }}"
                                                class="btn btn-primary" role="button">
                                                {!! Icon::clone() !!}
                                            </a>

                                            @can("productDelete", Product::class)
                                                {{-- 因為表單不能嵌套，外面有一層了，因此這裡的刪除使用 get --}}
                                                {{-- <input type="hidden" name="id" value="{{ $product->id }}"> --}}
                                                <a
                                                    href="{{ route("cms.product.destroy", [$product]) }}"
                                                    class="btn btn-secondary js-confirm-delete">
                                                    {!! Icon::delete() !!}
                                                </a>
                                            @endcan
                                        </div>
                                    </div>

                                </div>
                                <div class="card-body collapse"
                                     id="productContent{{ $product->id }}"
                                >
                                    <div class="row col-12  g-4">
                                        <div class="col-12">
                                            {{ Text::summary($product->summary ?? "") }}
                                        </div>
                                        <div class="col-12">
                                            發佈時間：{{ $product->published_at }}
                                        </div>
                                    </div>

                                    <table class="table min-w-1280  table-bordered">
                                        <tbody>
                                        @foreach($variants($product) as $variant)
                                            <tr>
                                                <td class="col-1 text-light" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" data-bs-title="規格名稱">
                                                    {{ $variantTitle($variant) }}
                                                </td>
                                                <td class="col-auto">
                                                    <table class="table min-w-1280  table-bordered">
                                                        <tbody>
                                                        <tr>
                                                            <td class="text-light"></td>
                                                            <td class="text-light"></td>
                                                            <td class="text-light">售價</td>

                                                            @can("isSuperAdmin", Admin::class)
                                                                <td class="text-light">定價</td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="使用者能加入的購物車數量">
                                                                    剩餘可購量
                                                                </td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="統計多少張單包含該項目">
                                                                    訂單量
                                                                </td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="所有訂單含多少筆該項目">
                                                                    訂購量
                                                                </td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="已完成付款量">
                                                                    交易量
                                                                </td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="已下單但未完成付款">
                                                                    未結量
                                                                </td>
                                                                <td class="text-light" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top"
                                                                    data-bs-title="累計上限的總庫存">
                                                                    庫存上限
                                                                </td>
                                                            @endcan
                                                        </tr>
                                                        @foreach($variant->attributes as $attribute)
                                                            {{--                                                            @dump($attribute->toArray())--}}
                                                            <tr>
                                                                <td class="col-1 text-center">
                                                                    <div style="
                                                                    display: inline-block;
                                                                    background-image: url({{ $attributeImage($attribute) }});
                                                                    width:20px;
                                                                    height: 20px;
                                                                    background-color: #dedede;
                                                                    background-position: center;
                                                                    background-size: contain;
                                                                    background-repeat: no-repeat;
                                                                    border-radius: 0.3em;
                                                                    "></div>
                                                                </td>
                                                                <td class="" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top" data-bs-title="項目名稱">

                                                                    <span class="text-secondary">
                                                                        #{{ $attributeId($attribute) }}
                                                                    </span>

                                                                    @empty(!$attribute->number)
                                                                        <label class="text-secondary">
                                                                            ({{ $attribute->number }})
                                                                        </label>
                                                                    @endempty

                                                                    <span>
                                                                        {{ $attributeTitle($attribute) }}
                                                                    </span>

                                                                    @if($attribute->status == "active")
                                                                        <span
                                                                            class="badge rounded-pill text-bg-success">
                                                                            上架中
                                                                        </span>
                                                                    @elseif($attribute->status == "inactive")
                                                                        <span class="badge rounded-pill text-bg-danger">
                                                                            已下架
                                                                        </span>
                                                                    @elseif($attribute->status == "template")
                                                                        <span
                                                                            class="badge rounded-pill text-bg-secondary">
                                                                            模板
                                                                        </span>
                                                                    @endif
                                                                </td>
                                                                <td class="col-1 text-primary" data-bs-toggle="tooltip"
                                                                    data-bs-placement="top" data-bs-title="售價">
                                                                    <span>
                                                                        {!! $attributeSalePrice($attribute) !!}
                                                                    </span>
                                                                </td>
                                                                @can("isSuperAdmin", Admin::class)
                                                                    <td class="col-1 text-secondary"
                                                                        data-bs-toggle="tooltip"
                                                                        data-bs-placement="top" data-bs-title="定價">
                                                                        <del>
                                                                            {!! $attributePrice($attribute) !!}
                                                                        </del>
                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top"
                                                                        data-bs-title="剩餘可購量 = 庫存上限 - 訂購量">
                                                                    <span
                                                                        class="fw-bolder {{ $colorStock($attribute) }}">
                                                                        {{ $availableQuantity($attribute) }}
                                                                    </span>
                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top" data-bs-title="訂單量">
                                                                        {{ $attribute->extOrderTotalCount }}
                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top" data-bs-title="訂購量">
                                                                        {{ $attributeOrderCount($attribute) }}

                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top" data-bs-title="交易量">
                                                                        {{ $attributePaidCount($attribute) }}
                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top"
                                                                        data-bs-title="未結量 = 訂購量 - 交易量">
                                                                        {{ $unpaidStockQuantity($attribute) }}
                                                                    </td>
                                                                    <td class="col-1" data-bs-toggle="tooltip"
                                                                        data-bs-placement="top"
                                                                        data-bs-title="庫存上限">
                                                                        {{ $attributeStockQuantity($attribute) }}
                                                                    </td>
                                                                @endcan
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        @endforeach
                    </div>

                    <hr>
                    <div class="row mt-2 mb-2">
                        {{ $products->withQueryString()->links() }}
                    </div>
                </form>

            </div>

        </div>
    </main>
@endsection