@extends('admin.layouts.app')
@section('style')
<link rel="stylesheet" href="{{asset('public/assets/admin/css/page-datatable-custom-css.css')}}">
<style>
    .table-dropdown{
        max-width: 100px;
    }
    .full-width {
        width: 100% !important;
        max-width: 100% !important;
        display: unset !important;
    }
</style>
@endsection
@section('content')
    @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">
        <div class="card-header border-0 pt-6 full-width">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <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>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <div id="kt_table_users_filter_top" class="dataTables_filter_custom mb-6"><input type="search" class="form-control form-control-sm" placeholder="Search..." id="searchFilter" aria-controls="kt_table_users"></div>
                </div>
            </div>
        </div>
        <div class="card-body py-4">
            <div class="table-responsive custom-row">
                <!--begin::Table-->
                <table class="table table-rounded table-row-bordered table-row-gray-300 gy-7 gs-7" id="kt_table_subscriptions">
                    <!--begin::Table head-->
                    <thead>
                        <!--begin::Table row-->
                        <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-700">
                            <th class="text-dark fw-bold">Order Id</th>
                            <th class="text-dark fw-bold">Username</th>
                            <th class="text-dark fw-bold">Link</th>
                            <th class="text-dark fw-bold">Min-Max</th>
                            <th class="text-dark fw-bold">Posts</th>
                            <th class="text-dark fw-bold">Delay</th>
                            <th class="min-w-200px text-dark fw-bold">Service</th>
                            <th class="text-dark fw-bold">Status</th>
                            <th class="text-dark fw-bold">Created</th>
                            <th class="text-dark fw-bold">Updated</th>
                            <th class="text-dark fw-bold">End Date</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">
                    </tbody>
                    <!--end::Table body-->
                </table>
                <div class="pagination_display"></div>
            </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
    <!--end::Content container-->

    <div class="modal fade" id="updateExpiryDateModal" tabindex="-1" role="dialog"
        aria-labelledby="updateExpiryDateModalTitle" aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ route('admin.subscriptions.update_expiry_date_store') }}" method="POST"
                    id="updateExpiryDateForm">
                    <div class="modal-header">
                        <h2></h2>
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"
                            aria-label="Close">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="currentColor" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                    </div>
                    <div class="modal-body">
                        <div class="update_expiry_date_errors"></div>
                        <div class="update_expiry_date_success"></div>
                        <div class="form-group">
                            <label class="form-label">Start count</label>
                            <input type="date" name="expiry_date" value="" class="form-control expiry_date" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" name="id" value="" class="primary_order_id" />
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var table = $('#kt_table_subscriptions').DataTable({
            "lengthMenu": [100, 500, 1000],
            serverSide: true,
            paging: true,
            info: false, 
            language: {
                lengthMenu: "Display_MENU_",
            },
            responsive: true,
            ajax: {
                url: "{{ route('admin.subscriptions') }}",
                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: 'order_url',
                    name: 'order_url',
                    orderable: true
                },
                {
                    data: 'subscriptions_min_max',
                    name: 'subscriptions_min_max',
                    orderable: false
                },
                {
                    data: 'subscriptions_posts_html',
                    name: 'subscriptions_posts_html',
                    orderable: true
                },
                {
                    data: 'subscriptions_delivery',
                    name: 'subscriptions_delivery',
                    orderable: true
                },
                {
                    data: 'service_name',
                    name: 'service_name',
                    orderable: true
                },
                {
                    data: 'subscriptions_status',
                    name: 'subscriptions_status',
                    orderable: true
                },
                {
                    data: 'order_create',
                    name: 'order_create',
                    orderable: true
                },
                {
                    data: 'last_check',
                    name: 'last_check',
                    orderable: true
                },
                {
                    data: 'subscriptions_expiry',
                    name: 'subscriptions_expiry',
                    orderable: true
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true
                },
            ],
            order: [
                [0, 'desc']
            ]
        });
        $(document).on('change', '#filter_status', function() {
            table.ajax.reload();
        })
        
        let typingTimer;
        $('#searchFilter').on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function () {
                table1.ajax.reload(null, false);
            }, 300);
        })

        $('.dataTables_length').appendTo('.custom-row > .pagination_display');
        $('.dataTables_paginate').appendTo('.custom-row > .pagination_display');

        var currentRequest = null;
        $(document).on('click', '.update-subscription-status', function() {
            var order_id = $(this).attr('data-id');
            var status = $(this).attr('data-status');
            var statusText = '';
            if (status == 'subscriptions_pause') {
                statusText = 'Stop subscription';
            }
            if (status == 'subscriptions_complete') {
                statusText = 'Complete subscription';
            }
            if (status == 'subscriptions_active') {
                statusText = 'Activate subscription';
            }
            if (status == 'subscriptions_canceled') {
                statusText = 'Cancel subscription';
            }
            swal({
                title: 'Are you sure?',
                text: "You want to " + statusText,
                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.subscriptions.change_subscription_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);
                        
                            
                            // swal({
                            //     'title': data.message,
                            //     'type': 'success'
                            // });
                            table.ajax.reload();
                        },
                        error: function(e) {
                            // Error
                            $.LoadingOverlay("hide");
                            return false;
                        }
                    });
                }
                $.LoadingOverlay("hide");
            });
        })
        $(document).on('click', '.edit-end-date-btn', function() {
            $.LoadingOverlay("show");
            var primary_order_id = $(this).attr('data-id');
            var expiryDate = $(this).attr('data-end_date');
            $('#updateExpiryDateModal .primary_order_id').val(primary_order_id);
            $('#updateExpiryDateModal .expiry_date').val(expiryDate);
            $.LoadingOverlay("hide");
            $('#updateExpiryDateModal').modal('show');
        })
        $("#updateExpiryDateForm").validate({
            rules: {
                username: {
                    required: true
                }
            },
            messages: {},
            submitHandler: function(form) {
                $.LoadingOverlay("show");
                $('.update_expiry_date_errors').html('');
                $('.update_expiry_date_success').html('');
                var formData = new FormData(form);
                currentRequest = jQuery.ajax({
                    type: 'POST',
                    data: formData,
                    url: "{{ route('admin.subscriptions.update_expiry_date_store') }}",
                    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) {
                                $('.update_expiry_date_errors').append(
                                    '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                    val[0] + '</div>');
                            })
                        } else if (data.status == 0) {
                            $('.update_expiry_date_errors').html(
                                '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                                data.message + '</div>');
                        } else {
                            
                            $('#alertMessages').addClass('alert alert-success');
                            $('#alertMessages').text(data.message);
                        }
                        $('#updateExpiryDateModal').modal('hide')
                        table.ajax.reload();
                        $('.modal').animate({
                            scrollTop: 0
                        }, 1000);
                        setTimeout(() => {
                            $('.update_expiry_date_errors').html('');
                            $('.update_expiry_date_success').html('');
                        }, 3000);
                    },
                    error: function(e) {
                        // Error
                        $.LoadingOverlay("hide");
                        return false;
                    }
                });
                return false;
            }
        });
    </script>
@endsection