@extends('frontend::layouts.master')
@section('title')

@section('style')
    <style>
        button:disabled {
            pointer-events: none;
            opacity: 0.4;
        }
    </style>
@endsection

@section('content')
    <main>
        <div class="full-y-starter">
            <div class="container">
                <div class="nav-state-wrapper">
                    <div class="nav-state-bar activated ">DELIVERY
                        <a href="{{ url('checkout') }}"></a>
                    </div>
                    <div class="nav-state-bar activated current">PAYMENT
                        <a href="{{ url('payment') }}"></a>
                    </div>
                    <div class="nav-state-bar  ">COMPLETED
                        <a href="{{ url('complete') }}"></a>
                    </div>
                </div>
                <div class="pt-8 flex flex-col lg:space-x-6 lg:flex-row">
                    <div class="flex-auto form-wrapper space-y-8 cart-table">
                        <div class="space-y-4">
                            <h4 class="text-lg font-medium hr-space">CHOOSE PAYMENT METHOD</h4>
                            <div class="paymtd">
                                <!-- Credit Card-->
                                <div class="payment-item">
                                    <div class="radck-wicn">
                                        <input class="hidden" id="payment1" type="radio" name="paymentType"
                                            value="1" />
                                        <label class="pt-ttg w-full" for="payment1"><span class="rdo-stl"></span>
                                            <div class="flex items-center flex-wrap justify-between w-full">
                                                <p>2C2P/บัตรเครดิต</p>
                                                <div class="img-wrapper">
                                                    <img src="{{ Module::asset('frontend:img/_default_img/credit-logo.png') }}"
                                                        alt="" />
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                    {{-- method="POST" autocomplete="off" --}}
                                    <form id="2c2p-payment-form" name="2c2p-payment-form" method="POST"
                                        onsubmit="return false;">
                                        @csrf
                                        <div style="display: none;" id="btn-cart">
                                            <div class="adr-delfm form-wrapper container p-4">
                                                <div class="flex-initial">
                                                    <div class="shipping-address-editor show" id="ShpAddEDT">
                                                        <div class="form-space">
                                                            <div class="w-full lg:w-1/2">
                                                                <label for="full_name">@lang('frontend.frnd_08')</label>
                                                                <input class="form-style" type="text" id="full_name"
                                                                    name="full_name" placeholder="@lang('frontend.frnd_03')"
                                                                    maxlength="100" />
                                                                <div id="full_name-error" class="invalid-feedback">
                                                                    @lang('frontend.frnd_03')</div>
                                                            </div>
                                                            <div class="w-full lg:w-1/2">
                                                                <label for="cnum">@lang('frontend.frnd_07')</label>
                                                                <input class="form-style" type="text" id="cnum"
                                                                    data-encrypt="cardnumber"
                                                                    placeholder="@lang('frontend.frnd_02')"
                                                                    onkeypress="InputValidateString()" maxlength="16" />
                                                                <div id="cnum-error" class="invalid-feedback">
                                                                    @lang('frontend.frnd_02')</div>
                                                            </div>
                                                            <div class="w-full lg:w-1/2">
                                                                <label for="cmonth">@lang('frontend.frnd_09')</label>
                                                                <input class="form-style" type="text" id="cmonth"
                                                                    data-encrypt="month"
                                                                    placeholder="@lang('frontend.frnd_10') {{ date('m') }}"
                                                                    onkeypress="InputValidateString()" maxlength="2" />
                                                                <div id="cmonth-error" class="invalid-feedback">
                                                                    @lang('frontend.frnd_04')</div>
                                                            </div>
                                                            <div class="w-full lg:w-1/2">
                                                                <label for="Tsnum">@lang('frontend.frnd_11')</label>
                                                                <input class="form-style" type="text" id="cyear"
                                                                    data-encrypt="year"
                                                                    placeholder="@lang('frontend.frnd_10') {{ date('Y') }}"
                                                                    onkeypress="InputValidateString()" minlength="4"
                                                                    maxlength="4" />
                                                                <div id="cyear-error" class="invalid-feedback">
                                                                    @lang('frontend.frnd_05')</div>
                                                            </div>
                                                            <div class="w-full lg:w-1/1">
                                                                <label for="Tsnum">CCV/CVC</label>
                                                                <input class="form-style" type="password" id="ccvv"
                                                                    data-encrypt="cvv" placeholder="@lang('frontend.frnd_06')"
                                                                    onkeypress="InputValidateString()" maxlength="4" />
                                                                <div id="ccvv-error" class="invalid-feedback">
                                                                    @lang('frontend.frnd_06')</div>
                                                            </div>
                                                            <div id="alert-cart" style="display: none"
                                                                class="w-full lg:w-1/1">
                                                                <div class="alert alert-danger" role="alert">
                                                                    A simple danger alert—check it out!
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="submit-next width-control mb-3">
                                                <button class="butn-submit add2bag-btn py-2" id="btn-credit"
                                                    onclick="validate_card()">@lang('frontend.check_out')</button>
                                                <p class="text-danger" id="error_card"></p>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- Bank Transfer-->
                                <div class="payment-item active">
                                    <div class="payment-item-detail">
                                        <div class="radck-wicn">
                                            <input class="hidden" id="payment2" type="radio" name="paymentType"
                                                value="2" checked />
                                            <label class="pt-ttg w-full" for="payment2"><span class="rdo-stl"></span>
                                                <div class="flex items-center">
                                                    <p class="uppercase">Bank Transfer</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="payment-item-form" for="payment2">
                                        @foreach ($Payment as $payment)
                                            <div class="flex items-center space-x-4">
                                                <div class="radck-wicn">
                                                    <input class="hidden" id="bank1" type="radio"
                                                        name="paymeth" />
                                                    <label for="bank1"><span class="rdo-stl"></span>
                                                        <div>
                                                            <div class="img-wrapper">
                                                                <img style="max-height: none;"
                                                                    src="{{ convert_image($payment->bank_image ?? '', 'bank') }}"
                                                                    alt="" />
                                                            </div>
                                                            <div>
                                                                <h5>{{ $payment['bank_name_' . $pageInit['lang']] ?? '' }}
                                                                </h5>
                                                                <p>{{ $payment['account_' . $pageInit['lang']] ?? '' }}</p>
                                                                <p>{{ $payment->account_number ?? '' }}</p>
                                                            </div>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="submit-next width-control mb-3" id="btn-bank">
                                        <a href="{{ mwz_route('frontend.payment.upload') }}">
                                            <button class="butn-submit add2bag-btn py-2"
                                                type="submit">@lang('frontend.check_out')</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-summary">
                        <div class="smry-xl smry-space text-center bg-gray-lighter">@lang('frontend::lang.pay_up_01')</div>
                        <div class="px-6 pt-6">
                            @if (!empty($order_item))
                                @foreach ($order_item as $item)
                                    <div class="loadmore-item">
                                        <div class="cart-item-img">
                                            <img src="{{ convert_image(getImage($item) ?? '', 'product') }}"
                                                alt="" />
                                            <a
                                                href="{{ mwz_route('frontend.jewelry.detail', [create_slug($item->product ?? [])]) }}"></a>
                                        </div>
                                        <div class="cart-item-detail mx-0 mt-3">
                                            <p class="text-lg font-medium">
                                                {{ $item['product_name_' . $pageInit['lang']] ?? '' }}</p>
                                            <div class="font-light text-lg">@lang('frontend::lang.pay_up_04')
                                                {{ $item['cartificate_' . $pageInit['lang']] ?? '-' }} /
                                                {{ $item->item_color ?? '-' }}</div>
                                            <div class="mt-2 text-sm">
                                                @if (!empty($item->order_item_sku))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">SKU</div>
                                                        <div>{{ $item->order_item_sku ?? '' }}</div>
                                                    </div>
                                                @endif
                                                @if (!empty($item['cartificate_' . $pageInit['lang']]))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">Certificate</div>
                                                        <div>{{ $item['cartificate_' . $pageInit['lang']] ?? '-' }}</div>
                                                    </div>
                                                @endif
                                                @if (!empty($item->item_color))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">Body</div>
                                                        <div>{{ $item->item_color }}</div>
                                                    </div>
                                                @endif
                                                @if (!empty($item->item_diamond))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">@lang('frontend::lang.m_purchased_detail_01')</div>
                                                        <div>{{ $item->item_diamond }}</div>
                                                    </div>
                                                @endif
                                                @if (!empty($item->item_size))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">Weight</div>
                                                        <div>{{ $item->item_size }}</div>
                                                    </div>
                                                @endif
                                                @if (!empty($item->engraving_text))
                                                    <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                        <div class="w1w5w0">Engraving</div>
                                                        <div>{{ $item->engraving_text }}</div>
                                                    </div>
                                                @endif
                                                <div class="flex justify-between flex-col xs:flex-row xs:items-center">
                                                    <div class="w1w5w0">Quantity</div>
                                                    <div>{{ $item->quantity ?? 0 }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- <div class="text-center mt-1" onclick="loadMore('{{ $order->id ?? 0 }}')" style="cursor: pointer;">
                                            <span>ดูเพิ่มเติม..</span>
                                        </div> --}}
                                    </div>
                                    <hr class="my-6" />
                                @endforeach
                                {!! !empty($data['freebies']['description']) ? $data['freebies']['description'] : '' !!}
                                <hr class="my-6" />
                            @endif
                            <div class="smry-wrapper">
                                <div class="text-lg">@lang('frontend.frnd_121')</div>
                            </div>
                            <div>
                                @if (!empty($order->coupon_code))
                                    <div class="smry-wrapper">
                                        <div class="smry-sm">@lang('frontend.sub_total')</div>
                                        <div class="smry-sm">{{ number_format($order->grand_total ?? 0, 2) }} THB</div>
                                    </div>
                                @else
                                    <div class="smry-wrapper">
                                        <div class="smry-sm">@lang('frontend.sub_total')</div>
                                        <div class="smry-sm">{{ number_format($order->total_all ?? 0, 2) }} THB</div>
                                    </div>
                                @endif
                                <div class="smry-wrapper">
                                    <div class="smry-sm">@lang('frontend.frnd_63')</div>
                                    <div class="smry-sm">0.00 THB</div>
                                </div>
                                <div class="smry-wrapper">
                                    <div class="smry-sm">@lang('frontend::lang.pay_up_02')</div>
                                    <div class="smry-sm">0.00 THB</div>
                                </div>
                                {{-- <div class="smry-wrapper">
                                    <div class="smry-sm">@lang('frontend::lang.pay_up_03')</div>
                                    <div class="smry-sm">{{ number_format($order->discount_total ?? 0, 2) }} THB</div>
                                </div> --}}
                                @if (!empty($order->coupon_code))
                                    <div class="smry-wrapper mt-4">
                                        <div class="smry-sm">Coupon Code</div>
                                        <div class="smry-sm"><u>{{ $order->coupon_code }}</u></div>
                                    </div>
                                    <div class="smry-wrapper">
                                        <div class="smry-sm">Coupon Discount</div>
                                        <div class="smry-sm">{{ number_format($order->coupon_discount_price ?? 0, 2) }}
                                            THB</div>
                                    </div>
                                @endif
                                <div class="smry-wrapper mt-4">
                                    <div class="text-lg">GRAND TOTAL</div>
                                    <div class="text-lg">{{ number_format($order->total_all ?? 0, 2) }} THB</div>
                                </div>
                            </div>
                        </div>
                        <div class="text-editor pb-4">
                            <div class="p-2">
                                {!! !empty($text['detail_1']) ? $text['detail_1'] : '' !!}
                                {{-- <img class="mx-auto" src="{{ Module::asset('frontend:img/cart-summary-detail1.png') }}" alt="" /> --}}
                            </div>
                            {!! !empty($text['detail_2']) ? $text['detail_2'] : '' !!}
                            {{-- <img class="mx-auto" src="{{ Module::asset('frontend:img/cart-summary-detail2.png') }}" alt="" /> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <script src="{{ asset('assets/custom/js/payment.js') }}"></script>

    {{-- libary 2c2p  --}}
    <script type="text/javascript" src="https://t.2c2p.com/SecurePayment/api/my2c2p.1.7.3.min.js"></script>

    <script type="text/javascript">
        validate_card = function() {
            My2c2p.getEncrypted("2c2p-payment-form", function(encryptedData, errCode, errDesc) {
                let status = 1;
                if ($('#full_name').val() == '') {
                    $('#full_name-error').css('display', 'block')
                    status = 0
                }
                if ($('#cnum').val() == '') {
                    $('#cnum-error').css('display', 'block')
                    status = 0
                }
                if ($('#cmonth').val() == '') {
                    $('#cmonth-error').css('display', 'block')
                    status = 0
                }
                if ($('#cyear').val() == '') {
                    $('#cyear-error').css('display', 'block')
                    status = 0
                } else if ($('#cyear').val().length != 4) {
                    $('#cyear-error').css('display', 'block')
                    status = 0
                }
                if ($('#ccvv').val() == '') {
                    $('#ccvv-error').css('display', 'block')
                    status = 0
                }
                if (status == 0) {
                    return false;
                } else {
                    save_payment_card();
                }
            });
        }

        save_payment_card = function() {
            let frm_data = new FormData($('#2c2p-payment-form')[0]);
            btnLoading(2, "{{ __('frontend.check_out') }}", '#btn-credit');

            $.ajax({
                url: "{{ route('frontend.pay2c2p.credit.submit') }}",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(resp) {
                    if (resp.success) {
                        if (resp.data.respCode == '1000') {
                            top.window.location.href = resp.data.data
                        } else if (resp.data.respCode == '1001') {
                            top.window.location.href = resp.data.data
                        } else {
                            btnLoading(1, "{{ __('frontend.check_out') }}", '#btn-credit');
                            // console.log(resp)
                        }
                    } else {
                        $('#error_card').html("{{ __('frontend::lang.payment_01') }}")
                        btnLoading(1, "{{ __('frontend.check_out') }}", '#btn-credit');
                        // console.log(resp)
                    }
                },
            });
        }
        // top.My2c2p.onSubmitForm("2c2p-payment-form", function(errCode, errDesc) {
        //     let status = 1;
        //     if ($('#full_name').val() == '') {
        //         $('#full_name-error').css('display', 'block')
        //         status = 0
        //     }
        //     if ($('#cnum').val() == '') {
        //         $('#cnum-error').css('display', 'block')
        //         status = 0
        //     }
        //     if ($('#cmonth').val() == '') {
        //         $('#cmonth-error').css('display', 'block')
        //         status = 0
        //     }
        //     if ($('#cyear').val() == '') {
        //         $('#cyear-error').css('display', 'block')
        //         status = 0
        //     }
        //     if ($('#ccvv').val() == '') {
        //         $('#ccvv-error').css('display', 'block')
        //         status = 0
        //     }
        //     if (status == 0) {
        //         return false;
        //     } else {
        //         let frm_data = new FormData($('#2c2p-payment-form')[0]);
        //         btnLoading(2, "{{ __('frontend.check_out') }}", '#btn-credit');

        //         $.ajax({
        //             url: "{{ route('frontend.pay2c2p.credit.submit') }}",
        //             type: "POST",
        //             contentType: false,
        //             data: frm_data,
        //             processData: false,
        //             headers: {
        //                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //             },
        //             success: function(resp) {
        //                 if (resp.success) {
        //                     if (resp.data.respCode == '1000') {
        //                         top.window.location.href = resp.data.data
        //                     } else if (resp.data.respCode == '1001') {
        //                         top.window.location.href = resp.data.data
        //                     } else {
        //                         btnLoading(1, "{{ __('frontend.check_out') }}", '#btn-credit');
        //                         // console.log(resp)
        //                     }
        //                 } else {
        //                     $('#error_card').html("{{ __('frontend::lang.payment_01') }}")
        //                     btnLoading(1, "{{ __('frontend.check_out') }}", '#btn-credit');
        //                     // console.log(resp)
        //                 }
        //             },
        //         });
        //     }
        // });
    </script>

@endsection