@php echo env('SQUARE_JS'); @endphp


<div class="row m-0 p-0 px-3" x-data="">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @if($exceptCreditCards)
            <li class="nav-item" role="presentation">
                <button class="nav-link @if($exceptCreditCards) active @endif" id="pills-card-tab" data-bs-toggle="pill" data-bs-target="#card" type="button" role="tab" aria-controls="pills-card" aria-selected="true"><i class="fas fa-credit-card" style="margin-right: 5px;"></i> Card</button>
            </li>
        @endif

        @if($exceptCash)
            <li class="nav-item" role="presentation">
                <button class="nav-link @if(!$exceptCreditCards && $exceptCash) active @endif" id="pills-cash-tab" data-bs-toggle="pill" data-bs-target="#cash" type="button" role="tab" aria-controls="pills-cash" aria-selected="false"><i class="far fa-money-bill-wave" style="margin-right: 5px;"></i> Cash</button>
            </li>
        @endif

        @if($exceptGiftCards)
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-giftcard-tab" data-bs-toggle="pill" data-bs-target="#giftcard" type="button" role="tab" aria-controls="pills-giftcard" aria-selected="false"><i class="fas fa-gift" style="margin-right: 5px;"></i> Gift Card</button>
            </li>
        @endif
    </ul>

    <div class="tab-content m-0 p-0" id="pills-tabContent">
        <div x-data="" class="tab-pane fade @if($exceptCreditCards) show active @endif" id="card" role="tabpanel" aria-labelledby="pills-card-tab" tabindex="0">

            <!-- Include saved payment methods -->
            @if(count($customerPaymentMethods)>=1)
                <select class="form-control mb-2" id="savedPaymentMethods">
                    <option value="">- Saved Payment Methods -</option>
                    @foreach($customerPaymentMethods as $customerPaymentMethod)
                        <option value="{!! $customerPaymentMethod['id'] !!}">
                            {{ $customerPaymentMethod['card_brand'] }} | ****-****-****-{{ $customerPaymentMethod['last_4'] }} | Exp: {{ $customerPaymentMethod['exp_month'] }}/{{ $customerPaymentMethod['exp_year'] }}
                        </option>
                    @endforeach
                </select>
                <div class="col-12 my-3 text-center">
                    - OR -
                </div>
            @endif

            <!-- Include Square CC Form -->
            <div id="card-container"></div>

            @if($allowCustomerToSaveCardOnFile)
                <div class="row mt-0 mb-3" style="clear:both;text-align:right;" id="saveCardOnFile_wrapper">
                    <div class="col">
                        <label>
                            <input class="mr-1" type="checkbox" id="saveCardOnFile" data-checkbox="saveCardOnFile" />
                            Save this card for future use?
                        </label>
                    </div>
                </div>
            @endif

            <button type="button" id="sq-card-button" class="btn btn-primary w-100 py-3">
                <i class="far fa-smile-beam"></i> Submit Order
                <div style="font-size: 13px;font-weight:normal;">(Click only once to avoid duplicate orders)</div>
            </button>


            @if($processingFee)
                <div class="row m-0">
                    <div class="col-0 text-center text-muted mt-2" style="font-size:13px;">
                        * A {!! $processingFee !!}% processing fee is added when paying by card
                    </div>
                </div>
            @endif

        </div>


        <div class="tab-pane fade @if(!$exceptCreditCards && $exceptCash) show active @endif" id="cash" role="tabpanel" aria-labelledby="pills-cash-tab" tabindex="0">
            <div class="alert alert-info text-center">
                Please pay with Cash when you receive your order, Thank you <i class="far fa-smile"></i>
            </div>
            <button type="button" x-on:click="payingByCash($event.target)" class="btn btn-primary w-100 py-3">
                <i class="far fa-smile-beam"></i> Submit Order
                <div style="font-size: 13px;font-weight:normal;">(Click only once to avoid duplicate orders)</div>
            </button>
        </div>

        <div class="tab-pane fade" id="giftcard" role="tabpanel" aria-labelledby="pills-giftcard-tab" tabindex="0">

            <div id="gift-card-container"></div>
            <button type="button" id="gift-card-button" class="btn btn-primary w-100 py-3">
                <i class="far fa-smile-beam"></i> Submit Order
                <div style="font-size: 13px;font-weight:normal;">(Click only once to avoid duplicate orders)</div>
            </button>
        </div>

    </div>

</div>



<script>

    function payingByCash(el){
        var button = $(el);
        loadButton(button);
        @this.processPayment(false,false,true).then(function(result){
            console.log(result);
            unloadButton(button);
            if(result.status===false){
                // handle error
                swal({
                    text: result.message,
                    icon: 'warning',
                    dangerMode: true,
                    buttons: ['OK'],
                    timer: 5000,
                }).then(function(isConfirm) {
                    console.log(isConfirm);
                })
            }else{
                // handle success
                swal({
                    text: result.message,
                    icon: 'success',
                    dangerMode: true,
                    buttons: ['OK'],
                    timer: 3000,
                }).then(function(isConfirm) {
                    console.log(isConfirm);
                    // We should redirect to the order details page
                    if(result.redirectUrl){
                        $(".pageLoader-wrapper").attr("x-show","true");
                        window.location.href = result.redirectUrl;
                    }

                });
            }
        });
    }






    async function main() {

        const payments = Square.payments('