@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')

<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    {{-- Page Title --}}
    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-users mr-2" style="color:#c9a96e"></i>Users</h3>
                    <p class="text-muted mb-0" style="font-size:13px">Frontend registered buyers</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li>
                            <a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a>
                        </li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Users</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Flash --}}
    @foreach(['success','error','warning'] as $t)
        @if(session($t))
        <div class="container-fluid mb-2">
            <div class="alert alert-{{ $t==='error'?'danger':$t }} alert-dismissible fade show">
                {{ session($t) }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        </div>
        @endif
    @endforeach

    {{-- Stat cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['label'=>'Total Users',  'value'=>$stats['total'],    'color'=>'#c9a96e', 'icon'=>'fa-users'],
                ['label'=>'Active',       'value'=>$stats['active'],   'color'=>'#22c55e', 'icon'=>'fa-check-circle'],
                ['label'=>'Inactive',     'value'=>$stats['inactive'], 'color'=>'#ef4444', 'icon'=>'fa-ban'],
            ] as $c)
            <div class="col-md-4 col-6 mb-3">
                <div class="card shadow-sm h-100" style="border-left:4px solid {{ $c['color'] }}">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <div class="text-muted text-uppercase" style="font-size:11px">{{ $c['label'] }}</div>
                            <i class="fas {{ $c['icon'] }} text-muted" style="opacity:0.4"></i>
                        </div>
                        <div style="font-size:26px;font-weight:700;color:{{ $c['color'] }}">{{ $c['value'] }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- Left: Users table --}}
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center flex-wrap" style="gap:8px">
                        <h6 class="mb-0">{{ $users->total() }} Users</h6>
                        {{-- Filters --}}
                        <form method="GET" class="d-flex gap-2 flex-wrap" style="gap:6px">
                            <input type="text" name="search" class="form-control form-control-sm"
                                placeholder="Search name / email / phone"
                                value="{{ request('search') }}" style="max-width:200px">
                            <select name="status" class="form-control form-control-sm" style="max-width:120px">
                                <option value="">All Status</option>
                                <option value="active"   {{ request('status')==='active'?'selected':'' }}>Active</option>
                                <option value="inactive" {{ request('status')==='inactive'?'selected':'' }}>Inactive</option>
                            </select>
                            <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Filter</button>
                            <a href="/users/dashboard" class="btn btn-outline-secondary btn-sm"><i class="fas fa-times"></i></a>
                        </form>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr>
                                        <th>User</th>
                                        <th>Phone</th>
                                        <th>Bookings</th>
                                        <th>Status</th>
                                        <th>Joined</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($users as $user)
                                    <tr>
                                        <td>
                                            <a href="{{ route('admin.users.show', $user->id) }}" style="text-decoration:none">
                                                <div style="font-weight:600;color:#1e293b">{{ $user->name }}</div>
                                                <div style="font-size:12px;color:#94a3b8">{{ $user->email }}</div>
                                            </a>
                                        </td>
                                        <td style="color:#475569">{{ $user->country_code }}{{ $user->phone }}</td>
                                        <td>
                                            <span class="badge badge-secondary">{{ $user->bookings_count }}</span>
                                        </td>
                                        <td>
                                            @if($user->status === 'active')
                                                <span class="badge badge-success">Active</span>
                                            @else
                                                <span class="badge badge-danger">Inactive</span>
                                            @endif
                                        </td>
                                        <td style="font-size:12px;color:#94a3b8">
                                            {{ $user->created_at->format('d M Y') }}
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1" style="gap:4px">
                                                 {{-- View profile --}}
                                                    <a href="{{ route('admin.users.show', $user->id) }}"
                                                    class="btn btn-sm btn-outline-primary"
                                                    title="View Profile">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                {{-- Toggle status --}}
                                                <form method="POST" action="/users/{{ $user->id }}/toggle-status">
                                                    @csrf
                                                    <button class="btn btn-sm {{ $user->status==='active'?'btn-outline-danger':'btn-outline-success' }}"
                                                        title="{{ $user->status==='active'?'Deactivate':'Activate' }}"
                                                        onclick="return confirm('{{ $user->status==='active'?'Deactivate':'Activate' }} {{ $user->name }}?')">
                                                        <i class="fas {{ $user->status==='active'?'fa-ban':'fa-check' }}"></i>
                                                    </button>
                                                </form>
                                                {{-- Quick notify --}}
                                                <button class="btn btn-sm btn-outline-warning"
                                                    title="Send Notification"
                                                    onclick="quickNotify({{ $user->id }}, '{{ addslashes($user->name) }}')">
                                                    <i class="fas fa-bell"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted py-4">No users found.</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($users->hasPages())
                    <div class="card-footer">{{ $users->links() }}</div>
                    @endif
                </div>
            </div>

            {{-- Right: Broadcast Notification --}}
            <div class="col-lg-4">
                @include('Users._notify_panel', ['targetOptions' => [
                    'all_users' => '📢 All Users (' . $stats['active'] . ' active)',
                ], 'defaultTarget' => 'all_users'])
            </div>

        </div>
    </div>

</div>
</div>
</section>
@include('Partials.footer')

{{-- Quick notify modal trigger --}}
<script>
function quickNotify(userId, userName) {
    document.getElementById('notifyTarget').value = 'user:' + userId;
    document.getElementById('notifyTargetLabel').textContent = '→ ' + userName + ' only';
    document.getElementById('notifyTitle').focus();
    document.getElementById('notifyPanel').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>