@extends('admin.layout')

@section('content')
    <!-- DataTable CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet">

    <style>
        .table-no-border {
            border: none;
        }

        .table-no-border th,
        .table-no-border td {
            border: none;
        }

        .table-responsive .dataTables_wrapper .dataTables_length select {
            padding: 8px 48px 8px 16px !important;
        }

        .yes {
            background-color: #ECFDF3;
            color: #027A48;
            padding: 5px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            width: 70px;
            justify-content: center;
        }

        .no {
            background-color: #FEF3F2;
            color: #B42318;
            padding: 5px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            width: 70px;
            justify-content: center;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
        }

        .yes .status-dot {
            background-color: #027A48;
        }

        .no .status-dot {
            background-color: #B42318;
        }

        .users {
            font-family: Inter, sans-serif;
            font-weight: 500;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: 0;
            text-align: center;
            color: #6941C6;
            background-color: #F9F5FF;
            padding: 2px 8px;
            border-radius: 16px;
        }

        .table-subtext {
            font-family: 'Inter', sans-serif;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0%;
            color: #667085;
        }
    </style>

    <div class="container-fluid content-inner pb-0">
        <div class="page-header d-flex justify-content-between">
            <h2 class="page-title mb-0">User Management</h2>
        </div>

        <div class="row mt-3">
            <div class="col-lg-12">
                <div class="card p-3">
                    <h4 class="text-muted">New Users <span class="users">{{ $users->count() }} &nbsp;users</span></h4>
                    <!-- User Management Table -->
                    <div class="table-responsive mt-3">

                        <table class="table table-no-border" id="usermanagement">
                            <thead>
                                <tr>
                                    <th scope="col">S/N</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Join&nbsp;Date&nbsp;&&nbsp;Referral</th>
                                    <th scope="col">Email&nbsp;Address</th>
                                    <th scope="col">Phone&nbsp;Number</th>
                                    <th scope="col">Membership</th>
                                    <th scope="col">Files</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users as $user)
                                @php
                             $file_count = DB::table('folders')->where('user_id',$user->user_id)->where('type','file')->count()+0;
                                @endphp
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <div>{{ $user->name }}</div>
                                            <div class="table-subtext">{{ $user->user_id ?? 'N/A' }}</div>
                                        </td>
                                        <td>
                                            <div> {{ $user->referral_id ?? 'N/A' }}</div>
                                            <div class="table-subtext">{{ $user->created_at ?? 'N/A' }}</div>
                                        </td>
                                        <td>{{ $user->email ?? 'N/A' }}</td>
                                        <td>{{ $user->phone_number ?? 'N/A' }}</td>

                                        <td class="d-flex justify-content-center">
                                            <span class="{{ $user->membership ? 'yes' : 'no' }}">
                                                <span class="status-dot"></span>
                                                {{ $user->membership ? 'Yes' : 'No' }}
                                            </span>
                                        </td>
                                        <td>{{  $file_count}}</td>
                                        <td>

                                            <div>
                                                <a href="#" data-bs-toggle="modal"
                                                    data-bs-target="#deleteModal{{ $user->id }}">
                                                    <img src="{{ asset('/assets') }}/images/trash-2.svg"></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <div class="modal fade" id="deleteModal{{ $user->id }}" tabindex="-1"
                                        aria-labelledby="deleteModalLabel{{ $user->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="deleteModalLabel{{ $user->id }}">
                                                        Confirm Delete</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    Are you sure you want to delete <strong>{{ $user->name }}</strong>?
                                                </div>
                                                <div class="modal-footer">
                                                    <form action="{{ route('delete_user', $user->id) }}" method="GET">
                                                        @csrf
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel</button>
                                                        <button type="submit" class="btn btn-danger">Delete</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </tbody>
                        </table>

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

<!-- DataTable JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {
        $('#usermanagement').DataTable();
    });
</script>