@extends('TabbyTest.Layout')

@push('styles')
    <style>
        body {
            background-color: #f8f9fa; /* Grey background */
        }

        .header {
            background-color: #ffffff; /* White background */
            padding: 20px 0;
            text-align: center;
        }

        .payment-options {
            background-color: #6c757d; /* Grey background */
            padding: 20px;
            color: #ffffff; /* White text */
            text-align: center;
        }

        .info-card {
            background-color: #ffffff; /* White background */
            border: 1px solid #dcdcdc; /* Light grey border */
            border-radius: 8px;
            margin: 1rem 0;
        }

        /*body {*/
        /*    font-family: Arial, sans-serif;*/
        /*    background-color: #f0f0f0;*/
        /*    padding: 20px;*/
        /*}*/

        .payment-option {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            background-color: #fff;
            padding: 1rem;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            flex-direction: column;
        }

        .payment-option .checkout-header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center
        }

        .payment-option .checkout-body {
            width: 100%
        }

        .payment-option img {
            max-width: 50px;
            margin-right: 10px;
        }

        .payment-option label {
            flex-grow: 1;
        }

        #payment-card img {
            max-width: 50px;
        }

        #payment-card .card.bg-white{
            display: flex;
            align-items: center;
            font-size: 85%;
            padding: 1rem;
            height: 100px;
        }

        #errors {
            display: none;
        }
    </style>
@endpush

@section('content')

    <!-- Modal -->
    <div class="modal fade" id="payment-form" 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">
                    <div id="errors" class="alert alert-danger"></div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" />
                    </div>

                    <div class="form-group">
                        <label for="email">Phone Number</label>
                        <input type="email" class="form-control" id="phone_number" />
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="check-payment" class="btn btn-success checkout-btn mt-3">Pay Now</button>
                </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 class="payment-option disabled">

                    <div class="checkout-header">

                        <label>
                            <input type="radio" name="payment_option" value="credit_card" disabled> Debit / Credit Card
                        </label>

                        <img src="/assets/images/icons/mastercard.svg" alt="Credit Card">
                        <img src="/assets/images/icons/visa.svg" alt="Credit Card">

                    </div>
                </div>

                <div class="payment-option">

                    <div class="checkout-header">
                        <label>
                            <input type="radio" name="payment_option" value="tabby" checked> Pay in 4. No interest, no fees.
                        </label>

                        <img src="/assets/images/icons/tabby.svg" alt="Tabby">
                    </div>

                    <div class="checkout-body">
                        <div id="tabbyCard"></div>
{{--                        <p class="text-muted">No fees, pay with any card.</p>--}}

{{--                        <div id="payment-card" class="row row-cols-2 row-cols-md-4 row-cols-lg-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-1">--}}
{{--                                    <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">--}}
{{--                                    <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">--}}
{{--                                    <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">--}}
{{--                                    <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>--}}

                    </div>

                </div>

{{--                <form action="/test/tabby/redirect" method="POST">--}}
{{--                    @csrf--}}
{{--                    --}}
{{--                </form>--}}

                <button data-target="#payment-form" data-toggle="modal" type="submit" class="btn btn-success checkout-btn mt-3">Pay Now</button>
            </div>
        </div>
    </div>
@endsection

@push("scripts")
    <script>
        $('#check-payment').on('click', function () {
            const $this = $(this);

            $this.attr('disabled', true);

            $.post('/api/v1/check-payment', {
                _token: '{{ csrf_token() }}',
                email: $('#email').val(),
                phone_number: $('#phone_number').val(),
            }).then(function (response) {
                $this.attr('disabled', false);

                const data = response.data;

                console.log(data)

                if(data.status == 'created') {
                    $('#errors').hide();
                    window.location.href = data.url
                }else {
                    $('#errors').show().html('{{trans('validation.not_available')}}');
                }
            })
        });
    </script>


    <script src="https://checkout.tabby.ai/tabby-card.js"></script>

    <script>
        new TabbyCard({
            selector: '#tabbyCard', // empty div for TabbyCard.
            currency: 'SAR', // required, currency of your product. AED|SAR|KWD|BHD|QAR only supported, with no spaces or lowercase.
            lang: 'en', // Optional, language of snippet and popups.
            price: 500, // required, total price or the cart. 2 decimals max for AED|SAR|QAR and 3 decimals max for KWD|BHD.
            size: 'narrow', // required, can be also 'wide', depending on the width.
            theme: 'black', // required, can be also 'default'.
            header: false // if a Payment method name present already.
        });
    </script>
@endpush