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

<style type="text/css">
    .package_detail {
        max-width: 1000px;
        margin: 0 auto;
        overflow: hidden;
    }

    .package_detail-content {
        background: #fff;
        margin: 70px 0;
        margin-top: 171px;
    }

    .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;
    }

    .select2-container .select2-selection--single {
        background-color: #fff;
        border: 1px solid #ced4da;
        height: 48px
    }

    .form-control {
        border: 1px solid #ced4da;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        top: 65%;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 45px;
        padding-left: .75rem;
        color: #495057;
    }

    #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 30px;
        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;
        margin-left: 155px;
    }

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

    .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;
    }

    .package_detail i.bx.bx-arrow-back:hover {
        background: #3751A1;
        color: #fff;
        border: 1px solid #fff;
    }

    h4#modaldetailLabel {
        display: inline-block;
    }

    .header-button a {
        vertical-align: -webkit-baseline-middle;
    }

    div#package_detail.renew {
        max-width: 800px;
    }

    #formRenewPackage .form-label {
        font-size: 16px;
    }

    #formRenewPackage .btn.bg_accent {
        margin-right: 86px;
        padding: 10px 20px;
    }

    #formRenewPackage .mt-3 {
        text-align: end;
        margin-right: 90px;
    }

    #formRenewPackage #email {
        max-width: 450px;
    }

    .select2-container--default .select2-selection--single:focus {
        border-color: #3751A1;
    }


    .select2-container--default .select2-selection--single:focus {
        color: #3751A1;
        background-color: #fff;
        border-color: #b9bfc4;
        outline: 0;

    }

    .select2-container--default .select2-selection--single:focus {
        border-color: #3751A1;

    }

    .select2-container--default.select2-container--open.focused .select2-selection--single {
        border-color: #3751A1;

    }

    #description:focus {
        border-color: #3751A1;
        outline: none;
        /* Optional: removes the default outline */
    }
</style>

