@extends('layouts.app')

@section('content')
<br><br><br>
<div class="container py-5">

<h3 class="mb-4">Assign Users to Groups</h3>

@if(session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

@if(session('error'))
<div class="alert alert-danger">{{ session('error') }}</div>
@endif

{{-- Search --}}
<div class="row mb-3">
<div class="col-md-6">

<input type="text" id="searchUser" class="form-control" placeholder="Search user by name or email">

</div>

<div class="col-md-3">

<select id="bulkGroup" class="form-select">
<option value="">Bulk Assign Group</option>
<option value="ultimate">Ultimate</option>
               <option value="premium">Premium</option>
               <option value="basic">Basic</option>
               <option value="trial">Trial</option>
               <option value="secial">Special</option>
</select>

</div>

<div class="col-md-3">

<button type="button" class="btn btn-warning w-100" id="applyBulk">
Apply to Selected
</button>

</div>
</div>

<form action="{{ route('users.groups.update') }}" method="POST">
    @csrf

<div class="table-responsive">

<table class="table table-bordered align-middle" id="userTable">

<thead class="table-light">

<tr>

<th width="40">
<input type="checkbox" id="selectAll">
</th>

<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Current Group</th>
<th>Change Group</th>

</tr>

</thead>

<tbody>

@forelse($users as $index => $user)

<tr>

<td>
<input type="checkbox" class="user-check">
</td>

<td>{{ $index + 1 }}</td>

<td>{{ $user->name }}</td>

<td>{{ $user->email }}</td>

<td>

@if($user->group)

<span class="badge bg-success">
{{ ucfirst($user->group) }}
</span>

@else

<span class="badge bg-secondary">None</span>

@endif

</td>

<td>

<select name="groups[{{ $user->id }}]" class="form-select group-select">

<option value="">None</option>

<option value="ultimate" {{ $user->group=='ultimate' ? 'selected' : '' }}>
Ultimate
</option>
<option value="premium" {{ $user->group=='premium' ? 'selected' : '' }}>
Premium
</option>

<option value="basic" {{ $user->group=='basic' ? 'selected' : '' }}>
Basic
</option>

<option value="trial" {{ $user->group=='trial' ? 'selected' : '' }}>
Trial
</option>
<option value="special" {{ $user->group=='specia' ? 'selected' : '' }}>
special
</option>

</select>

</td>

</tr>

@empty

<tr>

<td colspan="6" class="text-center">
No users found
</td>

</tr>

@endforelse

</tbody>

</table>

</div>

<button type="submit" class="btn btn-primary mt-3">
Save Groups
</button>

</form>

</div>

<script>

document.getElementById("searchUser").addEventListener("keyup", function(){

let value=this.value.toLowerCase();

document.querySelectorAll("#userTable tbody tr").forEach(row=>{

row.style.display=row.textContent.toLowerCase().includes(value)
? ""
: "none";

});

});

document.getElementById("selectAll").addEventListener("change",function(){

document.querySelectorAll(".user-check").forEach(cb=>{

cb.checked=this.checked;

});

});

document.getElementById("applyBulk").addEventListener("click",function(){

let group=document.getElementById("bulkGroup").value;

if(!group){
alert("Select a group first");
return;
}

document.querySelectorAll(".user-check:checked").forEach(cb=>{

cb.closest("tr")
.querySelector(".group-select").value=group;

});

});

</script>

@endsection