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

@section("titleBanner")
    <div class="titleBanner">
        <h1 class="m-0"><img src="/asset/images/common/logo_white.webp" alt="壹然 evernature"></h1>
        <div class="img"><img src="/asset/images/member/banner.webp" alt="Banner首圖"></div>
        <div class="textBox inview fadeinUp">
            <img src="/asset/images/cart/title.webp" alt="會員專區">
        </div>
    </div>
@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>
    @include("foreground.layouts.alert")

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

    <!-- main -->
    <main class="cartStep02 bgPatternOne">

        <div class="bgPatternUnder"><img src="/asset/images/common/bg02.svg" alt="背景圖"></div>

        <!-- stage 02-->
        <ul class="px-5 stageStep-circle">
            <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="container">

            <div class="ContentSpacing">
                <div class="mb-5 text-center pb-5 ">
                    <p class="text-yiran-green fw-medium fs-2"> 感謝您，您的訂單已成立！</p>
                    <p>訂單完成說明文字，訂單完成說明文字，訂單完成說明文字，
                        訂單完成說明文字，訂單完成說明文字。</p>
                </div>


                <div class="text-center mb-5 ">
                    <a href="" class="orangeBtn">立即前往付款</a>
                </div>
            </div>

            <div class="row align-items-end ContentSpacing">
                <div class="col-md-6 col-12">
                    <p class="fs-3 text-yiran-dark-green fw-medium  mb-5">訂單資訊</p>
                    <ul class="ps-0 pb-5">
                        <li class="mb-3">訂單編號： <span>{{ $orderNumber ?? "WIP" }}</span></li>
                        <li class="mb-3">訂單日期： <span>{{ $createdAt ?? "WIP" }}</span></li>
                        <li class="mb-3">合計金額： <span>NT$ {{ $amount ?? "WIP" }}</span></li>
                        <li class="mb-3">寄送方式： @if(!empty($shippingType ?? "WIP"))
                                <span>{{ $shippingType ?? "WIP" }}</span>
                            @elseif($isSelf)
                                <span>自取</span>
                            @endif
                        </li>
                        @if($isStorePickup ?? "WIP")
                            <li class="mb-3">
                                取貨門市：<span>{{ $storeName ?? "WIP" }}</span>
                            </li>
                        @elseif($isHomeDelivery)
                            <li class="mb-3">
                                寄送地址：<span>{{ $address }}</span>
                            </li>
                        @endif
                        <li class="">付款狀態： <span class="text-success">{{ $paymentStatus ?? "WIP" }}</span></li>
                    </ul>
                </div>

                <div class="col-md-6 col-12">
                    <div class="cart-price-sticky">
                        <ul class="ps-0 row mb-3">
                            <li class="col-4 text-end">商品小計</li>
                            <li class="col-8 text-end">"WIP"</li>
                            {{-- <li class="col-8 text-end">{{ $cartTotal($cartChannelValue) }}</li> --}}
                        </ul>
                        <ul class="ps-0 row mb-3">
                            <li class="col-4 text-end">{{ $shippingName }}</li>
                            <li class="col-8 text-end">{{ $logisticsPrice }}</li>
                        </ul>
                        <ul class="ps-0 row mb-4">
                            <li class="col-4 text-end">優惠券折扣</li>
                            <li class="col-8 text-end">"WIP"</li>
                            {{--                            <li class="col-8 text-end">{{ $discount($cartChannelValue) }}</li>--}}
                        </ul>
                        <ul class="ps-0 row mb-5">
                            <li class="col-4 text-end text-yiran-brown">訂單金額</li>
                            <li class="col-8 text-end text-yiran-brown fw-bold fs-2">
                                "WIP"
                                {{-- NT${{ $orderTotal($cartChannelValue) }} --}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('foreground.layouts.footer')

    </div>

    </body>
@endsection