@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">
    <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' => ucfirst(request('type')) . ' Users', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="" />
    <!-- Page Header Close -->
    <div class="row">
        @foreach ($cards as $card)
            <x-ui.stat-card :number="$card['number']" :title="$card['title']" deltaClass="bg-danger-transparent"
                iconClass="{{ $card['iconClass'] }}" iconColor="{{ $card['iconColor'] }}"
                circleBg="{{ $card['circleBg'] }}" />
        @endforeach
    </div>

    <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
        <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="user">Active</a></li>
                    <li><a class="dropdown-item" href="#" id="disable" data-id="user">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>
        </x-slot>

        @php
            $columns = [
                ['checkbox' => true, 'class' => 'ps-4'],
                ['label' => 'Name'],
                ['label' => 'Email'],
                ['label' => 'User Type'],
                ['label' => 'Balance'],
                ['label' => 'Diamond'],
                ['label' => 'Status'],
                ['label' => 'Action'],
            ];
        @endphp

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

@section('scripts')
    @include('layouts.components.common-script')
    @php
        $statusMap = [
            'active' => '1',
            'inactive' => '0',
            'banned' => '2',
        ];

        $subMap = [
            'active-subscription' => '1',
            'expired-subscription' => '2',
        ];
    @endphp
    <script>
    const block="{{$block}}";
        $(document).ready(function() {
            const table = new DataTableUtility('usertable', "{{ route('admin.users.data') }}", () => ({
                @if (array_key_exists(request('type'), $statusMap))
                    'status': "{{ $statusMap[request('type')] }}",
                @endif
                @if (array_key_exists(request('type'), $subMap))
                    'active_subscription': "{{ $subMap[request('type')] }}",
                @endif
            }), [{
                    data: 'id',
                    orderable: false,
                    render: function(data, type, row) {
                        return `<input class="form-check-input sub_chk" type="checkbox" id="checkboxNoLabeljob22" data-id="${data}" value="${data}">`;
                    }
                },
                {
                    data: 'name',
                    render: function(data, type, row) {
                        var profile;
                        if (row.profile == null || row.profile == '') {
                            profile =
                                'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y';
                        } else {
                            profile = row.profile;
                        }

                        return `<div class="d-flex">
                                <span class="avatar avatar-md border p-1 bg-light">
                                    <img src="` + profile + `" alt="">
                                </span>
                                <div class="ms-2">
                                    <a href="/admin/users/track/` + row.uid +
                            `"><p class="fw-medium fs-14 mt-2 d-flex align-items-center text-primary">` +
                            data + `</p></a>
                                </div>
                            </div>`;
                    }
                },
                {
                    data: 'email', render: function(data, type, row) {
                        return (block) ? '*********@gmail.com' : data;
                    }
                },
                {
                    data: 'active_subscription',
                    render: function(data, type, row) {
                        return data == 1 ?
                            '<span class="badge fw-semibold badge-pill bg-primary-transparent text-primary fs-11">Premium VIP</span>' :
                            '<span class="badge badge-pill bg-danger-transparent text-danger ">Free Plan</span>';
                    }
                },
                {
                    data: 'balance'
                },
                {
                    data: 'diamond'
                },
                {
                    data: 'status',
                    render: function(data, type, row) {
                        return {
                            '0': `<span class="badge fw-semibold badge-pill bg-warning-transparent text-warning fs-11">InActive</span>`,
                            '1': `<span class="badge fw-semibold badge-pill bg-success-transparent text-success fs-11">Active</span>`,
                            '2': `<span class="badge fw-semibold badge-pill bg-danger-transparent text-danger fs-11">Banned</span>`
                        } [data] ||
                        `<span class="badge fw-semibold badge-pill bg-secondary-transparent text-secondary fs-11">Unknown</span>`;
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="/admin/users/track/` + row.uid + `" target="_blank" class="modal-effect btn btn-icon btn-sm btn-primary-light btn-wave waves-effect waves-light"
                            title="User Profile" >
                                <i class="ri-eye-line" ></i>
                            </a>
                             <a href="javascript:void(0);" id="` + row.id + `" data-id="user" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light deleteItem">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });
    </script>
@endsection