@extends('layouts.master')
@section('title') @lang('translation.members-management') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.members-management')
@endslot
@endcomponent
@endsection

@section('content')
<div class="row project-wrapper">
    <div class="col-xxl-8">
        <div class="row">
            <div class="col-xl-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle text-primary rounded-2 fs-2">
                                    <i data-feather="briefcase" class="text-primary"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden ms-3">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Total Members</p>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="fs-4 flex-grow-1 mb-0">
                                        <span class="counter-value" data-target="{{ $totalUsers }}">0</span>
                                    </h4>
                                </div>
                            </div>

                        </div>
                    </div><!-- end card body -->
                </div>
            </div><!-- end col -->

            <div class="col-xl-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-warning-subtle text-warning rounded-2 fs-2">
                                    <i data-feather="award" class="text-warning"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <p class="text-uppercase fw-medium text-muted mb-3">Active Members</p>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="fs-4 flex-grow-1 mb-0">
                                        <span class="counter-value" data-target="{{ $activeUsers }}">0</span>
                                    </h4>
                                </div>
                            </div>

                        </div>
                    </div><!-- end card body -->
                </div>
            </div><!-- end col -->

            <div class="col-xl-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info-subtle text-info rounded-2 fs-2">
                                    <i data-feather="clock" class="text-info"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden ms-3">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-3">Pending KYC</p>
                                <div class="d-flex align-items-center mb-3">
                                    <h4 class="fs-4 flex-grow-1 mb-0">
                                        <span class="counter-value" data-target="{{ $pendingKycUsers }}">0</span>
                                    </h4>
                                </div>
                            </div>

                        </div>
                    </div><!-- end card body -->
                </div>
            </div><!-- end col -->
        </div><!-- end row -->
    </div><!-- end col -->
</div><!-- end row -->


<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="buttons-datatables" class="display table table-bordered text-center align-middle" style="width:100%;">
                        <thead>
                            <tr>
                                <th class="text-center align-middle">ID</th>
                                <th class="text-center align-middle">Name</th>
                                <th class="text-center align-middle">Reg Date</th>
                                <th class="text-center align-middle">Profit & Loss</th>
                                <th class="text-center align-middle">Referral Code</th>
                                <th class="text-center align-middle">Status</th>
                                <th class="text-center align-middle">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $count = 1; @endphp
                            @foreach($users as $user)
                            <tr>
                                <td class="text-center align-middle">{{ $count++ }}</td>
                                <td class="text-center align-middle">{{ $user->full_name }}</td>
                                <td class="text-center align-middle">{{ $user->created_at->format('d/M/Y') }}</td>
                                <td class="text-center align-middle">Update P&L</td>
                                <td class="text-center align-middle"> {{ $user->usedReferral->referral_code ?? '-' }}</td>
                                <td class="status text-center align-middle">
                                    <span
                                        class="badge text-uppercase 
            {{ $user->status === 'Verified' ? 'bg-success-subtle text-success' : ($user->status === 'Rejected' ? 'bg-danger-subtle text-danger' : 'bg-warning-subtle text-warning') }}"
                                        id="status-badge-{{ $user->id }}">
                                        {{ $user->status }}
                                    </span>
                                </td>


                                <td class="text-center align-middle">
                                    <div class="d-flex justify-content-center gap-2">
                                        <button
                                            class="btn btn-sm btn-success edit-item-btn"
                                            data-id="{{ $user->id }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#showModal">
                                            Edit
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>

                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
<!--end row-->

