@extends('layout.app')

@section('head')
    <style>
        /* Vertical scroll happens inside this wrapper so the header can stick to it.
           .table-responsive cannot be used here: it is a scroll container at auto
           height, so a sticky header would have nothing to pin against. */
        .report-table-wrap {
            max-height: calc(100vh - 360px);
            min-height: 220px;
            overflow: auto;
            position: relative;
        }

        .report-table-wrap #dataTable {
            margin-bottom: 0;
        }

        #dataTable thead th {
            position: sticky;
            top: 0;
            z-index: 10;
            /* Opaque, or the striped rows show through the header while scrolling. */
            background-color: #78716C !important;
            color: #fff !important;
            /* A collapsed cell loses its borders once it detaches, so draw them as insets. */
            box-shadow: inset 0 1px 0 #8a827c, inset 0 -1px 0 #8a827c;
        }
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header section-head">
            <h2 class="header">User Active Client</h2>
            @if ($searched)
                <a href="{{ route('user-active-client.export', request()->only('role', 'user_status')) }}"
                    class="pdf-download-btn noprint" title="Download this table as Excel">
                    <i class="fa fa-file-excel-o"></i><span>Download Excel</span>
                </a>
            @endif
        </div>

        <div class="card-body">
            <form action="{{ route('user-active-client') }}" method="get" class="form-row align-items-end mb-3">
                <div class="col-md-4">
                    <div class="form-group mb-0">
                        <label for="role">Search by Role</label>
                        <select name="role" id="role" class="form-control form-control-sm select2">
                            <option value="">All Roles</option>
                            @foreach ($roles as $r)
                                <option value="{{ $r->name }}" {{ $selectedRole == $r->name ? 'selected' : '' }}>
                                    {{ $r->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb-0">
                        <label for="user_status">User Status</label>
                        {{-- Plain select on purpose: too few options to be worth a search box. --}}
                        <select name="user_status" id="user_status" class="form-control form-control-sm">
                            <option value="">All</option>
                            <option value="active" {{ $selectedStatus == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="deactive" {{ $selectedStatus == 'deactive' ? 'selected' : '' }}>Deactive
                            </option>
                        </select>
                    </div>
                </div>
                <div class="col-md-5">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="fa fa-search"></i> Search
                    </button>
                    <a href="{{ route('user-active-client') }}" class="btn btn-info btn-sm">Reset</a>
                </div>
            </form>

            @if ($searched)
                <div class="mb-3">
                    <span class="badge badge-primary p-2">
                        {{ $selectedRole ? 'Users with role "' . $selectedRole . '"' : 'Total users' }}{{ $selectedStatus ? ' (' . ucfirst($selectedStatus) . ')' : '' }}:
                        {{ $userCount }}
                    </span>
                    <span class="badge badge-success p-2">Active clients in system: {{ $totalActiveClient }}</span>
                </div>

                <div class="report-table-wrap">
                    <table class="table table-bordered table-striped table-condensed" id="dataTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Email</th>
                                <th>Name</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Sees</th>
                                <th class="text-right">Active Client</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($users as $user)
                                <tr>
                                    <td>{{ $user->id }}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->name }}</td>
                                    <td>{{ $user->role_names }}</td>
                                    <td>
                                        @if ($user->user_status == 'active')
                                            <span class="badge badge-success">Active</span>
                                        @elseif ($user->user_status == 'deactive')
                                            <span class="badge badge-danger">Deactive</span>
                                        @elseif ($user->user_status == 'pending')
                                            <span class="badge badge-warning">Pending</span>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if (in_array($user->scope_label, ['No POP assigned', 'No manager assigned']))
                                            <span class="text-muted">{{ $user->scope_label }}</span>
                                        @else
                                            {{ $user->scope_label }}
                                        @endif
                                    </td>
                                    <td class="text-right">{{ $user->active_client_count }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No user found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <small class="text-muted d-block mt-2">
                    Each count is what that user sees in their own customer list: Admin sees
                    every POP, a reseller role sees the POPs of its assigned manager, and a
                    sub reseller sees only its assigned POPs. Scopes overlap, so the column
                    does not add up to a meaningful total.
                </small>
            @else
                <div class="text-center text-muted py-5">
                    <i class="fa fa-users fa-2x d-block mb-2"></i>
                    Choose a role and press <strong>Search</strong> to list the users.
                </div>
            @endif
        </div>
    </div>
@endsection