@extends('bootstrap.layouts.app')

@section('content')
        <!--begin::Content container-->
        <div class="wrapper-content">
            <div class="wrapper-content__header">
            </div>
            <div class="wrapper-content__body">
                <div id="block_76">
                    @php
    $url = explode("/",url()->current());
    $all = '';
    $cronpending = '';
    $pending = '';
    $processing = '';
    $inprogress = '';
    $completed = '';
    $partial = '';
    $canceled = '';
    $fail = '';
    $rejected = '';
    if(isset($url[4])){
        if($url[4] == 'pending'){
            $pending = 'active';
        }
        if($url[4] == 'processing'){
            $processing = 'active';
        }
        if($url[4] == 'inprogress'){
            $inprogress = 'active';
        }
        if($url[4] == 'completed'){
            $completed = 'active';
        }
        if($url[4] == 'canceled'){
            $canceled = 'active';
        }
        if($url[4] == 'fail'){
            $fail = 'active';
        }
        if($url[4] == 'rejected'){
            $rejected = 'active';
        }
    }else{
        $all = 'active';
    }
@endphp
                    <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
                        <div class="row">
                        <div class="col">
                            <div class="orders-history__margin-tab">
                                <div class="component_status_tabs">
                                    <div class="">
                                        <ul class="nav nav-pills tab">
                                            <li class="nav-item">
                                                <a class="nav-link {{$all}}" href="/refills">All</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$pending}}" href="/refills/pending">Pending</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$inprogress}}" href="/refills/inprogress">In progress</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$completed}}" href="/refills/completed">Completed</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$processing}}" href="/refills/processing">Processing</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$rejected}}" href="/refills/rejected">Rejected</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$canceled}}" href="/refills/canceled">Canceled</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link {{$fail}}" href="/refills/fail">Fail</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <!--begin::Card-->
                        <div class="card">

                            <div class="card-body py-4">
                                @if (Session::has('success'))
                                @if (Session::get('success'))
                                    <div class="alert alert-success">
                                        {{ Session::get('success') }}
                                    </div>
                                @endif
                            @endif
                            @if (Session::has('error'))
                                @if (Session::get('error'))
                                    <div class="alert alert-danger">
                                        {{ Session::get('error') }}
                                    </div>
                                @endif
                            @endif
                            @if (isset($pageContent) &&
                                    !is_null($pageContent) &&
                                    ($pageContent->content_place == 'both' || $pageContent->content_place == 'top'))
                                <div class="my-4 well">
                                    {!! $pageContent->page_content_top !!}
                                </div>
                            @endif

                            @if (count($data) != 0)
                                <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>Order Id</th>
                                                <th>Start Count</th>
                                                <th>Quantity</th>
                                                <th>Remains</th>
                                                <th>Link</th>
                                                <th>Service</th>
                                                <th>Status</th>
                                                <th>Created</th>
                                            </tr>
                                            <!--end::Table row-->
                                        </thead>
                                        <!--end::Table head-->
                                        <!--begin::Table body-->
                                        <tbody class="text-gray-800 fw-semibold">
                                            @foreach ($data as $item)
                                                <tr>
                                                    <td>{{$item->refill_id}}</td>
                                                    <td>{{$item->refill_order_id}}</td>
                                                    <td>{{$item->order_start}}</td>
                                                    <td>{{$item->order_quantity}}</td>
                                                    <td>{{$item->order_remains}}</td>
                                                    <td>{{$item->order_url}}</td>
                                                    <td>{{$item->service_name}}</td>
                                                    <td>{{$item->refill_status}}</td>
                                                    <td>{{$item->refill_created}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    @endif
                                </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>
                </div>
            </div>
        </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('refills') }}",
        //         data: function(d) {
        //             d.filter_status = $('#filter_status option:selected').val()
        //         }
        //     },
        //     columns: [{
        //             data: 'ID',
        //             name: 'ID',
        //             orderable: true
        //         },
        //         {
        //             data: 'order_id',
        //             name: 'order_id',
        //             orderable: true
        //         },
        //         {
        //             data: 'start_count',
        //             name: 'start_count',
        //             orderable: true
        //         },
        //         {
        //             data: 'Quantity',
        //             name: 'Quantity',
        //             orderable: true
        //         },
        //         {
        //             data: 'Remains',
        //             name: 'Remains',
        //             orderable: true
        //         },
        //         {
        //             data: 'link',
        //             name: 'link',
        //             orderable: true
        //         },
        //         {
        //             data: 'service',
        //             name: 'service',
        //             orderable: true
        //         },
        //         {
        //             data: 'status',
        //             name: 'status',
        //             orderable: true
        //         },
        //         {
        //             data: 'created',
        //             name: 'created',
        //             orderable: true
        //         },
        //     ],
        //     order: [
        //         [0, 'desc']
        //     ]
        // });
        var currentRequest = null;
        $(document).on('change', '#filter_status', function() {
            table.ajax.reload();
        });
    </script>
@endsection