@extends('layouts.usermaster')

@section('styles')
    <style>
        .payment-card-container {
            position: relative;
            padding: 1rem;
        }

        .payment-card-container::before {
            content: "";
            width: 30px;
            height: 30px;
            background-color: var(--primary);
        }

        .payment-card-container .form-check-input {
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: -0.3rem;
        }

        .payment-card.form-check-input {
            width: 100% !important;
            height: 100% !important;
            border-radius: 6px !important;
            border: 1px solid rgb(31, 96, 182);
            background: transparent;
            inset-block-start: 0rem;
            margin-top: 0px !important;
            z-index: 0;
        }

        .payment-card.form-check-input:checked {
            width: 100%;
            height: 100%;
            border: 1px solid var(--primary);
            background: var(--primary01);
            border-radius: 6px;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        .payment-card-style {
            height: 40px;
            border-radius: 5px;
        }

        .payment-card .form-check-label {
            position: relative;
            z-index: 9;
        }

        .check-active {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            position: absolute;
            height: 30px;
            right: -0.7rem;
            top: -0.7rem;
            background: #fff;
            border-radius: 50px;
            color: var(--primary);
            padding: 5px;
            z-index: 9;
            font-size: 15px;
            border: 1px solid var(--primary);
        }
    </style>
@endsection

@section('content')
    <section class="">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-9">
                    <div class="row">

                        <div class="heading-section mt-5 text-center">
                            <!-- <div class="heading-subtitle"><span class="landing-section-heading">Cart</span></div> -->
                            <div class="heading-title mt-5"><h3>Quick Checkout</h3></div>
                            <div class="heading-description mt-5 mb-5"><h4>Enjoy peace of mind as you finalize your order with our secure payment process.</h4></div>
                        </div>

                        <div class="col-xl-12 col-sm-12 mt-3">
                            <div class="card custom-card">
                                <div class="card-header border-0 d-md-flex d-block">
                                    <div class="card-title text-center d-flex justify-content-between w-100 align-items-center">
                                        <h4 class="mb-0"> Ordered Item</h4>
                                    </div>

                                </div>

                                @if (isset($transaction))
                                    <div class="card-body">
                                        <div class="card custom-card">
                                            <div class="card-header border-0 d-md-flex d-block">
                                                <div class="card-title mb-3 ">Invoice Summary</div>
                                            </div>
                                            <div class="card-body p-0">

                                                <div class="p-0">
                                                    <table class="table table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th class="fw-bold fs-16">Item</th>
                                                                <th class="fw-bold fs-14">Quantity</th>
                                                                <th class="fw-bold fs-14">Amount</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @php
                                                                $subtotal = 0;
                                                            @endphp
                                                            @foreach ($transaction->customInvoiceElements as $elements)
                                                                <tr>
                                                                    <td class="fs-14">{{ $elements->title }}</td>
                                                                    <td class="fs-14">{{ $elements->quantity }} {{ lang('Quantity') }}</td>
                                                                    <td class="fs-14">{{ getCurrencyPerTicket($elements->amount) }}</td>
                                                                </tr>
                                                                @php
                                                                    $subtotal += $elements->amount;
                                                                @endphp
                                                            @endforeach
                                                        </tbody>
                                                        <tfoot class="bg-gray-100">
                                                            <tr>
                                                                <td class="fs-14">Subtotal :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-14 text-primary">{{ getCurrencyPerTicket($subtotal) }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="fs-14">Tax % :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-14 text-primary">{{ $transaction->allInvoices->taxPercent != null ? $transaction->allInvoices->taxPercent : '-' }}</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="fs-22">Total :</td>
                                                                <td></td>
                                                                <td class="fw-semibold fs-22 fw-bold text-primary">{{ getCurrencyPerTicket($transaction->amount) }}</td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                        @php
                                            $enablePaypal = setting('enablePaypal');
                                            $enableStripe = setting('enableStripe')
                                        @endphp
                                        <form id="invoiceCheckoutForm" method="POST">
                                            @csrf
                                            <input type="hidden" name="invoiceId" value="{{ encrypt($transaction->invoiceId) }}">
                                            <div class="row justify-content-center">
                                                @if ($enablePaypal == 'on')
                                                    <div class="col-sm-6">
                                                        <div class="form-check payment-card-container mb-0">
                                                            <input id="paypalCheckBox" name="paymentMethod" type="radio" class="payment-card form-check-input " value="paypal">
                                                        <i class="ti ti-check check-active fw-semibold d-none paypalcheck"></i>
                                                            <div class="text-center form-check-label">
                                                                <div class=" d-block align-items-center justify-content-between">
                                                                    <div class="">
                                                                        <span class="">
                                                                            <img src="{{ asset('build/assets/images/payments/2.png') }}" alt="" class="payment-card-style">
                                                                        </span>
                                                                    </div>                                                                   
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if ($enableStripe == 'on')
                                                    <div class="col-sm-6">
                                                        <div class="form-check payment-card-container mb-0">
                                                            <input id="stripeCheckBox" name="paymentMethod" type="radio" class="payment-card form-check-input" value="stripe">
                                                            <i class="ti ti-check check-active fw-semibold d-none stripecheck"></i>
                                                            <div class="text-center form-check-label">
                                                                <div class=" d-block align-items-center justify-content-between">
                                                                    <div class="">
                                                                        <span class="">
                                                                            <img src="{{ asset('build/assets/images/payments/stripe.png') }}" alt="" class="payment-card-style">
                                                                        </span>
                                                                    </div>                                                                   
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                                <span class="text-danger" id="paymentRequired"></span>
                                            </div>
                                            @if ($enablePaypal == 'on' || $enableStripe == 'on')
                                                <div class="d-flex justify-content-center mt-4">
                                                    <div class="text-center me-3">
                                                        <button class="btn btn-success btn-w-lg">{{lang('Pay Now')}}</button>
                                                    </div>
                                                </div>
                                            @endif
                                        </form>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>

        let stripeDefault = @json(setting('stripeDefault'));
        let paypalDefault = @json(setting('paypalDefault'));

        document.querySelectorAll(".payment-card").forEach((ele) => {

            ele.onclick = (element) => {
                document.querySelectorAll(".payment-card").forEach((newele) => {
                    newele.parentNode.querySelector("i").classList.add('d-none')
                })
                element.target.parentNode.querySelector("i").classList.remove('d-none')
            }
        });

        if(stripeDefault == 'on'){
            if(document.querySelector('#stripeCheckBox')){
                document.querySelector('#stripeCheckBox').click()
            }
        }else{
            if(document.querySelector('#paypalCheckBox')){
                document.querySelector('#paypalCheckBox').click()
            }
        }

        @if (isset($transaction))
            document.querySelector('#invoiceCheckoutForm').addEventListener('submit', (ele) => {
                ele.preventDefault();
                document.getElementById('paymentRequired').innerHTML = '';
                document.querySelector('.btn-w-lg').disabled = true;
                document.querySelector('.btn-w-lg').innerHTML = '{{ lang('Loading...') }}';

                let formData = new FormData(ele.target);
                fetch(SITEURL+ '/customer/invoiceCheckout', {
                    method: "POST",
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                })
                .then(function (response) {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(function (data) {
                    if (data.error) {
                        document.getElementById('paymentRequired').innerHTML = data.error;
                        document.querySelector('.btn-w-lg').disabled = false;
                        document.querySelector('.btn-w-lg').innerHTML = "{{ lang('Pay Now') }}";
                        return;
                    }
                    if (data?.paypalLink) {
                        window.location.href = data.paypalLink;
                        return;
                    }
                    if (data?.paypalError) {
                        toastr.error(data.paypalError);
                        document.querySelector('.btn-w-lg').disabled = false;
                        document.querySelector('.btn-w-lg').innerHTML = '{{ lang('Pay Now') }}';
                        return;
                    }
                    if (data.session_id) {
                        window.location.href = data.session_id;
                        return;
                    }
                })
                .catch(function (error) {
                // Handle error here
                });
            });
        @endif


    </script>
@endsection