@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);



if($paymentDetails->isEarlyBirdValid && ($paymentDetails->early_bird_discount === null || $paymentDetails->early_bird_discount == 0)){
    $earlyBirdDate = strtotime($paymentDetails->earlyBirdDate);
    $earlyBirdDate = date('Y-m-d',$earlyBirdDate);
    $earlyBirdDiscount = (int)$paymentDetails->earlyBirdDiscount;
    $dueAmount = $dueAmount-$earlyBirdDiscount;

}else{
    $earlyBirdDiscount=0;
}



$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>
                        @if($paymentDetails->isEarlyBirdValid && $earlyBirdDiscount>0)
                        <li class="list-group-item d-flex justify-content-between lh-condensed">
                            <div>
                                <h6 class="my-0">Earlybird Discount</h6>
                                <small class="text-muted"></small>
                            </div>
                            <span class="text-muted">-{{$earlyBirdDiscount}}</span>
                        </li>
                        @endif
                        <li id="sideCouponAmountBlock" class="list-group-item lh-condensed"  style="display: none">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="my-0">Coupon Amount</h6>
                                    <small class="text-muted"></small>
                                </div>
                                <span class="text-muted" id="sideCouponAmount">-{{$earlyBirdDiscount}}</span>
                            </div>
                        </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 id="sideTotalAmount">{{$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(!empty($paymentDetails->coupons) && $paymentDetails->coupons->isNotEmpty())
                        <div class="row mt-3">
                            <h5>You have coupon to use</h5>
                            <div class="row">
                                <div class="col">
                                    <label for="coupon" class="form-label">Coupon Code</label>
                                    <div class="form-group">
                                        <input type="text" name="reamining_amount" id="reamining_amount" value="" hidden />
                                        <input type="text" name="coupon" class="form-control" id="coupon" placeholder="coupon" value="" />
                                    </div>
                                </div>
                                {{-- <div class="col">
                                    <label class="form-label">Use Coupon?</label>
                                    <div class="form-group">
                                        <input type="radio" name="customCouponOption" id="customCouponYes" checked> Yes
                                        <input type="radio" name="customCouponOption" id="customCouponNo"> No
                                    </div>
                                </div> --}}
                                <div class="col">
                                    <button class="btn btn-primary" type="button" id="validateCoupon">Validate Coupon</button>
                                </div>
                            </div>
                        </div>
                    @endif
                    


{{-- @if(!empty($paymentDetails->coupons) && $paymentDetails->coupons->isNotEmpty())
<div class="row mt-3">
    <h5>You have coupon to use</h5>
</div>

<div class="row">
    <div class="col">
        <label class="form-label">Coupon Code</label>
        <div class="form-group">
            <input type="hidden" name="remaining_balance" id="remaining_balance" value="" />
            <input type="text" name="coupon" class="form-control" id="coupon" placeholder="Coupon Code">
        </div>
    </div>

    <div class="col">
        <label class="form-label">&nbsp;</label>
        <div class="form-group">
            <button type="button" id="validateCoupon" class="btn btn-primary">
                Validate Coupon
            </button>
        </div>
    </div>
</div>
@endif --}}
<div id="secondCouponBlock" style="display: none">
<div class="row">
    <div class="col">
        <label class="form-label">Remainging Balance</label>
        <div class="form-group">
            <input type="text" id="remaining_value" name="remaining_value" class="form-control" placeholder="Remaining Amount" value="" readonly>
            <input id="finalCouponAmount" name="finalCouponAmount" type="hidden" value="">
        </div>
    </div>

</div>



<div class="row mt-3">
    <label for="cutom_payment" class="form-label">Want to use full coupon Amount?</label>
    <div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="coupon_payment_adjust" id="customCouponYes" value="YES" onclick="toggleCustomCoupon('customCouponYes')" checked>
            <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="coupon_payment_adjust" id="customCouponNo" value="NO" autocomplete="off" onclick="toggleCustomCoupon('customCouponNo')">
            <label class="form-check-label" for="inlineRadio2">No</label>
        </div>
    </div>
</div>


<div class="row" id="customCouponBlock" style="display: none">
    <div class="col">
        <div class="form-group">
            <label for="customCouponAmount" class="form-label">Custom Coupon Amount</label>
            
            <input id="customCouponAmount" type="number" class="form-control" name="customCouponAmount" autocomplete="off" placeholder="Please enter your amount" value="">
        </div>
    </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>
    const availableCoupons = @json($paymentDetails->coupons);
</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('');
    }
}

