@php use App\Enums\PaymentType; @endphp
@extends('foreground.layouts.frame')

@section("titleBanner")
    <img src="https://via.placeholder.com/1920x400?text=Order+Banner" alt="Banner描述">
@endsection

@section("scripts")
    <script>
        $(function () {
            var formAction = new FormAction();
            formAction.init();
        })
    </script>
    <script>
        var FormAction = function () {
            this.init = function () {
                this.bindShippingSelect();
                this.bindChoiceLogistics();
                this.bindSelfPickUp()
                this.bindSubmitButton()
            }
            this.bindSubmitButton = function () {
                var self = this
                $('.js-checkout').on('click', function (e) {
                    e.preventDefault()
                    var $form = $('form.info')
                    // 檢查欄位
                    if (!self.checkForm($form)) {
                        return false
                    }
                    $form.attr('action', $form.data('default'))
                    console.log($form.attr('action'))
                    $form.submit()
                })
            }
            this.bindSelfPickUp = function () {
                var self = this
                $('.self-pickup').on('click', function (e) {
                    e.preventDefault()
                    var $form = $('form.info')
                    // 檢查欄位
                    if (!self.checkForm($form)) {
                        return false
                    }
                    $('.selfPickUp').val('1')
                    $form.attr('action', $form.data('action'))
                    console.log($form.attr('action'))
                    $form.submit()
                })
            }
            this.bindChoiceLogistics = function () {
                var self = this;
                $('.choice-logistics').on('click', function (e) {
                    // e.preventDefault()
                    $('.selfPickUp').val('0')
                    var $form = $("form.info");
                    // 檢查欄位
                    if (!self.checkForm($form)) {
                        return false;
                    }
                    $form.attr("action", $form.data("action"));
                    console.log($form.attr('action'))
                    $form.submit()
                })
            }
            this.bindShippingSelect = function () {
                var self = this;
                var orgShippingOption = $("#shipping-option").val();
                $("#shipping-option").on("change", function () {
                    var optionValue = $(this).val();
                    self.toggle(optionValue)
                    var result = self.sendForm(optionValue);
                    if (result === false) {
                        $(this).val(orgShippingOption);
                    }
                })
            }
            this.checkForm = function ($form) {
                if ($form.find("input[name=name]").val() === "") {
                    alert("請輸入姓名");
                    return false;
                }
                if ($form.find("input[name=phone]").val() === "") {
                    alert("請輸入聯絡電話");
                    return false;
                }
                if ($form.find("input[name=email]").val() === "") {
                    alert("請輸入聯絡 Email");
                    return false;
                }
                if ($form.find("select[name=payment]").val() === "") {
                    alert("請選擇付款方式");
                    return false;
                }
                if ($form.find("select[name=pickup]").val() === "") {
                    alert("請選擇取貨門市");
                    return false;
                }
                return true;
            }
            this.setFormAndSubmit = function (dataName) {
                var $form = $("form.info");
                // 檢查欄位
                if (!this.checkForm($form)) {
                    return false;
                }
                $form.attr("action", $form.data(dataName));
                $form.submit()
                return true;
            }
            this.resetFormAction = function () {
                var $form = $("form.info");
                $form.attr("action", $form.data("default"));
            }
            this.sendForm = function (optionValue) {
                if (optionValue === "homeDelivery") {
                    return this.setFormAndSubmit("action-home-delivery");
                } else if (optionValue === "sevenEleven") {
                    return this.setFormAndSubmit("action-seven-eleven");
                } else if (optionValue === "family") {
                    return this.setFormAndSubmit("action-family");
                } else {
                    return this.resetFormAction()
                }
            }
            this.toggle = function (optionValue) {
                if (!optionValue) {
                    $(".option").hide();
                    return true;
                }

                $(".option").hide();
                $("." + optionValue).show();
            }
        }
    </script>
@endsection

@section('body')
<body id="pagetop">

    @include('foreground.layouts.gtm')
    @include("foreground.layouts.alert")

    @include('foreground.layouts.header', [
            'current' => '',
        ])

    <!-- main -->
    <main>
        <div class="container detaInner">

            <!-- stageStep 02 -->
            <ul class="stageStep">
                <li class="">
                    <p class="number">
                        <span class="d-none">1</span>
                        <span class=""><i class="fa-solid fa-check"></i></span>
                    </p>
                    <p class="txt">購買商品</p>
                </li>
                <li class="active">
                    <p class="number">
                        <span class="">2</span>
                        <span class="d-none"><i class="fa-solid fa-check"></i></span>
                    </p>
                    <p class="txt">確認訂單與付款</p>
                </li>
                <li class="">
                    <p class="number"> 
                        <span class="">3</span>
                        <span class="d-none"><i class="fa-solid fa-check"></i></span>
                    </p>
                    <p class="txt">完成訂單</p>
                </li>
            </ul>

            <!-- 感謝您 -->
            <div class="text-center my-5">
                <p class="fs-2 fw-bold">感謝您，您的訂單已成立！</p>
                <p class="mt-2 mb-4">如有任何訂單或商品問題請盡速與我們聯絡</p>
                @if($isDisplayPaymentButton)
                    <div>
                        <a href="{{ $paymentLink }}" class="moreBtn02 rounded-pill">立即前往付款</a>
                    </div>
                @endif
            </div>

            <!-- 訂單資訊 -->
            <div>
                <h3 class="fs-2 mb-4">訂單資訊</h3>
                <div class="row m-auto">
                    <ul class="col-12 col-md-6">
                        <li>訂單編號： {{ $orderNumber ?? "WIP" }}</li>
                        <li>訂單日期： {{ $createdAt ?? "WIP" }}</li>
                        <li>合計金額： {{ $amount ?? "WIP" }}</li>
                        <li>
                            寄送方式：
                            @if(!empty($shippingType ?? "WIP"))
                                {{ $shippingType ?? "WIP" }}
                            @elseif($isSelf)
                                自取
                            @endif
                        </li>
                        @if($isStorePickup ?? "WIP")
                            <li>
                                取貨門市：{{ $storeName ?? "WIP" }}
                            </li>
                        @elseif($isHomeDelivery)
                            <li>
                                寄送地址：{{ $address }}
                            </li>
                        @endif
                        <li>付款狀態： {{ $paymentStatus ?? "WIP" }}</li>
                    </ul>
                    <table class="col-12 col-md-6 text-end my-5 mt-md-0">
                        <colgroup>
                            <col span="2" class="w50per">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>商品小計</td>
                                <td>
                                    "WIP"
                                    {{-- {{ $cartTotal($cartChannelValue) }} --}}
                                </td>
                            </tr>
                            <tr>
                                <td>{{ $shippingName }}</td>
                                <td>{{ $logisticsPrice }}</td>
                            </tr>
                            <tr>
                                <td>優惠券折扣</td>
                                <td>
                                    "WIP"
                                    {{-- {{ $discount($cartChannelValue) }} --}}
                                </td>
                            </tr>
                            <tr class="text-primary fs-2 fw-bold">
                                <td class="pt-4">訂單金額</td>
                                <td class="pt-4">
                                    "WIP"
                                    {{-- {{ $orderTotal($cartChannelValue) }} --}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </main>

    @include('foreground.layouts.pagetop')
    @include('foreground.layouts.footer')

</body>
@endsection