@extends('layouts.main')

@section('title', 'Company Details: ' . $company->name)

@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;">{{ strtoupper(substr($company->name, 0, 1)) }}</div>
                        <div class="block-heading">
                            <h3>Company Details</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-buildings"></i>
                                {{ $company->name }}
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('companies.edit', $company->id) }}" class="btn" 
                           style="border: 1px solid #48cfc8; color: #48cfc8;"
                           onmouseover="this.style.background='#48cfc8'; this.style.color='white';"
                           onmouseout="this.style.background='transparent'; this.style.color='#48cfc8';">
                            <i class="bx bx-edit"></i> Edit
                        </a>
                        <a href="{{ route('companies.index') }}" class="btn btn-outline-secondary">
                            <i class="bx bx-arrow-back"></i> Back
                        </a>
                    </div>
                </div>

                <!-- Company Information -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Personal Information</h6>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Full Name:</strong></div>
                                    <div class="col-sm-8">{{ $company->name }}</div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Email:</strong></div>
                                    <div class="col-sm-8">
                                        {{ $company->email }}
                                        @if($company->email_verified_at)
                                            <span class="badge bg-success ms-2">Verified</span>
                                        @else
                                            <span class="badge bg-warning ms-2">Not Verified</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Company:</strong></div>
                                    <div class="col-sm-8">{{ $company->company ?? 'Not specified' }}</div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Role:</strong></div>
                                    <div class="col-sm-8">
                                        @foreach($company->roles as $role)
                                            <span class="badge bg-primary">{{ $role->title }}</span>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Account Status</h6>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Created:</strong></div>
                                    <div class="col-sm-8">{{ $company->created_at->format('M d, Y H:i A') }}</div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Last Updated:</strong></div>
                                    <div class="col-sm-8">{{ $company->updated_at->format('M d, Y H:i A') }}</div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Email Verified:</strong></div>
                                    <div class="col-sm-8">
                                        @if($company->email_verified_at)
                                            <span class="text-success">
                                                <i class="bx bx-check-circle"></i>
                                                {{ $company->email_verified_at->format('M d, Y H:i A') }}
                                            </span>
                                        @else
                                            <span class="text-warning">
                                                <i class="bx bx-time"></i>
                                                Pending verification
                                            </span>
                                        @endif
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-sm-4"><strong>Status:</strong></div>
                                    <div class="col-sm-8">
                                        @if($company->email_verified_at)
                                            <span class="badge bg-success">Active</span>
                                        @else
                                            <span class="badge bg-warning">Pending Activation</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Current Month Metrics -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">
                                    <i class="bx bx-chart-line"></i> Current Month Metrics
                                </h6>
                                <div class="d-flex gap-2 align-items-center">
                                    <span class="badge bg-info">{{ date('M Y') }}</span>
                                    <a href="{{ route('companies.metrics', $company->id) }}" 
                                       class="btn btn-sm btn-outline-primary"
                                       title="View Detailed Metrics">
                                        <i class="bx bx-line-chart"></i> View Details
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="text-center p-3 border rounded">
                                            <div class="display-6 text-primary mb-2">
                                                {{ number_format($currentMonthMetrics['cu_raw'], 0) }}
                                            </div>
                                            <h6 class="text-primary mb-1">
                                                <i class="bx bx-chip"></i> Total Compute Units
                                            </h6>
                                            <small class="text-muted">Current month usage</small>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="text-center p-3 border rounded">
                                            <div class="display-6 text-success mb-2">
                                                {{ number_format($currentMonthMetrics['duration_raw'], 0) }}
                                            </div>
                                            <h6 class="text-success mb-1">
                                                <i class="bx bx-time"></i> Total Duration
                                            </h6>
                                            <small class="text-muted">Seconds of operation</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Workspaces Section -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Workspaces ({{ $company->workspaces->count() }})</h6>
                                <span class="badge bg-secondary">{{ $company->workspaces->count() }} workspace(s)</span>
                            </div>
                            <div class="card-body">
                                @if($company->workspaces->count() > 0)
                                    <div class="row">
                                        @foreach($company->workspaces as $workspace)
                                            <div class="col-md-6 mb-3">
                                                <div class="border rounded p-3">
                                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                                        <h6 class="mb-0">{{ $workspace->name }}</h6>
                                                        <a href="{{ route('workspaces.show', $workspace->id) }}" 
                                                           class="btn btn-sm btn-outline-primary d-none">
                                                            <i class="bx bx-show"></i>
                                                        </a>
                                                    </div>
                                                    @if($workspace->description)
                                                        <p class="text-muted small mb-2">{{ $workspace->description }}</p>
                                                    @endif
                                                    
                                    <!-- Capacity Information -->
                                    @if(isset($workspace->fabric_workspace_id) && $workspace->fabric_workspace_id)
                                        <div class="capacity-section mb-2" data-workspace-id="{{ $workspace->id }}" data-company-id="{{ $company->id }}">
                                            <div class="d-flex align-items-center gap-2 mb-1">
                                                <i class="bx bx-chip text-success"></i>
                                                <strong class="text-success">Capacity Assignment</strong>
                                                <button type="button" class="btn btn-sm btn-outline-success refresh-capacity-btn" 
                                                        onclick="loadCapacityData({{ $company->id }}, {{ $workspace->id }})" 
                                                        title="Refresh capacity data">
                                                    <i class="bx bx-refresh"></i>
                                                </button>
                                            </div>
                                            <div class="capacity-content ms-3">
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                    <small class="text-muted">Loading capacity data...</small>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Utilization Information -->
                                        <div class="utilization-section mb-2 d-none" data-workspace-id="{{ $workspace->id }}" data-company-id="{{ $company->id }}">
                                            <div class="d-flex align-items-center gap-2 mb-1">
                                                <i class="bx bx-trending-up text-primary"></i>
                                                <strong class="text-primary">Utilization Details</strong>
                                                <button type="button" class="btn btn-sm btn-outline-primary refresh-utilization-btn" 
                                                        onclick="loadUtilizationData({{ $company->id }}, {{ $workspace->id }})" 
                                                        title="Refresh utilization data">
                                                    <i class="bx bx-refresh"></i>
                                                </button>
                                            </div>
                                            <div class="utilization-content ms-3">
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                    <small class="text-muted">Loading utilization data...</small>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="mb-2">
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="bx bx-info-circle text-muted"></i>
                                                <small class="text-muted">
                                                    <strong>Capacity:</strong> Not linked to Fabric workspace
                                                </small>
                                            </div>
                                        </div>
                                    @endif
                                                    
                                                    <div class="d-flex justify-content-between text-sm">
                                                        <span class="text-muted">
                                                            <i class="bx bx-calendar"></i>
                                                            {{ $workspace->created_at->format('M d, Y') }}
                                                        </span>
                                                        <div class="d-flex gap-1">
                                                            <span class="badge bg-info">
                                                                {{ $workspace->workspaceItems->count() }} item(s)
                                                            </span>
                                                            @if(isset($workspace->fabric_workspace_id) && $workspace->fabric_workspace_id)
                                                                <!-- <span class="badge bg-primary" title="Linked to Fabric">
                                                                    <i class="bx bx-link"></i>
                                                                </span> -->
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="text-center py-4">
                                        <i class="workspace-icon mb-3" style="font-size: 3rem; opacity: 0.3;"></i>
                                        <h6 class="text-muted">No Workspaces Created</h6>
                                        <p class="text-muted mb-0">This company user hasn't created any workspaces yet.</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">Quick Actions</h6>
                            </div>
                            <div class="card-body">
                                <div class="d-flex gap-2 flex-wrap">
                                    <a href="{{ route('companies.edit', $company->id) }}" class="btn btn-outline-primary">
                                        <i class="bx bx-edit"></i> Edit Company Details
                                    </a>
                                    @if(!$company->email_verified_at)
                                        <button class="btn btn-outline-warning" onclick="alert('Email verification feature would be implemented here')">
                                            <i class="bx bx-mail-send"></i> Resend Verification Email
                                        </button>
                                    @endif
                                    <button class="btn btn-outline-info" onclick="alert('Password reset feature would be implemented here')">
                                        <i class="bx bx-key"></i> Reset Password
                                    </button>
                                    <form action="{{ route('companies.destroy', $company->id) }}" method="POST" class="d-inline delete-company-form">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" 
                                                class="btn btn-outline-danger delete-company-btn"
                                                data-company-name="{{ $company->name }}">
                                            <i class="bx bx-trash"></i> Delete Company
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Any specific JavaScript for the company show page
        console.log('Company details page loaded');
        
        // Load capacity and utilization data for all workspaces
        loadAllWorkspaceData();

        // Handle company deletion with Bootbox confirm
        const deleteBtn = document.querySelector('.delete-company-btn');
        if (deleteBtn) {
            deleteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                const companyName = this.getAttribute('data-company-name');
                const form = this.closest('.delete-company-form');
                
                bootbox.confirm({
                    title: 'Delete Company',
                    message: `Are you sure you want to delete the company "<strong>${companyName}</strong>"?<br><br>
                             <div class="alert alert-danger mt-2 mb-0">
                                 <i class="bx bx-error-circle"></i> 
                                 <strong>Warning:</strong> This action cannot be undone and will permanently delete:
                                 <ul class="mt-2 mb-0">
                                     <li>All associated workspaces</li>
                                     <li>All workspace data and items</li>
                                     <li>User account and profile</li>
                                     <li>All scheduled configurations</li>
                                 </ul>
                             </div>`,
                    buttons: {
                        confirm: {
                            label: '<i class="bx bx-trash"></i> Yes, Permanently Delete',
                            className: 'btn-danger'
                        },
                        cancel: {
                            label: '<i class="bx bx-x"></i> Cancel',
                            className: 'btn-secondary'
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            // Show loading state
                            deleteBtn.innerHTML = '<i class="bx bx-loader bx-spin"></i> Deleting...';
                            deleteBtn.disabled = true;
                            
                            // Submit the form
                            form.submit();
                        }
                    }
                });
            });
        }
    });

    // Load all workspace data on page load
    function loadAllWorkspaceData() {
        const capacitySections = document.querySelectorAll('.capacity-section');
        const utilizationSections = document.querySelectorAll('.utilization-section');
        
        capacitySections.forEach(section => {
            const companyId = section.getAttribute('data-company-id');
            const workspaceId = section.getAttribute('data-workspace-id');
            loadCapacityData(companyId, workspaceId);
        });
        
        /* utilizationSections.forEach(section => {
            const companyId = section.getAttribute('data-company-id');
            const workspaceId = section.getAttribute('data-workspace-id');
            loadUtilizationData(companyId, workspaceId);
        }); */
    }

    // Load capacity data for a specific workspace
    function loadCapacityData(companyId, workspaceId) {
        const section = document.querySelector(`.capacity-section[data-workspace-id="${workspaceId}"]`);
        const contentDiv = section.querySelector('.capacity-content');
        const refreshBtn = section.querySelector('.refresh-capacity-btn');
        
        // Show loading state
        contentDiv.innerHTML = `
            <div class="d-flex align-items-center gap-2">
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <small class="text-muted">Loading capacity data...</small>
            </div>
        `;
        refreshBtn.disabled = true;
        
        fetch(`/companies/${companyId}/workspaces/${workspaceId}/capacity`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const capacity = data.data;
                    contentDiv.innerHTML = `
                        <div class="mb-1">
                            <small class="text-muted"><strong>ID:</strong></small>
                            <small class="font-monospace text-primary">${capacity.id}</small>
                        </div>
                        ${capacity.region ? `
                            <div class="mb-1">
                                <small class="text-muted"><strong>Region:</strong></small>
                                <span class="badge bg-info">${capacity.region}</span>
                            </div>
                        ` : ''}
                        ${capacity.assignment_progress ? `
                            <div class="mb-1">
                                <small class="text-muted"><strong>Status:</strong></small>
                                <span class="badge ${capacity.assignment_progress === 'Completed' ? 'bg-success' : 'bg-warning'}">
                                    ${capacity.assignment_progress}
                                </span>
                            </div>
                        ` : ''}
                        <div class="mb-1">
                            <small class="text-muted"><strong>SKU:</strong></small>
                            <small class="font-monospace text-primary">${capacity.details && capacity.details.sku ? capacity.details.sku : 'F2'}</small>
                        </div>
                    `;
                } else {
                    contentDiv.innerHTML = `
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-error-circle text-warning"></i>
                            <small class="text-warning"><strong>Error:</strong> ${data.message || 'Failed to load capacity data'}</small>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading capacity data:', error);
                contentDiv.innerHTML = `
                    <div class="d-flex align-items-center gap-2">
                        <i class="bx bx-error-circle text-danger"></i>
                        <small class="text-danger"><strong>Error:</strong> Failed to load capacity data</small>
                    </div>
                `;
            })
            .finally(() => {
                refreshBtn.disabled = false;
            });
    }

    // Load utilization data for a specific workspace
    function loadUtilizationData(companyId, workspaceId) {
        const section = document.querySelector(`.utilization-section[data-workspace-id="${workspaceId}"]`);
        const contentDiv = section.querySelector('.utilization-content');
        const refreshBtn = section.querySelector('.refresh-utilization-btn');
        
        // Show loading state
        contentDiv.innerHTML = `
            <div class="d-flex align-items-center gap-2">
                <div class="spinner-border spinner-border-sm text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <small class="text-muted">Loading utilization data...</small>
            </div>
        `;
        refreshBtn.disabled = true;
        
        fetch(`/companies/${companyId}/workspaces/${workspaceId}/utilization`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.data.length > 0) {
                    let utilizationHTML = '';
                    data.data.forEach(utilization => {
                        utilizationHTML += `
                            <div class="mb-2">
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <strong class="text-primary">Utilization (Last 24h)</strong>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="mb-1">
                                            <small class="text-muted"><strong>Total CU:</strong></small>
                                            <span class="badge bg-primary">${Number(utilization.total_cu_24h).toLocaleString()} CU</span>
                                        </div>
                                        <div class="mb-1">
                                            <small class="text-muted"><strong>Average CU:</strong></small>
                                            <span class="text-info">${utilization.avg_cu_24h} CU</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="mb-1">
                                            <small class="text-muted"><strong>Peak CU:</strong></small>
                                            <span class="badge bg-warning">${Number(utilization.max_cu_24h).toLocaleString()} CU</span>
                                        </div>
                                        <div class="mb-1">
                                            <small class="text-muted"><strong>Operations:</strong></small>
                                            <span class="text-secondary">${Number(utilization.total_operations_24h).toLocaleString()}</span>
                                        </div>
                                    </div>
                                </div>
                                ${utilization.top_operation && utilization.top_operation !== 'N/A' ? `
                                    <div class="mt-1">
                                        <small class="text-muted"><strong>Top Operation:</strong></small>
                                        <span class="badge bg-secondary">${utilization.top_operation}</span>
                                    </div>
                                ` : ''}
                            </div>
                        `;
                    });
                    contentDiv.innerHTML = utilizationHTML;
                } else {
                    contentDiv.innerHTML = `
                        <div class="d-flex align-items-center gap-2">
                            <i class="bx bx-info-circle text-muted"></i>
                            <small class="text-muted"><strong>Utilization:</strong> ${data.success ? 'No utilization data available' : (data.message || 'Failed to load utilization data')}</small>
                        </div>
                    `;
                }
            })
            .catch(error => {
                console.error('Error loading utilization data:', error);
                contentDiv.innerHTML = `
                    <div class="d-flex align-items-center gap-2">
                        <i class="bx bx-error-circle text-danger"></i>
                        <small class="text-danger"><strong>Error:</strong> Failed to load utilization data</small>
                    </div>
                `;
            })
            .finally(() => {
                refreshBtn.disabled = false;
            });
    }
</script>
@endsection