@extends('admin.main')
@inject('fileInputPresenter', '\App\Presenters\FileInputPresenter')
@include('widgets.fileinput')
@include('widgets.color')
@include('widgets.select')
@include('widgets.number_input')
@include('widgets.tinymce')
@section('content')
    <section id="basic-input">
        <div class="row style-product-detail">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">商品資訊</h4>
                    </div>
                    <div class="card-body">
                        <form class="formValidation" method="post" action="{{ route('admin.product.show', [!$isCopy && $data ? $data->id : null]) }}"
                              data-is-update="{{ !empty($data) && !$isCopy }}"
                              data-redirect="{{ route('admin.product.show', [!$isCopy && $data ? $data->id : null]) }}">
                            <div class="row">
                                <div class="col-md-6">
                                    @if ($data && !$isCopy)
                                        <fieldset class="form-group">
                                            <label for="disabledInput">商品ID</label>
                                            <p class="form-control-static" id="staticInput">
                                                {{ $data->id }}
                                            </p>
                                        </fieldset>
                                    @endif
                                    <fieldset class="form-group">
                                        <label for="sku">貨號</label>
                                        <input type="text" id="sku" class="form-control" name="sku" value="{{ $data->sku ?? '' }}"
                                               remote="{{ route('admin.check.product.sku', $data->id ?? '') }}"
                                               required/>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="name">商品名稱</label>
                                        <input type="text" id="name" class="form-control" name="name" value="{{ $data->name ?? '' }}"
                                               maxlength="100" required/>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label>狀態</label>
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="status-enable" name="status" value="1" {{ !$data || $data->status ? 'checked' : '' }}>
                                                        <label for="status-enable">啟用</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="status-disable" name="status" value="0" {{ $data && !$data->status ? 'checked' : '' }}>
                                                        <label for="status-disable">停用</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="ad_slogan">廣告標語</label>
                                        <div class="form-inline">
                                            <input type="text" class="form-control minicolors" name="ad_slogan[color]" value="{{ $data->ad_slogan['color'] ?? 'rgba(1, 1, 1, 1)' }}"/>
                                            <input type="text" id="ad_slogan" class="form-control" name="ad_slogan[text]" value="{{ $data->ad_slogan['text'] ?? '' }}"
                                            placeholder="廣告標語文字" required/>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="main_cid">商品主分類</label>
                                        <select id="main_cid" class="form-control select2" name="main_cid" required>
                                            <option value="">請選擇主分類</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}" {{ $data && $data->category->parent_id == $category->id ? 'selected' : ''}}>{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="cid">商品子分類</label>
                                        <select id="cid" class="form-control select2" name="cid" placeholder="請先選擇主分類" required>
                                            @foreach($subcategories as $subcategory)
                                                <option value="{{ $subcategory->id }}" {{ $data && $data->category->id == $subcategory->id ? 'selected' : ''}}>{{ $subcategory->name }}</option>
                                            @endforeach
                                        </select>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="tags">TAG</label>
                                        <select id="tags" class="form-control select2" name="tags[]" placeholder="請選擇tag(可複選)" multiple required>
                                            @foreach($tags as $tag)
                                                <option value="{{ $tag->id }}" {{ $data && in_array($tag->id, $data->tags) ? 'selected' : '' }}>{{ $tag->name }}</option>
                                            @endforeach
                                        </select>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="temperature_layer">商品溫層</label>
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="temperature_layer1" name="temperature_layer" value="{{ \App\Enum\Order\TemperatureLayerEnum::NORMAL }}"
                                                                {{ ($data && $data->temperature_layer == \App\Enum\Order\TemperatureLayerEnum::NORMAL) || !$data ? 'checked' : '' }}>
                                                        <label for="temperature_layer1">常溫</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="temperature_layer2" name="temperature_layer" value="{{ \App\Enum\Order\TemperatureLayerEnum::REFRIGERATION }}"
                                                                {{ $data && $data->temperature_layer == \App\Enum\Order\TemperatureLayerEnum::REFRIGERATION ? 'checked' : '' }}>
                                                        <label for="temperature_layer2">冷藏</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="temperature_layer3" name="temperature_layer" value="{{ \App\Enum\Order\TemperatureLayerEnum::FREEZING }}"
                                                                {{ $data && $data->temperature_layer == \App\Enum\Order\TemperatureLayerEnum::FREEZING ? 'checked' : '' }}>
                                                        <label for="temperature_layer3">冷凍</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="buy_min">最小可購買量</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="buy_min" type="number" class="touchspin" name="buy_min" value="{{ $data->buy_min ?? 0 }}"
                                                       max="100000" required>
                                            </div>
                                        </div>
                                        <label for="buy_max">最大可購買量</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="buy_max" type="number" class="touchspin" name="buy_max" value="{{ $data->buy_max ?? 0 }}"
                                                       max="100000" required>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="market_price" class="col-2">商品市價</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="market_price" type="number" class="touchspin" name="market_price" value="{{ $data->market_price ?? 0 }}"
                                                       data-bts-prefix="$" max="100000000" >
                                            </div>
                                        </div>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="amount" class="col-2">商品售價</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="amount" type="number" class="touchspin" name="amount" value="{{ $data->amount ?? 0 }}"
                                                       data-bts-prefix="$" max="100000000" required>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <fieldset class="form-group">
                                        <label for="share_profit_percent" class="col-2">商品分潤比例</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="share_profit_percent" type="number" class="touchspin" name="share_profit_percent" value="{{ $data->share_profit_percent ?? 0 }}"
                                                       data-bts-postfix="%" max="100" data-decimals="2" data-step="0.01" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="bonus" class="col-2">紅利贈點</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="bonus" type="number" class="touchspin" name="bonus" value="{{ $data->bonus ?? 0 }}"
                                                       max="10000000000" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="stock" class="col-2">商品庫存</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="stock" type="number" class="touchspin" name="stock" value="{{ $data->stock ?? 0 }}"
                                                       max="10000000000" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="stock_cost" class="col-2">消耗庫存數</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="stock_cost" type="number" class="touchspin" name="stock_cost" value="{{ $data->stock_cost ?? 1 }}"
                                                       max="10000000000" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <hr>
                                    <div class="col-6 mb-1">低庫存提示</div>
                                    <fieldset class="form-group">
                                        <label for="low_stock_alert" class="col-2">前台</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="low_stock_alert" type="number" class="touchspin" name="low_stock_alert" value="{{ $data->low_stock_alert ?? 0 }}"
                                                       max="10000000000" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <label for="low_stock_warning" class="col-2">後台</label>
                                        <div class="d-inline-flex align-items-center mb-1">
                                            <div class="input-group">
                                                <input id="low_stock_warning" type="number" class="touchspin" name="low_stock_warning" value="{{ $data->low_stock_warning ?? 0 }}"
                                                       max="10000000000" required>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <hr>
                                    <div class="col-6 mb-1">缺貨時反應</div>
                                    <fieldset class="form-group">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="sold_out_type1" name="sold_out_type" value="1" autocomplete="off"
                                                                {{ $data && $data->sold_out_type == 1 ? 'checked' : '' }}>
                                                        <label for="sold_out_type1">貨到通知</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="sold_out_type2" name="sold_out_type" value="2" autocomplete="off"
                                                                {{ $data && $data->sold_out_type == 2 ? 'checked' : '' }}>
                                                        <label for="sold_out_type2">開放預購</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="sold_out_type3" name="sold_out_type" value="3" autocomplete="off"
                                                                {{ !$data || $data->sold_out_type == 3 ? 'checked' : '' }}>
                                                        <label for="sold_out_type3">顯示文字</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div id="pre_order_div" style="{{ $data && $data->sold_out_type == 2 ? '' : 'display:none;' }}">
                                        <fieldset class="form-group">
                                            <label for="pre_order_limit" class="col-2">可預購數量</label>
                                            <div class="d-inline-flex align-items-center mb-1">
                                                <div class="input-group">
                                                    <input id="pre_order_limit" type="number" class="touchspin" name="pre_order_limit" value="{{ $data->pre_order_limit ?? 0 }}"
                                                           max="10000000000" required>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group">
                                            <label for="pre_order_date" class="col-2">預購出貨日期</label>
                                            <div class="d-inline-flex align-items-center mb-1">
                                                <div class="input-group">
                                                    <input id="pre_order_date" type="number" class="touchspin" name="pre_order_date" value="{{ $data->pre_order_date ?? null }}"
                                                           max="10000000000" required>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                    <hr>
                                    <div class="col-6 mb-1">相關貼文設定</div>
                                        <select id="related_article" class="form-control select2" name="related_article[]" placeholder="請選擇相關貼文商品(可複選)" multiple>
                                            @foreach($article as $va)
                                                <option value="{{ $va->id }}" {{ $data && in_array($va->id, $related_article) ? 'selected' : '' }}>{{ $va->content_str_limit }}</option>
                                            @endforeach
                                        </select>
                                    <hr>
                                    <div class="col-6 mb-1">相關商品設定</div>
                                    <fieldset class="form-group">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="related_products_type1" name="related_products_type" value="1" autocomplete="off"
                                                                {{ !$data || $data->related_products_type == 1 ? 'checked' : '' }}>
                                                        <label for="related_products_type1">同分類</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="related_products_type2" name="related_products_type" value="2" autocomplete="off"
                                                                {{ $data && $data->related_products_type == 2 ? 'checked' : '' }}>
                                                        <label for="related_products_type2">同TAG</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                            <li class="d-inline-block mr-2 mb-1">
                                                <fieldset>
                                                    <div class="radio radio-shadow">
                                                        <input type="radio" id="related_products_type3" name="related_products_type" value="3" autocomplete="off"
                                                                {{ $data && $data->related_products_type == 3 ? 'checked' : '' }}>
                                                        <label for="related_products_type3">自選</label>
                                                    </div>
                                                </fieldset>
                                            </li>
                                        </ul>
                                    </fieldset>
                                    <div id="related_products_div" style="{{ $data && $data->related_products_type == 3 ? '' : 'display:none;' }}">
                                        <select id="related_products" class="form-control select2" name="related_products[]" placeholder="請選擇相關商品(可複選)" multiple required>
                                            @foreach($other_products as $va)
                                                <option value="{{ $va->id }}" {{ $data && $data->related_products && in_array($va->id, $data->related_products) ? 'selected' : '' }}>{{ $va->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @if ($data)
                                        <fieldset class="form-group">
                                            <label for="disabledInput">最後修改時間</label>
                                            <p class="form-control-static" id="staticInput">
                                                {{ $data->updated_at }}
                                            </p>
                                        </fieldset>
                                        <fieldset class="form-group">
                                            <label for="disabledInput">建立時間</label>
                                            <p class="form-control-static" id="staticInput">
                                                {{ $data->created_at }}
                                            </p>
                                        </fieldset>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <fieldset class="form-group col-md-6">
                                        <label for="main_img">列表圖</label>
                                        <input type="file" id="index_img" class="form-control single-fileinput dropzone dropzone-area" name="index_img"
                                               value="{{ $data && $data->index_img ? storage_assets($data->index_img) : '' }}"
                                               {{ !empty($data) || !$isCopy ? '' : 'required' }}
                                        />
                                    </fieldset>
                                    <fieldset class="form-group col-md-6">
                                        <label for="product_images">商品圖</label>
                                        <input type="file" class="form-control multiple-fileinput" name="product_images[]" id="product_images_input"
                                               data-imgs='@json($fileInputPresenter->preparePreviewImages(!empty($data->images) ? $data->images->pluck('src')->toArray() : []))'
                                               data-imgs-config='@json($fileInputPresenter->prepareImageConfig(!empty($data->images) && !$isCopy ? $data->images->pluck('id')->toArray() : []))'
                                               data-is-copy="{{ $isCopy ? 'true' : 'false' }}"
                                               {{ !empty($data) || !$isCopy ? '' : 'required' }}
                                               multiple/>
                                    </fieldset>
                                    <fieldset>
                                        <label>商品介紹</label>
                                        <textarea id="introduction" class="tinymce_editor" name="introduction" required>{!! $data->introduction ?? '' !!}</textarea>
                                    </fieldset>

                                    <fieldset>
                                        <label>商品規格</label>
                                        <textarea id="specification" class="tinymce_editor" name="specification" required>{!! $data->specification ?? '' !!}</textarea>
                                    </fieldset>
                                </div>
                            </div>

                            @checkPerm(PRODUCT_CATEGORY_EDIT)
                                <div class="buy-now">
                                    <input type="hidden" name="is_copy" value="{{ $isCopy ? 1 : 0 }}">
                                    <input type="hidden" name="copy_id" value="{{ $data->id ?? '' }}">
                                    <button class="btn btn-primary mt-1" type="submit">{{ $data && !$isCopy ? '更新' : '新增' }}</button>
                                    <a class="btn btn-light mt-1" href="{{ route("admin.product.list") }}">返回</a>
                                </div>
                            @endcheckPerm
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('js')
    <script>
        $(function () {
            $('#main_cid').change(function () {
                let main_cid = $(this).val();
                $('#cid option').remove();
                if (!main_cid) {
                    $('#cid').multipleSelect('refresh');
                    return;
                }
                ajax.get("{{ route('admin.data.get.subcategory', '') }}/" + main_cid, function (res) {
                    if (res.valid && res.data) {
                        $.each(res.data, function (k, obj) {
                            let $option = $('<option/>');
                            $option.attr('value', obj.id).text(obj.name).appendTo('#cid');
                        });
                        $('#cid').multipleSelect('refresh');
                    }
                });
            });
            $('input[name=sold_out_type]').change(function () {
                if ($(this).val() == 2) {
                    $('#pre_order_div').show();
                } else {
                    $('#pre_order_div').hide();
                }
            });
            $('input[name=related_products_type]').change(function () {
                if ($(this).val() == 3) {
                    $('#related_products_div').show();
                } else {
                    $('#related_products_div').hide();
                }
            });
        });
    </script>
@endpush