@extends('frontend.layouts.app')
@php
use Carbon\Carbon;
@endphp
@section('content')
<style>
    #token-link:hover {
        text-decoration: underline;
        color: #0056b3;
    }




    .checkout-back {
        background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 770px;
        opacity: 90%;
    }

    @media (max-width: 991px) {
        .checkout-back {
            height: auto;
        }
    }
</style>

<section>

    <div class="th-checkout-wrapper space-top space-extra-bottom checkout-back">
        <div style="margin-top:-40px" class="container">
            <form action="#" class="mt-0">
                <div style="margin:0 auto" class="row justify-content-center">
                    <!-- Billing Details Section -->
                    <div class="col-lg-4 mb-3 p-0 me-3">
                        <div class="p-3 bg-white mb-3"
                            style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:10px; width:99%">
                            <p style="font-weight:500; font-size:16px; color:rgb(6, 119, 128)" class="mb-0">Order
                                Summery</p>
                            <hr style="margin-top:4px" class="mb-2">
                            <p class="p-0 mb-1"><span style="font-weight:bold">Course : </span><span
                                    style="font-size:14px">{{$course->course->name}}</span></p>
                            <p class="p-0 mb-1"><span style="font-weight:bold">Month : </span><span
                                    style="font-size:14px">{{$checks->month}} Month</span></p>
                            <p class="p-0 mb-1"><span style="">Expiry Date : </span><span style="font-size:14px">{{
                                    Carbon::now()->addMonths($checks->month)->format('d M Y') }}</span></p>
                            <p class="p-0 mb-1"><span style="">Next Exam : </span><span style="font-size:14px">1 Nov
                                    2024</span></p>
                            <p>Original Price: $<span id="original-price" data-price="{{ $checks->price }}">{{$checks->price}}</span></p>
                            <p>Discount: $<span id="discount-amount">0</span></p>
                            <hr style="margin-top:11px" class="mb-3">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p style="font-size:16px">Total</p>
                                </div>
                                <div>
                                    <p id="total-price" class="me-3" style="font-size:17px; font-weight:600">
                                        ${{$checks->price}}</p>
                                </div>
                            </div>
                        </div>



                        
                        <div
                            style="border: 1px dotted gray; border-radius: 8px; padding: 12px; background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.2s, box-shadow 0.2s;">
                            <div>
                                <p style="font-size:17px">{{$token->title}}</p>
                                <hr>
                                <form >
                                    
                                  <input type="hidden" id="coupon_code" value="{{$token->code}}"/>
                                    <div class="form-outline mb-4">
                                        <label class="form-label" for="promoCode">Coupon Code: {{$token->code}}</label>
                                        <div class="input-group">
                                          <span class="input-group-text">
                                            <img width="33px" src="{{asset('/frontend/assets/images/tag.png')}}" />
                                          </span>
                                          <input type="text" id="coupon" class="form-control" placeholder="Enter your promo code" />
                                          <button class="btn btn-primary" type="button" id="couponSubmit">Apply</button>
                                        </div>
                                      </div>
                                </form>

                                
                                
                            </div>
                        </div>

                    </div>

                    <!-- Your Details Section -->
                    <div class="col-lg-7 p-0">
                        <div class="p-3 bg-white"
                            style="box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius:10px">
                            <p class="p-0 m-0" style="font-weight:500; font-size:16px; color:rgb(6, 119, 128)">1 of 2 -
                                Your Details</p>
                            <hr style="margin-bottom:28px">
                            <div class="row">

                                <form id="submitPaypalForm">
                                    @csrf

                                    <input type="hidden" value="{{$checks->month}}" name="month" id="month" />
                                    <input type="hidden" value="{{$course->course->id}}" id="course_main" />
                                    <input id="price-input" type="hidden" value="{{$checks->price}}" name="price" />
                                    <div class="col-lg-6 col-md-6 mb-4">
                                        <label style="opacity:90%" for="first-name">Name</label>
                                        <input name="name" id="name"
                                            style="background:white; border:1px solid rgb(175, 175, 175); height:45px; line-height:45px"
                                            value="{{Auth()->check() ? Auth()->user()->name : ''}}" type="text"
                                            class="form-control" />
                                        <span id="nameError" class="error"></span>
                                    </div>



                                    <div class="col-lg-6 col-md-6 mb-4">
                                        <label style="opacity:90%" for="email">Email</label>
                                        <input name="email" id="email"
                                            style="background:white; border:1px solid rgb(175, 175, 175); height:45px; line-height:45px"
                                            value="{{ auth()->check() ? auth()->user()->email : '' }}" type="text"
                                            class="form-control" />
                                        <span id="emailError" class="error"></span>
                                    </div>

                                    <div class="col-lg-6 col-md-6 mb-4">
                                        <label style="opacity:90%" for="password">Password</label>
                                        <input name="password" id="password"
                                            style="background:white; border:1px solid rgb(175, 175, 175); height:45px; line-height:45px"
                                            type="password" class="form-control" />
                                        <span id="passwordError" class="error"></span>
                                    </div>
                                    <div class="col-lg-6 col-md-6 mb-4">
                                        <label style="opacity:90%" for="confirm-password">Confirm Password</label>
                                        <input name="password_confirmation" id="confirm-password"
                                            style="background:white; border:1px solid rgb(175, 175, 175); height:45px; line-height:45px"
                                            type="password" class="form-control" />
                                        <span id="passwordConfirmationError" class="error"></span>
                                    </div>

                                    <p class="p-0 m-0" style="font-weight:500; font-size:16px; color:rgb(6, 119, 128)">2
                                        of 2 - Payment</p>
                                    <hr style="margin-bottom:28px">

                                    <div class="col-lg-12 mb-4">
                                        <button  class="btn btn-warning"
                                            type="submit">Paypal</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>


