@extends('TabbyTest.Layout')

@section('content')
    <!-- Modal -->
{{--    <div class="modal fade" id="tabbyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"--}}
{{--         aria-hidden="true">--}}
{{--        <div class="modal-dialog" role="document">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header">--}}
{{--                    <h5 class="modal-title" id="exampleModalLabel">--}}
{{--                        <img src="{{asset('assets\images\icons/tabby.svg')}}" alt="Visa" style="max-width: 100px"/>--}}
{{--                    </h5>--}}

{{--                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">--}}
{{--                        <span aria-hidden="true">&times;</span>--}}
{{--                    </button>--}}
{{--                </div>--}}
{{--                <div class="modal-body">--}}



{{--                    <h3>Split on 4 interest-free payments of 125 SAR</h3>--}}
{{--                    <h6 class="text-muted">Get what you love, split the cost, no fees.</h6>--}}

{{--                    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-4 mt-4 mb-4">--}}
{{--                        <div class="col">--}}
{{--                            <div class="card bg-white border rounded-2xl border-gray-300 text-center">--}}
{{--                                <img src="{{ asset('assets/images/icons/Graph-25.svg') }}" alt="25"--}}
{{--                                     class="img-fluid mb-3">--}}
{{--                                <div class="flex flex-col">--}}
{{--                                    <span class="text-xl">25%</span>--}}
{{--                                    <span class="text-xs text-muted">Today</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="card bg-white border rounded-2xl border-gray-300 text-center">--}}
{{--                                <img src="{{ asset('assets/images/icons/Graph-50.svg') }}" alt="50"--}}
{{--                                     class="img-fluid mb-3">--}}
{{--                                <div class="flex flex-col">--}}
{{--                                    <span class="text-xl">50%</span>--}}
{{--                                    <span class="text-xs text-muted">In 1 month</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="card bg-white border rounded-2xl border-gray-300 text-center">--}}
{{--                                <img src="{{ asset('assets/images/icons/Graph-75.svg') }}" alt="75"--}}
{{--                                     class="img-fluid mb-3">--}}
{{--                                <div class="flex flex-col">--}}
{{--                                    <span class="text-xl">75%</span>--}}
{{--                                    <span class="text-xs text-muted">In 2 months</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        <div class="col">--}}
{{--                            <div class="card bg-white border-2 rounded-2xl border-primary text-center">--}}
{{--                                <img src="{{ asset('assets/images/icons/Graph-100.svg') }}" alt="100"--}}
{{--                                     class="img-fluid mb-3">--}}
{{--                                <div class="flex flex-col">--}}
{{--                                    <span class="text-xl">100%</span>--}}
{{--                                    <span class="text-xs text-muted">In 3 months</span>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <h5>How it works:</h5>--}}

{{--                    <ul>--}}
{{--                        <li>Choose tabby at checkout</li>--}}
{{--                        <li>Enter your information and add your debit or credit card.</li>--}}
{{--                        <li>Split your purchases in 4 monthly payments.</li>--}}
{{--                        <li>We'll send you a reminder when your next payment is due.</li>--}}
{{--                    </ul>--}}
{{--                </div>--}}

{{--                <button type="button" class="btn btn-success me-5 ms-5 mb-2" data-dismiss="modal">Continue Shopping--}}
{{--                </button>--}}

{{--                <div class="payments p-4">--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-6 d-flex align-items-center">--}}
{{--                            <h6><small>Use any card with tabby</small></h6>--}}
{{--                        </div>--}}

{{--                        <div class="col-6">--}}
{{--                            <img src="{{asset('assets\images\icons/apple-pay.svg')}}" alt=""/>--}}
{{--                            <img src="{{asset('assets\images\icons/mastercard.svg')}}" alt=""/>--}}
{{--                            <img src="{{asset('assets\images\icons/visa.svg')}}" alt=""/>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

    <div class="container mb-5">
        <div class="row">
            <div class="col-md-6 col-12 offset-md-3">
                <!-- Information Card -->
                <div class="info-card p-4">
                    <div class="row">
                        <div class="col-md-6">
                            <img
                                src="https://mabet.com.sa/uploads/units/images/original/image-picker-15938fd0-40fb-40b3-9a1a-0c2e99358d43-68314-00002568f7c07f77jpg-3453.jpg"
                                alt="Apartment Image" class="img-fluid">
                        </div>

                        <div class="col-md-6">
                            <h4>
                                <a href="https://mabet.com.sa/ar/unit?q=astrah-alkhyal&from=2024-01-10&to=2024-01-11&id=11"
                                   target="_blank">Estrahat Alkhyal</a></h4>
                            <p>Location: <a
                                    href="https://www.google.com/maps/place/An+Naseem,+Jeddah+Saudi+Arabia/@21.5206707,39.2104209,14z/data=!3m1!4b1!4m15!1m8!3m7!1s0x15c3d01fb1137e59:0xe059579737b118db!2sJeddah+Saudi+Arabia!3b1!8m2!3d21.5291545!4d39.1610863!16zL20vMDFwazhi!3m5!1s0x15c3ce04753fe74b:0x97e75a632bce7825!8m2!3d21.5202768!4d39.2308587!16s%2Fg%2F1xtdzyq8?entry=ttu">Check
                                    apartment location</a></p>
                            <p>Details: Best Apartment you can find in Jeddah.</p>
                            <p>Amount to Pay: 500 SAR</p>
                        </div>
                    </div>
                </div>


                <div id="TabbyPromo"></div>

                <a href="{{url('/test/checkout')}}" class="btn btn-success checkout-btn mt-3">Pay Now</a>

            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
        new TabbyPromo({
            selector: '#TabbyPromo', // required, content of tabby Promo Snippet will be placed in element with that selector.
            currency: 'SAR', // required, currency of your product. AED|SAR|KWD|BHD|QAR only supported, with no spaces or lowercase.
            price: '500.00', // required, price or the product. 2 decimals max for AED|SAR|QAR and 3 decimals max for KWD|BHD.
            installmentsCount: 4, // Optional, for non-standard plans.
            lang: 'en', // Optional, language of snippet and popups, if the property is not set, then it is based on the attribute 'lang' of your html tag.
            source: 'product', // Optional, snippet placement; `product` for product page and `cart` for cart page.
            publicKey: '{{env('TABBY_SECRET_KEY')}}', // required, store Public Key which identifies your account when communicating with tabby.
            merchantCode: '{{env('MERCHANT_CODE')}}', // required, store Public Key which identifies your account when communicating with tabby.
        });
    </script>
@endpush