@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {  
        opacity: 1;
    }
    strong {
        font-weight: bolder;
        white-space: nowrap;
    }

    a.btn.btn-primary.p-2.waves-effect.waves-light.btn-sm {
        display: inline-flex;
        width: auto;
        background-color: #264aa5;
        border-color: #264aa5;
    }

    i.bx.bx-right-arrow-circle.bx-fade-right {
        margin: 0 25px 0 10px;
        font-size: 18px;
        line-height: 20px;
    }

    a.btn.btn-primary span {
        margin-right: 10px;
    }

    @media only screen and (max-width:375px){
        .card-body {
            padding: 1.25rem 0.8rem;
        }
    }
  
    td, th{
        vertical-align: middle;
    }

    .quantity {
        position: relative;
        display: flex;
        justify-content: center;
    }

    input[type=number] {
        position: relative; 
        padding: 5px;
        padding-right: 25px;
    }

    thead tr th,
    tbody tr th{
        white-space: nowrap;
    }

    input[type=number]::-webkit-outer-spin-button, 
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button !important;
        width: 30px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }
    
    tr.spacer td{
        padding: 0.2rem;
    }

    .quantity input {
        text-align: left;
        width: 70px;
        height: 28px;
        line-height: 1.65;
        float: left;
        display: block;
        padding: 0;
        margin: 0;
        padding-left: 10px;
        border: none;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
        font-size: 0.9rem;
        border-radius: 0.4rem 0 0 0.4rem;
    }

    .quantity input:focus {
        outline: 0;
    }

    .quantity-nav {
        float: left;
        position: relative;
        height: 35px;
    }

    input{
        text-align: center;
        max-width:100%;
        white-space:nowrap;
    }

    .quantity-button {
        position: relative;
        cursor: pointer;
        border: none;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        width: 21px;
        text-align: center;
        color: #333;
        font-size: 18px;
        font-family: "FontAwesome" !important;
        line-height: 1.5;
        padding: 0;
        background: #FAFAFA;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

    .quantity-button:active {
        background: #EAEAEA;
    }

    .quantity-button.quantity-up {
        position: absolute;
        height: 50%;
        top: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 0 4px 0 0;
        line-height: 0.9;
    }

    .quantity-button.quantity-down {
        position: absolute;
        bottom: 0;
        height: 50%;
        border-radius: 0 0 4px 0;
        line-height: 0.9;
    }
    tr.total {
        --bs-table-striped-bg: #689ae3;
        --bs-table-bg: #689ae3;
    }
    input.sgst,
    input.cgst,
    input.igst{
        width: 50px;
    }

    input.min_unit{
        width: 65px;
    }

    input.igst_amount,
    input.total_value,
    input.sgst_amount,
    input.cgst_amount,
    input.single_unit_price{
        width: 110px;
    }

    input.sgst,
    input.cgst,
    input.igst,
    input.min_unit,
    input.igst_amount,
    input.total_value,
    input.sgst_amount,
    input.cgst_amount,
    input#totalQuantity,
    input#single_unit_price,
    input.single_unit_price, 
    input#totalPrice{
        outline: none;
        border: 0;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        background: transparent;
    }

    button#successButton {
        color: white;
        border: unset;
        /* display: flex; */
        margin: 0 auto;
        font-size: 14px;
        font-weight: 500;
        border-radius: 10px;
        align-items: baseline;
        justify-content: center;
        background: linear-gradient(to left, #40BD00, #60DD00);
    }

    label {
        width: 100%;
        text-align: center;
    }

    td {
        font-size: 14px;
        font-weight: 400;
    }

    tbody tr.spacer td,
    thead tr:first-child td:last-child,
    thead tr:first-child td:first-child {
        border: unset;
    }

    thead tr td {
        border: 1px solid #00000029;
        border-top: unset;
    }

    thead tr:last-child th{
        border: 1px solid #00000029;
        border-bottom: unset;
    }

    tbody tr td:last-child{
        border-right: unset;
    }

    tbody tr td:first-child,
    tbody tr th:first-child{
        border-left: unset;
    }

    tbody tr td,
    tbody tr th{
        border: 1px solid #00000029;
        border-top: unset;
        border-bottom: unset;
    }

    .table>:not(caption)>*>* {
        padding: 0.5rem 0.4rem;
        
    }

    tr td,
    tr th{
        border: 0;
    }

    @media(max-width:991px){
        button#successButton{
            justify-content: space-evenly;
        }
    }

    @media(max-width:575px){
        .col-md-9.col-sm-6.col-12 h6{
            text-align: center;
        }
    }

    @media(max-width:450px){
        h5{
            font-size: 12px;
        }
    }

    tr.spacer:hover{
        background-color: transparent;
    }

    tr:hover{
        background-color: #e3eff9;
    }

    tbody tr td:first-child,
    tbody tr th:first-child,
    thead tr td:first-child{
        border-radius: 15px 0 0 15px;
    }

    tbody tr td:last-child,
    thead tr td:last-child{
        border-radius: 0 15px 15px 0;
    }

    tbody tr:last-child{
        background-color: #E7EDED !important;
    }

    tr.spacer{
        background-color: transparent;
    }

    tr{
        background-color: #f9fbff;
    }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        @if ($data['profile_complate'] == 1)
            @if ($data['data'] == 0)
                <div class="card">
                    <div class="card-body" style="margin: 10rem;">
                        <div class="row justify-content-center mb-5">
                            <div class="col-sm-4">
                                <div class="maintenance-img">
                                    <img src="{{ asset('assets/images/cart-illustartion.png') }}" alt="" class="img-fluid mx-auto d-block">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="text-center">
                                <p class="profile_complate_content" style="font-size: 18px; color: #cf0000; text-align: center;font-weight: 600; font-style: italic;">Purchase List Empty</p>
                                <p style="font-size: 14px;">It seems like your purchase list is currently empty. Don't worry; we are here to help you find what you need.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <form class="text-right" action="{{ route('extra.purchase.data.store') }}" method="POST" id="extraPurchase">
                    @csrf
                    <input type="hidden" id="plan_type" name="plan_type" value="{{ request('plan_type') }}">
                    <input type="hidden" id="agent_code1" name="agent_code1" value="{{ request('agent_code1') }}">
                    <input type="hidden" id="type" name="type" value="{{ request('type') }}">
                    <input type="hidden" id="plan_selection" name="plan_selection" value="{{ request('plan_selection') }}">
                    <div class="row" id="card">

                        <div class="card">
                            <div class="card-body" style="padding: 1.5rem 1rem;">
                                <div class="row">
                                    <div class="text-center">
                                        <div class="table-responsive">
                                            <table class="table mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <td rowspan="2"><input type="checkbox" id="mainCheckbox" autocomplete="off"></td>
                                                        <td><strong>Item</strong></td>
                                                        <td colspan="4"><strong>Quantity / Price</strong></td>
                                                        <td colspan="2"><strong>Purchase</strong></td>
                                                        <td colspan="2"><strong>SGST</strong></td>
                                                        <td colspan="2"><strong>CGST</strong></td>
                                                        <td colspan="2"><strong>IGST</strong></td>
                                                        <td rowspan="2"><strong>Total Value</strong></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Feature Name</th>
                                                        <th>Unit</th>
                                                        <th>Package Qty</th>
                                                        <th>Price</th>
                                                        <th>Enter Qty</th>
                                                        <th>Quantity</th>
                                                        <th>Value</th>
                                                        <th>Rate</th>
                                                        <th>Amount</th>
                                                        <th>Rate</th>
                                                        <th>Amount</th>
                                                        <th>Rate</th>
                                                        <th>Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr class="spacer"><td colspan="100"></td></tr>
                                                    @foreach ($data['data'] as $key => $value)
                                                        <tr class="spacer"><td colspan="100"></td></tr>
                                                        <tr>
                                                            <th><input type="checkbox" class="childCheckbox mx-2" name="select_plan_feature_id[]" id="check_{{$value['id']}}" value="{{ $value['id'] }}" autocomplete="off" style="vertical-align: middle;"></th>
                                                            
                                                            @if ($value['name'] == 'Theme Allotted')
                                                                <th scope="row">{!! $value['name'] !!} <span style="color: #df0000;">(Max purchase limit: {{ $data['theme_unit'] }} units.)</span></th>
                                                            @else
                                                                <th scope="row">{!! $value['name'] !!}</th>
                                                            @endif
                                                            <th scope="row">{{ $value['unit_name'] }}</th>
                                                            <th scope="row"><input type="text" style="width:70px;" value="{{ $value['min_unit'] }}" class="min_unit" id="min_unit{{ $value['id'] }}" readonly/></th>
                                                            <th scope="row"><input type="text" style="width:50px;" value="{{ $value['single_unit_price'] }}" class="single_unit_price" id="single_unit_price{{ $value['id'] }}" readonly/></th>
                                                            <td class="text-center">
                                                                <div class="quantity">
                                                                    @if ($value['name'] == 'Theme Allotted')
                                                                        <input type="number" class="unitInput digitLimit themeUnitInput" min="0" max="{{ $data['theme_unit'] }}" maxlength="1" step="1" value="0" id="quantity_{{ $value['id'] }}" name="selected_plan_feature_qty[]" disabled>
                                                                    @else
                                                                        <input type="number" class="unitInput digitLimit" min="0" maxlength="3" step="1" value="0" id="quantity_{{ $value['id'] }}" name="selected_plan_feature_qty[]" disabled>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            <td><input type="text" value="--" class="min_unit" id="total_min_unit{{ $value['id'] }}" readonly/></td>
                                                            <td><input type="text" value="--" class="single_unit_price" id="total_single_unit_price{{ $value['id'] }}"readonly/></td>
                                                            <td><input type="text" class="sgst" id="sgst_{{ $value['id'] }}" value="{{ $value['sgst'] }}" readonly/></td>
                                                            <td><input type="text" class="sgst_amount" id="sgst_amount_{{ $value['id'] }}" value="--" readonly/></td>
                                                            <td><input type="text" class="cgst" id="cgst_{{ $value['id'] }}" value="{{ $value['cgst'] }}" readonly/></td>
                                                            <td><input type="text" class="cgst_amount" id="cgst_amount_{{ $value['id'] }}" value="--" readonly/></td>
                                                            <td><input type="text" class="igst" id="igst_{{ $value['id'] }}" value="{{ $value['igst'] }}" readonly/></td>
                                                            <td><input type="text" class="igst_amount" id="igst_amount_{{ $value['id'] }}" value="--" readonly/></td>
                                                            <td><input type="text" class="total_value" id="total_value_{{ $value['id'] }}" value="--" readonly/></td>
                                                        </tr>
                                                    @endforeach
                                                    <tr class="spacer"><td colspan="100"></td></tr>
                                                    <tr class="spacer"><td colspan="100"></td></tr>
                                                    <tr class="table-light">
                                                        <td colspan="3"><strong>Total</strong></td>
                                                        <td colspan="3"><strong id="totalItems"></strong></td>
                                                        <td><input type="text" value="" class="min_unit" id="column_total_min_unit" readonly/></td>
                                                        <td><input type="text" value="--" class="single_unit_price" id="column_total_single_unit_price" readonly/></td>
                                                        <td><input type="text" class="sgst" id="column_total_sgst" value="" readonly/></td>
                                                        <td><input type="text" class="sgst_amount" id="column_total_sgst_amount" value="--" readonly/></td>
                                                        <td><input type="text" class="cgst" id="column_total_cgst" value="" readonly/></td>
                                                        <td><input type="text" class="cgst_amount" id="column_total_cgst_amount" value="--" readonly/></td>
                                                        <td><input type="text" class="igst" id="column_total_igst" value="" readonly/></td>
                                                        <td><input type="text" class="igst_amount" id="column_total_igst_amount" value="--" readonly/></td>
                                                        <td><input type="text" class="igst_amount" id="column_total_total_values" value="--" readonly/></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-body">
                                <div class="row" style="align-items: center;">
                                    <div class="col-md-10 col-sm-8 col-8"><h5 style="text-align: right;">Total Amount :</h5></div>
                                    <div class="col-md-2 col-sm-4 col-4"><h5 class="totalAmounts"style="text-align: center;">--</h5></div>
                                </div>
                                <div class="row" style="align-items: center;">
                                    <div class="col-md-10 col-sm-8 col-8"><h5 style="text-align: right;">Total GST :</h5></div>
                                    <div class="col-md-2 col-sm-4 col-4"><h5 class="totalGst"style="text-align: center;">--</h5></div>
                                </div>
                                <div class="row" style="align-items: center;">
                                    <div class="col-md-10 col-sm-8 col-8"><h5 style="text-align: right;">Less :- Cr.Balance Adjustable :</h5></div>
                                    <div class="col-md-2 col-sm-4 col-4"><h5 class="lessCrBalance"style="text-align: center;">--</h5></div>
                                </div>
                                <div class="row" style="align-items: center;">
                                    <div class="col-md-10 col-sm-8 col-8"><h5 style="text-align: right;">Add :- Dr.Balance Adjustable :</h5></div>
                                    <div class="col-md-2 col-sm-4 col-4"><h5 class="addCrBalance"style="text-align: center;">--</h5></div>
                                </div>
                                <div class="row" style="align-items: center;">
                                    <div class="col-md-10 col-sm-8 col-8"><h5 style="text-align: right;"><strong>Net Payable Amount :</strong></h5></div>
                                    <div class="col-md-2 col-sm-4 col-4"><h5 class="netPayableAmount"style="text-align: center;font-weight: 600;">--</h5></div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-9 col-sm-6 col-12" style="display: flex; align-items: center;">
                                        <h6 style="margin: auto 0;"><strong class="totalPrice" id="totalPrice"></strong></h6>
                                    </div>
                                    <div class="col-md-3 col-sm-6 col-12">
                                        <button type="submit" class="btn default-btn px-5 w-lg" id="successButton"><i class="bx bxs-send"></i><span style="margin-left: 10px;">Pay Now</span></button>
                                        @if(request()->has('plan_type') && request()->has('agent_code1') && request()->has('type'))
                                            <button type="button" class="btn btn-primary px-5 w-lg" id="SkipButton" data-url="{{ route('upgrade.plan.payment') }}?plan_type={{ request('plan_type') }}&agent_code1={{ request('agent_code1') }}&type={{ request('type') }}&plan_selection={{ request('plan_selection') }}"><span style="margin-left: 10px;">Skip</span></button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            @endif
        @else
            <div class="card">
                <div class="card-body" style="margin: 6rem;">
                    <div class="row justify-content-center mb-5">
                        <div class="col-sm-4">
                            <div class="maintenance-img">
                                <img src="{{ asset('assets/images/no-document-illustration.png') }}" alt="" class="img-fluid mx-auto d-block">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="text-center">
                            <p class="profile_complate_content" style="font-size: 18px; color: #cf0000; text-align: center;font-weight: 500; margin-bottom: 35px;">Dear valued agent, we kindly request you to upload your KYC documents numbers and agent profile details as soon as possible. This is because KYC documents are required for purchase extra unit for active plan.</p>
                            <a href="{{ route('profile', ['type'=>'purchase']) }}" class="btn btn-primary p-2 waves-effect waves-light btn-sm" style="font-size: 14px;"><i class="bx bx-right-arrow-circle bx-fade-right"></i><span>Go to Agent Profile Page</span></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/sweet-alerts.init.js') }}"></script>

