@extends('admin.layouts.app')

@section('content')
    <!--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>
                <div id="alertMessages"></div>
                <!--begin::Card title-->
            </div>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body py-4">
                <div class="form-group">
                    <select name="filter_status" class="filter_status form-control" id="filter_status">
                        <option value="">All</option>
                        <option value="active">Active</option>
                        <option value="paused">Paused</option>
                        <option value="completed">Completed</option>
                        <option value="canceled">Cancelled</option>
                        <option value="expired">Expired</option>
                        <option value="limit">Limit</option>
                    </select>
                </div>
                <div class="table-responsive">
                    <!--begin::Table-->
                    <table class="table table-rounded table-striped table-row-bordered table-row-gray-400 gy-7 gs-7" id="kt_table_dripfeeds">
                        <!--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">Order Id</th>
                                <th class="min-w-100px text-dark fw-bold">Username</th>
                                <th class="min-w-100px text-dark fw-bold">Charges</th>
                                <th class="min-w-100px text-dark fw-bold">Link</th>
                                <th class="min-w-100px text-dark fw-bold">Quantity</th>
                                <th class="min-w-300px text-dark fw-bold">Service</th>
                                <th class="min-w-70px text-dark fw-bold">Runs</th>
                                <th class="min-w-70px text-dark fw-bold">Interval</th>
                                <th class="min-w-100px text-dark fw-bold">Total Quantity</th>
                                <th class="min-w-100px text-dark fw-bold">Created</th>
                                <th class="min-w-70px text-dark fw-bold">Status</th>
                                <th class="min-w-10px text-dark fw-bold">Action</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-dark fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    <!--end::Content container-->
@endsection

@section('script')
    <script>
        var table = $('#kt_table_dripfeeds').DataTable({
            "lengthMenu": [200, 500, 1000],
            ajax: {
                url: "{{ route('admin.dripfeeds') }}",
                data: function(d) {
                    d.filter_status = $('#filter_status option:selected').val()
                }
            },
            columns: [{
                    data: 'order_id',
                    name: 'order_id',
                    orderable: true
                },
                {
                    data: 'username',
                    name: 'username',
                    orderable: true
                },
                {
                    data: 'charges',
                    name: 'charges',
                    orderable: false
                },
                {
                    data: 'order_url',
                    name: 'order_url',
                    orderable: false
                },
                {
                    data: 'order_quantity',
                    name: 'order_quantity',
                    orderable: false
                },
                {
                    data: 'service_name',
                    name: 'service_name',
                    orderable: false
                },
                {
                    data: 'dripfeed_delivery',
                    name: 'dripfeed_delivery',
                    orderable: false
                },
                {
                    data: 'dripfeed_interval',
                    name: 'dripfeed_interval',
                    orderable: false
                },
                {
                    data: 'dripfeed_totalquantity',
                    name: 'dripfeed_totalquantity',
                    orderable: false
                },
                {
                    data: 'order_create',
                    name: 'order_create',
                    orderable: false
                },
                {
                    data: 'dripfeed_status',
                    name: 'dripfeed_status',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                },
            ],
            order: [
                [0, 'desc']
            ]
        });
        $(document).on('change', '#filter_status', function() {
            table.ajax.reload();
        })

        var currentRequest = null;
        $(document).on('click', '.update-dripfeed-status', function() {

            var order_id = $(this).attr('data-id');
            var status = $(this).attr('data-status');
            var statusText = '';
            if (status == 'dripfeeds_pause') {
                statusText = 'Stop dripfeed';
            }
            if (status == 'dripfeeds_complete') {
                statusText = 'Complete dripfeed';
            }
            if (status == 'dripfeeds_active') {
                statusText = 'Activate dripfeed';
            }
            if (status == 'dripfeeds_canceled') {
                statusText = 'Cancel dripfeed';
            }
            swal({
                title: 'Are you sure?',
                text: "You want to continue?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes",
                cancelButtonText: "Cancel",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {
					$.LoadingOverlay("show");
                    var formData = new FormData();
                    formData.append('id', order_id);
                    formData.append('status', status);

                    currentRequest = jQuery.ajax({
                        type: 'POST',
                        data: formData,
                        url: "{{ route('admin.dripfeeds.change_dripfeed_status') }}",
                        dataType: 'JSON',
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            if (currentRequest != null) {
                                currentRequest.abort();
                            }
                        },
                        success: function(data) {
                            $.LoadingOverlay("hide");
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(data.message);
                            table.ajax.reload();
                        },
                        error: function(e) {
                            // Error
                            $.LoadingOverlay("hide");
                            return false;
                        }
                    });
                }
                $.LoadingOverlay("hide");
            });
        })
    </script>
@endsection