@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Subscription', 'url' => route('admin.subscription'), 'active' => false],
            ['label' => 'All User Subscription Activity', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="All User Activity">
                <x-slot name="header">
                    {{-- <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions">
                            <li><a class="dropdown-item" href="#" id="active" data-id="game">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="disable" data-id="game">Disable</a></li>
                        </x-form.dropdown>
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    <a href="{{ route('admin.visit-earn.create') }}" class="btn btn-primary btn-wave add-data">
                        <i class="ri-add-line me-1 align-middle"></i>
                        Add Task
                    </a> --}}
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => false, 'class' => 'ps-4','label'=>'#'],
                        ['label' => 'User ID'],
                        ['label' => 'Package | Benefit'],
                        ['label' => 'Amount'],
                        ['label' => 'Payment Method'],
                        ['label' => 'Status'],
                        ['label' => 'Remark'],
                        ['label' => 'Purchased AT'],
                        ['label' => 'Expired AT'],
                    ];
                @endphp

                <x-ui.table id="mytable" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    @vite('resources/assets/js/modal.js')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('mytable', "{{ route('admin.subscription.activity.data') }}", {
                status:0,
                type:'sub'
            }, [{
                    data: 'id',
                    orderable: false
                },
                {
                    data: 'user_id',
                    render:function(data,type,row){
                        return `<a href='/admin/users/track/${data}' target='blank' class='text-primary'>${row.user_name}</a>`;
                    }
                },
                {
                    data: 'title'
                }, 

                {
                    data: 'amount',
                    render: function(data, type, row) {
                        if(row.coin_paid>0){
                            return `<p class="text-success fs-14 mt-2 d-flex align-items-center">`+row.currency+` `+row.coin_paid+` </p>`;
                        } else {
                            return `<p class="text-success fs-14 mt-2 d-flex align-items-center">`+row.currency+` `+row.amount+`</p>`;
                        }
                    }
                },
                {
                    data: 'gateway'
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        if(data=='active'){
                            return `<span class="badge fw-medium badge-pill bg-success-transparent text-success fs-11">Active</span>`;
                        } else if(data=='expired'){
                            return `<span class="badge fw-medium badge-pill bg-warning-transparent text-danger fs-11 ">Expired</span>`;
                        } else {
                            return `<span class="badge fw-medium badge-pill bg-danger-transparent text-info fs-11">Cancelled</span>`;
                        }
                    }
                }, {
                    data: 'remark',
                },
                {
                    data: 'purchase_at',
                    render: function (data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },
                {
                    data: 'expiry_at',
                    render: function (data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },
            ]);
            table.initialize();

        });
    </script>
@endsection