<script type="text/javascript">
    const selectedValues = [];

    $(document).on("input keyup change", ".unitInput", function() {
        var inputId = $(this).attr('id');
        const digits = inputId.split('_')[1]; 
        var inputValue = $('#'+ inputId).val();

        inputValue = inputValue.replace(/\D/g, '');

        if (inputValue.length > 3) {
            inputValue = inputValue.substring(0, 3);
        }
        $('#'+ inputId).val(inputValue);

        changeQuantity(digits);
        reportTotal(selectedValues);
    });

    var theme_unit = "{{ $data['theme_unit'] }}";

    $("#successButton").bind("click", function() {
        $('form#extraPurchase').submit();
        
        showLoader();
    });

    $('#totalCard').hide();
    
    $('#totalPrice').val('--');
    $('#totalQuantity').val('--');
    $("#successButton").prop("disabled", true);
    
    
    const mainCheckbox = document.getElementById('mainCheckbox');
    const childCheckboxes = document.querySelectorAll('.childCheckbox');

    if(mainCheckbox != null){
        mainCheckbox.addEventListener('change', function() {
            const isChecked = mainCheckbox.checked;
        
            childCheckboxes.forEach(function(checkbox) {
                checkbox.checked = isChecked;
                updateSelectedValues(checkbox);
            });
        });
        
        childCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                updateSelectedValues(checkbox);
                updateMainCheckbox();
            });            
        });
    }

    function updateMainCheckbox() {
        const checkedChildCheckboxes = document.querySelectorAll('.childCheckbox:checked');
        mainCheckbox.checked = checkedChildCheckboxes.length === childCheckboxes.length;
    }

    function updateSelectedValues(checkbox) {
        const value = checkbox.value;
        
        if (checkbox.checked) {
            if (!selectedValues.includes(value)) {
                selectedValues.push(value);
                
                reportTotal(selectedValues);
            }
        } else {
            const index = selectedValues.indexOf(value);

            if (index !== -1) {
                selectedValues.splice(index, 1);
            }
        }

        if(selectedValues.length == 0){
            $('#totalQuantity').val('--');
            $('#totalPrice').val('--');
            $('.childCheckbox').trigger('change');

            $('#column_total_single_unit_price, #column_total_sgst_amount, #column_total_cgst_amount, #column_total_igst_amount, #column_total_total_values').val(0.00);

            $('.totalAmounts, .totalGst, .lessCrBalance, .addCrBalance, .netPayableAmount').text("0.00");
            $('#totalPrice').text('');

            $("#successButton").prop("disabled", true);
            $("#SkipButton").prop("disabled", false);
        }
        else 
        {
            $("#successButton").prop("disabled", false);
            $("#SkipButton").prop("disabled", true);
        }
    }

    childCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            reportTotal(selectedValues);
        });
        
    });

    if(mainCheckbox != null){
        mainCheckbox.addEventListener('change', function() {
            reportTotal(selectedValues);
        });
    }

    $('.childCheckbox').change(function() {
        var ownInputValue = $(this).val();

        if($(this).prop('checked')){
            $('#quantity_'+ownInputValue).prop("disabled", false).val(1).trigger("input");
            $('.up_down_'+ownInputValue).prop("disabled", false);
        }else{
            $('#quantity_'+ownInputValue).val(0).trigger("input");
            $('#total_min_unit'+ownInputValue).val("--");
            $('#total_single_unit_price'+ownInputValue).val("--");
            $('#sgst_amount_'+ownInputValue).val("--");
            $('#cgst_amount_'+ownInputValue).val("--");
            $('#igst_amount_'+ownInputValue).val("--");
            $('#total_value_'+ownInputValue).val("--");
            
            $('#quantity_'+ownInputValue).prop("disabled", true);
            $('.up_down_'+ownInputValue).prop("disabled", true);
        }
    });

    function changeQuantity(id){
        var quantity = parseInt($('#quantity_'+id).val());
        if($('#quantity_'+id).val() == '--' || $('#quantity_'+id).val() == ''){
            quantity = 0;
        }

        var unitPrice = $('#single_unit_price'+id).val();  
        if($('#single_unit_price'+id).val() == '--'){
            unitPrice = 0;
        }

        var unitItem = parseInt($('#min_unit'+id).val());  
        var sgst = parseFloat($('#sgst_'+id).val());
        var cgst = parseFloat($('#cgst_'+id).val());
        var igst = parseFloat($('#igst_'+id).val());
        
        var totalQuantity = unitItem * quantity;    
        var totalPrice = quantity * unitPrice;    
        var sgstTotal = (totalPrice * sgst) / 100;
        var cgstTotal = (totalPrice * cgst) / 100;
        var igstTotal = (totalPrice * igst) / 100;

        $('#total_min_unit'+id).val(totalQuantity);
        $('#total_single_unit_price'+id).val(totalPrice.toFixed(2));
        $('#sgst_amount_'+id).val(sgstTotal.toFixed(2));
        $('#cgst_amount_'+id).val(cgstTotal.toFixed(2));
        $('#igst_amount_'+id).val(igstTotal.toFixed(2));

        var totalValue =  sgstTotal + cgstTotal + igstTotal + totalPrice;
        $('#total_value_'+id).val(totalValue.toFixed(2));

        reportTotal(selectedValues);
    }

    function reportTotal(selectedValues){
        $('.unitInput').prop("disabled", true);
        $('.quantity-button').prop("disabled", true);
        $('#totalItems').text("0 Item selected");

        if(selectedValues.length > 0){
            var totalPrices = 0;
            var totalSgstAmount = 0;
            var totalCgstAmount = 0;
            var totalIgstAmount = 0;
            var totalValues = 0;
            var records = [];

            for(var i = 0; i < selectedValues.length; i++){
                var inputIds = $('#quantity_'+selectedValues[i]).val();
                records.push(inputIds);

                $('#quantity_'+selectedValues[i]).prop("disabled", false);
                $('.up_down_'+selectedValues[i]).prop("disabled", false);
                
                var prices = $('#total_single_unit_price'+selectedValues[i]).val();
                if(prices == '--' || prices == 0){
                    prices = 0;
                }

                var sgstAmount = $('#sgst_amount_'+selectedValues[i]).val();
                if(sgstAmount == '--' || sgstAmount == 0){
                    sgstAmount = 0;
                }

                var cgstAmount = $('#cgst_amount_'+selectedValues[i]).val();
                if(cgstAmount == '--' || cgstAmount == 0){
                    cgstAmount = 0;
                }

                var igstAmount = $('#igst_amount_'+selectedValues[i]).val();
                if(igstAmount == '--' || igstAmount == 0){
                    igstAmount = 0;
                }

                var totalValue = $('#total_value_'+selectedValues[i]).val();
                if(totalValue == '--' || totalValue == 0){
                    totalValue = 0;
                }

                totalPrices += parseFloat(prices);
                totalSgstAmount += parseFloat(sgstAmount);
                totalCgstAmount += parseFloat(cgstAmount);
                totalIgstAmount += parseFloat(igstAmount);
                totalValues += parseFloat(totalValue);
            }
            
            var disableButton = false;
            $('#successButton').prop("disabled", false);

            $.each(records, function(index, record) {
                if (record === 0) {
                    disableButton = true;
                    return false;
                }
            });

            if (disableButton) {
                $('#successButton').prop('disabled', true);
            }

            $.each(records, function(index, record) {
                if(record == 0){
                    $("#successButton").prop("disabled", true);
                }
            });
            
            var itemCount = selectedValues.length;
            if(itemCount > 1){
                $('#totalItems').text(itemCount + " Items selected");
            }else{
                $('#totalItems').text(itemCount + " Item selected");
            }

            $('#column_total_single_unit_price').val(totalPrices.toFixed(2));
            $('#column_total_sgst_amount').val(totalSgstAmount.toFixed(2));
            $('#column_total_cgst_amount').val(totalCgstAmount.toFixed(2));
            $('#column_total_igst_amount').val(totalIgstAmount.toFixed(2));
            $('#column_total_total_values').val(totalValues.toFixed(2));

            var totalGST = totalSgstAmount + totalCgstAmount + totalIgstAmount;
            var totalAmount = parseInt(totalPrices + totalGST).toFixed(2);
            var floatTotalAmount = parseFloat(totalPrices + totalGST).toFixed(2);
            
            $('.totalAmounts').text(totalPrices.toFixed(2));
            $('.totalGst').text(totalGST.toFixed(2));
            
            // Add & Less Amount
            var totalRoundAmount = Math.round(floatTotalAmount);
            var addLessAmount = (totalRoundAmount-floatTotalAmount).toFixed(2);
            if(addLessAmount > 0){
                $('.addCrBalance').text(addLessAmount );
                $('.lessCrBalance').text("0.00");
            }else{
                $('.addCrBalance').text("0.00");
                $('.lessCrBalance').text(addLessAmount);
            }

            var textAmountTotal = parseInt(totalRoundAmount);
            var amountInWords = convertNumberToWords(textAmountTotal);
            $('#totalPrice').text(amountInWords.charAt(0).toUpperCase() + amountInWords.slice(1) + " Rupees");
            $('.netPayableAmount').text(totalRoundAmount.toFixed(2));
        }
    }

    function convertNumberToWords(number) {
        var units = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
        var teens = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
        var tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

        var num = Math.floor(number);
        var decimal = Math.round((number - num) * 100);
        var numString = '';

        if (num === 0) {
            numString = 'zero';
        } else if (num < 10) {
            numString = units[num];
        } else if (num < 20) {
            numString = teens[num - 10];
        } else if (num < 100) {
            numString = tens[Math.floor(num / 10)] + ' ' + units[num % 10];
        } else if (num < 1000) {
            numString = units[Math.floor(num / 100)] + ' hundred ' + convertNumberToWords(num % 100);
        } else if (num < 1000000) {
            numString = convertNumberToWords(Math.floor(num / 1000)) + ' thousand ' + convertNumberToWords(num % 1000);
        } else {
            numString = convertNumberToWords(Math.floor(num / 1000000)) + ' million ' + convertNumberToWords(num % 1000000);
        }

        if (decimal > 0) {
            numString += ' and ' + decimal + '/100';
        }

        return numString;
    }

    $('.themeUnitInput').on('input', function() {
        if(theme_unit < $(this).val()){

            toastr["error"]("More than "+theme_unit+" units cannot be purchased");

            setTimeout(function() {
                window.location.reload();
            }, 4000);
        }

        reportTotal(selectedValues);
    });

    $(".childCheckbox").change(function() {
        if ($(this).is(":checked")) {
            $(this).closest("tr").css("background-color", "#e3eff9");
        } else {
            $(this).closest("tr").css("background-color", "");
        }
    });

    $("#mainCheckbox").change(function() {
        const isChecked = $(this).prop("checked");

        if ($(this).is(":checked")) {
            $("table tr").css("background-color", "#e3eff9");
            $("table tr.spacer").css("background-color", "transparent");
        } else {
            $("table tr").css("background-color", "");
        }

        $('.childCheckbox').each(function() {
            $(this).prop("checked", isChecked).trigger("change");

            if(isChecked){
                var ownInputValue = $(this).val();
                $('#quantity_'+ownInputValue).prop("disabled", false).val(1).trigger("input");
                $('.up_down_'+ownInputValue).prop("disabled", false);
            }
        });
    });

    $(document).on("click", "#SkipButton", function() {
        let url = $(this).data("url");
        window.location.href = url;
    });
</script>
@endsection