<!-- <div class="page-content"> -->
<div class="">

    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">

                @if(request('type') == 'new')
                    <div class="package_detail" id="package_detail">
                        <div class="package_detail-content">
                            <div class="modal-header">
                                <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>
                            <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" name="package_term" id="package_term"
                                        value="{{ $data['package']->term }}">
                                    <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="mb-3 d-flex">
                                                <label for="company_logo_img" class="form-label img">Company
                                                    Logo </label>
                                                <input type="file" class="form-control-file" hidden name="company_logo"
                                                    id="company_logo" placeholder="" aria-describedby="fileHelpId">
                                                <img name="show_company_logo" id="show_company_logo"
                                                    style="height: 100px; width: 100px;border: 2px solid #ddd;object-fit: contain;"
                                                    src="assets/images/company-logo.png">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">

                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="first_name"
                                                    name="first_name" placeholder="" value="" required>
                                                <label for="first_name" class="form-label">First Name <code
                                                        class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="last_name" name="last_name"
                                                    placeholder="" value="" required>
                                                <label for="last_name" class="form-label">Last Name <code
                                                        class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="company_name"
                                                    name="company_name" placeholder="" value="" required>
                                                <label for="company_name" class="form-label">Compnay Name <code
                                                        class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="email" class="form-control" id="email" name="email"
                                                    placeholder="" value="" required>
                                                <label for="email" class="form-label">Email <code
                                                        class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="number" class="form-control" id="phone_number"
                                                    name="phone_number" placeholder="" value="" required
                                                    pattern="\d{10}" oninput="limitInputLength(this)"
                                                    title="Please enter a valid 10-digit phone number.">
                                                <label for="q_item_master_phone" class="form-label">Phone Number
                                                    <code class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="address_line_1"
                                                    name="address_line_1" placeholder="" value="" required>
                                                <label for="q_item_master_app_display_name" class="form-label">Address
                                                    line 1 <code class="highlighter-rouge">*</code> </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="address_line_2"
                                                    name="address_line_2" onkeypress="" placeholder="" value="">
                                                <label for="q_item_master_module" class="form-label">Address line 2
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3 mt-1 select-wrapper">
                                                <select class="form-select" id="country_id"
                                                    aria-label="Disabled select example" name="country_id" value=""
                                                    required>
                                                </select>
                                                <label for="q_item_master_country" class="form-label">Country <code
                                                        class="highlighter-rouge">*</code></label>
                                                <div class="invalid-feedback">
                                                    Please select Country.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3 mt-1 select-wrapper">
                                                <select class="form-select" id="state_id"
                                                    aria-label="Disabled select example" name="state_id" required>
                                                </select>
                                                <label for="q_item_master_satate" class="form-label">State <code
                                                        class="highlighter-rouge">*</code></label>
                                                <div class="invalid-feedback">
                                                    Please select State.
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3 mt-1">
                                                <select class="form-select form-control select2-apply" id="city_id"
                                                    aria-label="Disabled select example" name="city_id">

                                                </select>
                                                <label for="q_item_master_city" class="form-label">City</label>
                                                <div class="invalid-feedback">
                                                    Please select City.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="text" class="form-control" id="area" name="area"
                                                    placeholder="" value="" required>
                                                <label for="q_item_master_max_module" class="form-label">Area
                                                    <code class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <input type="number" class="form-control" id="pincode" name="pincode"
                                                    placeholder="" value="" required pattern="\d{6}"
                                                    title="Please enter a valid 6-digit pincode."
                                                    oninput="limitPincodeInputLength(this)">
                                                <label for="q_item_master_max_module" class="form-label">Pincode
                                                    <code class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                {{-- <input type="text" class="form-control" id="description"
                                                            name="description" placeholder="" value="" required> --}}
                                                <textarea class="form-control" id="description" name="description"
                                                    style="min-height: calc(6.5em + .94rem + 2px);" rows="4" cols="50"
                                                    placeholder="" required></textarea>

                                                <label for="description" class="form-label"
                                                    style="top: 0px;">Description <code
                                                        class="highlighter-rouge">*</code></label>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="row">

                                        <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-2">
                                            <button id="btnVerify" class="btn btn-secondary"
                                                style="margin-top:10px;">Verify</button>
                                        </div>

                                    </div>
                                    {{-- <div class="row" id="amt_section" style="display: none;"> --}}
                                    <div class="row" id="amt_section">
                                        <div class="col-md-6">
                                            <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="fs-5 fw-bold text-success">0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>- Discount Amount:</td>
                                                            <td class="text-end">
                                                                <span id="discountamount"
                                                                    class="fs-5 fw-bold text-danger">- 0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>+ GST Amount(18%):</td>
                                                            <td class="text-end">
                                                                <span id="gstamount"
                                                                    class="fs-5 fw-bold text-success">0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td><strong>Final Payable Amount:</strong></td>
                                                            <td class="text-end">
                                                                <span id="finalpayableamount"
                                                                    class="fs-5 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>
                            </form>
                        </div>
                    </div>
                @elseif(request('type') == 'renew')
                    <div class="package_detail renew" id="package_detail">
                        <div class="package_detail-content">
                            <div class="modal-header">
                                <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="row ">
                                <div class="col-md-12">
                                    <form class="needs-validation"
                                        action="{{ route('package.renew.otp.process') }}"
                                        id="formRenewPackage" method="POST" novalidate>
                                        @csrf
                                        <input type="hidden" id="type1" name="type1"
                                            value="{{ $data['type1'] }}">
                                        {{-- <input type="hidden" name="type" id="type" value="{{ $data['type'] }}">
                                        --}}
                                        <input type="hidden" name="package_id" id="package_id"
                                            value="{{ $data['package']->id }}">

                                        <div class="alert alert-danger" id="error" style="display: none;"></div>
                                        <div class="mb-3">
                                            <label for="email" class="form-label">Email</label>
                                            <input type="text" class="form-control" id="email" placeholder="" required
                                                name="email" @if ($data['type1']==1) readonly @endif
                                                value="{{ $data['email'] }}">
                                        </div>
                                        @if($data['type1'] == 1)
                                            <div class="container height-100 d-flex justify-content-center align-items-center"
                                                id="div_verify_otp">
                                                <div class="position-relative">
                                                    <div class="card-1 p-2 text-center">
                                                        <h6>Please enter the one time password <br> to verify
                                                            your account
                                                        </h6>
                                                        <div>
                                                            <span>A code has been sent to</span>
                                                            <small id="recieverLable"></small>
                                                        </div>
                                                        <div id="otp"
                                                            class="inputs d-flex flex-row justify-content-center mt-2">
                                                            <input class="m-2 text-center form-control rounded"
                                                                type="text" id="first" maxlength="1"
                                                                name="one_time_password[]" />
                                                            <input class="m-2 text-center form-control rounded"
                                                                type="text" id="second" maxlength="1"
                                                                name="one_time_password[]" />
                                                            <input class="m-2 text-center form-control rounded"
                                                                type="text" id="third" maxlength="1"
                                                                name="one_time_password[]" />
                                                            <input class="m-2 text-center form-control rounded"
                                                                type="text" id="fourth" maxlength="1"
                                                                name="one_time_password[]" />

                                                        </div>
                                                        <div class="mt-4">
                                                            <button type="submit"
                                                                class="btn btn-primary waves-effect waves-light"
                                                                formaction="{{ route('package.renew.otp.process') }}?validate=1">Validate</button>
                                                        </div>
                                                        <br>
                                                        <div class="content justify-content-center align-items-center">
                                                            <span>Didn't get the code?</span>
                                                            <button type="submit" id="resendOTP"
                                                                class="btn btn-sm btn-dark"
                                                                type="submit">Resend</button>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        @endif

                                        @if($data['type1'] == 0)
                                            <div class="mt-3">
                                                <button class="btn bg_accent" type="submit">Send OTP</button>
                                            </div>
                                        @endif

                                        <br>

                                        @if(session('error'))
                                            <div class="alert alert-danger" role="alert">
                                                <i class="mdi mdi-block-helper me-2"></i>
                                                {{ session('error') }}
                                            </div>
                                        @endif
                                        @if(session('success'))
                                            <div class="alert alert-success" role="alert">
                                                <i class="mdi mdi-check-all me-2"></i>
                                                {{ session('success') }}
                                            </div>
                                        @endif

                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>



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

