@extends('layouts.app')

@section('title', $user->name)
@section('page-title', $user->name)

@section('content')
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('admin.staff.index') }}" class="text-muted text-decoration-none small">
        <i class="bi bi-arrow-left me-1"></i>Back to Staff List
    </a>
</div>

<div class="row g-4">
    {{-- Left: Profile Card --}}
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body text-center py-4">
                <div class="rounded-circle d-inline-flex align-items-center justify-content-center text-white fw-bold mb-3"
                     style="width:72px;height:72px;background:#1a2a4a;font-size:28px">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <h5 class="fw-bold mb-0">{{ $user->name }}</h5>
                <p class="text-muted small mb-2">{{ $user->email }}</p>
                <div class="d-flex justify-content-center gap-2 mb-3">
                    @if($user->isAdmin())
                        <span class="badge bg-danger bg-opacity-10 text-danger">Admin</span>
                    @else
                        <span class="badge bg-primary bg-opacity-10 text-primary">Staff</span>
                    @endif
                    @if($user->is_active)
                        <span class="badge bg-success bg-opacity-10 text-success">Active</span>
                    @else
                        <span class="badge bg-danger bg-opacity-10 text-danger">Inactive</span>
                    @endif
                </div>

                <div class="d-flex flex-column gap-2">
                    <a href="{{ route('admin.staff.edit', $user) }}"
                       class="btn btn-sm text-white" style="background:#1a2a4a">
                        <i class="bi bi-pencil me-1"></i>Edit Profile
                    </a>
                    @if($user->id !== auth()->id())
                        <form method="POST" action="{{ route('admin.staff.toggle-status', $user) }}"
                              data-confirm="{{ $user->is_active ? 'Deactivate' : 'Activate' }} this account?">
                            @csrf @method('PATCH')
                            <button type="submit"
                                    class="btn btn-sm w-100 {{ $user->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}">
                                <i class="bi bi-{{ $user->is_active ? 'person-slash' : 'person-check' }} me-1"></i>
                                {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                            </button>
                        </form>
                    @endif
                    <a href="{{ route('admin.staff.activity', $user) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-activity me-1"></i>Full Activity Log
                    </a>
                </div>
            </div>
        </div>

        {{-- Details --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="fw-semibold mb-3 small text-uppercase text-muted">Account Details</h6>
                <div class="d-flex flex-column gap-2">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-phone text-muted" style="width:18px"></i>
                        <span class="small">{{ $user->mobile ? '+91 ' . $user->mobile : 'No mobile on record' }}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-calendar3 text-muted" style="width:18px"></i>
                        <span class="small">Joined {{ $user->created_at->format('d M Y') }}</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-clock-history text-muted" style="width:18px"></i>
                        <span class="small">Updated {{ $user->updated_at->diffForHumans() }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Right: Activity + Client Assignment --}}
    <div class="col-lg-8">

        {{-- Recent Activity --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
                <h6 class="fw-semibold mb-0">Recent Activity</h6>
                <a href="{{ route('admin.staff.activity', $user) }}" class="text-decoration-none small">
                    View all <i class="bi bi-arrow-right"></i>
                </a>
            </div>
            <div class="card-body p-0">
                @forelse($activityLogs as $log)
                    <div class="d-flex align-items-start gap-3 px-4 py-3 border-bottom">
                        <div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:34px;height:34px;font-size:14px">
                            <i class="bi bi-activity"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="small fw-medium">{{ $log->description }}</div>
                            <div class="text-muted" style="font-size:0.75rem">{{ $log->created_at->diffForHumans() }}</div>
                        </div>
                        <span class="badge bg-light text-muted border" style="font-size:0.7rem">{{ $log->action }}</span>
                    </div>
                @empty
                    <div class="text-center py-4 text-muted small">
                        <i class="bi bi-activity d-block fs-3 mb-1 opacity-25"></i>
                        No activity recorded yet.
                    </div>
                @endforelse
            </div>
        </div>

        {{-- Assigned Clients --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white border-bottom py-3 px-4 d-flex align-items-center justify-content-between gap-2">
                <h6 class="fw-semibold mb-0 flex-grow-1">
                    Assigned Clients
                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $assignedClients->count() }}</span>
                </h6>
                @if($assignedClients->isNotEmpty())
                <a href="{{ route('admin.client.index') }}?assigned={{ $user->id }}" class="text-decoration-none small text-nowrap">
                    View all <i class="bi bi-arrow-right"></i>
                </a>
                @endif
                <button class="btn btn-sm btn-outline-primary text-nowrap"
                        data-bs-toggle="collapse" data-bs-target="#assignClientPanel">
                    <i class="bi bi-person-plus me-1"></i>Assign Client
                </button>
            </div>

            {{-- Assign / Reassign panel --}}
            <div class="collapse" id="assignClientPanel">
                <div class="card-body border-bottom bg-light py-3">
                    <div class="row g-2 align-items-end">
                        <div class="col">
                            <label class="form-label small fw-medium mb-1">Search client by name or mobile</label>
                            <input type="text" id="assign-client-search" class="form-control form-control-sm"
                                   placeholder="Start typing…" autocomplete="off">
                            <div id="assign-client-results" class="list-group mt-1 small position-relative"
                                 style="max-height:200px;overflow-y:auto;z-index:10"></div>
                        </div>
                    </div>
                    <form id="assignClientForm" method="POST"
                          action="{{ route('admin.staff.assign-client', $user) }}">
                        @csrf
                        <input type="hidden" name="client_id" id="assign-client-id">
                        <div id="assign-client-selected" class="mt-2 d-none">
                            <div class="d-flex align-items-center gap-2 p-2 bg-white border rounded small">
                                <i class="bi bi-person-check text-primary"></i>
                                <span id="assign-client-name" class="fw-medium flex-grow-1"></span>
                                <button type="submit" class="btn btn-sm btn-primary py-0 px-3">
                                    Assign to {{ $user->name }}
                                </button>
                                <button type="button" class="btn btn-sm btn-link text-muted p-0"
                                        onclick="clearAssignSelection()">
                                    <i class="bi bi-x"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            @if($assignedClients->isEmpty())
            <div class="card-body text-center py-4 text-muted">
                <i class="bi bi-people fs-2 d-block mb-2 opacity-25"></i>
                <p class="small mb-0">No clients assigned to this staff member yet.</p>
            </div>
            @else
            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Client</th>
                            <th>Mobile</th>
                            <th>Interest</th>
                            <th class="text-center">Active Req.</th>
                            <th>Source</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($assignedClients as $client)
                        <tr>
                            <td class="ps-4">
                                <div class="fw-medium small">{{ $client->full_name }}</div>
                                @if($client->email)
                                    <div class="text-muted" style="font-size:0.72rem">{{ $client->email }}</div>
                                @endif
                            </td>
                            <td class="small">{{ $client->mobile }}</td>
                            <td>
                                <span class="badge rounded-pill
                                    {{ $client->interest_type === 'buy' ? 'bg-success-subtle text-success' : ($client->interest_type === 'rent' ? 'bg-info-subtle text-info' : 'bg-warning-subtle text-warning') }}"
                                    style="font-size:0.7rem">
                                    {{ \App\Models\Client::INTEREST_TYPES[$client->interest_type] }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="badge bg-primary bg-opacity-10 text-primary fw-normal">
                                    {{ $client->active_requirements_count ?? 0 }}
                                </span>
                            </td>
                            <td class="small text-muted">{{ optional($client->sourcingChannel)->name ?? '—' }}</td>
                            <td>
                                <a href="{{ route('admin.client.show', $client) }}"
                                   class="btn btn-sm btn-outline-secondary" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var searchInput  = document.getElementById('assign-client-search');
    var resultsEl    = document.getElementById('assign-client-results');
    var selectedEl   = document.getElementById('assign-client-selected');
    var clientIdEl   = document.getElementById('assign-client-id');
    var clientNameEl = document.getElementById('assign-client-name');
    var searchTimer  = null;
    var searchUrl    = '{{ route("admin.ajax.clients.search") }}';

    if (!searchInput) return;

    searchInput.addEventListener('input', function () {
        clearTimeout(searchTimer);
        var term = this.value.trim();
        resultsEl.innerHTML = '';

        if (term.length < 2) return;

        searchTimer = setTimeout(function () {
            fetch(searchUrl + '?term=' + encodeURIComponent(term), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var clients = Array.isArray(data) ? data : [];
                if (!clients.length) {
                    resultsEl.innerHTML = '<div class="list-group-item text-muted py-1">No clients found.</div>';
                    return;
                }
                var html = '';
                clients.forEach(function (c) {
                    html += '<button type="button" class="list-group-item list-group-item-action py-2"'
                        + ' onclick="selectAssignClient(' + c.id + ', \'' + c.name.replace(/'/g, "\\'") + '\')">'
                        + '<span class="fw-medium">' + c.name + '</span>'
                        + ' <span class="text-muted ms-2">' + (c.mobile || '') + '</span>'
                        + (c.city ? ' <span class="text-muted small">· ' + c.city + '</span>' : '')
                        + '</button>';
                });
                resultsEl.innerHTML = html;
            })
            .catch(function () {});
        }, 300);
    });

    window.selectAssignClient = function (id, name) {
        clientIdEl.value   = id;
        clientNameEl.textContent = name;
        selectedEl.classList.remove('d-none');
        resultsEl.innerHTML = '';
        searchInput.value   = '';
    };

    window.clearAssignSelection = function () {
        clientIdEl.value = '';
        clientNameEl.textContent = '';
        selectedEl.classList.add('d-none');
    };
}());
</script>
@endpush