@extends('admin.layouts.app')

@section('style')
    <!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" /> -->
    <link rel="stylesheet" href="{{asset('public/assets/admin/css/order-datatable-custom.css')}}">
    <style>
        .dropdown-menu:hover {
            display: block;
        }
    
        .overwrite__DropdownMenuStyle {
            right: -55% !important;
        }
        .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;
        }
        .form-control{
            padding: 0.55rem 0.75rem;
            font-size: 0.95rem;
        }
        .dataTables_wrapper .sorting:before,
        .dataTables_wrapper .sorting:after,
        .dataTables_wrapper .sorting_asc:before,
        .dataTables_wrapper .sorting_asc:after,
        .dataTables_wrapper .sorting_desc:before,
        .dataTables_wrapper .sorting_desc:after {
            content: none !important;
        }
        .column-three {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: flex-end;
            margin-bottom: 10px;
        }
        @media (max-width: 769px) {
            .column-three{
                align-items: flex-end;
                margin-bottom: 20px;
            }
            div.dataTables_filter_custom {
                margin-bottom: 0px !important;
            }
            a#refill-orders-btn {
                margin-bottom: 0;
                padding: 0.55rem 0.75rem !important;
            }
        }
        @media (max-width: 439px) {
            .column-three .part:nth-child(1), .column-three .part:nth-child(2){
                width: 48.5%;
            }
            a#refill-orders-btn {
                width: 100%;
            }
            .column-three{
                display: ruby;
            }
            .form-control-sm{
                max-width: 100% !important;
            }
            .column-three .part:nth-child(3) {
                width: 100% !important;
            }
            .column-three .part {
                margin: 5px 0px;
            }
        }
        .app-container{
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    </style>
@endsection
@section('content')

    
    <div class="card">
            <!--begin::Card header-->
            <div id="alerMessages"></div>
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show mt-2">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mt-2">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="card-header border-0 pt-6 full-width">
                <div class="broadcast_message_errors"></div>
                <div class="broadcast_message_success"></div>
                <div class="column-three">
                    <div class="part">
                        <div class="form-group">
                            <label>Order status</label>
                            <select class="form-control filter_status" name="filter_status" aria-invalid="false" id="filter_status">
                                <option value="" selected>All</option>
                                <!--<option value="cronpending" data-badge="">Cron Pending</option> -->
                                <option value="pending" data-badge="">Pending</option>
                                <option value="processing" data-badge="">Processing</option>
                                <option value="inprogress" data-badge="">In Progress</option>
                                <option value="completed" data-badge="">Completed</option>
                                <option value="partial" data-badge="">Partial</option>
                                <option value="canceled" data-badge="">Canceled</option>
                                <option value="fail" data-badge="">Fail</option>
                                <option value="cronpending" data-badge="">Cronpending</option>
                                <!--<option value="api" data-badge="">API</option> -->
                            </select>
                        </div>
                    </div>
                    <div class="part">
                        <a href="javascript:void(0);" class="btn btn-sm fw-semibold btn-sky" id="refill-orders-btn">Refill All
                            Orders</a>
                    </div>
                    <div class="part">
                        <div id="kt_table_users_filter_top" class="dataTables_filter_custom mt-6"><input type="search" class="form-control form-control-sm" placeholder="Search..." id="searchFilter" aria-controls="kt_table_users"></div>
                    </div>
                </div>
                <!--begin::Card title-->
                <!--<div class="row w-100">-->
                <!--    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">-->
                        
                <!--    </div>-->
                <!--    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">-->
                        
                <!--    </div>-->
                <!--    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">-->
                        
                <!--    </div>-->
                <!--</div>-->
                <!--begin::Card title-->
            </div>
            <!--begin::Card header-->
            <div class="card-body padding-top-0" style="padding-top: 0px !important;">
                <div class="table-responsive custom-row order-all-div">
                    <!--begin::Table-->
                    <table class="table table-rounded table-row-bordered table-row-gray-300 gy-7 gs-7 display_in_mobile kt_table_users" id="kt_table_orders">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                                <th class="checkAll-th">
                                    <div class="checkAll-holder">
                                        <input type="checkbox" id="checkAll-orders">
                                        <input type="hidden" id="checkAllText" value="order">
                                    </div>
                                    <div class="action-block">
                                        <ul class="action-list">
                                            <li><span class="countOrders"></span> Orders Selected</li>
                                            <li>
                                                <div class="dropdown">
                                                    <button class="btn btn-secondary 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-type="resend" href="javascript:void(0)"
                                                                id="resend_selected">
                                                                Resend selected orders
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-capitalize bulkorder"
                                                                data-type="resend_all" href="javascript:void(0)"
                                                                id="resend_all">
                                                                Resend All Failed orders
                                                            </a>
                                                        </li>
                                                        <li class="dropdown-submenu">
                                                            <a class="dropdown-item text-capitalize dropdown-toggle"
                                                                href="#">
                                                                Change status
                                                            </a>
                                                            <ul class="dropdown-menu overwrite__DropdownMenuStyle">
                                                                <li>
                                                                    <a class="dropdown-item text-capitalize bulkorder"
                                                                        data-type="pending" href="javascript:void(0)">
                                                                        Pending
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item text-capitalize bulkorder"
                                                                        data-type="inprogress" href="javascript:void(0)">
                                                                        In progress
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item text-capitalize bulkorder"
                                                                        data-type="processing" href="javascript:void(0)">
                                                                        Processing
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a class="dropdown-item text-capitalize bulkorder"
                                                                        data-type="completed" href="javascript:void(0)">
                                                                        Completed
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-capitalize bulkorder"
                                                                data-type="canceled" href="javascript:void(0)">
                                                                Cancel and refund
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-capitalize" id="copy_id"
                                                                href="javascript:void(0)">
                                                                Copy Order Ids
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item text-capitalize" id="copy_api"
                                                                href="javascript:void(0)">
                                                                Copy API Order Ids
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </th>
                                <th class="text-dark fw-bold">ID</th>
                                <th class="text-dark fw-bold">User</th>
                                <th class="text-dark fw-bold">Charge</th>
                                <th class="text-dark fw-bold">Link</th>
                                <th class="text-dark fw-bold">Start Count</th>
                                <th class="text-dark fw-bold">Quantity</th>
                                <th>
                                    <div class="form-group min-w-350px">
                                        <select class="form-control padding-top-bottom-0" name="service_list" aria-invalid="false"
                                            id="service_list">
                                            <option value="">All Orders {{ array_sum($orderCounts) }}</option>
                                            @foreach ($services as $service)
                                                <option value={{ $service->service_id }} data-badge=""
                                                    @if ($service->service_type == 1) style="color: #c1c1c1;" @endif>
                                                    <span class="label-id">{{ $service->service_id }}</span>
                                                    {{ $service->service_name }}
                                                    ({{ $serviceOrderCounts[$service->service_id] ?? 0 }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>


                                </th>
                                <th class="text-dark fw-bold">Status</th>
                                <th class="text-dark fw-bold">Remains</th>
                                <th class="text-dark fw-bold">Live Count</th>
                                <th class="min-w-70px text-dark fw-bold">Created</th>
                                <th>
                                    <div class="form-group min-w-70px">
                                        <select class="form-control" name="filter_mode" aria-invalid="false"
                                            id="filter_mode">
                                            <option value="">Mode</option>
                                            <option value="manual" data-badge="">Manual</option>
                                            <option value="auto" data-badge="">Auto</option>
                                        </select>
                                    </div>
                                </th>
                                <th class="min-w-100px text-dark fw-bold"></th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <div class="pagination_display"></div>
                </div>
            </div>
            <!--end::Card body-->
        </div>
    <div id="alertMessages"></div>
    <!--end::Content container-->
    <!-- Modal -->
    <div class="modal fade" id="orderDetails" tabindex="-1" role="dialog" aria-labelledby="orderDetailsTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updatOrderStatus" tabindex="-1" role="dialog" aria-labelledby="updatOrderStatus"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Update Order Status</h2>
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-dismiss="modal" aria-label="Close">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                    transform="rotate(45 7.41422 6)" fill="currentColor" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                </div>
                <div class="modal-body">
                </div>

            </div>
        </div>
    </div>
<!---->
    <!-- Modal -->
    <div class="modal fade" id="orderPartial" tabindex="-1" role="dialog" aria-labelledby="editUserTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.orders.updateOrderRemains') }}" method="POST" id="orderPartialForm">
                    <div class="modal-header">
                        <h2>Mark Partial</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="orderRemains" tabindex="-1" role="dialog" aria-labelledby="editUserTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.orders.updateOrderRemainCount') }}" method="POST"
                    id="orderRemainCountForm">
                    <div class="modal-header">
                        <h2>Order Remains</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="order_remains" class="form-control" id="order_remains" required>
                        <input type="hidden" id="remain_order_id" name="remain_order_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="orderStartCount" tabindex="-1" role="dialog" aria-labelledby="editUserTitle"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.orders.updateOrderStartCount') }}" method="POST"
                    id="orderRemainCountForm">
                    @csrf
                    @method('post')
                    <div class="modal-header">
                        <h2>Order Start Count</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="order_start" class="form-control" id="order_start" required>
                        <input type="hidden" id="remain_start_id" name="remain_order_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" id="orderStartCountFormSubmit">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="orderUrl" tabindex="-1" role="dialog" aria-labelledby="orderUrl" aria-hidden="true"
        data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.orders.updateorderUrl') }}" method="POST" id="updateorderUrl">
                    <div class="modal-header">
                        <h2>Order URL</h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                        <input type="text" name="order_url" class="form-control" id="order_url" required>
                        <input type="hidden" id="url_order_id" name="order_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirmChange" tabindex="-1" aria-hidden="true" data-bs-backdrop='static'>
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered">
            <!--begin::Modal content-->
            <div class="modal-content">
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2>Do you confirm that you wish to continue?</h2>
                    <!--end::Modal title-->
                </div>
                <!--end::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body">
                    <input type="hidden" id="bulkStatus" name="bulkStatus" value="">
                    <div class="mx-auto">
                        <a class="btn btn-dark" href="#" id="confirmYes">Yes</a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                    </div>
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>

    <div class="modal fade" tabindex="-1" id="showOrderCommentsModal">
        <div class="modal-dialog">
            <div class="modal-content" id="showOrderCommentsModalContent">
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#filter_status').select2({
                minimumResultsForSearch: -1,
                templateResult: function(data, container) {
                    if (!data.id) {
                        return data.text;
                    }
                    var badge = $(data.element).data('badge');
                    return $('<span>' + data.text +
                        '</span><span class="badge rounded-pill bg-secondary p-1 ms-2">' + badge +
                        '</span>');
                }
            });
        });

        var table = $('#kt_table_orders').DataTable({
            "lengthMenu": [100, 200, 500],
            "deferRender": true,
            "processing": true,
            "serverSide": true,
            serverSide: true,
            paging: true,
            info: false, 
            language: {
                lengthMenu: "Display_MENU_",
            },
            responsive: true,
            ajax: {
                url: "{{ route('admin.orders') }}",
                data: function(d) {
                    d.filter_status = $('#filter_status option:selected').val()
                    d.filter_mode = $('#filter_mode option:selected').val()
                    d.service_list = $('#service_list option:selected').val()
                    d.search = $('#searchFilter').val();
                },
            },
            // columnDefs: [
            //     { orderable: false, targets: '_all' }
            // ],
            columns: [{
                    data: 'selectOrder',
                    name: 'selectOrder',
                    orderable: false
                }, 
                {
                    data: 'ID',
                    name: 'ID',
                    orderable: true
                },
                {
                    data: 'User',
                    name: 'User',
                    orderable: true
                },
                {
                    data: 'Charge',
                    name: 'Charge',
                    orderable: true
                },
                {
                    data: 'Link',
                    name: 'Link',
                    orderable: true
                },
                {
                    data: 'StartCount',
                    name: 'StartCount',
                    orderable: true
                },
                {
                    data: 'order_quantity',
                    name: 'order_quantity',
                    orderable: true
                },
                {
                    data: 'Service',
                    name: 'Service',
                    orderable: false
                },
                {
                    data: 'Status',
                    name: 'Status',
                    orderable: true
                },
                {
                    data: 'Remains',
                    name: 'Remains',
                    orderable: true
                },
                {
                    data: 'LiveCount',
                    name: 'LiveCount',
                    orderable: true
                },
                {
                    data: 'Created',
                    name: 'Created',
                    orderable: true
                },
                {
                    data: 'mode',
                    name: 'mode',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true
                },
            ],
            initComplete: function(settings, json) {
                const orderCounts = json.orderCounts;
                $('#filter_status option').each(function() {
                    const status = $(this).val();
                    const count = orderCounts[status] || 0;
                    $(this).attr('data-badge', count);
                });
            },
            createdRow: function(row, data, index) {

                if (data['Status'] == 'Failed') {
                    $(row).attr('style', 'background-color:var(--bs-danger-light)');
                }
            }
        });

        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');

        var currentRequest = null;
        $(document).on('change', '#filter_status', function() {
            table.ajax.reload();
        });
        $(document).on('change', '#filter_mode', function() {
            table.ajax.reload();
        });
        $(document).on('change', '#service_list', function() {
            table.ajax.reload();
        });

        $('#refill-orders-btn').click(function() {


            $.LoadingOverlay("show");
            currentRequest = jQuery.ajax({
                type: 'GET',
                url: "{{ route('admin.orders.refillAllOrders') }}",
                dataType: 'JSON',
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    if (data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(i, val) {
                            $('.broadcast_message_errors').append(
                                '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                val[0] + '</div>');
                        })
                    } else if (data.status == 0) {
                        $('.broadcast_message_errors').html(
                            '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                            data.message + '</div>');
                    } else {
                        $('.broadcast_message_success').html(
                            '<div class="alert alert-success alert-dismissible fade show" role="alert">' +
                            data.message + '</div>');
                        $('#broadcastMessageForm')[0].reset();
                        setTimeout(function() {
                            $('#kt_modal_broadcast_message').modal('hide')
                        }, 3000)
                    }
                    $('.modal').animate({
                        scrollTop: 0
                    }, 1000);
                    setTimeout(() => {
                        $('.broadcast_message_errors').html('');
                        $('.broadcast_message_success').html('');
                    }, 3000);
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).on('click', '.order-details-btn', function() {
            $.LoadingOverlay("show");
            var id = $(this).attr('data-id');
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: {
                    'id': id
                },
                url: "{{ route('admin.orders.orderDetails') }}",
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    $('#orderDetails .modal-body').html(data);
                    $('#orderDetails').modal('show')
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).on('click', '.order-partial-btn', function() {
            var id = $(this).attr('data-id');
            var formData = new FormData();
            formData.append('id', id);
            currentRequest = jQuery.ajax({
                type: 'POST',
                data: formData,
                url: "{{ route('admin.orders.orderPartial') }}",
                dataType: 'JSON',
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $('#orderPartial .modal-body').html(data.htmls)
                    $('#orderPartial').modal('show')
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $("#orderPartialForm").validate({
            rules: {
                order_remains: {
                    required: true
                }
            },
            messages: {},
            submitHandler: function(form) {
                $.LoadingOverlay("show");
                $('.edit_order_errors').html('');
                $('.edit_order_success').html('');
                var formData = new FormData(form);
                currentRequest = jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    url: "{{ route('admin.orders.updateOrderRemains') }}",
                    dataType: 'JSON',
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        if (currentRequest != null) {
                            currentRequest.abort();
                        }
                    },
                    success: function(data) {
                        $.LoadingOverlay("hide");
                        if (data.errors) {
                            var errors = data.errors;
                            $.each(errors, function(i, val) {
                                $('.edit_order_errors').append(
                                    '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                    val[0] + '</div>');
                            })
                        } else if (data.status == 0) {
                            $('.edit_order_errors').html(
                                '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                data.message + '</div>');
                        } else {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(data.message);
                            $('.edit_order_success').html(
                                '<div class="alert alert-success alert-dismissible fade show" role="alert">' +
                                data.message + '</div>');
                            $('#orderPartialForm')[0].reset();
                            setTimeout(function() {
                                $('#orderPartial').modal('hide')
                            }, 3000)
                        }
                        $('.modal').animate({
                            scrollTop: 0
                        }, 1000);
                        setTimeout(() => {
                            $('.edit_order_errors').html('');
                            $('.edit_order_success').html('');
                        }, 3000);
                        table.ajax.reload()
                    },
                    error: function(e) {
                        // Error
                        $.LoadingOverlay("hide");
                        return false;
                    }
                });
                return false;
            }
        });

        $(document).on('click', '.edit-remaincount-btn', function() {
            $('#order_remains').val($(this).text());
            $('#remain_order_id').val($(this).data("id"));
            $('#orderRemains').modal('show');
        });

        $(document).on('click', '.edit-orderurl-btn', function() {
            $.LoadingOverlay("show");
            $('#order_url').val($(this).data("url"));
            $('#url_order_id').val($(this).data("id"));
            $.LoadingOverlay("hide");
            $('#orderUrl').modal('show');
        });

        $(document).on('click', '.edit-startcount-btn', function() {
            $.LoadingOverlay("show");
            $('#order_start').val($(this).data('startcount'));
            $('#remain_start_id').val($(this).data("id"));
            $.LoadingOverlay("hide");
            $('#orderStartCount').modal('show');
        });

        $(document).on('click', '#orderStartCountFormSubmit', function(e) {
            e.preventDefault();

            $.LoadingOverlay("show");

            var formData = $(this).closest('form').serialize();

            $.ajax({
                url: "{{ route('admin.orders.updateOrderStartCount') }}",
                method: "POST",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    table.ajax.reload();
                    $.LoadingOverlay("hide");
                    if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                        }
                    // Swal.fire({
                    //     text: response.message,
                    //     icon: response.success == "true" ? "success" : "error",
                    //     buttonsStyling: false,
                    //     confirmButtonText: "Ok, got it!",
                    //     customClass: {
                    //         confirmButton: "btn btn-success"
                    //     }
                    // });
                },
                error: function(error) {
                    $.LoadingOverlay("hide");
                    console.log(error);
                }
            });

            $('#orderStartCount').modal('hide');
        });

        $(document).on('click', '.update-orderstatus-btn', function() {
            $.LoadingOverlay("show");
            currentRequest = jQuery.ajax({
                type: 'GET',
                url: "{{ url('admin/orders/getOrderStatusForUpdate/') }}" + "/" + $(this).data("id"),
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    $.LoadingOverlay("hide");
                    $('#updatOrderStatus .modal-body').html(data);
                    $('#updatOrderStatus').modal('show');
                },
                error: function(e) {
                    // Error
                    $.LoadingOverlay("hide");
                    return false;
                }
            });
            return false;
        });

        $(document).on('click', '#updateOrderStatusFormSubmit', function(e) {
            e.preventDefault();

            $.LoadingOverlay("show");

            var formData = $(this).closest('form').serialize();

            $.ajax({
                url: "{{ route('admin.orders.updateOrderStatus') }}",
                method: "POST",
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                        }
                    table.ajax.reload();
                    $.LoadingOverlay("hide");
                    
                    
                    // Swal.fire({
                    //     text: response.message,
                    //     icon: response.success == "true" ? "success" : "error",
                    //     buttonsStyling: false,
                    //     confirmButtonText: "Ok, got it!",
                    //     customClass: {
                    //         confirmButton: "btn btn-success"
                    //     }
                    // });
                },
                error: function(error) {
                    $.LoadingOverlay("hide");
                    console.log(error);
                }
            });

            $('#updatOrderStatus').modal('hide');
        });

        $(document).on('click', '.sync_count', function() {

            var id = $(this).data("id");
            var name = $(this).data("name");
            var url = $(this).data("url");
            get_social_details(url, name, id);
        });

        function get_social_details(url, name, id) {
            var order_url = url;
            var cat = "";
            var service_name = name;
            var type = "";
            if (service_name.includes("Instagram") || service_name.includes("instagram")) {
                if (service_name.includes("followers") || service_name.includes("Followers") || service_name.includes(
                        "follower") || service_name.includes("Follower")) {
                    type = 2;
                } else if (service_name.includes("likes") || service_name.includes("like") || service_name.includes(
                        "view") || service_name.includes("views") || service_name.includes("Likes") || service_name
                    .includes(
                        "Like") || service_name.includes("View") || service_name.includes("Views")) {
                    type = 1;
                }
            } else if (service_name.includes("Youtube") || service_name.includes("youtube")) {
                if (service_name.includes("subscribers") || service_name.includes("subscriber") || service_name.includes(
                        "Subscribers") || service_name.includes("subscribe") || service_name.includes("Subscribe")) {
                    type = 5;
                } else if (service_name.includes("views") || service_name.includes("view") || service_name.includes(
                        "View") || service_name.includes("Views")) {
                    type = 9;
                } else if (service_name.includes("likes") || service_name.includes("like") || service_name.includes(
                        "Like") || service_name.includes("Likes")) {
                    type = 6;
                }
            } else if (service_name.includes("Twitter") || service_name.includes("twitter")) {
                if (service_name.includes("status") || service_name.includes("Status") || service_name.includes("story") ||
                    service_name.includes("Story")) {
                    type = 4;
                } else {
                    type = 3;
                }
            } else if (service_name.includes("Telegram") || service_name.includes("telegram")) {
                type = 7;
            } else {
                type = 8;
            }
            console.log(type);
            var allow_social_query = false;
            switch (type) {
                case 1:
                    if ((order_url.indexOf("instagram.com/") !== -1 || order_url.indexOf("instagr.am/") !== -1) && (
                            order_url.indexOf("/p/") !== -1 || order_url.indexOf("/tv/") !== -1 || order_url.indexOf(
                                "/reel/") !== -1)) {
                        cat = 18;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 2:
                    if ((order_url.indexOf("instagram.com/") !== -1 || order_url.indexOf("instagr.am/") !== -1) && order_url
                        .indexOf("/p/") === -1 && order_url.indexOf("/tv/") === -1 && order_url.indexOf("/reel/") === -1) {
                        cat = 19;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 3:
                    if (order_url.indexOf("twitter.com/") !== -1 && order_url.indexOf("/status/") === -1) {
                        cat = 5;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 4:
                    if (order_url.indexOf("twitter.com/") !== -1 && order_url.indexOf("/status/") !== -1) {
                        cat = 13;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 5:
                    if ((order_url.indexOf("youtube.com/") !== -1 || order_url.indexOf("youtu.be/") !== -1 || order_url
                            .indexOf("m.youtube.com/") !== -1) && (order_url.indexOf("/channel/") !== -1 || order_url
                            .indexOf("/user/") !== -1 || order_url.indexOf("/c/") !== -1)) {
                        cat = 4;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 6:
                    if (order_url.indexOf("youtube.com/") !== -1 || order_url.indexOf("youtu.be/") !== -1 || order_url
                        .indexOf("m.youtube.com/") !== -1) {
                        cat = 23;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 7:
                    if (order_url.indexOf("t.me/") !== -1 || order_url.indexOf("@") !== -1 || order_url.indexOf(
                            "telegram.me") !== -1 || order_url.indexOf("telegram.org") !== -1) {
                        cat = 43;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break;
                case 8:
                    if (order_url.indexOf("ipweb.ru") === -1 || order_url.indexOf("ipweb.ru") === -1) {
                        cat = 32;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break
                case 9:
                    if (order_url.indexOf("youtube.com/") !== -1 || order_url.indexOf("youtu.be/") !== -1 || order_url
                        .indexOf("m.youtube.com/") !== -1) {
                        cat = 24;
                        allow_social_query = true
                    } else {
                        allow_social_query = false
                    }
                    break
            }

            if (allow_social_query) {
                $("#sync_icon_" + id).addClass("fa-spin");
                var base = "https://panel.aularental.com";
                var settings = {
                    "url": '{{ route("admin.getInstaFeed") }}',
                    "data": {
                        'order_url': url,
                        "cate": cat
                    },
                    "method": "POST",
                    "timeout": 0,
                };

                $.ajax(settings).done(function(response) {
                    $("#sync_icon_" + id).removeClass("fa-spin");
                    json_resp = JSON.parse(response);
                    if (json_resp['error'] == "") {
                        $("#count_" + id).html(json_resp['order_initial_social_counter']);
                    }
                });
            }
        }

        $("#checkAll-orders").click(function() {
            if ($(this).prop('checked') == true) {
                $('.selectOrder').not(this).prop('checked', true);
            } else {
                $('.selectOrder').not(this).prop('checked', false);
            }
            var count = $('.selectOrder').filter(':checked').length;
            $('.countOrders').html(count);
            $("#resend_selected").hide();
            $("#resend_all").hide();
            if (count > 0) {
                $('.checkAll-th').addClass("show-action-menu");
                var status = $('#filter_status option:selected').val()
                if (status == "fail") {
                    $("#resend_selected").show();
                }
                if (status == "") {
                    $("#resend_all").show();
                }
            } else {
                $('.checkAll-th').removeClass("show-action-menu");
                $("#resend_selected").hide();
                $("#resend_all").hide();
            }
        });

        $(document).on('click', '.selectOrder', function() {
            var count = $('.selectOrder').filter(':checked').length;
            $('.countOrders').html(count);
            $("#resend_selected").hide();
            $("#resend_all").hide();
            if (count > 0) {
                $('.checkAll-th').addClass("show-action-menu");
                var status = $('#filter_status option:selected').val();
                $("#resend_selected").show();
                if (status == "fail") {
                    $("#resend_selected").show();
                }
                if (status == "") {
                    $("#resend_all").show();
                }
            } else {
                $('.checkAll-th').removeClass("show-action-menu");
                $("#resend_selected").hide();
                $("#resend_all").hide();
            }
        });


        $('.bulkorder').click(function() {
            var status = $(this).attr("data-type");
            $("#bulkStatus").val(status);
            $("#confirmYes").removeAttr('href');
            $("#confirmChange").modal('show');
        });


        $("#confirmYes").on("click", function() {
            var checkedCheckboxes = $("input.selectOrder:checked");

            var selectedOrderIds = [];

            checkedCheckboxes.each(function() {
                var orderId = $(this).data("id");
                var apiId = $(this).data('api-id');
                selectedOrderIds.push(orderId);
            });

            var bulkStatus = $("#bulkStatus").val();

            $.ajax({
                method: "POST",
                url: "{{ route('admin.orders.update_orders_multi_action') }}",
                data: {
                    order_ids: selectedOrderIds,
                    status: bulkStatus
                },
                success: function(response) {
                    
                    if (response.success) {
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(response.message);
                            table.ajax.reload();
                        } else {
                            $('#alertMessages').addClass('alert alert-danger');
                            $('#alertMessages').text(response.message);
                        }
                    // 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();
                    //     }
                    // }).finally(() => {
                    //     table.ajax.reload();
                    // });
                    table.ajax.reload();
                    $('#checkAll-orders').prop('checked', false);
                    $('.checkAll-th').removeClass("show-action-menu");
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                },
                complete: function() {
                    $("#confirmChange").modal("hide");
                }
            });
        });

        $('#copy_id').click(function() {
            var checkedCheckboxes = $("input.selectOrder:checked");
            let ids = "";
            checkedCheckboxes.each(function() {
                ids += " " + $(this).data('id') + ",";
            });
            navigator.clipboard.writeText(ids);
            
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text("Order IDs were copied successfully!!!");
                                                    
            // Swal.fire({
            //     text: "Order IDs were copied successfully!!!",
            //     icon: "success",
            //     buttonsStyling: false,
            //     confirmButtonText: "Ok",
            //     customClass: {
            //         confirmButton: "btn btn-success"
            //     }
            // })
        });

        $('#copy_api').click(function() {
            var checkedCheckboxes = $("input.selectOrder:checked");
            let ids = "";
            checkedCheckboxes.each(function() {
                ids += " " + $(this).data('api-id') + ",";
            });
            navigator.clipboard.writeText(ids);
            
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text("API Order IDs were copied successfully!!!");
                            
            // Swal.fire({
            //     text: "API Order IDs were copied successfully!!!",
            //     icon: "success",
            //     buttonsStyling: false,
            //     confirmButtonText: "Ok",
            //     customClass: {
            //         confirmButton: "btn btn-success"
            //     }
            // })
        });

        $(document).on('click', '.order-comments-modal', function() {
            $.LoadingOverlay("show");
            var id = $(this).data("id");
            var formData = new FormData();
            formData.append('id', id);

            $.ajax({
                method: "POST",
                url: "{{ route('admin.orders.show_order_comments_modal') }}",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#showOrderCommentsModalContent').html(response.content);
                    $.LoadingOverlay("hide");
                    $('#showOrderCommentsModal').modal('show');
                },
                error: function(error) {
                    $.LoadingOverlay("hide");
                }
            });
        });
    </script>
@endsection