<!-- EDIT MODAL -->
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen-xxl-down">
        <div class="modal-content">
            <div class="modal-header bg-light p-3">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
            </div>
            <div class="row bg-body-tertiary mb-5 px-3">
                <div class="col-sm-8 border-start border-2 ps-3 pe-4">
                    <div class="card shadow-none p-3">
                        <div class="card-body">
                            <div class="live-preview">
                                <div class="row">
                                    <div class="col-6 mb-5">
                                        <h5>Member Details</h5>
                                    </div>
                                    <div class="col-6 text-end">
                                        <h5 id="userStatusHeading" class="mb-0">
                                            Status: <span id="userStatus" class=""></span>
                                        </h5>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <div id="profile-initials-placeholder"
                                                class="profile-initials w-25 d-flex align-items-center justify-content-center border rounded-3 bg-light text-dark fs-3 fw-bold"
                                                style="height: 80px;">
                                                <!-- Initial will be injected here -->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6 text-end">
                                        <h5>Attachments</h5>
                                        <div id="idAttachmentContainer">
                                            <!-- JS will populate with file download links -->
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="first_name" class="form-label">First Name</label>
                                            <input type="text" readonly class="form-control" id="first_name" name="first_name">
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="lastNameinput" class="form-label">Last Name</label>
                                            <input type="text" class="form-control" readonly id="lastNameinput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="phonenumberInput" class="form-label">Phone Number</label>
                                            <input type="tel" class="form-control" readonly id="phonenumberInput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="emailidInput" class="form-label">Email Address</label>
                                            <input type="email" class="form-control" readonly id="emailidInput">
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="nationality" class="form-label">Nationality</label>
                                            <input type="text" class="form-control" id="nationality" name="nationality" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="paymentmethod" class="form-label">Payment Methods</label>
                                            <input type="text" class="form-control" id="paymentmethod" name="paymentmethod" readonly>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="referred" class="form-label">Referred By</label>
                                            <input type="text" class="form-control" id="referred">
                                        </div>
                                    </div>
                                </div>

                                <!-- Approve/Reject Buttons -->
                                <div class="d-flex justify-content-end">
                                    <form action="javascript:void(0);" class="mt-3">
                                        <div class="d-flex gap-3">
                                            <!-- Inside your modal or wherever you place the buttons -->
                                            <button type="button" class="btn btn-success mt-3 px-4" id="approveUser">Approve</button>
                                            <button type="button" class="btn btn-danger mt-3 px-4" id="rejectUser">Reject</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-4 pe-3 d-none" id="overviewSection">
                    <h5 class="bg-body-tertiary">Overview</h5>
                    <form action="javascript:void(0);" class="mt-3">
                        <div class="card shadow-none p-3 border rounded-3">
                            <div class="card-body">
                                <div class="live-preview">
                                    <div class="row">
                                        <div class="col-12 border-bottom border-grey mb-4">
                                            <span class="fs-5 text-primary">Total Capital <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Total investment"></i></span>
                                            <p class="mt-2 fs-4 fw-bold" id="capitalAmount">$0.00</p>
                                        </div>
                                        <div class="col-12 border-bottom border-grey mb-4">
                                            <span class="fs-5 text-primary">Capital(After Loss)</span>
                                            <p class="mt-2 fs-4 fw-bold" id="capitalLossAmount">$0.00</p>
                                        </div>
                                        <div class="col-12">
                                            <span class="fs-5 text-primary">Wallet <i class="ri-information-line text-warning" id="tooltip-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Wallet = Profit + Referral Bonus"></i></span>
                                            <p class="mt-2 fs-4 fw-bold" id="wallet">$0.00</p>
                                        </div> 
                                        <div class="col-12 border-bottom border-grey mb-4"></div>
                                        <div class="col-6">
                                            <span class="fs-5 text-primary">Profit</span>
                                            <p class="mt-2 fs-4 fw-bold" id="profitAmount">$0.00</p>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="badge bg-success-subtle text-success fs-6" id="profitPercentage">0%</p>
                                        </div>

                                    </div>
                                    <div class="row bg-light p-3 border border-primary border-opacity-25 rounded-3 mb-4 mt-3">
                                        <div class="col-6">
                                            <p class="fw-bold">Referrals</p>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="fs-4 fw-bold" id="totalReferral"></p>
                                        </div>
                                    </div>
                                    <div class="row bg-light p-3 border border-primary border-opacity-25 rounded-3">
                                        <div class="col-6">
                                            <p class="fw-bold">Referrals Bonus</p>
                                        </div>
                                        <div class="col-6 text-end">
                                            <p class="fs-4 fw-bold" id="referral-bonus">$0.00</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection