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

@section('style')
    <!-- Date Picker css-->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/datetimepicker/jquery.datetimepicker.css') }}" />
    <style>
        @media only screen and (max-width: 479px) {
            .top-mrp {
                margin-top: 15px;
            }
        }

        @media only screen and (min-width: 768px) {
            .fx-width {
                width: 80% !important;
            }
        }

        .hr-marg {
            margin-top: 5px;
            margin-bottom: 5px;
        }

        .fix-valid .invalid-feedback {
            float: right;
            text-align: right;
        }

        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>
                <form id="frm_bankTransfer" onsubmit="saveBankTransfer(); return false;">
                    @csrf
                    <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">CONFIRMATION PAYMENT</h4>
                                <div class="dfdfdf">
                                    <p>Total Amount</p>
                                    @if (!empty($order->coupon_code))
                                        <p>{{ number_format($order->discal_total ?? 0, 2) }} THB</p>
                                    @else
                                        <p>{{ number_format($order->grand_total ?? 0, 2) }} THB</p>
                                    @endif
                                </div>
                                <div class="the-uploader">
                                    <div class="panel">
                                        <div class="button_outer">
                                            <div class="btn_upload">
                                                <img class="tic mx-auto" src="{{ Module::asset('frontend:img/tic.png') }}" alt="" /><input type="file" id="upload_file" name="image_pay" accept="image/png, image/jpg, image/jpeg">@lang('frontend.pay_in_slip')
                                            </div>
                                            <div class="processing_bar"></div>
                                            <div class="success_box"></div>
                                        </div>
                                        <div clitems-centerass="error_msg"></div>
                                        <div class="uploaded_file_view" id="uploaded_view">
                                            <span class="file_remove">X</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="fix-valid">
                                    <input type="hidden" name="instock" id="instock" value="{{ !empty($stock['instock']) ? $stock['instock'] : '' }}">
                                    <input type="hidden" name="id_instock" id="id_instock" value="{{ !empty($stock['id_instock']) ? $stock['id_instock'] : '' }}">
                                    <hr class="hr-marg">
                                    <div class="row">
                                        <div class="col-md-6">@lang('frontend.transfer_date')</div>
                                        <div class="col-md-6">
                                            <div class="w-full fx-width" style="float: right;">
                                                <input class="form-style datepicker" type="text" id="date_pay" name="date_pay" placeholder="{{ date('Y-m-d') }}" value="{{ date('Y-m-d') }}" />
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="hr-marg">
                                    <div class="row">
                                        <div class="col-md-6">@lang('frontend.transfer_time')</div>
                                        <div class="col-md-6">
                                            <div class="w-full fx-width" style="float: right;">
                                                <input class="form-style timepicker" type="text" id="time_pay" name="time_pay" placeholder="{{ date('H:i') }}" value="{{ date('H:i') }}" />
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="hr-marg">
                                    <div class="row">
                                        <div class="col-md-6">@lang('frontend.frnd_56')</div>
                                        <div class="col-md-6">
                                            <select class="form-style fx-width" style="float: right;" id="thai_bank" name="thai_bank">
                                                <option value="">Choose Bank</option>
                                                @foreach ($ThaiBank as $thb)
                                                    <option value="{{ $thb->id ?? 0 }}">{{ $thb['name_' . $pageInit['lang']] ?? '' }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <hr class="hr-marg">
                                    <div class="row">
                                        <div class="col-md-6">@lang('frontend.frnd_57')</div>
                                        <div class="col-md-6">
                                            <select class="form-style fx-width" style="float: right;" id="bank_id" name="bank_id">
                                                <option value="">Choose Bank</option>
                                                @foreach ($Payment as $payment)
                                                    <option value="{{ $payment->id ?? 0 }}">{{ $payment['bank_name_' . $pageInit['lang']] ?? '' }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <hr class="hr-marg">
                                    <div class="row">
                                        <div class="col-md-6">Transfer Amount</div>
                                        <div class="col-md-6">
                                            @if (!empty($order->coupon_code))
                                                <p style="float: right;">{{ number_format($order->discal_total ?? 0, 2) }} THB</p>
                                                <input type="hidden" id="payment_amount" name="payment_amount" value="{{ $order->discal_total }}">
                                            @else
                                                <p style="float: right;">{{ number_format($order->grand_total ?? 0, 2) }} THB</p>
                                                <input type="hidden" id="payment_amount" name="payment_amount" value="{{ $order->grand_total }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <hr class="hr-marg">
                                <div class="submit-next width-control">
                                    <button type="submit" id="btn-submit" class="butn-submit add2bag-btn py-2 flink">@lang('frontend::lang.lang_title_112')</button>
                                </div>
                                <div class="mb-3 text-center text-danger"><p id="error_resp"></p></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>
                                                        <input type="hidden" name="quantity[]" id="quantity" value="{{ $item->quantity ?? 0 }}">
                                                    </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>
                                        <div class="smry-wrapper mt-4">
                                            <div class="text-lg">GRAND TOTAL</div>
                                            <div class="text-lg">{{ number_format($order->discal_total ?? 0, 2) }} THB</div>
                                        </div>
                                    @else
                                        <div class="smry-wrapper mt-4">
                                            <div class="text-lg">GRAND TOTAL</div>
                                            <div class="text-lg">{{ number_format($order->grand_total ?? 0, 2) }} THB</div>
                                        </div>
                                    @endif

                                </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>
                </form>
            </div>
        </div>
    </main>
@endsection

@section('script')
    <!-- Datepicker js -->
    <script type="text/javascript" src="{{ asset('assets/plugins/datetimepicker/jquery.datetimepicker.js') }}"></script>
    <script src="{{ asset('assets/custom/js/payment.js') }}"></script>
    <script>
        var btnUpload = $("#upload_file"),
            btnOuter = $(".button_outer");
        btnUpload.on("change", function(e) {
            var ext = btnUpload.val().split('.').pop().toLowerCase();
            if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                $(".error_msg").text("Not an Image...");
            } else {
                $(".error_msg").text("");
                btnOuter.addClass("file_uploading");
                setTimeout(function() {
                    btnOuter.addClass("file_uploaded");
                }, 3000);
                var uploadedFile = URL.createObjectURL(e.target.files[0]);
                setTimeout(function() {
                    $("#uploaded_view").append('<img src="' + uploadedFile + '" />').addClass("show");
                }, 3500);
            }
        });
        $(".file_remove").on("click", function(e) {
            $("#uploaded_view").removeClass("show");
            $("#uploaded_view").find("img").remove();
            btnOuter.removeClass("file_uploading");
            btnOuter.removeClass("file_uploaded");
        });

        $(document).ready(function() {
            $('.datepicker').datetimepicker({
                timepicker: false,
                inline: false,
                format: 'Y-m-d',
            });
            $('.timepicker').datetimepicker({
                datepicker: false,
                inline: false,
                format: 'H:i',
            });
        })

        saveBankTransfer = function() {
            event.preventDefault();
            let url_webpage = $('#url_webpage').val();
            let frm_data = new FormData($('#frm_bankTransfer')[0]);
            // frm_data.append('payment_amount', document.getElementById('payment_amount').value)
            btnLoading(2, 'UPLOAD', '#btn-submit')

            $.ajax({
                url: "/payment-save",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function(xhr) {
                    let rules = {
                        image_pay: 'required',
                        date_pay: 'required',
                        time_pay: 'required',
                        thai_bank: 'required',
                        bank_id: 'required'
                    }

                    let messages = {
                        image_pay: "{{ __('frontend.image_must_be_up') }}",
                        date_pay: "{{ __('frontend.transfer_date') }}",
                        time_pay: "{{ __('frontend.transfer_time') }}",
                        thai_bank: "{{ __('frontend.frnd_56') }}",
                        bank_id: "{{ __('frontend.frnd_57') }}"
                    }

                    mwz_frm_validate($("#frm_bankTransfer"), rules, messages)
                    if (!$("#frm_bankTransfer").valid()) {
                        btnLoading(1, 'UPLOAD', '#btn-submit')
                    }
                    return $("#frm_bankTransfer").valid();
                },
                success: function(resp) {
                    if (resp.status == 'success') {
                        top.window.location.href = url_webpage + locale_lang() + "complete/" + resp.order_code;
                    }else{
                        document.getElementById("btn-submit").innerHTML = "{{ __('frontend::lang.lang_title_112') }}"
                        document.getElementById("error_resp").innerHTML = resp.msg
                    }
                },
            });
        }
    </script>
@endsection