@section('custom-scripts')


<script src="{{ asset('assets/ckeditor5/build/ckeditor.js') }}"></script>

<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 class="text/javascript">
    var AjaxSelectCIty = '{{ route('payment.selectcity') }}';
    var AjaxSelectState = '{{ route('payment.selectsate') }}';
    var AjaxSelectCountry = '{{ route('payment.selectcountry') }}';
    var AjaxSelectPackages = '{{ route('payment.selectpackage') }}';
    var AjaxdataSelect = '{{ route('company.ajax') }}';
    var AjaxediteData = '{{ route('company.editadata') }}';
    var CheckCouponCode = '{{ route('check.coupon.code') }}';
    var csrfToken = $("[name=_token").val();


    $(document).ready(function () {
        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(Math.ceil(finalAmount.toFixed(2)));
                            $('#gst_amount').val(gstAmount.toFixed(2));
                            $('#final_payable').val(Math.ceil(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(Math.ceil(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(Math.ceil(finalAmount.toFixed(2)));


                            toastr['success']('Coupon applied successfully.');
                        }
                    } else {
                        // $('#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(Math.ceil(finalAmount.toFixed(2)));
                        $('#gst_amount').val(gstAmount.toFixed(2));
                        $('#final_payable').val(Math.ceil(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(Math.ceil(finalAmount.toFixed(2)));
            $('#gst_amount').val(gstAmount.toFixed(2));
            $('#final_payable').val(Math.ceil(finalAmount.toFixed(2)));


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

    });

    setTimeout(function () {

        $(".alert").hide(1000);

    }, 2000);

    $('#state_id').select2({
                allowClear: true,allowClear: true,
        ajax: {
            url: AjaxSelectState,
            dataType: 'json',
            delay: 0,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page,
                    "country_id": function () {
                        return $('#country_id').val();
                    }
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;


                var results = data.results.map(function (state) {
                    return {
                        id: state.id,
                        text: state.text
                    };
                });

                return {
                    results: results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'please select',
        dropdownParent: $("#formPackageDetail"),
    });

    $('#city_id').select2({
                allowClear: true,allowClear: true,
        ajax: {
            url: AjaxSelectCIty,
            dataType: 'json',
            delay: 0,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page,
                    "country_id": function () {
                        return $('#country_id').val();
                    },
                    "state_id": function () {
                        return $('#state_id').val();
                    }
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;


                var results = data.results.map(function (state) {
                    return {
                        id: state.id,
                        text: state.text
                    };
                });

                return {
                    results: results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'please select',
        dropdownParent: $("#formPackageDetail"),
    });

    $('#country_id').select2({
                allowClear: true,allowClear: true,
        ajax: {
            url: AjaxSelectCountry,
            dataType: 'json',
            delay: 0,
            data: function (params) {
                return {
                    q: params.term,
                    page: params.page,
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;


                var results = data.results.map(function (state) {
                    return {
                        id: state.id,
                        text: state.text
                    };
                });

                return {
                    results: results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'please select',
        dropdownParent: $("#formPackageDetail"),
    });

    $('#country_id').on('select2:open', function () {
        $(this).next('.select2').addClass('focused');
    });
    $('#state_id').on('select2:open', function () {
        $(this).next('.select2').addClass('focused');
    });
    $('#city_id').on('select2:open', function () {
        $(this).next('.select2').addClass('focused');
    });

    $('#country_id').on('change', function () {
        $("#state_id").empty().trigger('change');
        $("#city_id").empty().trigger('change');
    });
    $('#state_id').on('change', function () {
        $("#city_id").empty().trigger('change');
    });

    function reloadTable() {
        formPackageDetail.reload(null, false);
    }

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

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

    function resetInputForm() {

        $('#formPackageDetail').trigger("reset");
        $("#show_company_logo").attr("src", "")

    }

    function showResponse(responseText, statusText, xhr, $form) {
        $("#btnSave").html("Save");
        $("#btnSave").prop("disabled", false);
        if (responseText['status'] == 1) {
            toastr['success'](responseText['msg']);
            resetInputForm();
            window.location.href = responseText.data.short_url;
        } else if (responseText['status'] == 0) {
            toastr['error'](responseText['msg']);
        }
    }

    function resetInputForm() {
        $("#formPackageDetail").removeClass('was-validated');
        $('#formPackageDetail').trigger("reset");
        $("#city_id").empty().trigger('change');
        $("#state_id").empty().trigger('change');
        $("#country_id").empty().trigger('change');

    }

    $(document).ready(function () {
        $('#company_logo').change(function () {
            var file = this.files[0]
            if (file) {
                let reader = new FileReader();
                reader.onload = function (event) {
                    $('#show_company_logo').attr('src', event.target.result);
                }
                reader.readAsDataURL(file);
            }
        });

    });

    $('#show_company_logo').click(function () {
        $('#company_logo').trigger('click');
    });

    $(document).ready(function () {
        $('#otp input').on('keyup', function (event) {
            var currentInput = $(this);
            var currentIndex = $('#otp input').index(this);

            if (currentInput.val().length === 1) {
                if (currentIndex < $('#otp input').length - 1) {
                    $('#otp input').eq(currentIndex + 1).focus();
                }
            }
            if (event.key === 'Backspace' && currentInput.val().length === 0) {
                if (currentIndex > 0) {
                    $('#otp input').eq(currentIndex - 1).focus();
                }
            }
        });
        $('#otp input').first().focus();
    });
</script>

@endsection