function toggleCustomCoupon(selectedOption) {
    if (selectedOption === 'customCouponYes') {
        console.log('yes selected');
        $('#customCouponBlock').hide();        // Hide custom amount input
        $('#customCouponAmount').prop('disabled', true);   // Disable input field
        $('#customCouponAmount').val('');            // Reset custom amount to empty or 0

        var remainingValue = parseFloat($('#remaining_value').val()) || 0;
        var totalAmount = parseFloat($('#dueAmount').val());
        $('#finalCouponAmount').val(remainingValue);

        var newAmount = totalAmount-remainingValue;
        $('#sideTotalAmount').text(newAmount + ' TK'); 
        $('#sideCouponAmount').text('-' + remainingValue); 

    } else if (selectedOption === 'customCouponNo') {
    console.log('no selected');
        $('#customCouponBlock').show(); 
        $('#customCouponAmount').prop('disabled', false);

        
    }
}

function setCouponAmount(couponValue){
    var totalAmount = parseFloat($('#dueAmount').val());
    
    if(couponValue>totalAmount)
    couponValue = totalAmount;

    $('#finalCouponAmount').val(couponValue);

    $('#sideCouponAmountBlock').show(); 
    var newTotalAmount = totalAmount-couponValue;
    $('#sideTotalAmount').text(newTotalAmount + ' TK'); 
    $('#sideCouponAmount').text('-' + couponValue); 

    return true;

}
function resetCoupon(){
    $('#finalCouponAmount').val('');
    $('#remaining_value').val('');
    $('#sideCouponAmountBlock').hide(); 
    $('#secondCouponBlock').hide(); 
}
    // Function to validate a coupon
function validateCouponCode(code) {
    console.log('validateCouponCode fired');

    resetCoupon();

    if (!code) return { valid: false, message: 'Coupon code is required' };

    const coupon = availableCoupons.find(c => c.code === code);
    if (!coupon) return { valid: false, message: 'Invalid coupon code' };
    if (coupon.is_active != 1) return { valid: false, message: 'This coupon is inactive' };

    if (coupon.expiry_date) {
        const today = new Date().setHours(0,0,0,0);
        const expiry = new Date(coupon.expiry_date).setHours(0,0,0,0);
        if (expiry < today) return { valid: false, message: 'Coupon has expired' };
    }

    let usableAmount = Number(coupon.remaining_value) || 0;

    if (usableAmount <= 0)return { valid: false, message: 'Coupon has no remaining balance' };

    setCouponAmount(usableAmount);

    return { valid: true, usableAmount: usableAmount, coupon: coupon };
}

 

