{{-- @extends('admin.layout')

@section('title', 'User Management')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <style>
        .card { border: none; border-radius: 10px; }
        .table thead { background-color: #f8f9fa; }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0 fw-bold">User Management</h4>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="usersTable" style="width:100%">
                        <thead class="table-dark">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Instagram</th>
                                <th>Credit</th>
                                <th>Daily Actions</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $key => $user)
                                <tr>
                                    <td>{{ $key + 1 }}</td>
<td>{{ $user->name ?? 'N/A' }}</td>
<td>{{ $user->email }}</td>
<td>
    @if ($user->instagram_username)
    <span class="text-primary">@</span>{{ $user->instagram_username }}
    @else
    <span class="text-muted small">Not Linked</span>
    @endif
</td>
<td><span class="badge bg-success">{{ number_format($user->user_credit) }}</span></td>
<td><span class="badge bg-danger">{{ number_format($user->daily_actions) }}</span></td>
<td>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#addCreditModal"
            data-id="{{ $user->id }}">
            <i class="icon-base ti tabler-coins"></i>
        </button>

        <a href="{{ route('admin.users_view', $user->id) }}" class="btn btn-sm btn-info">
            <i class="icon-base ti tabler-eye"></i>
        </a>

        <a href="{{ route('admin.users_block', $user->id) }}"
            class="btn btn-sm {{ $user->is_blocked ? 'btn-warning' : 'btn-secondary' }}">
            <i class="icon-base ti {{ $user->is_blocked ? 'tabler-lock-open' : 'tabler-lock' }}"></i>
        </a>

        <a href="{{ route('admin.users_delete', $user->id) }}" onclick="return confirm('Are you sure?')"
            class="btn btn-sm btn-danger">
            <i class="icon-base ti tabler-trash"></i>
        </a>
    </div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>

<div class="modal fade" id="addCreditModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.users_addCredit') }}" id="creditForm">
            @csrf
            <input type="hidden" name="user_id" id="modal_user_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Credit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Enter Credit Amount</label>
                        <input type="number" name="credit" class="form-control" placeholder="e.g. 100" required min="1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="submitBtn" class="btn btn-primary">
                        <span class="btn-text">Add Credit</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (!$.fn.DataTable.isDataTable('#usersTable')) {
        $('#usersTable').DataTable({
            pageLength: 10,
            order: [
                [0, "asc"]
            ],
        });
    }
    var addCreditModal = document.getElementById('addCreditModal');
    addCreditModal.addEventListener('show.bs.modal', function(event) {
        var button = event.relatedTarget;
        var userId = button.getAttribute('data-id');
        document.getElementById('modal_user_id').value = userId;
        const form = document.getElementById('creditForm');
        const submitBtn = document.getElementById('submitBtn');
        form.reset();
        submitBtn.disabled = false;
        submitBtn.querySelector('.btn-text').innerText = 'Add Credit';
        submitBtn.querySelector('.spinner-border').classList.add('d-none');
    });
    const creditForm = document.getElementById('creditForm');
    creditForm.addEventListener('submit', function(e) {
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.querySelector('.btn-text').innerText = 'Processing...';
        submitBtn.querySelector('.spinner-border').classList.remove('d-none');

        return true;
    });
});
</script>
@endsection --}}


@extends('admin.layout')

@section('title', 'User Management')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
.card {
    border: none;
    border-radius: 10px;
}

