modunawa/resources/views/shop/checkout.blade.php_221104

@extends('views.layouts.master')
<link rel="stylesheet" href="{{ csset('/themes/pro/modunawa/resources/css/checkout.css') }}">
@section('content')

<!--=====================================
                    BANNER PART START
        =======================================-->
        <section class="inner-section single-banner">
            <div class="container">
                <h2>결제하기</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <!--<li class="breadcrumb-item"><a href="shop-4column.html">shop grid</a></li>-->
                    <li class="breadcrumb-item active" aria-current="page">결제하기</li>
                </ol>
            </div>
        </section>
        <!--=====================================
                    BANNER PART END
        =======================================-->


        <!--=====================================
                    CHECKOUT PART START
        =======================================-->
        <section class="inner-section checkout-part">
            <form class="container" id="checkout-form" action="{{ route('checkout.store') }}" method="POST">
                <input type="hidden" name="ship_fee" value="{{ $checkoutCharge['charge_amt'] }}">
                @csrf
                <div class="row">
                    <!--
					<div class="col-lg-12">
                        <div class="alert-info">
                            <p>Returning customer? <a href="login.html">Click here to login</a></p>
                        </div>
                    </div>
					-->
                    <div class="col-lg-12 order">
                        <div class="account-card">
                            <div class="account-title">
                                <h4>Your order</h4>
                            </div>
                            <div class="account-content">
                                <div class="table-scroll">
                                    <table class="table-list">
                                        <thead>
                                            <tr>
                                                <th scope="col">Serial</th>
                                                <th scope="col">Product</th>
                                                <th scope="col">Name</th>
                                                <th scope="col">Price</th>
                                                <th scope="col">brand</th>
                                                <th scope="col">quantity</th>
                                                <th scope="col">action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        @forelse ($listType1Book['Book'][2]['Page'] ?? [] as $index => $cart)
                                            <tr>
                                                <td class="table-serial"><h6>{{ $cart['C3'] }}</h6></td>
                                                <td class="table-image"><img src="{{ env('MEDIA_URL') . $cart['C2']  }}" alt="product"></td>
                                                <td class="table-name"><h6>{{ $cart['C4'] }}</h6></td>
                                                <td class="table-price"><h6>{{ number_format($cart['C6']) }} 원<!--<small>/kilo</small>--></h6></td>
                                                <td class="table-brand"><h6>{{ $cart['C5'] }}</h6></td>
                                                <td class="table-quantity">
                                                    <h6>
                                                        <div class="product-action">
                                                            <button type="button" class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i></button>
                                                            <input class="action-input" title="Quantity Number" onchange="cart_qty_update(this, {{ $cart['Id'] }})"
                                                                   type="text" min="1" value="{{ (int)$cart['C7'] }}">
                                                            <button type="button" class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button>
                                                        </div>
                                                    </h6>
                                                </td>
                                                <td class="table-action">
{{--                                                    <a class="view" href="#" title="Quick View" data-bs-toggle="modal" data-bs-target="#product-view"><i class="fas fa-eye"></i></a>--}}
                                                    <button type="button" class="trash" onclick="cart_delete({{ $cart['Id'] }})" title="Remove Wishlist">
                                                        <i class="icofont-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td class="text-center" colspan="7">쇼핑카트가 비어있습니다</td>
                                            </tr>
                                        @endforelse
                                        </tbody>
                                    </table>
                                </div>
                                <div class="chekout-coupon">
                                    <button type="button" class="coupon-btn">쿠폰 코드가 있습니까?</button>
                                    <form class="coupon-form">
                                        <input type="text" placeholder="Enter your coupon code">
                                        <button type="submit"><span>확인</span></button>
                                    </form>
                                </div>
                                <div class="checkout-charge">
                                    <ul>
                                        <li>
                                            <span>Sub total</span>
                                            <span>{{ number_format($checkoutCharge['sub_total']) }} 원</span>
                                        </li>
                                        <li>
                                            <span>배송료</span>
                                            <span>{{ number_format($checkoutCharge['charge_amt']) }} 원</span>
                                        </li>
                                        <li>
                                            <span>할인</span>
                                            <span>0 원</span>
                                        </li>
                                        <li>
                                            <span>Total<small>(VAT 포함)</small></span>
                                            <span>{{ number_format($checkoutCharge['total']) }} 원</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
{{--                    <div class="col-lg-12">--}}
{{--                        <div class="account-card">--}}
{{--                            <div class="account-title">--}}
{{--                                <h4>배송일정</h4>--}}
{{--                            </div>--}}
{{--                            <div class="account-content">--}}
{{--                                <div class="row">--}}
{{--                                    <div class="col-md-6 col-lg-4 alert fade show">--}}
{{--                                        <div class="profile-card schedule">--}}
{{--                                            <h6>express</h6>--}}
{{--                                            <p>90 min express delivery</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-md-6 col-lg-4 alert fade show">--}}
{{--                                        <div class="profile-card schedule">--}}
{{--                                            <h6>8am-10pm</h6>--}}
{{--                                            <p>8.00 AM - 10.00 PM</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                    <div class="col-md-6 col-lg-4 alert fade show">--}}
{{--                                        <div class="profile-card schedule">--}}
{{--                                            <h6>Next day</h6>--}}
{{--                                            <p>Next day or Tomorrow</p>--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="col-lg-12">
                        <div class="account-card">
                            <div class="account-title">
                                <h4>연락처</h4>
                                <button type="button" class="medium-btn" data-serialize-form="#checkout-form" data-attr="{{ route('contact.index', [ 'seq_no' =>  $listType1Book['Book'][0]['Page'] ? (int)$listType1Book['Book'][0]['Page'][count($listType1Book['Book'][0]['Page']) - 1]['C1'] + 1 : 0 ]) }}">
                                    연락처 추가
                                </button>
                            </div>
                            <div class="account-content">
                                <div class="row" id="company-contact-bd-div">
                                    @forelse ($listType1Book['Book'][0]['Page'] ?? [] as $contact)
                                        <div class="col-md-6 col-lg-4 alert fade show">
                                            <div class="profile-card contact">
                                                <h6>(<span class="sort-txt">{{ DataConverter::execute($contact['C2'], "sort('company-contact-bd')") }}</span>) <span class="ship-contact-txt">{{ $contact['C3'] }}</span></h6>
                                                <p class="ship-mobile-txt">{{ $contact['C4'] }}</p>
                                                <ul>
                                                    <li><button type="button" class="edit icofont-edit medium-btn" title="Edit This" data-attr="{{ route('contact.show', $contact['Id']) }}"></button></li>
                                                    <li><button type="button" class="trash icofont-ui-delete destroy-btn" title="Remove This" data-attr="{{ route('contact.destroy', $contact['Id']) }}"></button></li>
                                                </ul>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col">
                                            비어있습니다
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="account-card">
                            <div class="account-title">
                                <h4>배송지</h4>
                                <button type="button" class="medium-btn" data-attr="{{ route('address.index', [ 'seq_no' =>  $listType1Book['Book'][1]['Page'] ? (int)$listType1Book['Book'][1]['Page'][count($listType1Book['Book'][1]['Page']) - 1]['C1'] + 1 : 0 ]) }}">주소 추가</button>
                            </div>
                            <div class="account-content">
                                <div class="row" id="company-destina-bd-div">
                                    @forelse ($listType1Book['Book'][1]['Page'] ?? [] as $index => $address)
                                        <div class="col-md-6 col-lg-4 alert fade show">
                                            <div class="profile-card address">
                                                <h6 class="sort">{{ DataConverter::execute($address['C2'], "sort('company-destina-bd')") }}</h6>
                                                <p>(<span class="ship-zip-code-txt">{{ $address['C3'] }}</span>) <span class="ship-addr1-txt">{{ $address['C4'] }}</span> <span class="ship-addr2-txt">{{ $address['C5'] }}</span></p>
                                                <ul class="user-action">
                                                    <li><button type="button" class="edit icofont-edit medium-btn" title="Edit This" data-attr="{{ route('address.show', $address['Id']) }}"></button></li>
                                                    <li><button type="button" class="trash icofont-ui-delete destroy-btn" title="Remove This" data-attr="{{ route('address.destroy', $address['Id']) }}"></button></li>
                                                </ul>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="col">
                                            비어있습니다
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="account-card page-pc">
                            <div class="account-title">
                                <h4>결제방법</h4>
                            </div>
                            <div class="account-content" id="paymethod-div">
                                <div class="d-flex align-items-center">
                                    @forelse ($codeTitle['paymethod']['sorder'] ?? [] as $key => $paymethod)
                                        @if ($paymethod['Code'] !== '')
                                            <div class="paymethod-div">
                                                <input type="radio" value="{{ $paymethod['Code'] }}" name="paymethod" id="paymethod-radio-{{ $key }}" {{ $key === 'RM' ? 'checked' : '' }}>
                                                <label for="paymethod-radio-{{ $key }}" class="form-label">{{ $paymethod['Title'] }}</label>
                                            </div>
                                        @endif
                                    @empty
                                        <div class="col">
                                            비어있습니다
                                        </div>
                                    @endforelse
                                </div>
                                <div class="virtual-account-payment pay-type-content">
                                    <p class="validate-message" style="display: none;"></p>
                                    <ul class="pay-type-sections">
                                        <li class="deposit-bank-wrap pay-type-section">
                                            <label for="deposit-bank-select" class="line-title">은행명</label>
                                            <div class="line-data">
                                                <select id="deposit-bank-select" onchange="change_remit_account(this)">
                                                    <option value="" selected>선택</option>
                                                    @forelse ($listType1Book['Book'][4]['Page'] ?? [] as $index => $setup)
                                                        @php
                                                            $remitAccountSetup = json_decode($setup['C1'], true);
                                                        @endphp
                                                        <option data-holder-name="{{ $remitAccountSetup['HolderName'] }}"
                                                                value="{{ $remitAccountSetup['AccountNo'] }}">{{ $remitAccountSetup['BankName'] }}</option>
                                                    @empty
                                                    @endforelse
                                                </select>
                                                <p class="validate-message" style="display: none;">은행을 선택해 주세요</p>
                                                <p class="pay-box__deactivated-payment-notice" id="bank-name-txt"></p>

                                            </div>
                                        </li>
                                        <li class="payBox-section pay-type-section mt-2">
                                            <label class="line-title d-block">계좌번호</label>
                                            <input type="text" class="form-text" id="account-no-txt" readonly>
                                        </li>

                                        <li class="payBox-section pay-type-section mt-2">
                                            <label class="line-title d-block">예금주</label>
                                            <input type="text" class="form-text" id="holder-name-txt" readonly>
                                        </li>

                                        <li class="payBox-section pay-type-section mt-2">
                                            <label class="line-title d-block">입금자명</label>
                                            <input type="text" class="form-text" name="remit_name" id="remit-name-txt" required>
                                        </li>
                                    </ul>
                                </div>

                                <dl class="virtual-account-payment-explain mt-2">
                                    <dt class="mb-2">무통장입금 시 유의사항</dt>
                                    <dd>입금완료 후 상품품절로 인해 자동취소된 상품은 환불 처리해 드립니다.</dd>
                                    <dd>무통장입금 결제 시 부분취소가 불가하며 전체취소 후 다시 주문하시기 바랍니다.</dd>
                                    <dd>은행 이체 수수료가 발생될 수 있습니다. 입금시 수수료를 확인해주세요.</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="account-card mb-0">
                            <div class="account-title">
                                <h4>결제하기</h4>
{{--                                <button data-bs-toggle="modal" data-bs-target="#payment-add">지갑 추가</button>--}}
                            </div>
{{--                            <div class="account-content">--}}
{{--                                <div>--}}
{{--                                    <label class="line-title d-block">입금자명</label>--}}
{{--                                    <input type="text" class="form-text" name="remit_name" id="remit-name-txt" required>--}}
{{--                                </div>--}}
{{--							</div>--}}

                            <div class="checkout-check">
                                <input type="checkbox" id="checkout-check">
                                <label for="checkout-check">약관동의 <a href="{{ route('policy.index') }}">약관보기</a>.</label>
                            </div>
                            <div class="checkout-proced">
{{--                                <a href="/checkout-ok" class="btn btn-inline">결제하기</a>--}}
                                <button type="submit" id="checkout-btn" class="btn btn-inline button-prevent-multiple-submits">
                                    <i class="spinner fa fa-spinner fa-spin"></i>
                                    결제하기
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        <!--=====================================
                    CHECKOUT PART END
        =======================================-->


        <!--=====================================
                    MODAL ADD FORM START
        =======================================-->

        <!-- payment add form -->
        <div class="modal fade" id="payment-add">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <button type="button" class="modal-close" data-bs-dismiss="modal"><i class="icofont-close"></i></button>
                    <form class="modal-form form-prevent-multiple-submits" action="{{ route('wallet.store') }}" method="POST">
                        @csrf
                        <div class="form-title">
                            <h3>지갑 추가</h3>
                        </div>
                        <div class="form-group">
                            <label class="form-label">토큰</label>
                            <input class="form-control" name="token" type="text" placeholder="Enter your token number" required>
                        </div>
                        <button type="button" class="form-btn button-prevent-multiple-submits" type="submit">
                            <i class="spinner fa fa-spinner fa-spin"></i>
                            저장
                        </button>
                    </form>
                </div>
            </div>
        </div>
@endsection

@push('modal')
    @include('views.modals.medium')
@endpush

@push('js')
    <script>
        $('form').on('submit', function() {
            event.preventDefault()

            const company_contact_bd_div = '#company-contact-bd-div .profile-card'
            const company_destina_bd_div = '#company-destina-bd-div .profile-card'
            const deposit_bank_select = '#deposit-bank-select option:selected'

            if (isEmpty($(deposit_bank_select).val())) {
                iziToast.info({ title: 'Info', message: '무통장입금 계좌를 선택하세요' })
                return
            }

            if (! $(company_contact_bd_div).hasClass('active')) {
                iziToast.info({ title: 'Info', message: '연락처를 선택하세요' })
                return
            }

            if (! $(company_destina_bd_div).hasClass('active')) {
                iziToast.info({ title: 'Info', message: '배송지를 선택하세요' })
                return
            }

            if (! $('#checkout-check').prop('checked')) {
                iziToast.info({ title: 'Info', message: '약관을 확인하세요' })
                return
            }

            click_submit_btn(this)

            const ship_contact = $(company_contact_bd_div + '.active').find('.ship-contact-txt').text()
            const ship_mobile = $(company_contact_bd_div + '.active').find('.ship-mobile-txt').text()

            const ship_zip_code = $(company_destina_bd_div + '.active').find('.ship-zip-code-txt').text()
            const ship_addr1 = $(company_destina_bd_div + '.active').find('.ship-addr1-txt').text()
            const ship_addr2 = $(company_destina_bd_div + '.active').find('.ship-addr2-txt').text()

            const remit_account = $(deposit_bank_select).text() + ' ' + $('#account-no-txt').val() + ' ' + $('#holder-name-txt').val()

            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_contact', 'value': ship_contact }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_mobile', 'value': ship_mobile }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_mobile', 'value': ship_mobile }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_zip_code', 'value': ship_zip_code }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_addr1', 'value': ship_addr1 }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'ship_addr2', 'value': ship_addr2 }))
            $(this).append($('<input>', { 'type': 'hidden', 'name': 'remit_account', 'value': remit_account }))

            this.submit();
        });

        function change_remit_account($this) {
            $('.pay-type-content #account-no-txt').val($($this).val())
            $('.pay-type-content #holder-name-txt').val($($this).find('option:selected').data('holder-name'))
        }
    </script>
@endpush