$(document).ready(function() {

    var validator = $("#paymentForm").validate({
        ignore: [],
        rules: {
            address: {
                required: true
            },
            customAmount: {
                customAmountValidation: true // Apply custom validation only if 'Yes' is selected
            },
            customCouponAmount: {
                required: function() {
                    // Only required if there is a valid coupon
                    
                    return $('#customCouponBlock').is(':visible') && parseFloat($('#remaining_value').val() || 0) > 0;
                    //return parseFloat($('#remaining_value').val() || 0) > 0;
                },
                customCouponAmountValidation: true
            },
            coupon: {
                couponValidation: true,
                required: false
            },
            // coupon: {
            //     couponValidation: true,
            //     required: function() {
            //         return $('#couponWrapper').length && parseFloat($('#remaining_value').val() || 0) > 0;
            //     }
            // },
                        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: "Amount must be greater than 9 and less than or equal to the total due amount."
            },
            customCouponAmount: {
                customCouponAmountValidation: "Amount must be greater than 9 and less than remaining coupon balance and 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");
        },
        invalidHandler: function (event, validator) {
        console.log('Form validation failed');
            validator.errorList.forEach(function (err) {
                console.log(err.message, '=>', err.element.name);
            });
        },
        submitHandler: function (form) {
            
            // Add 'was-validated' class to trigger Bootstrap validation

            form.classList.add('was-validated');       
            
            return false;
        }


    });

    // Add custom validation for custom amount
    $.validator.addMethod("customAmountValidation", function(value, element) {
        console.log('inside custom validation');
        if ($('#customYes').is(':checked')) {
            var totalAmount = parseFloat($('#dueAmount').val()); // Assuming total_amount input is present
            var customAmount = parseFloat(value);
            //var couponAmount = parseFloat($('#finalCouponAmount').val());
            const finalCouponAmount = parseFloat($('#finalCouponAmount').val());

            if (!isNaN(finalCouponAmount) && finalCouponAmount > 0) {
                return customAmount > 9 && customAmount+finalCouponAmount < totalAmount;
            }
            return customAmount > 9 && customAmount < totalAmount;
        }
        return true; // If "No" is selected, skip validation
    }, "Custom amount must be greater than 9 and less than total due amount.");


    $.validator.addMethod("customCouponAmountValidation", function(value, element) {
        console.log('customCouponAmountValidation called');
        var remainingValue = parseFloat($('#remaining_value').val()) || 0;
        // Skip if no coupon exists
        if ($('#customCouponBlock').length === 0 || !$('#remaining_value').val()) {
            return true; // allow form submission
        }

        
        if (remainingValue <= 0) return true; // no valid coupon

        // Manual coupon
        if ($('#customCouponNo').is(':checked')) {
            console.log('customCouponNo checked');
            
            //var totalAmount = parseFloat($('#dueAmount').val());
            var customCouponAmount = parseFloat(value);

            if(customCouponAmount>remainingValue)
            return false;

            var setCoupon = false;
            if(customCouponAmount > 9)
            setCoupon = setCouponAmount(customCouponAmount);
            //$('#finalCouponAmount').val(customCouponAmount);

           // var newAmount = totalAmount-customCouponAmount;
           // $('#sideTotalAmount').text(newAmount + ' TK'); 
            //$('#sideCouponAmount').text('-' + customCouponAmount); 

            return setCoupon;
        }

        // Auto coupon
        if ($('#customCouponYes').is(':checked')) {
            console.log('cyes checked');
            var setCoupon = setCouponAmount(parseFloat(remainingValue));
            return true;
            //var totalAmount = parseFloat($('#dueAmount').val());
           // $('#finalCouponAmount').val(remainingValue);

            //var newAmount = totalAmount-remainingValue;
            //$('#sideTotalAmount').text(newAmount + ' TK'); 
            //$('#sideCouponAmount').text('-' + remainingValue); 
            
            //return remainingValue > 9 && remainingValue <= totalAmount;
        }
        

        return true;
    }, "Custom Coupon amount must be greater than 9 and less than total coupon amount.");

    $.validator.addMethod("couponValidation", function(value, element) {
        console.log('🔥 couponValidation fired', value);

        // Skip validation only if the coupon input is completely absent
        if ($('#coupon').length === 0) return true;

        // Skip if the user entered nothing and the coupon field is optional
        if (!value) return true;

        // Run your outer function
        const result = validateCouponCode(value.trim());
        console.log(result);

        if (!result.valid) {
            $.validator.messages.couponValidation = result.message;
            return false;
        }

        // Set usable amount fields
        $('#remaining_balance').val(result.usableAmount);
        $('#remaining_value').val(result.usableAmount);
        $('#finalCouponAmount').val(result.usableAmount);

        // Show the second block
        $('#secondCouponBlock').show();

        return true;
    }, "Invalid coupon");





    $('#validateCoupon').on('click', function (e) {
        e.preventDefault();   // <-- REQUIRED
        $('#coupon').valid(); // now triggers validation
    });

    $('#sslczPayBtn').on('click', function(e) {
    e.preventDefault(); // always stop default first

    // Check if the form is valid
    if ($('#paymentForm').valid()) {

        // Form is valid, prepare postdata
        var dueAmount = parseFloat($('#dueAmount').val());
        var totalAmount = parseFloat($('#dueAmount').val());

        if($('#finalCouponAmount').val()>0)
            totalAmount = dueAmount-$('#finalCouponAmount').val();

        if ($('#customAmount').val() > 0) {
            totalAmount = parseFloat($('#customAmount').val());
        }

        var obj = {};
        obj.payment_id = {{$paymentDetails->payment_id}};
        obj.payment_type = {{$paymentDetails->payment_type}};
        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.coupon_code = $('#coupon').val();
        obj.coupon_last_remaining_balance = $('#remaining_value').val();
        obj.coupon_used_amount = $('#finalCouponAmount').val();

        obj.is_early_bird = {{ $paymentDetails->isEarlyBirdValid ? 'true' : 'false' }};
        obj.early_bird_discount = parseFloat({{ $earlyBirdDiscount ?? 0 }});
        
        obj.course_fee = parseFloat({{$paymentDetails->amount}});
        obj.paid_amount = parseFloat({{$paymentDetails->paid_amount}});
        obj.amount = totalAmount;

console.log('coupon used amount: ');
        console.log(obj.coupon_used_amount); // debug

        // Set postdata for SSLCommerz
        $(this).prop('postdata', obj);

       
       // alert("hi");
        // Let SSLCommerz proceed
        return true;

    } else {
        // Form is invalid, prevent submission
        $('#paymentForm').validate().focusInvalid(); // focus first error
        return false;
    }
    });


    $('#customNo').prop('checked', true);
    if ($('#customYes').is(':checked')) {
        toggleCustomAmount('customYes');
    }

    

});
    


//local
(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);

        //live
// (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