@extends('layouts/layoutMaster')

@section('title', ($companyDetails['name'] ?? 'Client') . ' — Users')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-style')
    <style>
        .client-detail-nav .nav-link {
            color: #697a8d;
            border-radius: 0.375rem;
            padding: 0.55rem 1rem;
        }
        .client-detail-nav .nav-link:hover {
            background-color: rgba(105, 122, 141, 0.08);
        }
        .client-detail-nav .nav-link.active {
            color: #696cff;
            background-color: rgba(105, 108, 255, 0.08);
            font-weight: 600;
        }
    </style>
@endsection

@section('content')
    {{-- Page Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Client Details</h4>
                    <p class="text-muted mb-0">Manage portal users and invitations for this client.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url('clients') }}">Clients</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $companyDetails['name'] ?? '' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Company Header Card --}}
    @include('companies.administrator._header', ['companyDetails' => $companyDetails])

    {{-- Left Nav + Right Content --}}
    <div class="row g-4">
        {{-- Left Sidebar Navigation --}}
        <div class="col-12 col-lg-3">
            @include('companies.administrator._nav', ['activePage' => 'users', 'companyDetails' => $companyDetails])
        </div>

        {{-- Right Content --}}
        <div class="col-12 col-lg-9">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div>
                            <h5 class="card-title mb-0">Portal Users</h5>
                            <small class="text-muted">Active users and pending invitations for this client.</small>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="openNewUserModal('{{ $companyDetails['id'] }}')">
                            <i class="ti ti-plus me-sm-1"></i>
                            <span class="d-none d-sm-inline-block">Invite User</span>
                        </button>
                    </div>
                </div>
                <div class="card-datatable table-responsive">
                    <table class="table border-top dt-client-users">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th class="text-nowrap">Last Updated</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($companyUsers as $cu)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar-sm me-2">
                                                @php
                                                    $cuName = $cu->user_name ?? $cu->user_email;
                                                    $cuInitials = collect(explode(' ', $cuName))->map(fn($w) => mb_substr($w, 0, 1))->take(2)->implode('');
                                                    $stateIdx = abs(ord($cuName[0] ?? 'A') % 6);
                                                    $states = ['primary', 'success', 'danger', 'warning', 'info', 'secondary'];
                                                @endphp
                                                <span class="avatar-initial rounded-circle bg-label-{{ $states[$stateIdx] }}">{{ strtoupper($cuInitials) }}</span>
                                            </div>
                                            <div>
                                                @if ($cu->user_name)
                                                    <span class="fw-medium d-block">{{ $cu->user_name }}</span>
                                                    <small class="text-muted">{{ $cu->user_email }}</small>
                                                @else
                                                    <span class="fw-medium">{{ $cu->user_email }}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="fw-medium">{{ $cu->role_name }}</span></td>
                                    <td>
                                        <span class="badge bg-label-{{ $cu->config_status ? 'success' : 'warning' }}">{{ $cu->status_name }}</span>
                                        @if (!$cu->config_status && $cu->updated_at)
                                            <div class="text-muted small mt-1">Sent {{ date('d M Y', strtotime($cu->updated_at)) }}</div>
                                        @endif
                                    </td>
                                    <td class="text-nowrap">
                                        <span class="text-muted small">{{ $cu->updated_at ? date('d M Y', strtotime($cu->updated_at)) : '—' }}</span>
                                    </td>
                                    <td class="text-nowrap">
                                        @if ($cu->config_status)
                                            <button class="btn btn-sm btn-icon me-1" title="Edit"><i class="ti ti-edit"></i></button>
                                        @else
                                            <button class="btn btn-sm btn-icon me-1" title="Re-send Invite"><i class="ti ti-send"></i></button>
                                        @endif
                                        <button onclick="removeUser('{{ $cu->user_email }}', '{{ $companyDetails['id'] }}')" class="btn btn-sm btn-icon" title="Remove"><i class="ti ti-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Invite User Modal --}}
    <div class="modal fade" id="client-user-newuser-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <div>
                        <h5 class="modal-title mb-0">Invite New User</h5>
                        <small class="text-muted">Send a portal invitation to this client's contact.</small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3">
                    <form onsubmit="inviteNewUser(event, '{{ $companyDetails['id'] }}')" method="POST" id="client-user-newuser-form">
                        <div class="mb-3">
                            <label class="form-label" for="invite-email-sel">Email Address</label>
                            <select class="form-select" id="invite-email-sel" name="invite-email-sel" required></select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" for="invite-role-sel">Role</label>
                            <select class="form-select" id="invite-role-sel" name="invite-role-sel" required></select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary" form="client-user-newuser-form" type="submit">Send Invitation</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            $('.dt-client-users').DataTable({
                searching: true,
                ordering: true,
                order: [[0, 'asc']],
                columnDefs: [
                    { orderable: false, searchable: false, targets: -1 }
                ],
                language: {
                    emptyTable: 'No users or invitations found for this client.'
                }
            });
        });

        async function openNewUserModal(id) {
            var data = await pdwl('clients/' + id + '/users/invite/data', {});
            if (!data) return;
            var rStr = '';
            (data.data.roles || []).forEach(function(e) {
                rStr += '<option value="' + e.id + '">' + e.name + '</option>';
            });
            var eStr = '';
            (data.data.emails || []).forEach(function(e) {
                eStr += '<option value="' + e + '">' + e + '</option>';
            });
            $('#invite-role-sel').empty().append(rStr);
            $('#invite-email-sel').empty().append(eStr);
            $('#client-user-newuser-modal').modal('show');
        }

        async function inviteNewUser(event, id) {
            event.preventDefault();
            var data = await pdwl('clients/' + id + '/users/invite', {
                email: $('#invite-email-sel').val(),
                roleId: $('#invite-role-sel').val()
            });
            if (!data) return;
            $('#client-user-newuser-modal').modal('hide');
            if (data.success) return window.location.reload();
            var m = data.error ? (data.message + ': ' + data.error) : data.message;
            showResponse(m, data.success ? 'success' : 'error', data.error ? 'Error' : null);
        }

        async function removeUser(email, id) {
            if (await showConfirmation()) {
                var data = await pdwl('clients/' + id + '/users/delete', { email: email });
                if (!data) return;
                if (data.success) return window.location.reload();
                var m = data.error ? (data.message + ': ' + data.error) : data.message;
                showResponse(m, data.success ? 'success' : 'error', data.error ? 'Error' : null);
            }
        }
    </script>
@endsection