@extends('frontend.master')
@section('stylesheet')

@endsection
@section('content')

@php
$courseAmount = $paymentDetails->registrationTimeAmount;
$courseName = $paymentDetails->course_title;
$customPayment = $paymentDetails->course_custom_payment;

$dueAmount = (int)$courseAmount  - (int)$paymentDetails->paid_amount;
$applicatonDate = strtotime($paymentDetails->application_date);
$applicatonDate = date('Y-m-d',$applicatonDate);


$paymentStatus = $dueAmount==0 ? 'Paid' : 'Due';

//$paidStatus = $dueAmount == '0' ? $applicaiton->paid_status :($dueAmount == 0 ? 'p':'r');
@endphp
    <section id="digital-solution">
        <div class="container">
            <div class="row mb-5">
                <div class="col-md-4 order-md-2 mb-4">
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                        <span class="text-muted"></span>
                    </h4>

                    <ul class="list-group mb-3">
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">Course Name</h6>
                                <small class="text-muted">{{$courseName}}</small>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">Course fee</h6>
                                <small class="text-muted"></small>
                            </div>
                            <span class="text-muted">{{$courseAmount}}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">Course Due Amount</h6>
                                <small class="text-muted"></small>
                            </div>
                            <span class="text-muted">{{$dueAmount}}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">Charges</h6>
                                <small class="text-muted">Vat & others</small>
                            </div>
                            <span class="text-muted">0</span>
                        </li>
{{--                        <li class="list-group-item d-flex justify-content-between lh-condensed">--}}
{{--                            <div>--}}
{{--                                <h6 class="my-0"></h6>--}}
{{--                                <small class="text-muted">Brief description</small>--}}
{{--                            </div>--}}
{{--                            <span class="text-muted">150</span>--}}
{{--                        </li>--}}
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Total (BDT)</span>
                            <strong>{{$dueAmount}} TK</strong>
                        </li>
                    </ul>
                </div>
                <div class="col-md-8 order-md-1">
                    <h4 class="mb-3">Your Details</h4>
                    
                    <form method="POST" id="paymentForm" class="custom form mb-5 needs-validation" novalidate>
                        @csrf
                        <input type="hidden" name="dueAmount" id="dueAmount" value="{{$dueAmount}}" />
                        <input type="hidden" name="student_id" id="student_id" value="{{$paymentDetails->student_id}}" />
                        <input type="hidden" name="payment_id" id="student_id" value="{{$paymentDetails->payment_id}}" />
                        <input type="hidden" name="pay_txid" id="pay_txid" value="{{$paymentDetails->pay_txid}}" />
                        <div class="row">
                            <div class="col form-group">
                                <label for="customer_name" class="form-label">Full name<span class="required">*</span></label>
                                <input type="text" name="customer_name" class="form-control" id="customer_name" placeholder="Full Name"
                                       value="{{$paymentDetails->first_name}} {{$paymentDetails->last_name}}" readonly required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="mobile" class="form-label">Mobile</label>
                                <div class="form-group input-group">
                                    
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">+88</span>
                                    </div>
                                    <input type="text" name="mobile" class="form-control" id="mobile" placeholder="Mobile" value="{{$paymentDetails->contact_number}}" readonly required />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" name="customer_email" class="form-control" id="email" placeholder="you@email.com" value="{{$paymentDetails->email}}" readonly required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <label for="present_address" class="form-label">Your Address</label>
                                    <input type="text" name="present_address" class="form-control" id="present_address" placeholder="Your Address" value="{{$paymentDetails->present_address}}" readonly required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="city" class="form-label">City</label>
                                <div class="form-group">
                                    <input type="text" name="city" class="form-control" id="city" placeholder="City" value="{{$paymentDetails->city}}" readonly required />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="country" class="form-label">Country</label>
                                    <input type="text" name="country" class="form-control" id="country" placeholder="Bangladesh" value="{{$paymentDetails->country}}" readonly required />
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="post_code" class="form-label">Postcode</label>
                                    <input type="text" name="post_code" class="form-control" id="post_code" placeholder="1206" value="{{$paymentDetails->post_code}}" readonly required />
                                </div>
                            </div>
                        </div>
                        @if($customPayment=='Y')  
                        <div class="row mt-3">
                            <label for="cutom_payment" class="form-label">Custom Payment</label>
                            <div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="customer_payment_adjust" id="customYes" value="YES" autocomplete="off" onclick="toggleCustomAmount('customYes')">
                                    <label class="form-check-label" for="inlineRadio1">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="customer_payment_adjust" id="customNo" value="NO" onclick="toggleCustomAmount('customNo')" checked>
                                    <label class="form-check-label" for="inlineRadio2">No</label>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="row" id="customPaymentBlock" style="display: none">
                            <div class="col">
                                <div class="form-group">
                                    <label for="customAmount" class="form-label">Amount</label>
                                    <input id="customAmount" type="number" class="form-control" name="customAmount" autocomplete="off" placeholder="Please enter your amount" value="">
                                </div>
                            </div>
                            
                            <div class="col">
                                <div class="form-group">
                                    <label for="customRemarks" class="form-label">Remarks/ Reason</label>
                                    <input id="customRemarks" type="text" class="form-control" name="customRemarks" autocomplete="off" placeholder="Please enter the reason" value="">
                                </div>
                            </div>
                        </div>
                        
                        <div class="my-5">
                            {{-- <button type="submit">Submit</button> --}}
                            <button type="submit" class="btn btn-primary btn-lg" id="sslczPayBtn"
                                    token="{{$paymentDetails->payment_id.$paymentDetails->student_id.$paymentDetails->form_data_id}}"
                                    postdata=""
                                    order="{{$paymentDetails->payment_id}}"
                                    endpoint="{{ url('/pay-via-ajax') }}"> Pay Now
                            </button>
                        </div>
                        
                    </form>
                </div>
            </div>
            <!-- Row -->
        </div>
    </section>

    <div class="inside_gap"></div>
