@extends('bootstrap.layouts.app')

<style>
    .custom-dropdown {
        position: relative;
    }

    .dropdown-button {
        display: flex;
        align-items: center;
        word-break: break-all;
        font-size: null;
        font-weight: 600;
        font-style: normal;
        color: var(--sidebar_items_text_color) !important;
        background: transparent;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-right: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-color: var(--sidebar_items_border_color);
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        text-decoration: none;
        color: var(--form_group_input_text_color) !important;
    }

    .dropdown-menu {
        display: none;
        position: absolute;
        background-color: white;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-item {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        white-space: normal !important;
        font-weight: 600 !important;
        border: inherit !important;
    }

    .dropdown-menu.show {
        display: block;
    }

    #category,
    #neworder_services,
    #service_description,
    #field-orderform-fields-link,
    #field-orderform-fields-quantity,
    #showPrice,
    #neworder_comment,
    .category_neworder {
        display: flex;
        align-items: center;
        word-break: break-all;
        font-size: null;
        font-weight: 600;
        font-style: normal;
        color: var(--sidebar_items_text_color) !important;
        background: transparent;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-right: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-color: var(--sidebar_items_border_color);
        border-left-width: 0px;
        border-right-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-style: solid;
        text-decoration: none;
        color: var(--form_group_input_text_color) !important;
    }
</style>

@section('content')
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />

    <div class="wrapper-content">
        <div class="wrapper-content__header">
        </div>
        <div class="wrapper-content__body">
            <!-- Main variables *content* -->
            <div id="block_76">
                <div class="block-bg"></div>
                <div class="container-fluid">
                    <div class="new_order-block ">
                        <div class="row new-order-form">
                            <div class="col-lg-8">
                                <div class="component_form_group component_card component_radio_button">
                                    <div class="card ">
                                        @if (isset($pageContent) &&
                                                !is_null($pageContent) &&
                                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                                            <div class="my-4 well">
                                                {!! $pageContent->page_content_top !!}
                                            </div>
                                        @endif
                                        @if (session('success'))
                                            <div class="alert alert-success">
                                                {{ session('success') }}
                                            </div>
                                        @endif
                                        @if (session('error'))
                                            <div class="alert alert-danger">
                                                {{ session('error') }}
                                            </div>
                                        @endif
                                        @if (Session::has('order_details'))
                                            @php
                                                $orderDetails = Session::get('order_details');
                                            @endphp
                                            <div class="alert alert-success">
                                                <strong> ID: </strong> {{ $orderDetails['id'] }} <br>
                                                <strong> Service: </strong> {{ $orderDetails['service'] }} <br>
                                                <strong> Link: </strong> {{ $orderDetails['link'] }} <br>
                                                <strong> Quantity: </strong> {{ $orderDetails['quantity'] }} <br>
                                                <strong> Charge: </strong> {{ $orderDetails['price'] }} <br>
                                                <strong> Balance: </strong>{{ $orderDetails['balance'] }} <br>
                                            </div>
                                        @endif
                                        @if (Session::has('order_detail_mass'))
                                            @php
                                                $orderDetails = Session::get('order_detail_mass');
                                            @endphp
                                            <div class="alert alert-success">
                                                <strong> Total: </strong> {{ $orderDetails['total'] }} <br>
                                                <strong> Errors: </strong> {{ $orderDetails['errors'] }} <br>
                                                <strong> Success: </strong> {{ $orderDetails['successes'] }} <br>
                                                <strong> Price: </strong> {{ $orderDetails['price'] }} <br>
                                                <strong> Balance: </strong>{{ $orderDetails['balance'] }} <br>
                                            </div>
                                        @endif
                                        <form class="kt-form" action="{{ route('neworder.create') }}" method="post"
                                            id="order_form" name="order_form">
                                            @csrf
                                            <div class="component_button_forms">

                                                {{-- <div class="form-group">
                                                    <div class="search-dropdown" id="new-order-search"
                                                        style="position: relative;" data-lang-placeholder="Search">
                                                        <div class="input-wrapper" style="position: relative;">
                                                            <button
                                                                style="position: absolute;top: 50%;transform: translateY(-50%);padding: 0px 2px;background: none;border: none;left: 12px;"
                                                                type="button">
                                                                <span class="fas fa-search"></span>
                                                            </button>
                                                            <input type="text" class="form-control" id="template-input"
                                                                value="" placeholder="Search">
                                                        </div>
                                                    </div>
                                                </div> --}}

                                                <div class="form-group">
                                                    <label for="category" class="control-label">Category</label>
                                                    <select class="form-control category_neworder" id="category"
                                                        name="category" data-select="true" data-select-search="true"
                                                        data-select-search-placeholder="Search"
                                                        data-select-container="#select-category-container">


                                                        @foreach ($categories as $cate)
                                                            @php
                                                                $iconUrl =
                                                                    $cate->category_icon == -1
                                                                        ? $cate->custom_icon_link
                                                                        : 'https://everve.net/assets-v2/img/' .
                                                                            $cate->icon_code .
                                                                            '.svg';
                                                            @endphp
                                                            <option value="{{ $cate->category_id }}"
                                                                data-img-src="{{ $iconUrl }}">
                                                                &nbsp; {{ $cate->category_name }}
                                                            </option>
                                                        @endforeach


                                                    </select>
                                                    <div id="select-category-container" class="position-relative">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="neworder_services" class="control-label">Service</label>
                                                    
                                                    <div id="select-service-container" class="position-relative">
                                                    </div>



                                                </div>
                                                <div class="custom-dropdown">
                                                    <input height="48px" class="form-control dropdown-button" type="text" name="neworder_services2" id="neworder_services2" >
                                                    <input type="hidden" name="neworder_services" id="serviceValue">
                                                    <ul style="height: auto" id="neworder_services1"
                                                        class="form-control dropdown-menu">

                                                    </ul>
                                                </div>
                                                <div class="form-group" id="dynamic-fields"></div>

                                                <div class="form-group hidden fields component_service_description"
                                                    id="service_description">
                                                    <label for="service_description"
                                                        class="control-label">Description</label>
                                                    <div class="panel-description">

                                                    </div>
                                                </div>
                                                <div id="fields"></div>
                                            </div>
                                            <input type="hidden" name="_csrf"
                                                value="b0LwgNxbZ2bevj8VX4J8M3sEZ6Kh39-fn7UQ_RSVIZMld5TuhRVXPJn0C2Eu0i5BLjFe6s2rhubJ-CmJfNJ4xg==">
                                            <div class="new-order-button-submit component_button_submit ">
                                                <button type="submit" class="btn btn-block btn-big-primary">Submit</button>
                                            </div>
                                        </form>
                                        @if (isset($pageContent) &&
                                                !is_null($pageContent) &&
                                                ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
                                            <div class="well">
                                                {!! $pageContent->page_content_bottom !!}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper-content__footer">
        </div>
    </div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<script>
    function setService(element){
            console.log(element.dataset.value);
            $('#serviceValue').val(element.dataset.value);
            var html = element.dataset.id + " - " + element.dataset.name;
            $('#neworder_services2').val(html);
        }

    $(document).ready(function() {

        
        const dropdownButton = document.querySelector('.dropdown-button');
        const dropdownMenu = document.querySelector('.dropdown-menu');

        // $().

        dropdownButton.addEventListener('click', () => {
            dropdownMenu.classList.toggle('show');
        });

        // Handle option selection (e.g., using event listeners on dropdown-item elements)

        $("#category").val($("#category option:first").val());
        var cateRes = $("#category").val();
        if (cateRes) {
            getServiceByCategoryId($("#category").val());
        }

        function formatState(state) {
            var imgUrl = $(state.element).attr('data-img-src')
            if (!imgUrl) {
                return state.text;
            }
            var $state = $(
                '<span style="background-color:var(--color-id-106);border:0px;"><img src="' + imgUrl +
                '" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        }



        $('.category_neworder').select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        var notice = {!! str_replace("'", "\'", json_encode($notice)) !!};
        var has_notice = '{{ $has_notice }}';
        if (has_notice == 1) {
            Swal.fire({
                icon: notice['notice_type'],
                title: notice['notice_subject'],
                text: notice['notice_msg'],
            });
        }

        var orderDetails = '{{ Session::get('defaultCategoryId') }}';
        //console.log($orderDetails);
        // $('select#category').val(orderDetails); // Change the value or make some change to the internal state
        // $('select#category').trigger('change.select2');
        //$('.category_neworder').select2();
        //$('#neworder_services').select2();
        $('select#category').on('change', function() {
            getServiceByCategoryId(this.value);
        });

        $('select#neworder_services').on('change', function() {
            getServiceDetailsById(this.value);
        });
        getServiceByCategoryId($('select#category').val());
    });

    function formatService() {
        console.log("1");
        var imgUrl = $(state.element).attr('data-img-src')
        if (!imgUrl) {
            return state.text;
        }
        var $state = $(
            '<span style="background-color:var(--color-id-106);border:0px;"><img src="' + imgUrl +
            '" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    }

    function getServiceByCategoryId(categoryId) {
        var data = new FormData();
        data.append('category_id', categoryId);
        $.ajax({
            type: 'POST',
            processData: false, // important
            contentType: false, // important
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('getServicesByCategory') }}",
            dataType: 'json',
            success: function(response) {
                if (response?.services?.length) {
                    var html1 = "";
                    $.each(response?.services, function(index, value) {
                       
                        html1 += '<li onclick="setService(this);" class="dropdown-item" data-id="' + value?.service_id + '" data-name="' + value?.service_name +'" data-value="' + value?.service_id +
                            '"><span class="badge badge-primary">' + value?.service_id +
                            '</span> - ' + value?.service_name +
                            ' - ' + value?.service_price + '</li>';
                            if(index == 0){
                                $('#neworder_services2').val(value?.service_id + " - " + value?.service_name);
                                $('#serviceValue').val(value?.service_id);
                            }
                    });
                    $("#neworder_services1").html(html1);
                    $('.service_neworder').select2({
                        // html: true;
                        templateResult: formatService,
                        templateSelection: formatService
                    });

                    getServiceDetailsById(response?.services[0]?.service_id);

                    // truncateOptionText();
                }
            },
        });
    }

    function getServiceDetailsById(service_id) {
        var data = new FormData();
        data.append('service_id', service_id);
        $.ajax({
            type: 'POST',
            processData: false, // important
            contentType: false, // important
            data: data,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "{{ route('getServiceDetailsById') }}",
            dataType: 'json',
            success: function(response) {
                console.log(response?.service_package);
                var html = "";
                html +=
                    '<input type="hidden" class="form-control" id="charge_default" readonly="" value="' +
                    response?.service_price + '">';
                if (response?.service_description != "") {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html += '<label for="service_description" class="form-label">Description</label>';
                    html +=
                        '<textarea readonly onkeyup="textAreaAdjust(this)" style="overflow:hidden" name="service_description" id="service_description" class="form-control form-control-solid" placeholder="Description">"' +
                        response?.service_description + '"</textarea>';
                    html += '</div>';
                    html += '</div>';
                }

                if (response?.service_package == 1 || response?.service_package == 2 || response
                    ?.service_package == 3 || response?.service_package == 4 || response?.service_package ==
                    5 || response?.service_package == 16 || response?.service_package == 7 || response
                    ?.service_package == 9 || response?.service_package == 10 || response
                    ?.service_package == 6) {
                    var link_type = "Link";
                    if (response?.service_package == 2) {
                        link_type = "Username";
                    } else {
                        link_type = "Link";
                    }
                    html += '<div>';
                    html += '<div class="py-2">';
                    html += '<label for="field-orderform-fields-link" class="form-label">' + link_type +
                        '</label>';
                    html +=
                        '<input type="text" name="link" style="height: 48px;" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Link" value="" />';
                    html += '</div>';
                    html += '</div>';
                }

                if (response?.service_package == 1 || response?.service_package == 10 || response
                    ?.service_package == 7 || response?.service_package == 9 || response?.service_package ==
                    16 || response?.service_package ==
                    4 || response?.service_package == 22 || response?.service_package == 23) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                    html +=
                        '<input type="number" name="quantity" style="height: 48px;" id="field-orderform-fields-quantity" class="form-control form-control-solid order_quantity" placeholder="Quantity" value="" />';
                    html += '</div>';
                    html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                        response?.service_max + '</small>';
                    html +=
                        '<br><label for="field-orderform-fields-price" class="form-label">Price </label><input readonly disabled class="form-control form-control-solid order_quantity help-block min-max price_calculator"  style="height: 48px;" id="showPrice" value="' +
                        response
                        ?.service_price + '"" />';
                    html += '</div>';
                }

                if (response?.service_package == 11 || response?.service_package == 12 || response
                    ?.service_package == 13 || response?.service_package == 14 || response
                    ?.service_package == 15 || response
                    ?.service_package == 21 || response
                    ?.service_package == 22) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html += '<label for="field-orderform-fields-link" class="form-label">Username</label>';
                    html +=
                        '<input type="text" name="username" style="height: 48px;" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="Username" value="" />';
                    html += '</div>';
                    html += '</div>';
                }

                if (response?.service_package == 3 || response?.service_package == 5 || response
                    ?.service_package == 6) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-quantity" class="form-label">Quantity</label>';
                    html +=
                        '<input type="number" name="quantity" style="height: 48px;" id="field-orderform-fields-quantity" class="form-control form-control-solid order_quantity" placeholder="Quantity" value="" disabled="" />';
                    html += '</div>';
                    html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                        response?.service_max + '</small>';
                    html +=
                        '<br><label for="field-orderform-fields-price" class="form-label">Price </label><input readonly disabled class="form-control form-control-solid order_quantity help-block min-max price_calculator" style="height: 48px;" id="showPrice" value="' +
                        response
                        ?.service_price + '"" />';
                    html += '</div>';
                }

                if (response?.service_package == 10) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-media-url" class="form-label">Media URL</label>';
                    html +=
                        '<input type="text" name="media_url" id="field-orderform-fields-media_url" class="form-control form-control-solid media_url" placeholder="Media URL" value="" />';
                    html += '</div>';
                    html += '</div>';
                }

                if (response?.service_package == 11 || response
                    ?.service_package == 13) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-link" class="form-label">How many posts limit would you like?</label>';
                    html +=
                        '<input type="text" name="posts" style="height: 48px;" id="field-orderform-fields-link" class="form-control form-control-solid" placeholder="How many posts limit would you like?" value="" />';
                    html += '</div>';
                    html += '</div>';

                    html += '<div>';
                    html += '<div class="form-group">';
                    html += '<label for="order_count" class="form-label">Quantity</label>';
                    html += '<div class="row">';
                    html += '<div class="col">';
                    html +=
                        '<input type="text" name="min" id="order_count_min" class="form-control form-control-solid" placeholder="Minimum" value="" />';
                    html += '</div>';
                    html += '<div class="col">';
                    html +=
                        '<input type="text" name="max" id="order_count_max" class="form-control form-control-solid" placeholder="Maximum" value="" />';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                    html += '<small class="help-block min-max">Min: ' + response?.service_min + ' - Max: ' +
                        response?.service_max + '</small>';
                    html +=
                        '<br><label for="field-orderform-fields-price" class="form-label">Price </label><input readonly disabled class="form-control form-control-solid order_quantity help-block min-max price_calculator" style="height: 48px;" id="showPrice" value="' +
                        response
                        ?.service_price + '"" />';
                    html += '</div>';
                    var session_delay = 0;
                    var selectedOption = "";
                    if (session_delay == 0) {
                        selectedOption = "selected";
                    } else if (session_delay == 5) {
                        selectedOption = "selected";
                    } else if (session_delay == 10) {
                        selectedOption = "selected";
                    } else if (session_delay == 15) {
                        selectedOption = "selected";
                    } else if (session_delay == 30) {
                        selectedOption = "selected";
                    } else if (session_delay == 60) {
                        selectedOption = "selected";
                    } else if (session_delay == 90) {
                        selectedOption = "selected";
                    } else if (session_delay == 120) {
                        selectedOption = "selected";
                    } else if (session_delay == 150) {
                        selectedOption = "selected";
                    } else if (session_delay == 180) {
                        selectedOption = "selected";
                    } else if (session_delay == 210) {
                        selectedOption = "selected";
                    } else if (session_delay == 240) {
                        selectedOption = "selected";
                    } else if (session_delay == 270) {
                        selectedOption = "selected";
                    } else if (session_delay == 300) {
                        selectedOption = "selected";
                    } else if (session_delay == 360) {
                        selectedOption = "selected";
                    } else if (session_delay == 420) {
                        selectedOption = "selected";
                    } else if (session_delay == 480) {
                        selectedOption = "selected";
                    } else if (session_delay == 540) {
                        selectedOption = "selected";
                    } else if (session_delay == 600) {
                        selectedOption = "selected";
                    }

                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-delay" class="form-label">How long order delay do you want?</label>';
                    html +=
                        '<select name="delay" class="form-select form-select-solid" id="field-orderform-fields-delay">';
                    html += '<option value="0" ' + selectedOption + '>No delay</option>';
                    html += '<option value="5" ' + selectedOption + '>5 minutes</option>';
                    html += '<option value="10" ' + selectedOption + '>10 minutes</option>';
                    html += '<option value="15" ' + selectedOption + '>15 minutes</option>';
                    html += '<option value="30" ' + selectedOption + '>30 minutes</option>';
                    html += '<option value="60" ' + selectedOption + '>60 minutes</option>';
                    html += '<option value="90" ' + selectedOption + '>90 minutes</option>';
                    html += '<option value="120" ' + selectedOption + '>120 minutes</option>';
                    html += '<option value="150" ' + selectedOption + '>150 minutes</option>';
                    html += '<option value="180" ' + selectedOption + '>180 minutes</option>';
                    html += '<option value="210" ' + selectedOption + '>210 minutes</option>';
                    html += '<option value="240" ' + selectedOption + '>240 minutes</option>';
                    html += '<option value="270" ' + selectedOption + '>270 minutes</option>';
                    html += '<option value="300" ' + selectedOption + '>300 minutes</option>';
                    html += '<option value="360" ' + selectedOption + '>360 minutes</option>';
                    html += '<option value="420" ' + selectedOption + '>420 minutes</option>';
                    html += '<option value="480" ' + selectedOption + '>480 minutes</option>';
                    html += '<option value="540" ' + selectedOption + '>540 minutes</option>';
                    html += '<option value="600" ' + selectedOption + '>600 minutes</option>';
                    html += '</select>';
                    html += '</div>';
                    html += '</div>';

                    html += '<div>';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="field-orderform-fields-expiry" class="form-label">End Date</label>';
                    html +=
                        '<input type="text" name="expiry" id="field-orderform-fields-expiry" class="form-control form-control-solid kt_daterangepicker_expiry" placeholder="End Date" value="" autocomplete="off" />';
                    html += '</div>';
                    html += '</div>';
                }

                if (response?.service_package == 3 || response?.service_package == 4 || response
                    ?.service_package == 23) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Comments</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_package == 5 || response
                    ?.service_package == 12 || response?.service_package == 6) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Mentions</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_package == 7 || response?.service_package == 9) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Usernames</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_package == 16 || response?.service_package == 17) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Usernames</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>' +
                        '<div class="form-group fields" id="order_hashtags"><label class="control-label">Hashtags</label>' +
                        '<textarea class="form-control counter" name="hashtags" id="neworder_hashtags" cols="30" rows="10"></textarea></div>';
                }

                if (response?.service_package == 19) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Keywords</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_package == 20) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Answer</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_package == 21) {
                    html +=
                        '<div class="form-group fields" id="order_comment"><label class="control-label">Answer</label>' +
                        '<textarea class="form-control counter" name="comments" id="neworder_comment" cols="30" rows="10" data-related="quantity"></textarea></div>';
                }

                if (response?.service_dripfeed == 2) {
                    html += '<div>';
                    html += '<div class="py-2">';
                    html += '<label for="dripfeedcheckbox" class="checkbox checkbox-lg">';
                    html += '<input type="checkbox" name="check" id="dripfeedcheckbox" /><span></span>';
                    html += ' Drip-feed Order</label>';
                    html += '</div>';
                    html += '</div>';

                    html += '<div class="dripfeed-box">';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="dripfeed-runs" class="form-label">How many times should the process be repeated?</label>';
                    html +=
                        '<input type="text" name="runs" id="dripfeed-runs" class="form-control form-control-solid" placeholder="How many times should the process be repeated?" value="" />';
                    html += '</div>';
                    html += '</div>';

                    html += '<div class="dripfeed-box">';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="dripfeed-interval" class="form-label">How many minutes interval? (60*24 = 1440 for daily shipping)</label>';
                    html +=
                        '<input type="text" name="interval" id="dripfeed-interval" class="form-control form-control-solid" placeholder="How many minutes interval? (60*24 = 1440 for daily shipping)" value="" />';
                    html += '</div>';
                    html += '</div>';

                    html += '<div class="dripfeed-box">';
                    html += '<div class="py-2">';
                    html +=
                        '<label for="dripfeed-totalquantity" class="form-label">Total Quantity to be Sent</label>';
                    html +=
                        '<input type="text" name="total_quantity" id="dripfeed-totalquantity" class="form-control form-control-solid" placeholder="Total Quantity to be Sent" value="" readonly/>';
                    html += '</div>';
                    html += '</div>';
                }

                $("#dynamic-fields").html(html);

                $(".kt_daterangepicker_expiry").daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    locale: {
                        format: 'YYYY/MM/DD'
                    },
                    autoApply: true
                });

                $('.dripfeed-box').css('display', 'none');
                textAreaAdjust();
            },
        });
    }

    $(document).on('keyup', '.order_quantity', function() {
        var service = $("#neworder_services").val();
        var quantity = $(this).val();
        var charge = $("#charge_default").val();
        var runs = $("#dripfeed-runs").val();
        if ($("#dripfeedcheckbox").prop('checked')) {
            var dripfeed = "var";
        } else {
            var dripfeed = "bos";
        }
        var calculated_charge = charge * quantity / 1000;
        calculated_charge = calculated_charge.toFixed(4);
        $("#showPrice").val(calculated_charge);
        var runs = $('#dripfeed-runs').val();
        var times = 1;
        if (runs > 0) {
            times = runs;
        }
        var total_quantity = quantity * times;
        $('#dripfeed-totalquantity').val(total_quantity);
    });

    $(document).on('keyup', '#dripfeed-runs', function() {
        var runs = $('#dripfeed-runs').val();
        var times = 1;
        if (runs > 0) {
            times = runs;
        }
        var quantity = $('.order_quantity').val();
        var total_quantity = quantity * times;
        $('#dripfeed-totalquantity').val(total_quantity);
    });

    $(document).on('click', '#dripfeedcheckbox', function() {
        if ($("#dripfeedcheckbox").prop('checked')) {
            $('.dripfeed-box').css('display', 'inline');
        } else {
            $('.dripfeed-box').css('display', 'none');
        }
    });

    $(document).on('keyup', '#neworder_comment', function() {
        var service = $("#neworder_services").val();
        var comments = $("#neworder_comment").val();

        var data = new FormData();
        data.append('service', service);
        data.append('comments', comments);

        if (comments) {
            var quantity = comments.split("\n").length;
            var charge = $("#charge_default").val();

            var calculated_charge = (charge * quantity / 1000).toFixed(4);

            $("#field-orderform-fields-quantity").val(quantity);
            $("#charge").val(calculated_charge);
        }
    });

    function truncateOptionText() {
        var selectElement = $('#neworder_services')[0];
        const options = selectElement.options;
        for (let i = 0; i < options.length; i++) {
            const option = options[i];
            const maxChars = 90; // Adjust as needed
            if (option.text.length > maxChars) {
                option.text = option.text.substring(0, maxChars) + "...";
            }
        }
    }

    function textAreaAdjust() {
        var element = $('#service_description');
        element[0].style.height = "1px";
        element[0].style.height = (5 + element[0].scrollHeight) + "px";
    }
</script>