@extends('admin.layouts.app')

@section('style')
    <link href="{{ asset('assets/admin/css/user_rates.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/admin/css/user_rates_dark.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('admin/css/multi_select.css') }}" rel="stylesheet" type="text/css">.
    <link rel="stylesheet" href="{{asset('public/assets/admin/css/page-datatable-custom-css.css')}}">
    <style>
        .dropdown-submenu {
            position: relative !important;
        }
        .dropdown-submenu>.dropdown-menu {
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            margin-top: -6px !important;
            width: fit-content;
        }
        .dropdown-submenu>a:after {
            right: 20px !important;
            left: auto !important;
            transform: rotate(0) !important;
        }
        .dropdown-menu>li>a:hover:after {
            text-decoration: underline !important;
            transform: rotate(-90deg) !important;
        }
        .position-relative {
            position: relative;
        }
        .dropdown-menu__inner {
            flex: 1 1 auto;
            height: 350px;
            position: relative;
        }
        .dropdown-menu__inner>div {
            overflow: auto;
            height: 350px;
            width: 400px;
        }
        #all_checkboxes li.dropdown-title {
            display: flex;
            align-items: center;
        }
        #all_checkboxes li.dropdown-title input.title-check.checkAll {
            margin-right: 8px;
            margin-top: 2px;
            cursor: pointer;
        }
        #all_checkboxes li.dropdown-title label {
            cursor: pointer;
        }
        #all_checkboxes li.menu-item {
            position: relative;
        }
        #all_checkboxes li.menu-item label.item-link {
            padding: 4px 12px;
            font-weight: normal;
            line-height: 1.42857;
            color: #333;
            width: 100%;
            min-height: 100%;
            display: flex;
            align-items: center;
            word-break: break-all;
            white-space: normal;
            height: auto;
            cursor: pointer;
        }
        #all_checkboxes li.menu-item label.item-link:hover {
            text-decoration: none;
            color: #262626;
            background-color: #f5f5f5;
        }
        #all_checkboxes li.menu-item label.item-link .item-check {
            align-self: flex-start;
            margin-right: 9px;
            margin-top: 2px;
            cursor: pointer;
        }
        #all_checkboxes li.menu-item.selected {
            background-color: #f5f5f5;
        }
        #all_checkboxes li.menu-item .select-id {
            border: 1px solid #ddd;
            background: 0 0;
            min-width: 30px;
            display: inline-block;
            padding: 0.2em 0.6em 0.3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: 1px;
            border-radius: 0.25em;
            margin-right: 4px;
        }

        #all_checkboxes li.menu-item .item-data {
            margin-right: 8px;
            align-self: baseline;
        }

        #all_checkboxes li.menu-item .selected-price {
            white-space: nowrap;
            align-self: flex-start;
            margin-left: auto;
        }

        #all_checkboxes .dropdown-menu__btn-group {
            width: 100%;
            padding: 0 8px 4px;
        }

        #all_checkboxes .dropdown-menu__btn-group .btn {
            width: 50%;
        }

        .item-id {
            border: 1px solid #ddd;
            background: 0 0;
            min-width: 30px;
            padding: 0.2em 0.6em 0.3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            vertical-align: 1px;
            border-radius: 0.25em;
        }

        .action-block {
            margin: 0 8px;
            position: absolute;
            opacity: 0;
            left: 32px;
            right: 0;
            top: 0px;
            z-index: -1;
            background: none;
            height: 36px;
            -webkit-transition: opacity .3s linear;
            -moz-transition: opacity .3s linear;
            -ms-transition: opacity .3s linear;
            -o-transition: opacity .3s linear;
            transition: opacity .3s linear;
        }
        .action-list {
            left: 0;
        }
        .card {
            margin-top: -20px;
        }
        .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon){
            height: fit-content;
            margin-bottom: 20px !important;
            padding: 10px 20px;
        }
        [data-bs-theme=dark] #all_checkboxes li.menu-item label.item-link{
            color: #ffffff;
        }
        [data-bs-theme=dark] #all_checkboxes li.menu-item label.item-link:hover{
            background-color: #0c0c0e;
        }
        /* tr.even td:nth-child(1), tr.odd td:nth-child(1) {
            display: flex;
        } */
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-6">
            <button type="button" class="btn btn-sky" data-bs-toggle="modal"
                data-bs-target="#customRatesModal">
                Add custom rates
            </button>
        </div>
        <div id="alertMessages"></div>
        <div class="card-body py-4">
            <div class="table-responsive custom-row">
                <table class="table table-rounded table-row-bordered table-row-gray-300 gy-7 gs-7" id="kt_table_users">
                    <thead>
                        <tr>
                            <th colspan="5" class="checkAll-th ps-5 border-bottom-0 py-2">
                                <div class="d-flex gap-2 justify-content-start align-items-center">
                                    <input type="checkbox" id="checkAll-rates" />
                                    <p class="m-0" id="selectAllLable">Select All</p>
                                    <input type="hidden" id="checkAllText" value="custom_rate" />
                                </div>
                                <div class="action-block">
                                    <ul class="action-list">
                                        <li><span class="countRates"></span> Services Selected</li>
                                        <li>
                                            <div class="dropdown">
                                                <button class="btn btn-default border dropdown-toggle px-2 py-0"
                                                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                    Actions
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                    <li>
                                                        <a class="dropdown-item text-capitalize bulkorder"
                                                            data-bs-toggle="modal" data-bs-target="#editDiv"
                                                            href="#">
                                                            Edit rates
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item text-capitalize bulkorder"
                                                            data-bs-toggle="modal" data-bs-target="#editProfitDiv"
                                                            href="#">
                                                            Edit rates by profit
                                                        </a>
                                                    </li>
                                                    <li id="delete_selected">
                                                        <a class="dropdown-item text-capitalize bulkorder"
                                                            href="#">
                                                            Delete rates
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </th>
                        </tr>
                        <tr class="text-start text-dark fw-bold fs-7 text-uppercase gs-0">
                            <th class="">Category</th>
                            <th class="min-w-125px ps-5">Service</th>
                            <th class="min-w-20%">Service rate</th>
                            <th class="min-w-20%">Profit</th>
                            <th class="min-w-20% text-center mx-auto">Custom rate</th>
                        </tr>
                    </thead>
                    <tbody class="text-dark">
                    </tbody>
                </table>
                <div class="pagination_display"></div>
            </div>
            <a type="button" class="btn btn-secondary" href="{{ route('admin.users') }}">Close</a>
            <button type="submit" id="update_custom_rates" class="btn btn-primary">Save changes</button>
        </div>
    </div>
    <div class="modal fade" id="customRatesModal" tabindex="-1" aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Custom Rates</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form class="form" id="customRatesForm" action="{{ route('admin.users.add_users_custom_rates') }}"
                    method="post" data-xhr="true">
                    @csrf
                    <div class="modal-body">
                        <div class="dropdown-menu__input form-group">
                            <input id="dropdown_search_input" class="form-control" autocomplete="off" type="text"
                                value="">
                        </div>
                        <div class="d-flex gap-2">
                            <button id="checkAllInputs" class="btn btn-secondary btn-sm w-100 my-1"
                                type="button">Select
                                All</button>
                            <button id="uncheckAllInputs" class="btn btn-secondary btn-sm w-100 my-1"
                                type="button">Deselect All</button>
                        </div>
                        <div class="position-relative">
                            <ul class="dropdown-menu__inner p-0"
                                style="flex: 1 1 auto; height: 350px; position: relative;">
                                <div style="overflow: auto; height: 350px; width: 100%;">
                                    <div id="all_checkboxes">
                                        @foreach ($allServiceList as $allservices)
                                            <li class="dropdown-title">
                                                <input data-id="{{ $allservices[0]['category_id'] }}"
                                                    id="check-category-{{ $allservices[0]['category_id'] }}"
                                                    type="checkbox" class="title-check checkAll">
                                                <label
                                                    for="check-category-{{ $allservices[0]['category_id'] }}">{{ $allservices[0]['category_name'] }}</label>
                                            </li>
                                            @foreach ($allservices as $allservice)
                                                @php
                                                    $disabled = $allservice['already_added'] == 1 ? 'disabled' : '';
                                                @endphp
                                                <li class="menu-item services_search_target {{ $disabled }}">
                                                    <label class="item-link"
                                                        for="select_service_checkbox-{{ $allservice['service_id'] }}">
                                                        <input
                                                            id="select_service_checkbox-{{ $allservice['service_id'] }}"
                                                            type="checkbox"
                                                            name="new_custom[{{ $allservice['service_id'] }}]"
                                                            value="{{ $allservice['service_price'] }}"
                                                            class="item-check selectServices-{{ $allservice['category_id'] }}"
                                                            {{ $disabled }}>
                                                        <div class="item-data">
                                                            <span
                                                                class="select-id">{{ $allservice['service_id'] }}</span>
                                                            <span>{{ $allservice['service_name'] }}</span>
                                                        </div>
                                                        @php
                                                        $curr = $currency->currency_value;
                                                        @endphp
                                                        <span class="selected-price">{{ $currency->currency_symbol }}
                                                            {{ round($curr * $allservice['service_price'],4) }}</span>
                                                    </label>
                                                </li>
                                            @endforeach
                                        @endforeach
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" id="submitCustomRates" value="Add Custom Rates">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="editDiv">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Edit rates</h3>

                    <!--begin::Close-->
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                        aria-label="Close">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span
                                class="path2"></span></i>
                    </div>
                    <!--end::Close-->
                </div>

                <div class="modal-body">
                    <div class="mb-0 edit-rate form-group"><label class="control-label">Rate</label>
                        <span class="input-group">
                            <input id="bulk_edit" type="text" class="form-control" autocomplete="off"
                                value="50.00">
                            <input id="bulk_type" type="hidden" autocomplete="off" value="percent">
                            <div class="input-group-btn">
                                <select class="form-control form-select" id="editRateSelect"
                                    style="border-top-left-radius: 0;border-bottom-left-radius: 0; ">
                                    <option class="text-capitalize" data-name="%" data-type="percent"
                                        value="percent" selected>
                                        <a href="#" class="text-decoration-none text-black">% (percent)</a>
                                    </option>
                                    <option class="text-capitalize" data-name="$" data-type="fixed" value="fixed">
                                        <a href="#" class="text-decoration-none text-black">$ (USD)</a>
                                    </option>
                                </select>
                            </div>
                        </span>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" id="bulk_edit_submit" class="btn btn-primary" data-bs-toggle="modal"
                        data-bs-target="#editDiv">
                        Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="editProfitDiv">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h3 class="modal-title">Edit rates</h3>
        
                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
                                    aria-label="Close">
                                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span
                                            class="path2"></span></i>
                                </div>
                                <!--end::Close-->
                            </div>
        
                            <div class="modal-body">
                                <div class="mb-0 edit-rate form-group"><label class="control-label">Rate by profit</label>
                                    <span class="input-group">
                                        <input id="bulk_edit_profit" type="text" class="form-control" autocomplete="off"
                                            value="50.00">
                                        <input id="bulk_type" type="hidden" autocomplete="off" value="percent">
                                        <div class="input-group-btn">
                                            <select class="form-control form-select" id="editProfitRateSelect"
                                                style="border-top-left-radius: 0;border-bottom-left-radius: 0; ">
                                                <option class="text-capitalize" data-name="%" data-type="percent"
                                                    value="percent" selected>
                                                    <a href="#" class="text-decoration-none text-black">% (percent)</a>
                                                </option>
                                            </select>
                                        </div>
                                    </span>
                                </div>
                            </div>
        
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="submit" id="bulk_edit_profit_submit" class="btn btn-primary"
                                    data-bs-toggle="modal" data-bs-target="#editProfitDiv">
                                    Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('[data-toggle="dropdown"]').dropdown();

            var groupColumn = 0;
            var table = $('#kt_table_users').DataTable({
                lengthMenu: [200, 500, 1000],
                serverSide: true,
                paging: true,
                info: false, 
                language: {
                    lengthMenu: "Display_MENU_",
                },
                responsive: true,
                ajax: {
                    "method": "POST",
                    "url": "{{ route('admin.users.custom_rates_ajax') }}",
                    "data": function(d) {
                        d.id = "{{ $clientDetail->client_id }}";
                    }
                },
                columns: [
                    {
                        data: 'category_name',
                        name: 'category_name',
                        orderable: false
                    },
                    {
                        data: 'service_name',
                        name: 'service_name',
                        orderable: false
                    },
                    {
                        data: 'service_price',
                        name: 'service_price',
                        render(data, type, row, meta) {
                            return "<div>{{ $currency->currency_symbol }} " + row.service_price +
                                "</div><span class='rates-provider-value'>≈ {{ $currency->currency_symbol }} " +
                                row.rate + "</span>";
                        },
                        orderable: false
                    },
                    {
                        data: 'profit',
                        name: 'profit',
                        render(data, type, row, meta) {
                            return "<div id='profit_now_"+row.service_id+"'>{{ $currency->currency_symbol }} " + row.profit + "</div>" +
                                "<span class='rates-provider-value'>≈ {{ $currency->currency_symbol }} " +
                                row
                                .profit_original + "</span>";
                        },
                        orderable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false
                    }
                ],
                columnDefs: [{
                    visible: false,
                    targets: groupColumn
                }],
                order: [
                    [groupColumn, 'desc']
                ],
                drawCallback: function(settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;

                    api.column(groupColumn, {
                            page: 'current'
                        })
                        .data()
                        .each(function(group, i) {
                            if (last !== group) {
                                $(rows)
                                    .eq(i)
                                    .before(
                                        '<tr class="group"><td colspan="5">' +
                                        group +
                                        '</td></tr>'
                                    );

                                last = group;
                            }
                        });
                }
            });

            let typingTimer;
            $('#searchFilter').on('keyup', function () {
                clearTimeout(typingTimer);
                typingTimer = setTimeout(function () {
                    table.ajax.reload(null, false);
                }, 300);
            });

            $('.dataTables_length').appendTo('.custom-row > .pagination_display');
            $('.dataTables_paginate').appendTo('.custom-row > .pagination_display');

            $('#checkAllInputs').on("click", function() {
                $('#all_checkboxes').find(':checkbox').each(function() {
                    $(this).not(':disabled').prop('checked', true);
                });
            });

            $('#uncheckAllInputs').on("click", function() {
                $('#all_checkboxes').find(':checkbox').each(function() {
                    $(this).not(':disabled').prop('checked', false);
                });
            });

            $('.checkAll').on("click", function() {
                var id = $(this).attr("data-id");
                if ($(this).prop("checked") == true) {
                    $(".selectServices-" + id).not(this).not(':disabled').prop("checked", true);
                } else {
                    $(".selectServices-" + id).not(this).not(':disabled').prop("checked", false);
                }
            });

            function delay2(callback, ms) {
                var timer = 0;
                return function() {
                    clearTimeout(timer);
                    timer = setTimeout(function() {
                        filter = $("#dropdown_search_input").val().toUpperCase();
                        $("li.services_search_target").show();
                        $('li.services_search_target').each(function(index, elemm) {
                            if ($(elemm).text().toUpperCase().includes(filter)) {
                                //Not hidden
                            } else {
                                $(elemm).hide();
                            }
                        });

                    }, ms || 0);
                };
            }

            $(document).on('keyup', '#dropdown_search_input', delay2(function(e) {}, 1000));

            $('#submitCustomRates').click(function(e) {
                e.preventDefault();
                var formData = new FormData($('#customRatesForm')[0]);
                formData.append('client_id', {{ $clientDetail->client_id }});
                $.ajax({
                    url: "{{ route('admin.users.add_users_custom_rates') }}",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "success",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-success"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         location.reload();
                            //     }
                            // }).finally(() => {
                            //     location.reload();
                            // });
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "error",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-danger"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         location.reload();
                            //     }
                            // }).finally(() => {
                            //     location.reload();
                            // });
                        }
                        $('#customRatesModal').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        console.error(error)
                    }
                });
            });


            $("#checkAll-rates").on("click", function() {
                if ($(this).prop('checked') == true) {
                    $('.selectRate').not(this).prop('checked', true);
                    $('.selectRates').not(this).prop('checked', true);
                } else {
                    $('.selectRate').not(this).prop('checked', false);
                    $('.selectRates').not(this).prop('checked', false);
                }
                var count = $('.selectRate').filter(':checked').length;
                $('.countRates').html(count);
                if (count > 0) {
                    $('.checkAll-th').addClass("show-action-menu");
                    $("#selectAllLable").hide();
                } else {
                    $('.checkAll-th').removeClass("show-action-menu");
                    $("#selectAllLable").show();
                    $("#checkAll-rates").prop("checked", false);
                }
            });

            $(document).on('click', '.selectRates', function() {
                var id = $(this).attr("data-id");
                if ($(this).prop("checked") == true) {
                    $(".selectPrices-" + id).not(this).prop("checked", true);
                } else {
                    $(".selectPrices-" + id).not(this).prop("checked", false);
                }
                var count = $('.selectRate').filter(':checked').length;
                if (count > 0) {
                    $('.checkAll-th').addClass("show-action-menu");
                    $("#selectAllLable").hide();
                } else {
                    $('.checkAll-th').removeClass("show-action-menu");
                    $("#selectAllLable").show();
                    $("#checkAll-rates").prop("checked", false);
                }
                $('.countRates').html(count);
            });

            $(document).on('click', '.selectRate', function() {
                var count = $('.selectRate').filter(':checked').length;
                if (count > 0) {
                    $('.checkAll-th').addClass("show-action-menu");
                    $("#selectAllLable").hide();
                } else {
                    $('.checkAll-th').removeClass("show-action-menu");
                    $("#selectAllLable").show();
                    $("#checkAll-rates").prop("checked", false);
                }
                $('.countRates').html(count);
            });

            function formatCurrency(total) {
                var neg = false;
                if (total < 0) {
                    neg = true;
                    total = Math.abs(total);
                }
                return parseFloat(total, 10).toFixed(3).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
            }

            $(document).on('change', '#editRateSelect', function() {
                var selectedOption = $(this).find(':selected');
                var type = selectedOption.data('type');
                $("#editRateSelect").val(type)
                $("#bulk_type").val(type)
            });

            $(document).on('click', '#bulk_edit_submit', function() {
                var value = $("#bulk_edit").val();
                var type = $("#bulk_type").val();

                $('.current_price_input').each(function() {
                    var id = $(this).data("id");

                    if ($(".selectBulkEdit-" + id).prop("checked")) {
                        var price = $("#client_price_" + id).data("serviceprice");
                        var percent;
                        var icon;
                        if (value == 0 || value == "") {
                            value = "0.00";
                            $("#current_price_" + id).addClass("text-red");
                        } else {
                            $("#current_price_" + id).removeClass("text-red");
                        }

                        if (type == "fixed") {
                            $("#current_price_" + id).text(value);
                            $("#current_price_input" + id).val(value);
                            $("#client_price_" + id).val(value);
                            percent = (value / price) * 100;
                            $("#percent_" + id).val(formatCurrency(percent));
                            $("#type_toggle_" + id).val("fixed");
                            icon = "$";
                        } else if (type == "percent") {
                            percent = formatCurrency((price / 100) * value);
                            $("#current_price_" + id).text(percent);
                            $("#current_price_input" + id).val(percent);
                            $("#client_price_" + id).val(value);
                            $("#percent_" + id).val(value);
                            $("#type_toggle_" + id).val("percent");
                            icon = "%";
                        }

                        $("#price_type_" + id).val(type);
                    }
                });
            });

            $(document).on('change', '#editProfitRateSelect', function() {
                var selectedOption = $(this).find(':selected');
                var type = selectedOption.data('type');
                $("#editProfitRateSelect").val(type)
                $("#bulk_type").val(type)
            });

            $('#bulk_edit_profit_submit').on("click", function() {
                var value = $("#bulk_edit_profit").val();

                $('.current_price_input').each(function() {
                    var id = $(this).data("id");
                    if ($(".selectBulkEdit-" + id).prop("checked")) {
                        var price = $("#client_price_" + id).data("serviceprice");
                        var profit = $("#client_price_" + id).data("profit");
                        var percent;
                        percent = formatCurrency((value / 100) * profit);
                        var update = formatCurrency(price - percent);
                        $("#current_price_" + id).text(update);
                        $("#current_price_input" + id).val(update);
                        $("#client_price_" + id).val(update);
                        $("#profit_now_" + id).html(formatCurrency(profit - percent));
                        $("#type_toggle_" + id).val("percent");
                    }
                });
            });

            $(document).on('change', '.set_price_type', function() {
                var userSelectedOption = $(this).find(':selected');
                var id = userSelectedOption.data("id");
                var type = userSelectedOption.data("type");
                var price = $("#client_price_" + id).data("serviceprice");
                var current_price = $("#current_price_" + id).text();
                var percent = (current_price / price) * 100;

                $("#type_toggle_" + id).val(type)
                $("#price_type_" + id).val(type)

                if (type == "fixed") {
                    $("#client_price_" + id).val(formatCurrency(current_price));
                } else if (type == "percent") {
                    $("#client_price_" + id).val(formatCurrency(percent));
                }
            });

            $(document).on('keyup', '.current_price_input', function() {
                var id = $(this).data("id");
                var value = $(this).val();
                var type = $("#price_type_" + id).val();
                var price = $("#client_price_" + id).data("serviceprice");
                var apiprice = $("#client_price_" + id).data("apiprice");
                var percent;
                if (value == 0 || value == "") {
                    value = "0.00";
                    $("#current_price_" + id).addClass("text-red");
                } else {
                    $("#current_price_" + id).removeClass("text-red");
                }

                if (type == "fixed") {
                    $("#current_price_" + id).text(value);
                    $("#current_price_input" + id).val(value);
                    percent = (value / price) * 100;
                    $("#percent_" + id).val(formatCurrency(percent));
                    var profit = formatCurrency(value - apiprice);
                    if (value < apiprice) {
                        profit = "-" + profit
                    }

                    $("#profit_now_" + id).html(profit);

                } else if (type == "percent") {
                    percent = formatCurrency((price / 100) * value);
                    $("#current_price_" + id).text(percent);
                    $("#current_price_input" + id).val(percent);
                    $("#percent_" + id).val(value);
                    var profit = formatCurrency(percent - apiprice);
                    if (percent < apiprice) {
                        profit = "-" + profit
                    }
                    $("#profit_now_" + id).html(profit);
                }
            });

            $(document).on('click', '#delete_selected', function() {
                var checkedCheckboxes = $("input.selectRate:checked");

                var selectedRateIds = [];

                checkedCheckboxes.each(function() {
                    var rateId = $(this).data("id");
                    selectedRateIds.push(rateId);
                });

                $.ajax({
                    url: "{{ route('admin.users.delete_users_custom_rates') }}",
                    type: "POST",
                    data: {
                        rate_ids: selectedRateIds,
                        client_id: {{ $clientDetail->client_id }}
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "success",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-success"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         table.ajax.reload();
                            //         $('.checkAll-th').removeClass("show-action-menu");
                            //         $("#selectAllLable").show();
                            //         $("#checkAll-rates").prop("checked", false);
                            //     }
                            // }).finally(() => {
                            //     table.ajax.reload();
                            //     $('.checkAll-th').removeClass("show-action-menu");
                            //     $("#selectAllLable").show();
                            //     $("#checkAll-rates").prop("checked", false);
                            // });
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "error",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-danger"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         table.ajax.reload();
                            //         $('.checkAll-th').removeClass("show-action-menu");
                            //         $("#selectAllLable").show();
                            //         $("#checkAll-rates").prop("checked", false);
                            //     }
                            // }).finally(() => {
                            //     table.ajax.reload();
                            //     $('.checkAll-th').removeClass("show-action-menu");
                            //     $("#selectAllLable").show();
                            //     $("#checkAll-rates").prop("checked", false);
                            // });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error)
                    }
                });
            });

            $(document).on('click', '#update_custom_rates', function() {
                var prices = {};
                var priceTypes = {};
                var percents = {};

                $('.current_price_input').each(function() {
                    var serviceId = $(this).data('id').toString();

                    var price = $("#current_price_input" + serviceId).val();
                    var priceType = $('#price_type_' + serviceId).val();
                    var percent = $('#percent_' + serviceId).val();

                    var cleanServiceId = serviceId.replace(/\D/g, '');

                    if (price != null) {
                        prices[cleanServiceId] = price;
                    }
                    if (priceType != null) {
                        priceTypes[cleanServiceId] = priceType;
                    }
                    if (percent != null) {
                        percents[cleanServiceId] = percent;
                    }
                });

                var pricesArray = Object.values(prices);
                var priceTypesArray = Object.values(priceTypes);
                var percentsArray = Object.values(percents);

                $.ajax({
                    url: "{{ route('admin.users.update_users_custom_rates') }}",
                    type: "POST",
                    data: {
                        prices,
                        priceTypes,
                        percents,
                        client_id: {{ $clientDetail->client_id }}
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "success",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-success"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         table.ajax.reload();
                            //         $('.checkAll-th').removeClass("show-action-menu");
                            //         $("#selectAllLable").show();
                            //         $("#checkAll-rates").prop("checked", false);
                            //     }
                            // }).finally(() => {
                            //     table.ajax.reload();
                            //     $('.checkAll-th').removeClass("show-action-menu");
                            //     $("#selectAllLable").show();
                            //     $("#checkAll-rates").prop("checked", false);
                            // });
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                            // Swal.fire({
                            //     text: response.message,
                            //     icon: "error",
                            //     buttonsStyling: false,
                            //     confirmButtonText: "Ok, got it!",
                            //     customClass: {
                            //         confirmButton: "btn btn-danger"
                            //     }
                            // }).then((result) => {
                            //     if (result.isConfirmed) {
                            //         table.ajax.reload();
                            //         $('.checkAll-th').removeClass("show-action-menu");
                            //         $("#selectAllLable").show();
                            //         $("#checkAll-rates").prop("checked", false);
                            //     }
                            // }).finally(() => {
                            //     table.ajax.reload();
                            //     $('.checkAll-th').removeClass("show-action-menu");
                            //     $("#selectAllLable").show();
                            //     $("#checkAll-rates").prop("checked", false);
                            // });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error)
                    }
                });
            });
        });
    </script>
@endsection