@extends('layouts.appWithoutLogin')

@section('style')
    <style>
        .dragService {
            display: flex;
            align-items: center;
        }

        .dragService .handle:hover {
            cursor: move;
        }

        .modal-backdrop {
            --bs-backdrop-zindex: 1050;
            --bs-backdrop-bg: #000000;
            --bs-backdrop-opacity: 0.4;
            position: fixed;
            top: 0;
            left: 0;
            z-index: var(--bs-backdrop-zindex);
            width: 100vw;
            height: 100vh;
            background-color: var(--bs-backdrop-bg);
        }

        .modal-backdrop.show {
            opacity: var(--bs-backdrop-opacity);
        }

        .modal {
            z-index: 9999;
            margin: 1.75rem 0;
        }
    </style>
@endsection

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
        @if (isset($pageContent) &&
                !is_null($pageContent) &&
                ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
            <div class="mx-auto my-4 well">
                {!! $pageContent->page_content_top !!}
            </div>
        @endif

        <!--begin::Card-->
        <div class="card my-5">
            <div class="card-body py-4">
                <div class="form-group ">
                    <label>Filter Category</label>
                    <select class="form-control filter_status" name="filter_category" aria-invalid="false"
                        id="filter_category">
                        <option value="">All</option>
                        @foreach ($categoriesRows as $c)
                            <option value="{{ $c->category_id }}">{{ $c->category_name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="table-responsive">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5 user-service-sortable" id="kt_table_orders">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>ID</th>
                                <th>Category Name</th>
                                <th>Service Name</th>
                                <th>Price</th>
                                <th>Min</th>
                                <th>Max</th>
                                <th>Average Time</th>
                                <th>Description</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-gray-800 fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->

        @if (isset($pageContent) &&
                !is_null($pageContent) &&
                ($pageContent->content_place == 'both' || $pageContent->content_place == 'bottom'))
            <div class="mx-auto my-4 well">
                {!! $pageContent->page_content_bottom !!}
            </div>
        @endif
    </div>
    <!--end::Content container-->

    <!-- Modal -->
    <div class="modal" id="descriptionBox" tabindex="-1" role="dialog" aria-labelledby="descriptionBox"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <pre class="description-content"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function() {
            var groupColumn = 1;
            var table = $('#kt_table_orders').DataTable({
                "lengthMenu": [1000, 5000, 10000],
                paging: true,
                searching: true,
                processing: true,
                ajax: {
                    url: "{{ route('services') }}",
                    data: function(d) {
                        d.filter_status = $('#filter_category option:selected').val()
                    }
                },
                columns: [{
                        data: 'ID',
                        name: 'ID',
                        orderable: true
                    },
                    {
                        data: 'category_name',
                        name: 'category_name',
                        orderable: true
                    },
                    {
                        data: 'service_name',
                        name: 'service_name',
                        orderable: true
                    },
                    {
                        data: 'service_price',
                        name: 'price',
                        orderable: true
                    },
                    {
                        data: 'min',
                        name: 'min',
                        orderable: true
                    },
                    {
                        data: 'max',
                        name: 'max',
                        orderable: true
                    },
                    {
                        data: 'average',
                        name: 'average',
                        orderable: true
                    },
                    {
                        data: 'Description',
                        name: 'Description',
                        orderable: true
                    },
                ],
                columnDefs: [{
                    visible: false,
                    targets: groupColumn
                }],
                order: false,
                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="7" style="font-weight:bold">' +
                                        group +
                                        '</td></tr>'
                                    );

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

            // user side commented as not required
            // $(".user-service-sortable tbody").sortable({
            //     handle: '.handle',
            //     items: 'tr',
            //     update: function(event, ui) {
            //         var draggedRow = ui.item.find('.handle'); // Get the handle within the dragged row
            //         var destinationRow = ui.item.prev('tr'); // Get the previous row (destination)
            //         var destination = null;

            //         if (destinationRow.length > 0) {
            //             destination = destinationRow.find(
            //                 '.handle'); // Get the handle within the destination row
            //         }

            //         // Get the data-catid of the destination row's handle
            //         var destinationCatId = destination ? destination.data('catid') : null;

            //         // Get the data-catid of the dragged row's handle
            //         var draggedCatId = draggedRow.data('catid');

            //         if (destinationCatId !== draggedCatId) {
            //             // Throw an error
            //             Swal.fire({
            //                 text: "Error: Cannot drag row to a different category.",
            //                 icon: "error",
            //                 buttonsStyling: false,
            //                 confirmButtonText: "Ok, got it!",
            //                 customClass: {
            //                     confirmButton: "btn btn-success"
            //                 }
            //             })
            //             // Revert the dragged row to its original position
            //             $(this).sortable('cancel');
            //             return;
            //         }

            //         var array = [];
            //         $(this).find('tr:not(.group)').each(function(i) {
            //             $(this).attr('data-line', i + 1);
            //             var params = {
            //                 catId: $(this).find('.handle').data('catid'),
            //                 serviceId: $(this).find('.handle').data('serviceid'),
            //                 line: $(this).attr('data-line')
            //             };
            //             array.push(params);
            //         });

            //         // Perform AJAX request to update the service lines
            //         $.ajax({
            //             url: "{{ route('services.update_service_lines') }}",
            //             method: 'POST',
            //             data: {
            //                 services: array
            //             },
            //             success: function(response) {
            //                 Swal.fire({
            //                     text: response.message,
            //                     icon: response.success == true ? "success" :
            //                         "error",
            //                     buttonsStyling: false,
            //                     confirmButtonText: "Ok, got it!",
            //                     customClass: {
            //                         confirmButton: "btn btn-success"
            //                     }
            //                 })
            //                 table.ajax.reload();
            //                 return;
            //             },
            //             error: function(xhr, status, error) {
            //                 console.error(error);
            //             }
            //         });
            //     }
            // });

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

            $(document).on('click', '.show_description', function() {
                $.LoadingOverlay("show");
                var description = $(this).attr('data-description');
                $('#descriptionBox .modal-body pre').text(description);
                $.LoadingOverlay("hide");
                $('#descriptionBox').modal('show');
            });

            $(document).on('click', '.order-partial-btn', function() {
                $.LoadingOverlay("show");
                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) {
                        $.LoadingOverlay("hide");
                        $('#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 {
                                $('.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);
                        },
                        error: function(e) {
                            // Error
                            $.LoadingOverlay("hide");
                            return false;
                        }
                    });
                    return false;
                }
            });

            $('.edit-startcount-btn').click(function() {
                alert('yes');
            });

            $(document).on('click', '.sync_count', function() {
                var id = $(this).data("id");
                console.log(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']);
                        }
                    });
                }
            }
        });
    </script>
@endsection