@extends('home.header')
@section('title', $data['title'])
@section('content')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/flasher/flasher.min.css') }}">

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

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

    .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 .form-control {
                                                                font-size: 1rem !important;
                                                                outline: none !important;
                                                                border: 1px solid #eaeaea !important;
                                                                border-radius: 5px !important;
                                                                padding: 8px 10px !important;
                                                                color: gray !important;
                                                                transition: 0.1s ease-out !important;
                                                            } */

    #formPackageDetail input:focus {
        border-color: #141649ed !important;
    }

    #formPackageDetail input:focus+label {
        color: #141649ed;
        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: #141649ed !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;
        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;
    }

    .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;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 45px;
    padding-left: .75rem;
    color: #495057;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
    width: 34px;
    right: 3px;
}
.select2-container .select2-selection--single {
    background-color: #fff;
    border: #ffffff00;
    height: 48px;
}
</style>

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

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <!-- <div class="package_detail" id="package_detail"> -->
                <!-- <div class="package_detail-content"> -->
                <!-- <div class="modal-header">
                                    <h4 class="modal-title" id="modaldetailLabel"> Client Details</h4>
                                    <div class="header-button">
                                        <a href="{{ route('home') }}" class="btn bg_accent">Back</a>
                                    </div>
                                </div> -->
                @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="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<code
                                                        class="highlighter-rouge">*</code></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"
                                                    src="{{ asset('assets/images/logo/A_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 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="" maxlength="10"
                                                    minlength="10" required  oninput="limitInputLength(this)">
                                                <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="number" class="form-control" id="pincode" name="pincode"
                                                    placeholder="" value="" required oninput="limitPincodeInputLength(this)">
                                                <label for="q_item_master_max_module" class="form-label">Pincode
                                                    <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_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>

                                    <div class="row">
                                        
                                        <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 class="col-md-6">
                                            <div class="mb-3 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>

                                    <div class="row">
                                      
                                        <div class="col-md-6">
                                            <div class="mb-3 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 class="col-md-6">
                                            <div class="mb-3">
                                                <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>

                                    <div class="row">
                                       

                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <!-- <input type="text" class="form-control" id="description"
                                                            name="description" placeholder="" value="" required>
                                                        <label for="description" class="form-label">Description<code
                                                                class="highlighter-rouge">*</code></label> -->
                                                <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>+ GST Amount:</td>
                                                            <td class="text-end">
                                                                <span id="gstamount"
                                                                    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><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="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" id="validate_BTN">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" id="send_otp_btn">Send OTP</button>
                                            </div>
                                        @endif
                                        <br>
                                        @if (session('error'))
                                            <div class="alert alert-danger mt-3" role="alert">
                                                <i class="mdi mdi-block-helper me-2"></i>
                                                {{ session('error') }}
                                            </div>
                                        @endif
                                        @if (session('success'))
                                            <div class="alert alert-success mt-3" 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>
    </div>
</div>

@include('home/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 src="{{ asset('assets/libs/flasher/flasher.min.js') }}"></script>
<script class="text/javascript">
    var AjaxSelectCIty = '{{ route('payment.selectcity') }}';
    var AjaxSelectState = '{{ route('payment.selectstate') }}';
    var AjaxSelectCountry = '{{ route('payment.selectcountry') }}';
    var AjaxSelectPackages = '{{ route('payment.selectpackage') }}';
    var AjaxdataSelect = '{{ route('company.table.ajax') }}';
    var AjaxediteData = '{{ route('company.getdata') }}';
    var CheckCouponCode = '{{ route('check.coupon.code') }}';
    var csrfToken = $("[name=_token").val();
    $(document).ready(function () {
    // Disable all buttons when any form is submitted
    $('form').on('submit', function (event) {
        var emailField = $('#email').val().trim();

        if (emailField !== "") {
            $('button').prop('disabled', true); // Disable all buttons
            $('#send_otp_btn').text('Sending OTP...');
            $('#resendOTP').text('Resending...');
        }
    });

    // If there is an error, re-enable all buttons
    @if(session('error'))
        $('button').prop('disabled', false); // Enable all buttons
        $('#send_otp_btn').text('Send OTP');
        $('#resendOTP').text('Resend');
    @endif

    // Handle resend OTP button click
    $('#resendOTP').on('click', function (event) {
        $(this).prop('disabled', true);
        $('#validate_BTN').prop('disabled', true);
        $(this).text('Resending...');
        $('#formRenewPackage').submit();
    });
});

    function limitInputLength(input) {
            if (input.value.length > 10) {
                input.value = input.value.slice(0, 10);
            }
        }
        function limitPincodeInputLength(input) {
            if (input.value.length > 6) {
                input.value = input.value.slice(0, 6);
            }
        }

    $(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;
    //                     }
    //                     let gstRate = 18;
    //                     let gstAmount = (amount * gstRate) / 100;
    //                     let discountedAmount = (amount + gstAmount) - discountAmount;
    //                     let finalAmount = discountedAmount;
    //                     $('#amt_section').show();

    //                     $('#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));


    //                     flasher.success('Coupon applied successfully.');


    //                 } else {
    //                     $('#amt_section').hide();
    //                     flasher.error('Coupon code is invalid or expired.');
    //                 }
    //             }

    //         });
    //     } else {
    //         $('#amt_section').hide();
    //         flasher.error('No Coupon code Found.');
    //     }

    // });


    $('#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;
                        }
                        let gstRate = 18;
                        let gstAmount = (amount * gstRate) / 100;
                        let discountedAmount = (amount + gstAmount) - discountAmount;
                        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));

                            flasher.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));


                            flasher.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(finalAmount.toFixed(2));
                        $('#gst_amount').val(gstAmount.toFixed(2));
                        $('#final_payable').val(finalAmount.toFixed(2));


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

                        flasher.error('Coupon code is invalid or expired.');
                    }
                }

            });
        } 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(finalAmount.toFixed(2));
            $('#gst_amount').val(gstAmount.toFixed(2));
            $('#final_payable').val(finalAmount.toFixed(2));


            $('#amt_section').show();
            flasher.error('No Coupon code Found.');
        }

    });


    $('#state_id').select2({
        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({
        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;

                // Modify the data.results array to display both name and arabic_state_name
                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({
        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;

                // Modify the data.results array to display both name and arabic_state_name
                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"),
    });

    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) {
            flasher.success(responseText['msg'], {
                timeout: 2500
            });
            resetInputForm();
            window.location.href = responseText.data.short_url;
        } else if (responseText['status'] == 0) {
            flasher.error(responseText['msg'], {
                timeout: 2500
            });
        }
    }

    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