@extends('admin.layouts.app')

@section('content')
<style>
.selectpicker_service .select2-container {
    width: 100% !important;
}
.selectpicker_service {
    width: 100%;
}
</style>
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
        <div class="p-2"></div>
        <!--begin::Card-->
        <div class="card">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">
                </div>
                <!--begin::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body py-5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="report-navs">
                            <!-- Left navs Start -->
                            <div class="report-navs__left">
                                <ul class="nav nav-tabs p-b">
                                    <li class="@if ($action == 'payments') active @endif">
                                        <a href="{{ route('admin.reports.action', ['action' => 'payments']) }}"
                                            class="btn btn-sm btn-dark">Payments
                                        </a>
                                    </li>
                                    <li class="@if ($action == 'orders') active @endif">
                                        <a href="{{ route('admin.reports.action', ['action' => 'orders']) }}" class="btn btn-sm btn-dark">
                                            Orders
                                        </a>
                                    </li>
                                    <li class="@if ($action == 'tickets') active @endif">
                                        <a href="{{ route('admin.reports.action', ['action' => 'tickets']) }}" class="btn btn-sm btn-dark">
                                            Tickets
                                        </a>
                                    </li>
                                    <li class="@if ($action == 'profit') active @endif">
                                        <a href="{{ route('admin.reports.action', ['action' => 'profit']) }}" class="btn btn-sm btn-dark">
                                            Profit
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- Left navs End -->
                               </div>
                    </div>
                            <div class="row">
                    <div class="col-md-12">
                            <!-- Right navs Start -->
                            <div class="report-navs__right1">
                                <form action="" method="post">
                                    @csrf
                                    @if ($action == 'payments')
                                        <div class="report-navs__block">
                                            <div class="btn-group" role="group">
                                                <a href=""
                                                    class="btn btn-default @if ($type == 'amount') active @endif">
                                                    Total amount
                                                </a>
                                                <a href=""
                                                    class="btn btn-default @if ($type == 'count') active @endif">
                                                    Total count
                                                </a>
                                            </div>
                                        </div>
                                        <div class="report-navs__block selectpicker_methods">
                                            <select class="selectpicker" data-actions-box="true" data-live-search="true"
                                                id="payment_methods" name="methods[]" multiple="" data-size="10"
                                                title="Payment methods" tabindex="-98">
                                                @foreach ($methods as $method)
                                                    <option value="{{ $method['id'] }}"
                                                        @if (in_array($method['id'], request()->input('methods', []))) selected @endif>
                                                        {{ $method['method_name'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    @if (in_array($action, ['profit', 'orders']))
                                        @if ($action == 'orders')
                                            <div class="report-navs__block">
                                                <div class="btn-group" role="group">
                                                    <select class="type" name="type">
                                                        <option value="orders" @selected($type == 'orders')>
                                                            Total orders
                                                        </option>
                                                        <option value="charges" @selected($type == 'charges')>
                                                            Total charges
                                                        </option>
                                                        <option value="quantity" @selected($type == 'quantity')>
                                                            Total quantity
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        @endif
                                        <div class="report-navs__block selectpicker_service">
                                             <div class="form-group">
                                            <select id="services" class="selectpicker form-control" data-actions-box="true"
                                                data-live-search="true" name="services[]" multiple="" data-size="10"
                                                title="Services" tabindex="-98" placeholder="Select a service">
                                                @foreach ($serviceList as $category => $services)
                                                    <optgroup label="{{ $category }}">
                                                        @foreach ($services as $service)
                                                            <option value="{{ $service['service_id'] }}"
                                                                @if (in_array($service['service_id'], request()->input('services', []))) selected @endif>
                                                                {{ $service['service_id'] . ' - ' . $service['service_name'] }}
                                                            </option>
                                                        @endforeach
                                                    </optgroup>
                                                @endforeach
                                            </select>
                                        </div>
                                        </div>
                                        <div class="report-navs__block selectpicker_status">
                                            <select id="order_status" class="selectpicker" name="statuses[]" multiple=""
                                                data-max-options="100" data-size="10" title="Order Status" tabindex="-98">
                                                @foreach (['cron' => 'Waiting for CRON', 'fail' => 'Failed', 'pending' => 'Pending', 'inprogress' => 'In Progress', 'completed' => 'Completed', 'partial' => 'Partial', 'canceled' => 'Canceled', 'processing' => 'Processing'] as $statusKey => $statusValue)
                                                    <option value="{{ $statusKey }}"
                                                        @if (in_array($statusKey, request()->input('statuses', []))) selected @endif>
                                                        {{ $statusValue }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    @if ($action == 'tickets')
                                        <div class="report-navs__block">
                                            <div class="btn-group" role="group">
                                                <select class="type" name="type">
                                                    <option value="new" @selected($type == 'new')>
                                                        New tickets
                                                    </option>
                                                    <option value="user_reply" @selected($type == 'user_reply')>
                                                        Users messages
                                                    </option>
                                                    <option value="staff_reply" @selected($type == 'staff_reply')>
                                                        Staff replies
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="report-navs__block">
                                        <div class="btn-group" role="group">
                                            @foreach ($yearList as $yearl)
                                                <a href="?year={{ $yearl }}"
                                                    class="btn btn-default @if ($yearl == $year) active @endif">
                                                    {{ $yearl }}
                                                </a>
                                            @endforeach
                                        </div>
                                    </div>
                                </form>
                                <div class="report-navs__block">
                                    <button id="submit" class="btn btn-secondary" type="button">
                                        Submit
                                    </button>
                                </div>
                            </div>
                            <!-- Right navs End -->
                        </div>
                    </div>
                </div>
                <div class="table-responsive mt-5">
                    <div class="handle-loader text-center mx-auto"
                        style="display: none; transition: opacity .5s; opacity: 1;">
                        <p class="mg-t-100">Generating reports please wait...</p>
                        <div id="loader_anim" class="mg-t-10"></div>
                    </div>
                    <!--begin::Table-->
                    <table class="table table-rounded table-striped table-row-bordered table-row-gray-400 gy-7 gs-7" id="kt_table_reports"
                        style="display: none; transition: opacity .5s; opacity: 0;">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                                <th class="min-w-10px text-dark fw-bold">Days</th>
                                <th class="min-w-10px text-dark fw-bold">January</th>
                                <th class="min-w-10px text-dark fw-bold">February</th>
                                <th class="min-w-10px text-dark fw-bold">March</th>
                                <th class="min-w-10px text-dark fw-bold">April</th>
                                <th class="min-w-10px text-dark fw-bold">May</th>
                                <th class="min-w-10px text-dark fw-bold">June</th>
                                <th class="min-w-10px text-dark fw-bold">July</th>
                                <th class="min-w-10px text-dark fw-bold">August</th>
                                <th class="min-w-10px text-dark fw-bold">September</th>
                                <th class="min-w-10px text-dark fw-bold">October</th>
                                <th class="min-w-10px text-dark fw-bold">November</th>
                                <th class="min-w-10px text-dark fw-bold">December</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                    <!--end::Table-->
                </div>
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var currentRequest = null;
    $("#services").select2();
            function getReportData() {
                $(".handle-loader").css('opacity', '1');
                $(".handle-loader").show();
                $("#kt_table_reports").css('opacity', '0');
                // $("#loader_anim").LoadingOverlay("show");
                var year = '{{ date('Y') }}';
                @if (request()->has('year'))
                    year = '{{ request('year') }}';
                @endif
                var action = '{{ $action }}';
                var payment_methods = [];
                var services = [];
                var order_status = [];
                var type = $('.type option:selected').val();
                if ($('#payment_methods').length > 0) {
                    $('#payment_methods option:selected').each(function(i, opt) {
                        payment_methods.push($(opt).val());
                    });
                }
                if ($('#services').length > 0) {
                    $('#services option:selected').each(function(i, opt) {
                        services.push($(opt).val());
                    });
                }
                if ($('#order_status').length > 0) {
                    $('#order_status option:selected').each(function(i, opt) {
                        order_status.push($(opt).val());
                    });
                }

                var formData = new FormData();+
                formData.append('services', '');
                formData.append('action', action);
                formData.append('methods', JSON.stringify(payment_methods));
                formData.append('services', JSON.stringify(services));
                formData.append('statuses', JSON.stringify(order_status));
                formData.append('year', year);
                formData.append('type', type);
                currentRequest = $.ajax({
                    type: 'POST',
                    data: formData,
                    url: "{{ route('admin.reports.get_report_data') }}",
                    dataType: 'JSON',
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        if (currentRequest != null) {
                            currentRequest.abort();
                        }
                    },
                    success: function(data) {
                        $('#kt_table_reports tbody').html(data.htmls);
                        $(".handle-loader").css('opacity', '0');
                        // $("#loader_anim").LoadingOverlay("hide");
                        setTimeout(function() {
                            $(".handle-loader").hide();
                            $("#kt_table_reports").css('opacity', '1');
                            $("#kt_table_reports").show();
                        }, 500);
                    },
                    error: function(e) {
                        // Error
                        $(".handle-loader").css('opacity', '0');
                        // $("#loader_anim").LoadingOverlay("hide");
                        setTimeout(function() {
                            $(".handle-loader").hide();
                            $("#kt_table_reports").css('opacity', '1');
                            $("#kt_table_reports").show();
                        }, 500);
                        return false;
                    }
                });
                  $("#services").select2("destroy");
                   $("#services").select2();
                return false;
            }

            getReportData();

            $(document).on('click', '#submit', function() {
                getReportData();
            });
        });
    </script>
@endsection