@extends('layouts.main')

@section('title', 'Company Users')

@section('content')
    <!-- start page content -->
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box-card">
                <div class="block-heading-panel d-flex align-items-center justify-content-between mb-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="heading-avatar text-dark" style="background: #48cfc8;">
                            <i class="bx bx-user-plus"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Users for {{ $company->company ?? $company->name }}</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-user-plus"></i>
                                Manage users under this company
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('companies.users.create', $company->id) }}" class="btn" style="background: #17a2b8; border-color: #17a2b8; color: white;">
                            <i class="bx bx-user-plus"></i> Add New User
                        </a>
                        <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back to Companies
                        </a>
                    </div>
                </div>

                <!-- Company Info -->
                <div class="alert alert-info mb-4" role="alert">
                    <i class="bx bx-info-circle me-2"></i>
                    <strong>Company:</strong> {{ $company->company ?? $company->name }} | 
                    <strong>Owner:</strong> {{ $company->name }} ({{ $company->email }})
                </div>

                <!-- Users Table -->
                <div class="table-responsive">
                    @if($companyUsers->count() > 0)
                        <table class="table table-striped table-hover">
                            <thead style="background: #17a2b8; color: white;">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">User</th>
                                    <th scope="col">Email Status</th>
                                    <th scope="col">Created</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($companyUsers as $index => $user)
                                    <tr>
                                        <td>{{ $companyUsers->firstItem() + $index }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-sm rounded-circle text-dark d-flex align-items-center justify-content-center me-2" style="background: #E3F2FD;">
                                                    {{ strtoupper(substr($user->name, 0, 1)) }}
                                                </div>
                                                <div>
                                                    <strong>{{ $user->name }}</strong>
                                                    <br>
                                                    <small class="text-muted">{{ $user->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @if($user->email_verified_at)
                                                <span class="badge bg-success">
                                                    <i class="bx bx-check-circle me-1"></i>Verified
                                                </span>
                                            @else
                                                <span class="badge bg-warning">
                                                    <i class="bx bx-x-circle me-1"></i>Pending
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            <small>{{ $user->created_at->format('M d, Y') }}</small>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="{{ route('companies.users.edit', [$company->id, $user->id]) }}" 
                                                   class="btn btn-sm btn-outline-warning" 
                                                   title="Edit User">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <form action="{{ route('companies.users.destroy', [$company->id, $user->id]) }}" 
                                                      method="POST" 
                                                      class="d-inline delete-user-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="button" 
                                                            class="btn btn-sm btn-outline-danger delete-user-btn" 
                                                            title="Delete User"
                                                            data-user-name="{{ $user->name }}">
                                                        <i class="bx bx-trash"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div>
                                <small class="text-muted">
                                    Showing {{ $companyUsers->firstItem() }} to {{ $companyUsers->lastItem() }} of {{ $companyUsers->total() }} entries
                                </small>
                            </div>
                            <div>
                                {{ $companyUsers->links() }}
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="bx bx-user-plus mb-3" style="font-size: 3rem; opacity: 0.3;"></i>
                                <h5 class="text-muted">No Users Found</h5>
                                <p class="text-muted mb-4">No users have been created under this company yet.</p>
                                <a href="{{ route('companies.users.create', $company->id) }}" class="btn" style="background: #17a2b8; border-color: #17a2b8; color: white;">
                                    <i class="bx bx-user-plus"></i> Add First User
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('styles')
<style>
    /* Bootbox custom styling */
    .bootbox .modal-header {
        background-color: #dc3545;
        color: white;
        border-bottom: none;
    }
    
    .bootbox .modal-header .btn-close {
        filter: invert(1);
    }
    
    .bootbox .modal-body {
        padding: 20px;
    }
    
    .bootbox .btn {
        min-width: 100px;
    }
</style>
@endsection

@section('scripts')
<!-- Bootbox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Handle delete user confirmation
        document.querySelectorAll('.delete-user-btn').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                const userName = this.getAttribute('data-user-name');
                const form = this.closest('form');
                
                bootbox.confirm({
                    title: "Delete Company User",
                    message: `Are you sure you want to delete the user "<strong>${userName}</strong>"?<br><br><small class="text-muted">This will only remove the user account. Their workspaces and company data will remain intact.</small>`,
                    buttons: {
                        confirm: {
                            label: '<i class="bx bx-trash me-1"></i>Yes, Delete User',
                            className: 'btn-danger'
                        },
                        cancel: {
                            label: '<i class="bx bx-x me-1"></i>Cancel',
                            className: 'btn-secondary'
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            form.submit();
                        }
                    }
                });
            });
        });
    });
</script>
@endsection