@endsection
@section('customScript')

<script src="{{ asset('assets/plugins/jqueryvalidate/jquery.validate.min.js') }}"></script>
<script>
function toggleCustomAmount(selectedOption) {
    console.log('custom toggle');
    if (selectedOption === 'customYes') {
        $('#customPaymentBlock').show();        // Show custom amount input
        $('#customAmount').prop('disabled', false);  // Enable input field
        $('#customRemarks').prop('disabled', false);
    } else if (selectedOption === 'customNo') {
        $('#customPaymentBlock').hide();        // Hide custom amount input
        $('#customAmount').prop('disabled', true);   // Disable input field
        $('#customAmount').val('');            // Reset custom amount to empty or 0
        $('#customRemarks').prop('disabled', true);
        $('#customRemarks').val('');
    }
}   
// Add custom validation for custom amount
$.validator.addMethod("customAmountValidation", function(value, element) {
    console.log('custom validation');
    if ($('#customYes').is(':checked')) {
        var totalAmount = parseFloat($('#dueAmount').val()); // Assuming total_amount input is present
        var customAmount = parseFloat(value);
        return customAmount > 9 && customAmount <= totalAmount;
    }
    return true; // If "No" is selected, skip validation
}, "Custom amount must be greater than 9 and less than or equal to total amount.");

    $("#paymentForm").validate({
        rules: {
            address: {
                required: true
            },
            customAmount: {
                customAmountValidation: true // Apply custom validation only if 'Yes' is selected
            },
            customRemarks:{
                maxlength:100
            }
        },
        messages: {
            customer_name: "Please enter your name",
            mobile: "Please enter a valid phone number",
            email: "Please enter a valid email address",
            address: "Please enter your address",
            customAmount: {
                customAmountValidation: "Greater 9 and less than or equal to the total due amount."
            }
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".form-group").append(error);
            }
        },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            
            // Add 'was-validated' class to trigger Bootstrap validation

            form.classList.add('was-validated');
            var totalAmount = $('#dueAmount').val();
            if($('#customAmount').val()>0)
            totalAmount = $('#customAmount').val();

            
            var obj = {};        
            
            obj.payment_id = {{$paymentDetails->payment_id}};
            obj.student_id = {{$paymentDetails->student_id}};
            obj.form_data_id = {{$paymentDetails->form_data_id}};
            obj.cus_name = $('#customer_name').val();
            obj.cus_phone = $('#mobile').val();
            obj.cus_email = $('#email').val();
            obj.cus_addr1 = $('#present_address').val();
            obj.city = $('#city').val();
            obj.country = $('#country').val();
            obj.post_code = $('#post_code').val();
            obj.custom_remarks = $('#customRemarks').val();
            obj.course_fee = parseFloat({{$paymentDetails->amount}});
            obj.paid_amount =  parseFloat({{$paymentDetails->paid_amount}});
            obj.amount = parseFloat(totalAmount);

            
            console.log($(form).serializeArray());
            console.log(obj);

            // Attach obj to the button's postdata property
            $('#sslczPayBtn').prop('postdata', obj);
            
            // Optionally, you can submit the form here if needed
            //return false;
        }


    });
$('#sslczPayBtn').on('click', function(e) {
    e.preventDefault(); // Stop the default behavior temporarily

    // Prepare the data object again (in case it's updated)
    var totalAmount = $('#dueAmount').val();
    if ($('#customAmount').val() > 0) {
        totalAmount = $('#customAmount').val();
    }

    var obj = {};        
    obj.payment_id = {{$paymentDetails->payment_id}};
    obj.student_id = {{$paymentDetails->student_id}};
    obj.form_data_id = {{$paymentDetails->form_data_id}};
    obj.cus_name = $('#customer_name').val();
    obj.cus_phone = $('#mobile').val();
    obj.cus_email = $('#email').val();
    obj.cus_addr1 = $('#present_address').val();
    obj.city = $('#city').val();
    obj.country = $('#country').val();
    obj.post_code = $('#post_code').val();
    obj.custom_remarks = $('#customRemarks').val();
    obj.course_fee = parseFloat({{$paymentDetails->amount}});
    obj.paid_amount =  parseFloat({{$paymentDetails->paid_amount}});
    obj.amount = parseFloat(totalAmount);

    // Set postdata on the button before the API script takes over
    $('#sslczPayBtn').prop('postdata', obj);

    console.log(obj); // Log to verify the object values

    // Allow the SSLCommerz script to process the payment
    return true; // Let the button's default behavior proceed (open modal, send data)
});    
$(document).ready(function() {
    $('#customNo').prop('checked', true);
    if ($('#customYes').is(':checked')) {
        toggleCustomAmount('customYes');
    }
});

(function (window, document) {
            var loader = function () {
                var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
                script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR LIVE
                //script.src = "https://sandbox.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR SANDBOX
                tag.parentNode.insertBefore(script, tag);
            };

            window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
        })(window, document);

// (function (window, document) {
// 	var loader = function () {
// 		var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
// 		script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7);
// 		tag.parentNode.insertBefore(script, tag);
// 	};

// 	window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
// })(window, document);
</script>

@endsection