@extends('hiremee-revamp.layouts.main-layout')
@section('pageTitle', 'HireMee - Payment Status')
@section('analytics_schema')
  @include('hiremee-revamp.layouts.meta-pixel-and-ga-tracking-codes')
@endsection
@section('content')
<style>
#header {
    display: none !important;
}

.hm-new-footer {
    display: none !important;
}

.bgcard {
    border: 1px solid #dddddd;
    border-radius: 10px;
}

.hm-cta-flt-container {
    display: none !important;
}

.zsiq_theme1.zsiq_floatmain {
    display: none !important;
}

.bghead {
    font-size: 18px;
    padding: 10px;
    font-weight: 600;
    text-align: center;
    background: #4caf50;
    border-radius: 10px 10px 0px 0px;
    color: #ffffff;
}

.headtitleone {
    margin: 1rem;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #dddddd;
}

.coupencode {
    font-size: 12px;
    color: #636363;
}

.discountcard {
    border-top: 1px dashed #dddddd;
    border-bottom: 1px dashed #dddddd;
    margin-top: 20px;
}

.dispercenteage {
    background: #9E9E9E;
    padding: 3px 5px;
    border-radius: 5px;
    color: #fff;
}

.totalamount {
    background: #f2ffe3;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #659d03;
    font-weight: 600;
}

.p-1rem {
    padding: 1rem;
}

.btncus {
    font-size: 18px;
    padding: 10px;
}

.mleft2 {
    margin-left: 7px;
}

.coupencodebtn {
    height: 40px;
    width: 200px;
    background: #ffd84f;
    font-size: 16px;
}

.btnapply {
    height: 40px;
    background: #0b6624;
    font-size: 16px;
}

.btnapply1 {
    height: 40px;
    background: #a1d244;
    font-size: 16px;
}

.mb1rem {
    margin-bottom: 1rem;
}

.formcontrolcus {
  box-shadow: none !important;
    border: 1px solid #dddddd !important;
    background: #ffffff;
    border-radius: 0px !important;
    padding: 0px 10px !important;
    margin: 0 !important;
}
.cancelbtncus {
    background: #e7e5e5 !important;
    border: 1px solid #ddd !important;
    padding: 0px 10px !important;
    border-radius: 5px !important;
}
.pa-chat-icon {
    display: none !important;
}

#proceed_btn {
    margin-right: 15px;
}

#cancel_btn:hover {
    border-color: #659d03 !important;
    color: #659d03 !important;
}
#loader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    z-index: 99999;
}

.circle-loader {
    width: 25px;
    height: 25px;
    background: #0b6624;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.gap-lg-2px{
    gap:10px !important;
}
.remove-coupon{
        font-size: 12px  !important;
    cursor: pointer !important;
    color: #387b9b !important;
    text-decoration: underline !important;
}
.couponcode{
background: #fafff6;
    padding: 20px;
    margin: 0px 10px;
    border: 1px dashed #a1d244;
    border-radius: 10px;
}
#coupon_code[readonly] {
    background-color: #f0f0f0 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    border-color: #d6d6d6 !important;
}
#apply_coupon:disabled {
    background: #bdbdbd !important;
    border-color: #bdbdbd !important;
    color: #fff !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

@media screen and (max-width: 480px) {
.gap-lg-2px{
    gap:2px !important;
}
.coupencodebtn {
   
    font-size: 12px !important;
}


.btnapply1 {
  font-size: 12px !important;
}
}
</style>