</section>
@endsection

@push('js')

<script>
    $(document).ready(function() {
        
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Submit handler for the PayPal form
        $('#submitPaypalForm').on('submit', function(e) {
            e.preventDefault();
             

            // Clear previous errors
            $('.error').text('');

            // Serialize form data
            let formData = {
                _token: "{{ csrf_token() }}",
                amount: $('#price-input').val(),
                month: $('#month').val(),
                course_id: $('#course_main').val(),
                name: $('#name').val(),
                email: $('#email').val(),
                password: $('#password').val(),
               password_confirmation: $('#confirm-password').val()
            };
            

            $.ajax({
                url: "{{ route('frontend.paypal') }}",
                type: "POST",
                data: formData,
                success: function(response) {
                    console.log(response);
                    if (response.status === 'success') {
                        // Uncomment the line below to redirect if needed
                        window.location.href = response.paypal_url;
                    } else {
                        alert('Something went wrong. Please try again.');
                    }
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    if (errors.name) {
                        $('#nameError').text(errors.name[0]);
                    }
                    if (errors.email) {
                        $('#emailError').text(errors.email[0]);
                    }
                    if (errors.password) {
                        $('#passwordError').text(errors.password[0]);
                    }
                    if (errors.password_confirmation) {
                        $('#passwordConfirmationError').text(errors.password_confirmation[0]);
                    }
                }
            });
        });

        // Submit handler for the coupon form
$('#couponSubmit').on('click', function(e) {
    e.preventDefault();
   
    
    const couponCode = $("#coupon").val();
    const coupon = $("#coupon_code").val();
    
    const originalPrice = parseFloat($("#original-price").data("price"));

    // Check if coupon code is entered
    if (!couponCode) {
        Swal.fire({
            icon: 'warning',
            title: 'Oops!',
            text: 'Please enter a coupon code.',
            confirmButtonText: 'OK'
        });
        return;
    }

    // Check if coupon code matches
    if (couponCode !== coupon) {
        Swal.fire({
            icon: 'error',
            title: 'Invalid Coupon',
            text: 'Coupon does not match.',
            confirmButtonText: 'Try Again'
        });
        return;
    }

    $.ajax({
        url: "{{ route('frontend.apply.coupon') }}",
        type: "POST",
        data: {
            couponCode: couponCode,
            originalPrice: originalPrice,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            console.log(response);
            if (response.status == 'success') {
                // Update discount and total price on the page without refresh
                $('#discount-amount').text(response.discountAmount.toFixed(2));
                $('#total-price').text(response.totalPrice.toFixed(2));
                $('#price-input').val(response.totalPrice.toFixed(2));
            } else {
                alert("Invalid coupon code");
            }
        },
        error: function(xhr) {
            let errors = xhr.responseJSON.errors;
            console.log(errors);
        }
    });
});

    });
</script>



@endpush