@extends('layouts.web')

@section('content')
<style>
    .StripeElement {
        box-sizing: border-box;
        height: 40px;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
        margin-bottom: 10px;
        width: 100%;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }

    .form-row {
        margin-bottom: 20px;
    }

    .form-row label {
        display: block;
        margin-bottom: 5px;
    }

    .form-row .error-message {
        color: #fa755a;
        font-size: 14px;
        margin-top: 5px;
    }


    #card-errors {
        color: #fa755a;
    }

    .payment_box {
        background-color: #f6f3f3;
    }

    .payment_box {
        clear: both;
        padding: 20px;
        margin-top: 10px;
    }

    .stripe-content a {
        color: #212529;
        text-decoration: none;
    }
    #payment-form{
        padding: 20px;
        background: #f2ece269;
    }
</style>
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <h2>Appointment</h2>
            <a href="{{ route('homepage') }}">Home</a>> <span>Appointment</span>
        </div>
    </div>
</section>

<section class="contact-info contact-page-main 100-vh">
    <div class="container">
        <div class="row">

            <div class="col-12">
                @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif
                @if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
                @endif
                <div class="steps-main-cart">
                    <div class="row mt-3">
                        <div class="col-12">
                            <h2 class="booking-heading">Review & Payment:</h2>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th colspan="2" scope="col">Product</th>
                                <!-- <th scope="col">Price</th>
                                <th scope="col">Quantity</th> -->
                                <th scope="col" class="text-end">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th colspan="2" scope="row">
                                    <div class="d-inline float-start">
                                        <img src="{{ $data['product_img'] }}" width="100" />
                                    </div>
                                    <div class="d-inline float-start ms-0 ms-md-3">
                                        <h4>{{$data['service']->name}}</h4>
                                        <p>Appointment Details:</p>
                                        <p>Date: {{ $data['appointment_date']}}</p>
                                        <p>Time: {{ date('h:i A',strtotime($data['from_time'])) }}</p>
                                    </div>
                                </th>
                                <!-- <td>{{ '$'.number_format($data['price'], 2) }}</td>
                                <td>1</td> -->
                                <td class="text-end">{{ '$'.number_format($data['price'], 2) }}</td>
                            </tr>
                            <tr class="py-3">
                                <td colspan="2" class="text-end border-0 lh-base">
                                    Subtotal
                                </td>
                                <td class="text-end border-0 lh-base">{{ '$'.number_format($data['price'], 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-end lh-base">
                                    Total
                                </td>
                                <td class="text-end lh-base">{{ '$'.number_format($data['price'], 2) }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- <div class="row">
                        <div class="offset-6 col-6">
                            <a class="btn btn-primary" href="{{ route('processTransaction') }}">Proceed to paypal</a>
                        </div>
                    </div> -->
                    <div class="row">
                

                        <div class="col-12 mt-3 text-start">
                            <div class="form-check mb-2">
                                <div class=" d-inline float-start">
                                    <input class="form-check-input payment_type" type="radio" name="group4" value="paypal" id="flexCheckDefault" checked="">
                                    <label class="form-check-label" for="flexCheckDefault"> Paypal </label>
                                </div>
                                <div class="d-inline float-end" style="margin-top: -25px;">
                                    <img src="{{ asset('imgs/paypal.jpg')}}" />
                                </div>

                                <div class="payment_box payment_method_paypal">
                                    <p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
                                </div>
                            </div>
                            <div class="form-check mb-2 stripe-content">
                                <input class="form-check-input payment_type" type="radio" name="group4" value="stripe" id="flexCheckChecked">
                                <label class="form-check-label" for="flexCheckChecked"> Credit Card (Stripe) </label>
                                <br />
                                <br />
                                <p>Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our <a href="https://angelicbridal.com.au/privacy-policy/" target="_blank">privacy policy</a>.</p>
                            </div>



                            <div class="paypalPayment">
                                <form action="{{ route('processTransaction') }}" method="get">
                                    @csrf
                                    <input type="hidden" name="price" value="{{ number_format($data['price'], 2) }}" />
                                    <button type="submit" class="btn book-next">Proceed to paypal</button>
                                </form>
                            </div>
                            <div class="stripePayment">
                                <form id="payment-form">
                                    @csrf
                                    <label>Pay with your credit card via Stripe.</label>
                                    <br />
                                    <br />
                                    <div class="form-row">
                                        <label for="card-number">Card Number</label>
                                        <div id="card-number" class="StripeElement"></div>
                                    </div>
                                    <div class="form-row">
                                        <label for="card-expiry">Expiration Date</label>
                                        <div id="card-expiry" class="StripeElement"></div>
                                    </div>
                                    <div class="form-row">
                                        <label for="card-cvc">CVC</label>
                                        <div id="card-cvc" class="StripeElement"></div>
                                    </div>
                                    <div id="card-errors" role="alert"></div>
                                    <input type="hidden" name="amount" id="amount" value="{{ number_format($data['price'], 0) }}"> 
                                  
                                    <button type="submit" id='stripeSubmit' class="btn book-next">Place Order</button>
                                </form>

                            </div>
                        </div>
                        <div class="col-4 mt-3 text-start">
                            <button type="button" class="btn book-back" onclick=" window.history.back()">Back</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>

$(document).ready(function() {
        $('.stripePayment').hide();
    })

    $(document).on('click','.payment_type',function(){
        payment_type=$(this).val();
        if(payment_type=='stripe'){
            $('.stripePayment').show(300);
            $('.paypalPayment').hide(300);
            $('.payment_box').hide(300);
        }else{
            $('.stripePayment').hide(300);
            $('.paypalPayment').show(300);
            $('.payment_box').show(300);
        }
    })

    var stripe = Stripe("{{ env('STRIPE_KEY') }}");
    var elements = stripe.elements();

    var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    var cardNumber = elements.create('cardNumber', {
        style: style
    });
    cardNumber.mount('#card-number');

    var cardExpiry = elements.create('cardExpiry', {
        style: style
    });
    cardExpiry.mount('#card-expiry');

    var cardCvc = elements.create('cardCvc', {
        style: style
    });
    cardCvc.mount('#card-cvc');

    cardNumber.on('change', function(event) {
        handleStripeCardEvent(event);
    });

    cardExpiry.on('change', function(event) {
        handleStripeCardEvent(event);
    });

    cardCvc.on('change', function(event) {
        handleStripeCardEvent(event);
    });

    function handleStripeCardEvent(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    }

    document.getElementById('stripeSubmit').addEventListener('click', function(e) {
        e.preventDefault();

        stripe.createPaymentMethod({
            type: 'card',
            card: cardNumber,
            billing_details: {
                name: 'Card Holder Name'
            }
        }).then(function(result) {
            console.log(result);
            if (result.error) {
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                fetch("{{ route('create.payment.intent') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({
                        payment_method_id: result.paymentMethod.id,
                        amount: $('#amount').val()
                    })
                }).then(function(response) {
                    return response.json();
                }).then(function(data) {
                    if (data.error) {
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = data.error;
                    } else {
                        stripe.confirmCardPayment(data.client_secret).then(function(result) {
                            if (result.error) {
                                var errorElement = document.getElementById('card-errors');
                                errorElement.textContent = result.error.message;
                            } else {
                                if (result.paymentIntent.status === 'succeeded') {
                                    window.location.href = "{{ route('payment.success') }}";
                                } else if (result.paymentIntent.status === 'failed') {
                                    window.location.href = "{{ route('payment.failure') }}";
                                } else if (result.paymentIntent.status === 'canceled') {
                                    window.location.href = "{{ route('payment.canceled') }}";
                                }
                            }
                        });
                    }
                });
            }
        });
    });
</script>
@endpush