@extends('admin.layouts.app')
@section('style')
<!-- <link rel="stylesheet" href="{{asset('public/assets/admin/css/datatable-custom-new.css')}}"> -->
<!-- <link rel="stylesheet" href="{{asset('public/assets/admin/css/order-datatable-custom.css')}}"> -->
<link rel="stylesheet" href="{{asset('public/assets/admin/css/payment-datatable-custom.css')}}">
@endsection
@section('content')
<style>
    .selectpicker_service .select2-container {
        width: 100% !important;
    }

    .selectpicker_service {
        width: 100%;
    }
    .app-container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .full-width {
        width: 100%;
        display: flex;
    }
    .card .card-header{
        justify-content: space-around;
    }
    select#order_status {
        width: 100%;
    }
    @media (max-width: 1050px) {
        .btn-submit{
            margin-left: 0;
        }
    }
    @media (max-width: 767px) {
        .report-navs__block a, .btn-group, select.type{
            width: 100%;
        }
        .report-navs__block {
            text-align: center;
        }
    }
</style>
<!--begin::Content container-->

<!--begin::Card-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <div class="row mobile-padding full-width">
            <div class="col-md-6 col-md-6 col-sm-12 col-xs-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-sky">Payments
                                </a>
                            </li>
                            <li class="@if ($action == 'orders') active @endif">
                                <a href="{{ route('admin.reports.action', ['action' => 'orders']) }}" class="btn btn-sm btn-sky">
                                    Orders
                                </a>
                            </li>
                            <li class="@if ($action == 'tickets') active @endif">
                                <a href="{{ route('admin.reports.action', ['action' => 'tickets']) }}" class="btn btn-sm btn-sky">
                                    Tickets
                                </a>
                            </li>
                            <li class="@if ($action == 'profit') active @endif">
                                <a href="{{ route('admin.reports.action', ['action' => 'profit']) }}" class="btn btn-sm btn-sky">
                                    Profit
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- Left navs End -->
                </div>
            </div>
            <div class="col-md-6 col-md-6 col-sm-12 col-xs-12">
                <div class="report-navs__right1">
                    <form action="" method="post" id="paymentForm">
                        @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 form-control" 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">
                            @foreach ($yearList as $yearl)
                            <a href="?year={{ $yearl }}"
                                class="btn mr-2 btn-default @if ($yearl == $year) active @endif">
                                {{ $yearl }}
                            </a>
                            @endforeach
                            <!-- <div class="btn">
                            </div> -->
                        </div>
                        <div class="report-navs__block">
                            <button id="submit" class="btn btn-secondary btn-submit" type="button">
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body">
        <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-row-bordered table-row-gray-300 gy-7 gs-7 text-left" id="kt_table_reports">
                <!--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">
                </tbody>
                <!--end::Table body-->
            </table>
            <!--end::Table-->
        </div>
    </div>
    <!--end::Card body-->
</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