<div class="container-fluid">
    <input type="hidden" name="assessment_id" id="assessment_id" value="{{ $custom_assessment->assessment_id }}">
    <input type="hidden" name="applied_coupon_id" id="applied_coupon_id" value="">
    <input type="hidden" id="original_process_payment_url" value="{{ $process_payment_url }}">
    <div class="row justify-content-center align-items-center"
        style="min-height: 90vh;max-height: 90vh;overflow-y: auto;">
        <div class="col-lg-8 col-md-8 col-sm-12">
            <div class="bg-white bgcard">
                <div class="bghead">Payment Summary</div>
                <div class="headtitleone">
                    <div class="row">
                        <div class="col-md-12 mt-2">
                            <div class="d-flex gap-lg-2px flex-column flex-sm-row">
                                <b>Assessment Name:</b>
                                <div>{{ $custom_assessment->title ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-2 d-flex gap-lg-2px">
                            <div>
                                <b>Name:</b>
                                <div>{{ $candidate->fullname ?? 'N/A' }}</div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-2 d-flex gap-lg-2px">
                            <div>
                                <b>Email Address:</b>
                                <div>{{ $candidate->email_address ?? 'N/A' }}</div>
                            </div>
                       </div>
                    </div>
                </div>
                <div class="p-1rem d-flex justify-content-between">
                    <span>Assessment Amount</span>
                    <b>₹{{ number_format($custom_assessment->amount, 2) }}</b>
                </div>
                <div class="d-flex px-3 couponcode">
                    <button title="Coupon Code" type="button" class="btn coupencodebtn">Coupon Code</button>
                    <input type="text" id="coupon_code" class="form-control px-0 formcontrolcus"
                        placeholder="Enter coupon code" maxlength="10" style="margin: 0 8px; text-transform:uppercase;"
                        oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9]/g,'')">
                    <button title='Apply' type="button" id="apply_coupon" class="btn btn-primary btnapply1">Apply</button>
                </div>
                <div class="d-flex justify-content-between px-3">
                      <span class="coupencode">Have a coupon code? Enter it here.</span>
                    <a href="javascript:void(0);" id="remove_coupon" class="remove-coupon">
                        Remove Coupon?
                    </a>
                </div>
              
                <div id="discount_section" class="discountcard" style="display:none;">
                    <div class="p-1rem d-flex justify-content-between">
                        <div>Discount<span class="mleft2 dispercenteage" id="discount_label">0%</span></div>
                        <b>₹<span id="redeem_amount">0.00</span></b>
                    </div>
                </div>
                <div class="p-1rem d-flex justify-content-between align-items-center">
                    <h3>Total Amount</h3>
                    <h3 class="totalamount">₹<span
                            id="final_amount">{{ number_format($custom_assessment->amount, 2) }}</span></h3>
                </div>
                <div class="mt-3 d-flex justify-content-center mb-3 mb1rem">
                    <button  title="Proceed to Pay" type="button" id="proceed_btn" data-url="{{ $process_payment_url }}"
                        class="btn btn-primary btnapply mr-2">
                        Proceed to Pay
                    </button>
                    <button  title="cancel" type="button" id="cancel_btn" class="btn cancelbtncus">Cancel</button>
                </div>

            </div>
        </div>
    </div>
</div>

<div id="loader">
    <div class="circle-loader"></div>
</div>
@endsection

@section('footer_scripts')
<script type="text/javascript">
//Disable Right Click
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

// Disable Developer Tools Shortcuts
document.addEventListener('keydown', function(e) {
    if (
        e.key === 'F12' ||
        (e.ctrlKey && e.shiftKey && e.key === 'I') ||
        (e.ctrlKey && e.shiftKey && e.key === 'J') ||
        (e.ctrlKey && e.key === 'U')
    ) {
        e.preventDefault();
        return false;
    }

});

