@extends('layouts.master')

@section('styles')
        <!-- include summernote css/js -->
        <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote.min.css" rel="stylesheet">
        <link href="{{asset('build/assets/css/custom-css.css')}}" rel="stylesheet">
@endsection

@section('content')

                    <!-- Start::page-header -->
                    <div class="page-header-breadcrumb mb-3">
                        <div class="d-flex align-center justify-content-between flex-wrap mb-3">
                            <h1 class="page-title fw-medium fs-18 mb-0">List User</h1>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">User Management</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Users</li>
                            </ol>
                        </div>

                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card custom-card">
                                    <div class="card-header justify-content-between border-bottom-0 gap-2">
                                        <div class="w-sm-25">
                                            <input class="form-control" type="search" id="search-input" placeholder="Search User" aria-label="search-product">
                                        </div>

                                        <!-- Filters Section -->
                                        <div class="d-flex gap-4 flex-wrap w-sm-50 justify-content-end">
                                            <!-- Category Filter -->
                                            <div>
                                                <div class="dropdown d-grid">
                                                    <button class="btn btn-primary-light dropdown-toggle" type="button"
                                                            id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <i class="ri-upload-2-line me-1"></i>Export
                                                    </button>
                                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                        <li><a class="dropdown-item" href="javascript:void(0);"><i class="bi bi-file-earmark-excel me-2"></i>Excel</a></li>
                                                        <li><a class="dropdown-item" href="javascript:void(0);"><i class="bi bi-file-earmark-excel me-2"></i>Csv</a></li>
                                                        <li><a class="dropdown-item" href="javascript:void(0);"><i class="bi bi-filetype-pdf me-2"></i>PDF</a></li>
                                                        <li><a class="dropdown-item" href="javascript:void(0);"><i class="bi bi-file-zip me-2"></i>Zip</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <!-- Status Filter -->
                                            <div>
                                                <select class="form-control" data-trigger name="choices-single-default" id="payment-status-filter">
                                                    <option value="">Status Akun</option>
                                                    <option value="all">All Status</option>
                                                    <option value="pending">Pending</option>
                                                    <option value="completed">Completed</option>
                                                    <option value="failed">Failed</option>
                                                    <option value="refunded">Refunded</option>
                                                    <option value="cancelled">Cancelled</option>
                                                </select>
                                            </div>

                                            <!-- Stock Filter -->
                                            <div>
                                                <select class="form-control" data-trigger name="choices-single-default" id="delivery-status-filter">
                                                    <option value="">Status KYC</option>
                                                    <option value="all">All Status</option>
                                                    <option value="pending">Pending</option>
                                                    <option value="shipped">Shipped</option>
                                                    <option value="delivered">Delivered</option>
                                                    <option value="cancelled">Cancelled</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="file-export" class="table table-hover text-nowrap w-100">
                                                <thead class="table-success">
                                                <tr>
                                                    <th>User ID</th>
                                                    <th>Detail</th>
                                                    <th>Email</th>
                                                    <th>No HP</th>
                                                    <th>Status Akun</th>
                                                    <th>Status KYC</th>
                                                    <th>Tanggal Daftar</th>
                                                    <th>Actions</th>
                                                </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End::page-header -->



@endsection

@section('scripts')
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
    <!-- Datatables Cdn -->
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.6/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <!-- Internal Datatables JS -->
    @vite('resources/assets/js/datatables.js')
    <script>
        $('#file-export').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            paging: true,
            lengthChange: true,
            ajax: {
                url: '{{route('user-management.api.users')}}',
                type: 'GET',
                data: function (d) {
                    return {
                        page: (d.start / d.length) + 1,
                        pageSize: d.length,
                        search: d.search.value
                    };
                },
                dataSrc: function (json) {
                    json.recordsTotal = json.meta.total;
                    json.recordsFiltered = json.meta.total;
                    return json.data;
                }
            },
            columns: [
                { data: 'id', name: 'id' },
                {
                    data: null,
                    name: 'name',
                    searchable: false,
                    render: function (data, type, row) {
                        return `
                <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-2 avatar-rounded">
                                <img src="http://127.0.0.1:8000/build/assets/images/faces/15.jpg" alt="img">
                            </div>
                            <div>
                                <div class="lh-1">
                                    <span>${row.name}</span>
                                </div>

                            </div>
                        </div>
            `;
                    }
                },
                { data: 'email', name: 'email' },
                {
                    data: null,
                    name: 'phone',
                    searchable: false,
                    render: function (data, type, row) {
                        return `
                <div>${row.country_code}${row.phone}
                        </div>
            `;
                    }
                },
                {
                    name:'status',
                    data: null,
                    searchable: false,
                    render: function (data, type, row) {
                        return row.status === 1 ? `
                 <button class="btn btn-sm btn-success-light">Aktif</button>
            ` : `<button class="btn btn-sm btn-danger-light">Banned</button>`;
                    }
                },
                {
                    data: null,
                    name:'status_kyc',
                    searchable: false,
                    render: function (data, type, row) {
                        return row.status_kyc === 0 ? `
                 <button class="btn btn-sm btn-warning-light">Belum</button>
            ` : row.status_kyc === 1 ? `<button class="btn btn-sm btn-danger-light">Ditolak</button>`:`<button class="btn btn-sm btn-success-light">KYC</button>`;
                    }
                },
                { data: 'created_at_formatted', name: 'created_at' },
                {
                    name: 'Actions',
                    render: function (data, type, row) {
                        return `
                    <div class="dropdown">
                        <a href="javascript:void(0);" class="btn btn-icon btn-sm btn-primary-light border" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fe fe-more-vertical"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href=""><i class="ri-eye-line me-2"></i>View</a></li>
                            <li><a class="dropdown-item btn-delete" href="javascript:void(0);"><i class="ri-delete-bin-line me-2"></i>Delete</a></li>
                        </ul>
                    </div>
                `
                    }
                }

            ],
            dom: 'Brtip',
            buttons: [],
            language: {
                searchPlaceholder: 'Search...',
                sSearch: '',
            }
        });

    </script>

@endsection