@extends('layouts.app')

@section('content')
    <!--begin::Content container-->
    <div id="kt_app_content_container" class="app-container container-fluid" data-bs-backdrop='static'>
        @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-body py-4">

                <div class="form-group ">
                    <label>Order status</label>
                    <select class="form-control filter_status" name="filter_status" aria-invalid="false" id="filter_status">
                        <option value="">All</option>
                        <option value="active">Active</option>
                        <option value="paused">Paused</option>
                        <option value="expired">Expired</option>
                        <option value="canceled">Canceled</option>
                        <option value="completed">Completed</option>

                    </select>
                </div>

                <div class="table-responsive">
                    <!--begin::Table-->
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_orders">
                        <!--begin::Table head-->
                        <thead>
                            <!--begin::Table row-->
                            <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                <th>ID</th>
                                <th>URL</th>
                                <th>Quantity</th>
                                <th>Post</th>
                                <th>Delay</th>
                                <th>Service Name</th>
                                <th>Status</th>
                                <th>Created Date</th>
                                <th>Updated Date</th>
                                <th>Expiry Date</th>
                            </tr>
                            <!--end::Table row-->
                        </thead>
                        <!--end::Table head-->
                        <!--begin::Table body-->
                        <tbody class="text-gray-800 fw-semibold">
                        </tbody>
                        <!--end::Table body-->
                    </table>
                </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
    </div>
    <!--end::Content container-->
    <!-- Modal -->
    <div class="modal fade" id="descriptionBox" tabindex="-1" role="dialog" aria-labelledby="descriptionBox"
        aria-hidden="true" data-bs-backdrop='static'>
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        var table = $('#kt_table_orders').DataTable({
            "lengthMenu": [200, 500, 1000],
            ajax: {
                url: "{{ route('subscriptions') }}",
                data: function(d) {
                    d.filter_status = $('#filter_status option:selected').val()
                }
            },
            columns: [{
                    data: 'ID',
                    name: 'ID',
                    orderable: true
                },
                {
                    data: 'url',
                    name: 'url',
                    orderable: true
                },
                {
                    data: 'quantity',
                    name: 'quantity',
                    orderable: true
                },
                {
                    data: 'post',
                    name: 'post',
                    orderable: true
                },
                {
                    data: 'delay',
                    name: 'delay',
                    orderable: true
                },
                {
                    data: 'service_name',
                    name: 'service_name',
                    orderable: true
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: true
                },
                {
                    data: 'created_date',
                    name: 'created_date',
                    orderable: true
                },
                {
                    data: 'updated_date',
                    name: 'updated_date',
                    orderable: true
                },
                {
                    data: 'expiry_date',
                    name: 'expiry_date',
                    orderable: true
                },
            ],
            order: [
                [0, 'desc']
            ]
        });
        var currentRequest = null;
        $(document).on('change', '#filter_status', function() {
            table.ajax.reload();
        });
    </script>
@endsection