.table thead {
    background-color: #f8f9fa;
}
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0 fw-bold">User Management</h4>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="usersTable" style="width:100%">
                    <thead class="table-dark">
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Instagram</th>
                            <th>Credit</th>
                            <th>Daily Actions</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $key => $user)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $user->name ?? 'N/A' }}</td>
                            <td>{{ $user->email }}</td>
                            <td>
                                @if ($user->instagram_username)
                                <span class="text-primary">@</span>{{ $user->instagram_username }}
                                @else
                                <span class="text-muted small">Not Linked</span>
                                @endif
                            </td>
                            <td><span class="badge bg-success">{{ number_format($user->user_credit) }}</span></td>
                            <td><span class="badge bg-danger">{{ number_format($user->daily_actions) }}</span></td>
                            <td>
                                <div class="d-flex gap-2">
                                    <button class="btn btn-sm btn-success" data-bs-toggle="modal"
                                        data-bs-target="#addCreditModal" data-id="{{ $user->id }}">
                                        <i class="icon-base ti tabler-coins"></i>
                                    </button>

                                    <a href="{{ route('admin.users_view', $user->id) }}" class="btn btn-sm btn-info">
                                        <i class="icon-base ti tabler-eye"></i>
                                    </a>

                                    <button class="btn btn-sm {{ $user->is_blocked ? 'btn-warning' : 'btn-secondary' }}"
                                        data-bs-toggle="modal" data-bs-target="#confirmModal"
                                        data-url="{{ route('admin.users_block', $user->id) }}"
                                        data-title="{{ $user->is_blocked ? 'Unblock User' : 'Block User' }}"
                                        data-message="Are you sure you want to change the access status for {{ $user->name }}?">
                                        <i
                                            class="icon-base ti {{ $user->is_blocked ? 'tabler-lock-open' : 'tabler-lock' }}"></i>
                                    </button>

                                    <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#confirmModal"
                                        data-url="{{ route('admin.users_delete', $user->id) }}" data-title="Delete User"
                                        data-message="Warning: This action is permanent. Are you sure you want to delete {{ $user->email }}?">
                                        <i class="icon-base ti tabler-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmTitle">Confirm Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="confirmMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <!-- <a id="confirmBtn" href="#" class="btn btn-primary">Confirm</a> -->
                <a id="confirmBtn" href="#" class="btn btn-primary">
                    <span class="btn-text">Confirm</span>
                    <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addCreditModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.users_addCredit') }}" id="creditForm">
            @csrf
            <input type="hidden" name="user_id" id="modal_user_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Credit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Enter Credit Amount</label>
                        <input type="number" name="credit" class="form-control" placeholder="e.g. 100" required min="1">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="submitBtn" class="btn btn-primary">
                        <span class="btn-text">Add Credit</span>
                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize DataTable
    if (!$.fn.DataTable.isDataTable('#usersTable')) {
        $('#usersTable').DataTable({
            pageLength: 10,
            order: [
                [0, "asc"]
            ],
        });
    }
    var addCreditModal = document.getElementById('addCreditModal');
    addCreditModal.addEventListener('show.bs.modal', function(event) {
        var button = event.relatedTarget;
        var userId = button.getAttribute('data-id');
        document.getElementById('modal_user_id').value = userId;
    });
    var confirmModal = document.getElementById('confirmModal');
    confirmModal.addEventListener('show.bs.modal', function(event) {
        var button = event.relatedTarget;
        var url = button.getAttribute('data-url');
        var title = button.getAttribute('data-title');
        var message = button.getAttribute('data-message');

        document.getElementById('confirmTitle').innerText = title;
        document.getElementById('confirmMessage').innerText = message;
        document.getElementById('confirmBtn').setAttribute('href', url);

        if (title.toLowerCase().includes('delete')) {
            document.getElementById('confirmBtn').className = 'btn btn-danger';
        } else {
            document.getElementById('confirmBtn').className = 'btn btn-primary';
        }
    });
    const creditForm = document.getElementById('creditForm');
    creditForm.addEventListener('submit', function(e) {
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.querySelector('.btn-text').innerText = 'Processing...';
        submitBtn.querySelector('.spinner-border').classList.remove('d-none');
    });
});
</script>

<script>
document.getElementById('confirmBtn').addEventListener('click', function() {
    let btn = this;

    btn.classList.add('disabled');
    btn.querySelector('.btn-text').innerText = 'Processing...';
    btn.querySelector('.spinner-border').classList.remove('d-none');
});
</script>
@endsection