@extends('seller.layout.index')

@section('title')
    سفارشات
@endsection

@section('style')
    @include('common.order.style')
    <style>
        label{
            margin-bottom: 0 !important;
        }
        .status-card{
            cursor:pointer;
        }
        .card{
            background: transparent !important;
        }
    </style>
@endsection

@section('script')
    @include('common.order.script')
    <script>

        let maxValue = Math.max(...@json($chartData['sales']));
        var options = {
            series: [{
                name: 'سود خالص',
                data: @json($chartData['sales'])  // داده‌های فروش ماهانه
            }],
            chart: {
                fontFamily: 'inherit',
                type: 'area',
                height: 250,
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                },
                sparkline: {
                    enabled: true
                }
            },
            plotOptions: {},
            legend: {
                show: false
            },
            dataLabels: {
                enabled: false
            },
            fill: {
                type: 'solid',
                opacity: 1
            },
            stroke: {
                curve: 'smooth',
                show: true,
                width: 3,
                colors: ['#4F8EF7']
            },
            xaxis: {
                categories: @json($chartData['categories']),  // دسته‌بندی‌های ماهانه
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false
                },
                labels: {
                    style: {
                        fontFamily: 'Tahoma',
                        fontSize: '12px',
                        colors: '#333'
                    }
                },
                crosshairs: {
                    show: false,
                    position: 'front',
                    stroke: {
                        color: '#0000',
                        width: 1,
                        dashArray: 3
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: undefined,
                    offsetY: 0,
                    style: {
                        fontSize: '12px'
                    }
                }
            },
            yaxis: {
                min: 0,
                max: maxValue,
                labels: {
                    show: true,
                    style: {
                        fontFamily: 'Tahoma',
                        fontSize: '12px',
                        colors: '#333'
                    },
                    formatter: function(value) {
                        return value.toLocaleString('fa-IR') + ' تومان';
                    }
                }
            },
            states: {
                normal: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                hover: {
                    filter: {
                        type: 'none',
                        value: 0
                    }
                },
                active: {
                    allowMultipleDataPointsSelection: false,
                    filter: {
                        type: 'none',
                        value: 0
                    }
                }
            },
            tooltip: {
                style: {
                    fontSize: '12px'
                },
                y: {
                    formatter: function (val) {
                        return val.toLocaleString('fa-IR') + " تومان";
                    }
                }
            },
            colors: ['#bfe5f4'],
            markers: {
                colors: ['#FF4560'],
                strokeColor: ['#FF4560'],
                strokeWidth: 3
            }
        };

        let element = document.getElementById('chartOrder');
        var chart = new ApexCharts(element, options);
        chart.render();
    </script>
    <script>
        function typePaymentOrder(tag)
        {


            $.ajax({
                url: "{{ route('admin.orders.filter.type.payment') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    'type': $(tag).val(),

                },
                dataType: "json",
                method: "post",

                success: function (msg) {
                    if (msg) {
                        const paymentType = document.getElementById('paymentType').value;
                        const paymentOptions = document.getElementById('paymentOptions');

                        if (paymentType !== 'none') {
                            paymentOptions.style.display = 'block';
                        } else {
                            paymentOptions.style.display = 'none';
                        }
                        $('.paymentMethodList').html(' ');
                        $('.paymentMethodList').html(msg['options']);

                    }

                },
            })
        }

        function toggleGroupSelection(group) {
            if (group === 'users') {
                // وقتی گزینه "کاربران" انتخاب شد، مودال را باز می‌کنیم
                $('#userModal').modal('show');
            } else if (group === 'agents') {
                // وقتی گزینه "نمایندگان" انتخاب شد، مودال را باز می‌کنیم
                $('#userModal').modal('show');
            }
        }
        let selectedUsers = []; // ذخیره کاربر انتخاب‌شده

        // تابع جستجو که بر اساس ورودی، لیست کاربران را فیلتر می‌کند
        function filterList() {
            const query = $('#searchInput').val();  // دریافت عبارت جستجو
            let userOrAgent = $('input[name="userOrAgent"]:checked').val();
            selectedUsers = [];
            // ارسال درخواست AJAX برای جستجوی کاربران یا نمایندگان
            $.ajax({
                url: '{{ route('seller.search.users.orders') }}',  // مسیر روت جستجو کاربران در لاراول
                method: 'GET',
                data: { query: query, userOrAgent: userOrAgent },  // ارسال عبارت جستجو به سرور
                success: function (response) {
                    // پاک کردن لیست قبلی
                    $('#groupList').empty();

                    if (response.length > 0) {
                        // نمایش نتایج جستجو
                        response.forEach(item => {
                            const listItem = $('<li>')
                                .addClass('list-group-item')
                                .html(`
                            <span>${item.first_name} ${item.last_name} (${item.cellphone})</span>
                            <span class="badge text-white bg-primary float-end">انتخاب</span>
                        `)
                                .attr('data-id', item.id);  // ذخیره شناسه کاربر در هر آیتم

                            // افزودن کلیک به هر گزینه برای انتخاب آن
                            listItem.on('click', function () {
                                // اگر آیتم قبلاً انتخاب شده باشد، آن را از لیست حذف کن
                                const index = selectedUsers.findIndex(user => user.id === item.id);
                                if (index !== -1) {
                                    selectedUsers.splice(index, 1); // حذف از لیست انتخابی
                                    listItem.removeClass('bg-primary text-white'); // برگرداندن رنگ آیتم
                                } else {
                                    selectedUsers.push(item); // افزودن به لیست انتخابی
                                    listItem.addClass('bg-primary text-white'); // تغییر رنگ آیتم
                                }
                            });

                            $('#groupList').append(listItem);  // اضافه کردن آیتم به لیست
                        });
                    } else {
                        $('#groupList').append('<li class="list-group-item">هیچ نتیجه‌ای یافت نشد.</li>');
                    }
                },
                error: function () {
                    alert('خطا در بارگذاری داده‌ها');
                }
            });
        }

        // دکمه انتخاب (برای ارسال اطلاعات کاربران انتخاب‌شده به فیلترها)
        $('#selectUserBtn').on('click', function () {

            console.log(selectedUsers,selectedUsers.length)
            if (selectedUsers.length > 0) {
                // حالا که کاربران انتخاب‌شده‌اند، می‌توانیم فیلترها را بر اساس آن‌ها اعمال کنیم
                applyFilters(selectedUsers);
            }
        });

        // تابع برای اعمال فیلتر بر اساس کاربر انتخاب‌شده
        function applyFilters(users) {
            let userIds = users.map(user => user.id);

            const paymentType = $('.paymentMethodList').val();  // نوع درگاه پرداخت
            const startDate = $('#order_start_input').val();  // تاریخ شروع
            const endDate = $('#order_end_input').val();  // تاریخ پایان

            // حالا که کاربر یا نماینده انتخاب‌شده است، اطلاعات آن به فیلترها ارسال می‌شود
            $.ajax({
                url: '{{ route('admin.search.orders.filter') }}',  // روت برای جستجو سفارشات
                method: 'GET',
                data: {
                    userIds:userIds,
                    payment_type: paymentType,  // نوع درگاه پرداخت
                    start_date: startDate,  // تاریخ شروع
                    end_date: endDate,  // تاریخ پایان

                },
                success: function(response) {
                    response = response['data']
                    let orders = response['orders'];
                    let massage = response['total_sale_message'];
                    $('#NotFound').hide();
                    $('#orderReports').show();
                    $('#orders').html(orders);
                    $('#totalSale').text(massage);
                    $('#totalSale').show();

                },
                error: function() {
                    alert('خطا در بارگذاری سفارشات');
                }
            });
        }

        // تابع برای نمایش نتایج سفارشات بعد از فیلتر شدن
        function displayOrders(orders) {
            // اینجا می‌توانید نتایج سفارشات فیلتر شده را در جدول یا لیست نمایش دهید
            console.log(orders);  // فقط به عنوان مثال، در کنسول چاپ می‌شود
        }


        // فیلتر کردن لیست بر اساس ورودی جستجو
        function searchOrders() {
            // دریافت مقادیر فیلترها

            const paymentType = $('.paymentMethodList').val();  // نوع درگاه پرداخت
            const startDate = $('#order_start_input').val();  // تاریخ شروع
            const endDate = $('#order_end_input').val();  // تاریخ پایان

            // ارسال درخواست AJAX به لاراول برای جستجو و فیلتر
            $.ajax({
                url: '{{ route('admin.search.orders.filter') }}',  // روت جستجو در لاراول
                method: 'GET',
                data: {

                    payment_type: paymentType,  // نوع درگاه پرداخت
                    start_date: startDate,  // تاریخ شروع
                    end_date: endDate,  // تاریخ پایان

                },
                success: function(response) {
                    response = response['data']
                    let orders = response['orders'];
                    let massage = response['total_sale_message'];
                    $('#NotFound').hide();
                    $('#orderReports').show();
                    $('#orders').html(orders);
                    $('#totalSale').text(massage);
                    $('#totalSale').show();

                },
                error: function() {
                    alert('خطا در بارگذاری داده‌ها');
                }
            });
        }

        // در صورت بستن مودال، ورودی جستجو را پاک می‌کنیم
        $('#userModal').on('hidden.bs.modal', function () {
            $('#searchInput').val('');
            $('#groupList').empty();
        });

        // Function to toggle payment options
        function togglePaymentOptions() {
            const paymentType = document.getElementById('paymentType').value;
            const paymentOptions = document.getElementById('paymentOptions');

            if (paymentType !== 'none') {
                paymentOptions.style.display = 'block';
            } else {
                paymentOptions.style.display = 'none';
            }
        }


        function filterStatusOrders(status)
        {
            const paymentType = $('.paymentMethodList').val();  // نوع درگاه پرداخت
            const startDate = $('#order_start_input').val();  // تاریخ شروع
            const endDate = $('#order_end_input').val();  // تاریخ پایان

            // ارسال درخواست AJAX به لاراول برای جستجو و فیلتر
            $.ajax({
                url: '{{ route('admin.search.orders.filter') }}',  // روت جستجو در لاراول
                method: 'GET',
                data: {

                    payment_type: paymentType,  // نوع درگاه پرداخت
                    start_date: startDate,  // تاریخ شروع
                    end_date: endDate,
                    delivery_status : status
                    // تاریخ پایان

                },
                success: function(response) {
                    response = response['data']
                    let orders = response['orders'];
                    let massage = response['total_sale_message'];
                    $('#NotFound').hide();
                    $('#orderReports').show();
                    $('#orders').html(orders);
                    $('#totalSale').text(massage);
                    $('#totalSale').show();

                },
                error: function() {
                    alert('خطا در بارگذاری داده‌ها');
                }
            });
        }
    </script>
@endsection

@section('content')

    <div class="col-xl-12 col-md-12 mb-4 p-4 ">


        @include('common.order.summery_box')
        @include('common.order.order_report_buttons')
        @include('common.order.rows')


        <div id="Auto_paginate" class="d-flex justify-content-center mt-5">
            {{ $orders->render() }}
        </div>
        <nav>
            <ul id="pagination" class="pagination justify-content-center">
            </ul>
        </nav>
        <input type="hidden" name="currentPage" id="currentPage" value="1">
        <div id="overlay">
            <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;"></div>
            <br/>
            Loading...
        </div>
    </div>
    @include('admin.orders.modal')
    @include('admin.orders.filter_order_modal')
@endsection