@php use App\Enums\ShippingFee;use App\Enums\ShippingTemperatureForEcPay;use App\Enums\ShippingTemperatureForSystem;use App\Libraries\Directive;use App\Libraries\Icon;use App\Models\Admin; @endphp
@extends('cms.layouts.frame')

@section('scripts')
    @include('cms.components.tinymce-script')
    @viteIfExist(['resources/js/cms/product/create.js'])
@endsection

@section('styles')
    @include('cms.components.tinymce-style')
@endsection

@section('content')
    <main>
        <input type="hidden" class="js-operate" value="{{ $operate }}">
        <input type="hidden" name="redirect" value="{{ $redirect }}">
        {{--  用來測試點擊後輸入文字到編輯器      --}}
        <button class="clickMe" hidden>clickMe</button>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="{{ $redirect ?? route("cms.product.index") }}">產品列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $activeNav(null) }}" href="{{ $gotoInsert }}">
                        @if($operate === "create")
                            新增
                        @elseif($operate === "edit")
                            編輯
                        @endif
                    </a>
                </li>

                @if($operate === "edit")
                    <li class="nav-item">
                        <a class="nav-link {{ $activeNav("gallery") }}" href="{{ $gotoGallery }}">相簿</a>
                    </li>
                @endif
            </div>
        </nav>
        <div class="tab-content pt-3" id="nav-tabContent">
            <div class="tab-pane {{ $activeNav(null) }}" id="nav-create" role="tabpanel"
                 aria-labelledby="nav-edit-tab" tabindex="0">
                <form enctype="multipart/form-data"

                      @if($operate === "create")
                          action="{{ route("cms.product.store") }}"
                      @elseif($operate === "edit")
                          action="{{ route("cms.product.update") }}"
                      @endif

                      class="{{ $formName }}"
                      method="post">
                    @csrf

                    @if($operate === "edit")
                        @method('put')
                    @endif

                    <input type="hidden" name="id" class="productId" value="{{ $id }}">

                    <div class="mb-3">
                        <label for="inputTitle" class="form-label fw-bolder">*產品名稱</label>
                        <input type="text" class="form-control" id="inputTitle" name="title" value="{{ $title }}"
                               required>
                    </div>

                    <div class="mb-3">
                        <label for="inputTags" class="form-label fw-bolder">標籤</label>
                        <textarea id="inputTags" name="tags" class="form-control" rows="3">{{ $tags }}</textarea>
                        <div id="tagsHelp" class="form-text">
                            一行代表一個標籤
                        </div>
                    </div>

                    <div class="mb-3" hidden>
                        <label class="form-label fw-bolder">*商品類型</label>
                        <select class="form-select" aria-label="Default select" name="type">
                            <option value="product" {{ $selectStatus("product") }}>商品</option>
                            <option value="freebie" {{ $selectStatus("freebie") }}>贈品</option>
                        </select>
                    </div>

                    <div class="border border-light rounded-2 p-4 mb-3">
                        <div class="mb-3">
                            <label class="form-label fw-bolder">*指定分類</label>
                            <input type="hidden" class="product-categories" value="{{ $ancestors }}">
                            <input type="hidden" class="category-tree" value="{{ $productCategories }}">

                            <div class="col-12">
                                <div class="row renderCategories g-3">
                                    {{-- 動態渲染: resources/js/cms/product/ChoiceCategory.js --}}
                                </div>

                                <div class="row g-3 mt-1">
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-secondary btn-sm js-add-category">
                                            {!! Icon::plus(false) !!}
                                            分類
                                        </button>
                                    </div>
                                </div>

                                <template class="choice-category-select">
                                    <div class="col-auto choice-categories-wrap">
                                        <select name="categories[][]" class="mt-2 form-select choice-categories"
                                                required>
                                            <option value="">請選擇</option>
                                        </select>
                                    </div>
                                </template>
                                <template class="delete-category">
                                    <div class="col-auto choice-categories-wrap js-delete-current-category">
                                        <button type="button" class="mt-2 btn">
                                            {!! Icon::delete() !!}
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="border border-light rounded-2 p-4 mb-3">
                        <div class="mb-3">
                            <label class="form-label fw-bolder">*物流溫層</label>
                            <div class="col-auto">
                                <select class="form-select " aria-label="Default select" name="temperature" required>
                                    <option value="{{ ShippingTemperatureForSystem::Normal->value }}"
                                        @selected(($product->temperature ?? null) === "normal")>
                                        {{ ShippingTemperatureForEcPay::Normal->toHuman() }}
                                    </option>
                                    <option value="{{ ShippingTemperatureForSystem::Refrigerated->value }}"
                                        @selected(($product->temperature ?? null) === "refrigerated")>
                                        {{ ShippingTemperatureForEcPay::Refrigeration->toHuman() }}
                                    </option>
                                    <option value="{{ ShippingTemperatureForSystem::Frozen->value }}"
                                        @selected(($product->temperature ?? null) === "frozen")>
                                        {{ ShippingTemperatureForEcPay::Freezing->toHuman() }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bolder">*指定運費</label>
                            <div class="row">
                                {{--                            @dump($product->toarray())--}}

                                <div class="col-3 js-shipping-fees">
                                    <input class="form-check-input js-shipping-fee-checkbox" type="checkbox"
                                           value="true"
                                           id="storePickupCheck"
                                           @checked($storePickupInShippingFees?->amount !== null)
                                           name="chooseSpecifyShippingFee[{{ ShippingFee::StorePickup->value }}]">
                                    <label class="form-check-label" for="storePickupCheck">
                                        超商取貨
                                    </label>
                                    <input type="number" class="form-control js-amount"
                                           name="specifyShippingFee[{{ ShippingFee::StorePickup->value }}]"
                                           value="{{ $storePickupInShippingFees?->amount }}"
                                           placeholder="請輸入金額">
                                </div>

                                <div class="col-3 js-shipping-fees">
                                    <input class="form-check-input js-shipping-fee-checkbox" type="checkbox"
                                           value="true"
                                           id="homeDeliveryCheck"
                                           @checked($homeDeliveryInShippingFees?->amount !== null)
                                           name="chooseSpecifyShippingFee[{{ ShippingFee::HomeDelivery->value }}]">
                                    <label class="form-check-label" for="homeDeliveryCheck">
                                        宅配
                                    </label>
                                    <input type="number" class="form-control js-amount"
                                           name="specifyShippingFee[{{ ShippingFee::HomeDelivery->value }}]"
                                           value="{{ $homeDeliveryInShippingFees?->amount }}"
                                           placeholder="請輸入金額">
                                </div>

                                <div class="col-3 js-shipping-fees" {{ Directive::hidden() }}>
                                    <input class="form-check-input js-shipping-fee-checkbox" type="checkbox"
                                           value="true"
                                           id="{{ ShippingFee::CashOnDelivery->value }}"
                                           @checked($cashOnDeliveryInShippingFees?->amount !== null)
                                           name="chooseSpecifyShippingFee[{{ ShippingFee::CashOnDelivery->value }}]">
                                    <label class="form-check-label"
                                           for="{{ ShippingFee::CashOnDelivery->value }}">
                                        貨到付款
                                    </label>
                                    <input type="number" class="form-control js-amount"
                                           name="specifyShippingFee[{{ ShippingFee::CashOnDelivery->value }}]"
                                           value="{{ $cashOnDeliveryInShippingFees?->amount }}"
                                           placeholder="請輸入金額">
                                </div>

                            </div>
                            <ul class="form-text">
                                <li>若填寫，將會覆蓋系統設定的運費</li>
                                <li>免運請指定金額：0</li>
                            </ul>
                        </div>
                    </div>


                    {{--加購--}}
                    <livewire:c-m-s.product.product-add-on :productsAddOn="$productsAddOn"
                                                           :product="$product"
                                                           :productVariants="$productVariants"
                                                           :tableData="$tableData"/>


                    {{-- 規格動態產生列表 --}}
                    <div class="js-product-variant-render">

                        {{-- 動態渲染：resources/js/cms/product/Variant.js --}}
                        @foreach($productVariants as $index => $productVariant)
                            @php
                                // dump($productVariant->id);
                            @endphp
                            @include('cms.product.product-variant-card', [
                                'index' => $index ?? 0,
                                'variantIds' => $productVariant->id,
                                'variantTitles' => $productVariant->title,
                                'attributes' => $productVariant->attributes,
                            ])
                        @endforeach
                    </div>

                    <template class="js-product-variant-card">
                        @include('cms.product.product-variant-card', [
                            'index' => $index ?? 0,
                            'variantIds' => null,
                            'variantTitles' => null,
                            'attributes' => []
                        ])
                    </template>

                    <div class="mt-3"></div>
                    <button
                        {{ Directive::hidden() }}
                        class="btn btn-secondary btn-sm js-add-variant" type="button">
                        <i
                            class="fa-solid fa-plus"></i>
                        規格
                    </button>
                    <div class="mt-3"></div>

                    <div class="border border-light rounded-2 p-4 mb-3">
                        <div class="mb-3">
                            <label for="inputDescription" class="form-label fw-bolder">商品特色</label>
                            <textarea name="summary" type="text" class="form-control"
                                      maxlength="200">{{ $summary }}</textarea>
                            <div hidden id="summaryHelp" class="form-text">簡單易懂有助於 SEO，可參考：
                                <a href="https://developers.google.com/search/docs/appearance/snippet?hl=zh-tw#use-quality-descriptions"
                                   target="_blank">點我另開分頁看 Google 說明
                                </a>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="inputDescription" class="form-label fw-bolder">*商品詳細描述</label>
                            <textarea class="form-control" id="inputDescription"
                                      name="description">{{ $description ?? "" }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="inputAttentionNote" class="form-label fw-bolder">購物與退換貨須知</label>
                            <textarea class="form-control" id="inputAttentionNote"
                                      name="attentionNote">{{ $attentionNote }}</textarea>
                        </div>
                    </div>


                    <div class="mb-3">
                        <label for="inputStatus" class="form-label fw-bolder">*發佈狀態</label>
                        <select id="inputStatus" class="form-select" aria-label="Default select" name="status" required>
                            <option value="active" @selected(($product->status ?? null) === "active")>啟用</option>
                            <option value="inactive" @selected(($product->status ?? null) === "inactive")>禁用</option>
                            <option value="template" {{ $selectStatus("template") }}>模板</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="inputStartAt" class="form-label fw-bolder">*開始販售時間</label>
                        <input type="datetime-local" class="form-control" id="inputStartAt" name="startAt"
                               value="{{ $startAt }}"
                               required
                        >

                    </div>
                    <div class="mb-3">
                        <label for="inputStartEnd" class="form-label fw-bolder">*結束販售時間</label>
                        <input type="datetime-local" class="form-control" id="inputStartEnd" name="endAt"
                               value="{{ $endAt }}"
                               required
                        >
                    </div>

                    <div class="row mt-3">
                        <div class="col-auto">
                            @if($operate === "create")
                                <input type="hidden" class="goUploadImages" name="goUploadImages" value="0">

                                <button type="submit" class="btn btn-primary ajax-trigger js-send-submit-product"
                                        onclick="$('.goUploadImages').val(0)">新增後，回到列表
                                </button>
                                <button type="submit" class="btn btn-secondary ajax-trigger js-send-submit-product"
                                        onclick="$('.goUploadImages').val(1)">
                                    新增後，上傳圖片
                                </button>
                            @elseif($operate === "edit")
                                <button type="submit" class="btn btn-primary ajax-trigger js-send-submit-product">儲存
                                </button>
                                <button type="button" class="btn btn-secondary"
                                        onclick="location.href='{{ $linkCancelUrlWhenEdit }}'">取消
                                </button>
                            @endif

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

            @if($operate === "edit")
                <div class="tab-pane {{ $activeNav("gallery") }}" id="nav-album" role="tabpanel"
                     aria-labelledby="nav-album-tab" tabindex="1">

                    <div class="mb-3">
                        <form class="upload-images" method="post" action="{{ route("cms.product.imageStore") }}">
                            @csrf
                            <input type="hidden" name="id" value="{{ $id }}">
                            <label for="inputImages" class="form-label fw-bolder">選擇要上傳的圖片</label>
                            <input type="file" class="form-control images" id="inputImages" name="images[]" multiple>
                            <div id="emailHelp" class="form-text">*為了 SEO 圖檔將會自動轉換為 webp</div>
                        </form>
                        {{-- 進度條 --}}
                        <div class="progress fade" role="progressbar" aria-label="Basic example" aria-valuenow="0"
                             aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 0%"></div>
                        </div>
                    </div>

                    <button class="btn btn-secondary" onclick="location.href='{{ $goBackList }}'">返回列表</button>

                    @if(count($images) === 0)
                        <div class="alert alert-warning mt-3" role="alert">
                            目前沒有圖片
                        </div>
                    @else
                        <table class="table min-w-1280  mt-2">
                            <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">說明</th>
                                <th scope="col">操作</th>
                            </tr>
                            </thead>
                            <tbody class="sortable"
                                   data-product-id="{{ $id }}"
                                   data-update-url="{{ route("cms.product.gallerySortUpdate", [$id]) }}"
                                   data-csrf="{{ csrf_token() }}">

                            @foreach($images as $image)
                                <tr class="image-item" data-image="{{ $image }}">
                                    <td>
                                        <div style="
                                            width: 150px;
                                            height: 150px;
                                            background-color: #dedede;
                                            background-position: center;
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            border-radius: 0.3em;
                                            background-image: url('{{ $imageDisplay($image) }}');
                                            "></div>
                                    </td>
                                    <td>
                                        {{ $image['title'] }}
                                    </td>
                                    <td>
                                        <a class="btn btn-primary btn-sm"
                                           href="{{ $linkImageEdit($image['id']) }}"
                                           role="button">
                                            {!! Icon::edit() !!}
                                        </a>
                                        <form method="post" action="{{ route("cms.product.imageDestroy") }}"
                                              style="display: inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="id" value="{{ $image['id'] }}">
                                            <button type="submit" class="btn btn-secondary btn-sm js-confirm-delete">
                                                {!! Icon::delete() !!}
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach

                            </tbody>
                        </table>
                        <button class="btn btn-secondary" onclick="location.href='{{ $goBackList }}'">返回列表</button>
                    @endif
                </div>
            @endif
        </div>
    </main>
@endsection