$(document).on('click', '#apply_coupon', function() {
    $('#loader').show();
    var couponCode = $.trim($('#coupon_code').val());
    var assessmentId = $('#assessment_id').val();
    if (couponCode == '') {
         $('#loader').hide();
        swal({
            html: true,
            title: '<span class="sweet-warning-text">Warning</span>',
            text: 'Please enter a coupon code.',
            type: 'warning',
            confirmButtonText: 'OK',
            confirmButtonColor: '#ffbc01'
        });
        $('#coupon_code').focus();
        return false;
    }

    $.ajax({
        url: baseUrl + 'coupon-validation',
        type: 'POST',
        data: {
            assessment_id: assessmentId,
            coupon_code: couponCode,
            _token: '{{ csrf_token() }}'
        },

        beforeSend: function() {
            $('#apply_coupon').prop('disabled', true);
        },

        success: function(response) {
            $('#loader').hide();
            $('#apply_coupon').prop('disabled', false);
            if (response.status != 200) {
                $('#discount_section').hide();
                $('#coupon_code').prop('readonly', false);
                $('#discount_label').text('0%');
                $('#redeem_amount').text('0.00');
                $('#final_amount').text(
                    '{{ number_format($custom_assessment->amount, 2) }}'
                );
                // revert proceed button url to original
                var originalUrl = $('#original_process_payment_url').val();
                if (originalUrl) {
                    $('#proceed_btn').data('url', originalUrl);
                    $('#applied_coupon_id').val('');
                }
                swal({
                    html: true,
                    title: '<span class="sweet-warning-text">Warning</span>',
                    text: response.message,
                    type: 'warning',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#ffbc01'
                });

                return false;
            }
            if (response.discount_type == 1) {
                $('#discount_label').text(parseFloat(response.discount_value).toFixed(2) + '%');
            } else if (response.discount_type == 2) {
                $('#discount_label').text('₹' + parseFloat(response.discount_value).toFixed(2));
            }
            $('#redeem_amount').text(parseFloat(response.redeem_amount).toFixed(2));
            $('#final_amount').text(parseFloat(response.final_amount).toFixed(2));
            // $('#redeem_amount').text(response.redeem_amount);
            // $('#final_amount').text(response.final_amount);

            $('#discount_section').show();
            $('#coupon_code').prop('readonly', true);
            $('#apply_coupon').prop('disabled', true);
            // prepare proceed URL (use response.process_payment_url if provided, else original)
            var originalUrl = $('#original_process_payment_url').val();
            var proceedUrl = response.process_payment_url ? response.process_payment_url : (
                originalUrl || '');
            if (response.applied_coupon) {
                // append applied_coupon param
                var sep = proceedUrl.indexOf('?') !== -1 ? '&' : '?';
                proceedUrl = proceedUrl + sep + 'applied_coupon=' + encodeURIComponent(response
                    .applied_coupon);
                $('#applied_coupon_id').val(response.applied_coupon);
            }
            // update proceed button data-url
            if (proceedUrl) {
                $('#proceed_btn').data('url', proceedUrl);
            }
            swal({
                html: true,
                title: '<span class="sweet-success-text">Success</span>',
                text: 'Discount Code redeemed successfully.',
                type: 'success',
                confirmButtonText: 'OK',
                confirmButtonColor: '#0ac282'
            });
        },

        error: function() {
             $('#loader').hide();
            $('#apply_coupon').prop('disabled', false);
            swal({
                html: true,
                title: '<span class="sweet-danger-text">Something Went Wrong</span>',
                text: 'Please try again later.',
                type: 'error',
                confirmButtonText: 'OK'
            });

        }

    });

});

$(document).on('input', '#coupon_code', function() {
    if ($(this).val().trim() == '') {

        $('#discount_section').hide();
        $('#discount_label').text('0%');
        $('#redeem_amount').text('0.00');
        $('#final_amount').text('{{ number_format($custom_assessment->amount, 2) }}');
        $('#applied_coupon_id').val('');
        var originalUrl = $('#original_process_payment_url').val();
        if (originalUrl) {
            $('#proceed_btn').data('url', originalUrl);
            $('#applied_coupon_id').val('');
        }
    }
});

// proceed button redirect
$(document).on('click', '#proceed_btn', function(e) {
    e.preventDefault();
    var url = $(this).data('url') || $('#original_process_payment_url').val();
    if (!url) {
        console.error('No payment URL available');
        return;
    }
    window.location.href = url;
});
$(document).on('click', '#cancel_btn', function() {
    window.history.back();
});
$(document).on('click', '#remove_coupon', function() {
    if ($('#applied_coupon_id').val() != '' || $('#coupon_code').val() !='') {
        $('#coupon_code').val('').prop('readonly', false);
        $('#apply_coupon')
            .prop('disabled', false)
            .removeClass('btn-secondary')
            .addClass('btnapply1');

        $('#discount_section').hide();
        $('#discount_label').text('0%');
        $('#redeem_amount').text('0.00');
        $('#final_amount').text('{{ number_format($custom_assessment->amount, 2) }}');

        $('#applied_coupon_id').val('');

        var originalUrl = $('#original_process_payment_url').val();
        $('#proceed_btn').data('url', originalUrl);

        swal({
            html: true,
            title: '<span class="sweet-success-text">Success</span>',
            text: 'Coupon removed successfully.',
            type: 'success',
            confirmButtonText: 'OK',
            confirmButtonColor: '#0ac282'
        });
    }
});
</script>
@endsection