@extends('pricing.header')
@section('title', $data['title'])
@section('content')

    <style type="text/css">
        .package_detail {
            max-width: 1000px;
            margin: 0 auto;
            overflow: hidden;
            margin-bottom: 60px;
            border: 1px solid #e1e1e1;
        }

        .package_detail-content {
            background: #fff;
            padding: 50px;
        }

        .mb-3 {
            position: relative;
            display: block !important;
        }

        #formPackageDetail .form-label.img {
            position: unset;
            display: block;
            margin-left: 0;
            padding-left: 0;
            font-size: 1rem;
        }

        .select2-container--default .select2-results>.select2-results__options {
            text-align: left;
        }


        #formPackageDetail .form-label {
            position: absolute;
            font-size: 1rem;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-color: white;
            color: gray;
            padding: 0 0.3rem;
            margin: 0 0.5rem;
            transition: .1s ease-out;
            transform-origin: left top;
            pointer-events: none;
        }

        #formPackageDetail input:focus {
            border-color: #3751A1 !important;
        }

        #formPackageDetail input:focus+label {
            color: #3751A1;
            top: 0;
            transform: translateY(-50%) scale(.9);
        }

        #formPackageDetail input:not(:placeholder-shown)+label {
            top: 0;
            transform: translateY(-50%) scale(.9);
        }

        .col-md-6 {
            position: relative;
        }

        #formPackageDetail .select2 {
            font-size: 1rem !important;
            outline: none !important;
            border: 1px solid gray !important;
            border-radius: 5px !important;
            color: gray !important;
            transition: 0.1s ease-out;
        }

        #formPackageDetail .select2-container--open {
            border-color: #3751A1 !important;
        }

        #formPackageDetail .select2:not(:placeholder-shown)+label {
            top: 0;
            transform: translateY(-50%) scale(.9);
        }

        .col-md-12 {
            position: relative;
        }

        .btn.bg_accent {
            background: transparent;
            border: 1px solid #3751A1;
            color: #3751A1;
            position: relative;
            padding: 9px 40px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            font-size: 14px;
        }

        .btn.bg_accent:hover {
            color: #fff;
            border: 1px solid #3751A1;
        }

        .btn.bg_accent:hover::before {
            opacity: 1;
            background-color: #3751A1;
            -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
            -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        }

        .btn.bg_accent::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 150%;
            height: 100%;
            background: #3751A1;
            z-index: -1;
            -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
            transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
            -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
            -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
            transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
        }

        #formRenewPackage .mb-3 {
            padding: 20px;
        }

        #formRenewPackage .mt-3.d-grid {
            margin: 20px !important;
        }

        .renew_package_detail h2 {
            margin-bottom: 30px;
        }

        .tabs-navigation .nav {
            display: inline-flex;
            border: none;
            z-index: 1;
            position: relative;
            overflow: hidden;
        }

        .tabs-navigation-2 {
            margin-bottom: 60px;
        }

        .tabs-navigation-2 .nav {
            display: inline-flex;
            padding: 10px;
            gap: 0;
        }

        .tabs-navigation .nav li {
            flex: 0 0 auto;
        }

        h3.iconbox_title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 7px;
            color: #0d0c17;
        }

        .tabs-navigation-2 .nav .nav-link {
            color: #181B1D;
            padding: 12px 35px;
            margin: 0;
            border-width: 0;
            font-size: 15px;
            font-weight: 500;
        }

        .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link {
            color: #fff;
            background: #3751A1 !important;
        }

        .tabs-navigation .nav[data-hover=fancyHover] .nav-link:is(.active, :hover) {
            color: #757575;
            background: transparent !important;
        }

        .tabs-navigation-2 .nav .nav-link {
            padding: 12px 35px;
            margin: 0;
            border-width: 0;
        }

        .shape {
            display: none;
        }

        #pricing-container .section-title {
            display: none;
        }

        .pricing-area .section_heading {
            margin-bottom: 80px;
        }

        .pricing_seperator {
            width: 100%;
            height: 1px;
            opacity: 0.4;
            background: #a3a2a3;
            margin-bottom: 25px;
            transition: all 0.4s ease-in-out;
        }


        .tab-content .pricing_btn {
            display: block;
            color: #ffffff;
            text-align: center;
            font-weight: 600;
            padding: 12px 30px;
            border-radius: 10px;
            background-color: transparent;
            transition: all 0.4s ease-in-out;
            font-size: 16px;
            border: 1px solid #191649;
            color: #000;
            width: 100%;
        }

        .pricing-item:hover .pricing_btn,
        .pricing-item:hover .pricing_seperator {
            border: 1px solid #fff;
            color: #fff;
        }

        .pricing-item:hover {
            background: #3751A1;
            /* background: radial-gradient(circle, #fff -90%, #131546) */
        }

        .pricing-item:is(.pricing-item:hover, .pricing-item.active) .label span {
            display: inline-block;
        }

        .pricing-item .label span {
            display: inline-block;
            padding: 5px 18px;
            border-radius: 30px;
            margin-top: 5px;
            font-size: 12px;
            font-weight: 500;
            background-color: #3751A1;
            color: #fff;
        }

        .pricing-item {
            position: relative;
            overflow: hidden;
            padding: 50px 40px;
            border: 1px solid #eaeaea;
            background: #fff;
            transition: all 0.3s ease-out;
            z-index: 1;
            border-radius: 15px !important;
            margin-bottom: 30px;
            box-shadow: 0px 0px 20px 5px rgba(216, 216, 216, 0.4);
        }

        .pricing-item .icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            text-align: center;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            transition: all 0.4s ease-in-out;
            border: 1px solid #e1e1e1;
        }

        .pricing-item :is(h3, .text, .price, .period, h5, .item-list) {
            transition: color 0.2s linear;
            transition-delay: 0.1s;
        }

        .pricing-item:hover li.fade-in {
            transition: all .1s ease-in-out;
        }

        .pricing-item h3 {
            color: #181B1D;
            font-weight: 600;
            font-size: 32px;
            line-height: 1.207em;
            margin-bottom: 4px;
            transition: all 0.4s ease-in-out;
            padding-left: 10px;
        }

        .pricing-item .text {
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .pricing-item .price {
            font-weight: 700;
            color: #181B1D;
            margin-inline-end: 10px;
            font-size: 38px;
            line-height: 1.315em;
            transition: all 0.4s ease-in-out;
            margin-bottom: 20px;
        }

        .pricing-item .period {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.6em;
            color: #6b6b6b;
            transition: all 0.4s ease-in-out;
        }

        .pricing-item h5 {
            margin-bottom: 20px;
            line-height: 1.3;
            font-weight: 600;
            font-size: 1.25rem;
        }

        .pricing-item .item-list li {
            margin-bottom: 10px;
            font-size: 16px;
            cursor: pointer;
        }

        .pricing-item .item-list i {
            width: 22px;
            height: 22px;
            line-height: 22px;
            border-radius: 50%;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background-color: #3751A1;
            -webkit-margin-end: 10px;
        }

        .pricing-item i.bx.bx-x {
            background: #EB4C4C;
        }

        .pricing-item:is(.pricing-item:hover, .pricing-item.active) .item-list i.bx.bx-x {
            color: #EB4C4C;
        }

        .pricing-item:is(.pricing-item:hover, .pricing-item.active) .item-list i {
            color: #00D5AE;
            background-color: #fff;
        }

        .pricing-item:is(.pricing-item:hover, .pricing-item.active)::after {
            transform: none;
        }

        .pricing-item:is(.pricing-item:hover) :is(h3, .text, .price, .period, h5, .item-list, .show-more) {
            color: #fff;
        }

        span.show-more {
            display: block;
            margin-top: 5px;
            cursor: pointer;
            transition: transform 0.4s ease-out;

        }

        .pricing-item:is(.pricing-item:hover, .pricing-item.active) .icon {
            color: #141649c4;
            background: #fff;
        }

        .page-title-area {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        .page-title-area::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #141649ba !important;
            opacity: 0.2;
            z-index: -1;
        }

        .lazyloaded.blur-up {
            filter: blur(0);
        }

        .blur-up {
            filter: blur(5px);
            transition: filter 400ms;
        }

        .content h1 {
            font-size: 64px;
            color: #181B1D;
            font-weight: 700;
            line-height: 1.3;
        }

        .list-unstyled li.d-inline a {
            color: #181B1D;
            text-decoration: none;
            outline: 0 !important;
            transition: all 0.3s ease-out;
        }

        li.d-inline.active {
            font-size: 16px;
        }

        .page-title-area {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        #formPackageDetail #package_plan a {
            display: none;
        }

        .modal-header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 1rem 1rem;
            border-bottom: 1px solid #eff2f7;
            border-top-left-radius: calc(.4rem - 1px);
            border-top-right-radius: calc(.4rem - 1px);
        }

        .package_detail i.bx.bx-arrow-back {
            font-size: 16px;
            color: #000;
            margin-right: 20px;
            display: inline-block;
            border: 1px solid;
            padding: 3px;
            border-radius: 50%;
            /* vertical-align: top; */
        }


        h4#modaldetailLabel {
            display: inline-block;
        }

        .package_detail i.bx.bx-arrow-back:hover {
            background: #3751a1;
            color: #fff;
            border: 1px solid #fff;
        }
        .toast-error {
	background-color: #BD362F !important;
    color: #fff !important;
}
    </style>

    <div class="page-content">
        <div class="container">
            <div class="container-fluid">

                <form id="formPackageDetail" action="{{ route('paymentlink') }}" method="POST" class="needs-validation"
                    novalidate>
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="package_id" id="package_id" value="{{ $data['package']->id }}">
                        <input type="hidden" name="type" id="type" value="{{ $data['type'] }}">
                        <input type="hidden" name="callback_url" value="{{ route('payment.callback') }}">
                        <input type="hidden" class="form-control" id="amount" name="amount" placeholder=""
                            value="{{ $data['package']->price }}">
                        <input type="hidden" class="form-control" id="company_id" name="company_id" placeholder=""
                            value="{{ $data['companyDetails']->id }}">
                            <input type="hidden" name="discount_amt" id="discount_amt" value="0">
                            <input type="hidden" name="discount_per" id="discount_amt" value="0">
                            <input type="hidden" name="gst_amount" id="gst_amount" value="0">
                            <input type="hidden" name="final_payable" id="final_payable" value="0">
                            <input type="hidden" name="coupon_id" id="coupon_id" value="0">

                        <div class="row ">
                            <div class="col-md-12">
                                <div class="package_detail" id="package_detail">
                                    <div class="modal-header" style="border-top: 1px solid #e1e1e1;margin-top: 15px;">
                                        <div class="header-button">
                                            <a href="{{ route('home') }}"><i class="bx bx-arrow-back"></i></a>
                                            <h4 class="modal-title" id="modaldetailLabel"> Client Details</h4>
                                        </div>
                                    </div>
                                    <div class="package_detail-content">
                                        <div class="renew_package">
                                            <div class="renew_package_detail">
                                                <h2>Your Expire package Details</h2>
                                                <p><strong>Package Name:
                                                    </strong>{{ $data['package']->title . '(' . $data['package']->term . ')' }}
                                                </p>
                                                <p><strong>Package Amount: </strong>{{ $data['package']->price }}</p>
                                                <p><strong>Package Features: </strong>{{ $data['package']->features }}</p>
                                                <p><strong>Company Name: </strong>{{ $data['companyDetails']->name }}</p>
                                                <p><strong>Email: </strong>{{ $data['companyDetails']->email }}</p>
                                                <p><strong>Phone Number:
                                                    </strong>{{ $data['companyDetails']->phone_number }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" style="justify-content: center;">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="coupon_code" name="coupon_code" placeholder="" value="">
                                                <label for="coupon_code" class="form-label">Coupon Code</label>
                                            </div>
                                        </div>
                                        <div class="col-md-1" style="margin-top: -10px; padding-left: 0px;">
                                            <button id="btnVerify" class="btn btn-secondary" style="margin-top: 10px;">Verify</button>
                                        </div>
                                    </div>
                                    <div class="row" id="amt_section" style="display: none; justify-content: center;">
                                        <div class="col-md-8">
                                            <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th class="text-center">Description</th>
                                                            <th class="text-center">Amount</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>Package Amount:</td>
                                                            <td class="text-end">
                                                                <span id="tamount" class="fw-bold text-success">0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>- Discount Amount:</td>
                                                            <td class="text-end">
                                                                <span id="discountamount" class="fw-bold text-danger">- 0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>+ GST Amount(18%):</td>
                                                            <td class="text-end">
                                                                <span id="gstamount" class="fw-bold text-success">0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Final Payable Amount:</strong></td>
                                                            <td class="text-end">
                                                                <span id="finalpayableamount" class="fw-bold text-primary">0</span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button id="btnSave" type="submit" class="btn btn-primary">Pay Now</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="pricing-container">

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

    @include('pricing/footer')
@endsection('content')

@section('custom-scripts')

    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script>
        var ajaxURL = '{{ route('pricing.ajax') }}';
        var CheckCouponCode = '{{ route('check.coupon.code') }}';
        var csrfToken = $("[name=_token").val();

        $(document).ready(function() {
            $.ajax({
                type: 'GET',
                url: ajaxURL,
                success: function(response) {
                    $('#pricing-container').html(response.view);
                }
            });
            var couponCode = $('#coupon_code').val().trim();

                    if (couponCode == '') {
                        $.ajax({

                            url: CheckCouponCode,
                            method: 'get',
                            data: {
                                coupon_code: couponCode
                            },
                            success: function (resultData) {
                              
                                    // $('#amt_section').hide();
                                    amount = parseFloat($('#amount').val());
                                    let discountAmount = 0;
                                    let gstRate = 18;
                                    let gstAmount = (amount * gstRate) / 100;
                                    let finalAmount = (amount + gstAmount);

                                    $('#discountamount').text(discountAmount.toFixed(2));
                                    $('#tamount').text(amount.toFixed(2));
                                    $('#gstamount').text(gstAmount.toFixed(2));
                                    $('#finalpayableamount').text(finalAmount.toFixed(2));
                                    $('#gst_amount').val(gstAmount.toFixed(2));
                                    $('#final_payable').val(finalAmount.toFixed(2));


                                    $('#amt_section').show();
                                
                            }

                        });
                    }
        });

        $('#btnSave').on('click', function(event) {
            var form = $('#formPackageDetail')[0];
            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
                $('#formPackageDetail').addClass('was-validated');
            }
        });

        
        // $('#coupon_code').on('keyup', function() {
        //     var couponCode = $(this).val().trim();
        //     if (couponCode !== '') {
        //         $('#coupon_id').val(0);
        //         $('#discount_amt').val(0);
        //         $('#discount_per').val(0);
        //         $('#gst_amount').val(0);
        //         $('#final_payable').val(0);
        //         $('#amt_section').hide();
        //     } else {
        //         $('#coupon_id').val(0);
        //         $('#discount_amt').val(0);
        //         $('#discount_per').val(0);
        //         $('#gst_amount').val(0);
        //         $('#final_payable').val(0);
        //         $('#amt_section').hide();
        //     }
        // });

        $('#btnVerify').on('click', function(event) {
            event.preventDefault();
            var couponCode = $('#coupon_code').val().trim();

            if (couponCode != '') {
                $.ajax({

                    url: CheckCouponCode,
                    method: 'get',
                    data: {
                        coupon_code: couponCode
                    },
                    success: function(resultData) {
                        if (resultData['data']['status'] === 'valid') {

                            amount = parseFloat($('#amount').val());
                            discountType = resultData['data']['discount_type'];
                            discountValue = parseFloat(resultData['data']['discount_value']);
                            CouponCode = resultData['data']['coupon_code'];
                            CouponId = resultData['data']['coupon_id'];
                            let discountAmount = 0;

                            if (discountType === 1) {
                                discountAmount = (amount * discountValue) / 100;
                            } else {
                                discountAmount = discountValue;
                            }

                            var dicountLessAmount = amount - discountAmount;
                            let gstRate = 18;
                            let gstAmount = (dicountLessAmount * gstRate) / 100;
                            let discountedAmount = (dicountLessAmount + gstAmount);
                            let finalAmount = discountedAmount;
                            $('#amt_section').show();

                            if(amount <= discountAmount){
                                    let discountAmount = 0;
                                    let gstRate = 18;
                                    let gstAmount = (amount * gstRate) / 100;
                                    let finalAmount = (amount + gstAmount);

                                    $('#discountamount').text(discountAmount.toFixed(2));
                                    $('#tamount').text(amount.toFixed(2));
                                    $('#gstamount').text(gstAmount.toFixed(2));
                                    $('#finalpayableamount').text(finalAmount.toFixed(2));
                                    $('#gst_amount').val(gstAmount.toFixed(2));
                                    $('#final_payable').val(finalAmount.toFixed(2));

                                toastr['error']('Coupon code is Not applied , Discount Amount Higher');


                                }else{
                                    $('#tamount').text(amount.toFixed(2));
                                $('#discountamount').text(discountAmount.toFixed(2));
                                $('#gstamount').text(gstAmount.toFixed(2));
                                $('#finalpayableamount').text(finalAmount.toFixed(2));

                                $('#coupon_id').val(CouponId);
                                $('#discount_amt').val(discountAmount.toFixed(2));
                                if (discountType === 1) {
                                    $('#discount_per').val(discountValue.toFixed(2));
                                } else {
                                    $('#discount_per').val(0);
                                }
                                $('#gst_amount').val(gstAmount.toFixed(2));
                                $('#final_payable').val(finalAmount.toFixed(2));


                                toastr['success']('Coupon applied successfully.');
                                }

                        } else {
                            amount = parseFloat($('#amount').val());
                                let discountAmount = 0;
                                let gstRate = 18;
                                let gstAmount = (amount * gstRate) / 100;
                                let finalAmount = (amount + gstAmount);

                                $('#discountamount').text(discountAmount.toFixed(2));
                                $('#tamount').text(amount.toFixed(2));
                                $('#gstamount').text(gstAmount.toFixed(2));
                                $('#finalpayableamount').text(finalAmount.toFixed(2));
                                $('#gst_amount').val(gstAmount.toFixed(2));
                                $('#final_payable').val(finalAmount.toFixed(2));


                                $('#amt_section').show();
                            toastr['error']('Coupon code is invalid or expired.');
                        }
                    }

                });
            } else {
                amount = parseFloat($('#amount').val());
                                let discountAmount = 0;
                                let gstRate = 18;
                                let gstAmount = (amount * gstRate) / 100;
                                let finalAmount = (amount + gstAmount);

                                $('#discountamount').text(discountAmount.toFixed(2));
                                $('#tamount').text(amount.toFixed(2));
                                $('#gstamount').text(gstAmount.toFixed(2));
                                $('#finalpayableamount').text(finalAmount.toFixed(2));
                                $('#gst_amount').val(gstAmount.toFixed(2));
                                $('#final_payable').val(finalAmount.toFixed(2));


                                $('#amt_section').show();
                toastr['error']('No Coupon code Found.');
            }

        });
        $(document).ready(function() {
            var option = {
                beforeSubmit: showRequest,
                success: showResponse
            };
            $("#formPackageDetail").ajaxForm(option);
        });

        function showRequest(FormData, jqForm, option) {
            // generateHierarchyCode($("#main_master_name").val());
            var queryString = $.param(FormData);
            $("#btnSave").html("Saving...");
            $("#btnSave").prop("disabled", true);
            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {

            $("#btnSave").html("Save");
            $("#btnSave").prop("disabled", false);
            if (responseText['status'] == 1) {
                toastr['success'](responseText['msg']);
                window.location.href = responseText.data.short_url;
            } else if (responseText['status'] == 0) {
                toastr['error'](responseText['msg']);
            }
        }
    </script>
@endsection