@extends('layouts.main')

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

@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-buildings"></i>
                        </div>
                        <div class="block-heading">
                            <h3>Company Management</h3>
                            <h5 class="d-flex gap-2 align-items-center mb-0">
                                <i class="bx bx-buildings"></i>
                                Manage all company users
                            </h5>
                        </div>
                    </div>
                    <div class="d-flex gap-2">
                        <button id="syncMasterWorkspaces" 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';"
                                title="Sync Master Workspaces">
                            <i class="bx bx-refresh"></i>
                        </button>
                        <a href="{{ route('companies.create') }}" class="btn" style="background: #48cfc8; border-color: #48cfc8; color: white;">
                            <i class="bx bx-plus"></i> Add New Company
                        </a>
                    </div>
                </div>

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <!-- Companies Table -->
                <div class="table-responsive">
                    @if($companies->count() > 0)
                        <table class="table table-striped table-hover">
                            <thead style="background: #48cfc8; color: white;">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Company</th>
                                    <th scope="col">Contact</th>
                                    <th scope="col">Workspaces</th>
                                    <th scope="col">Subscription</th>
                                    <th scope="col">CU (Current Month)</th>
                                    <th scope="col">Duration (Current Month)</th>
                                    <th scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($companies as $index => $company)
                                    <tr class="{{ $company->is_storage_full ?? false ? 'table-danger' : '' }}" 
                                        @if($company->is_storage_full ?? false) 
                                            title="⚠️ Storage Full ({{ number_format($company->storage_usage_percentage ?? 0, 1) }}%) - Immediate action required!" 
                                        @endif>
                                        <td>{{ $companies->firstItem() + $index }}</td>
                                        <td>
                                            <span class="badge text-white" style="background: #48cfc8;">{{ $company->company ?? 'Not Set' }}</span>
                                        </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: #48cfc8;">
                                                    {{ strtoupper(substr($company->name, 0, 1)) }}
                                                </div>
                                                <div>
                                                    <strong>{{ $company->name }}</strong>
                                                    @if($company->is_storage_full ?? false)
                                                        <span class="badge bg-danger ms-1" title="Storage Full">
                                                            <i class="bx bx-error-circle"></i> 100%
                                                        </span>
                                                    @elseif(($company->storage_usage_percentage ?? 0) >= 90)
                                                        <span class="badge bg-warning ms-1" title="Storage Critical">
                                                            <i class="bx bx-error"></i> {{ number_format($company->storage_usage_percentage, 0) }}%
                                                        </span>
                                                    @elseif(($company->storage_usage_percentage ?? 0) >= 80)
                                                        <span class="badge bg-info ms-1" title="Storage High">
                                                            <i class="bx bx-info-circle"></i> {{ number_format($company->storage_usage_percentage, 0) }}%
                                                        </span>
                                                    @endif
                                                    <br>
                                                    <small class="text-muted">{{ $company->email }}</small>
                                                    @if($company->email_verified_at)
                                                        <i class="bx bx-check-circle text-success ms-1" title="Email verified"></i>
                                                    @else
                                                        <i class="bx bx-x-circle text-warning ms-1" title="Email not verified"></i>
                                                    @endif
                                                    @if(($company->storage_usage_percentage ?? 0) > 0)
                                                        <br>
                                                        <small class="text-info">
                                                            Storage: <b style="color:#000">{{ number_format($company->storage_used ?? 0, 2) }} GB ({{ number_format($company->storage_usage_percentage, 1) }}%) / {{ number_format($company->storage_limit ?? 0, 2) }} GB</b>
                                                        </small>
                                                        <br>                                                        
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge text-white" style="background: #48cfc8;">{{ $company->workspaces->count() }} workspace(s)</span>
                                        </td>
                                        <td>
                                            @if($company->subscriptionPlans->count() > 0)
                                                @php $subscription = $company->subscriptionPlans->first(); @endphp
                                                <span class="badge bg-info">{{ $subscription->title }}</span>
                                            @else
                                                <span class="badge bg-secondary">No Plan</span>
                                            @endif
                                        </td>
                                        <td>
                                            <strong class="text-primary">{{ $company->current_month_cu ?? '0.00' }}</strong>
                                        </td>
                                        <td>
                                            <strong class="text-success">{{ $company->current_month_duration ?? '0.00' }}</strong>
                                        </td>
                                        <td>
                                            <div class="d-flex gap-1">
                                                <a href="{{ route('companies.show', $company->id) }}" 
                                                   class="btn btn-sm btn-outline-primary" 
                                                   title="View">
                                                    <i class="bx bx-show"></i>
                                                </a>
                                                <a href="{{ route('companies.metrics', $company->id) }}" 
                                                   class="btn btn-sm btn-outline-success" 
                                                   title="View Metrics">
                                                    <i class="bx bx-bar-chart-alt-2"></i>
                                                </a>
                                                <a href="{{ route('companies.edit', $company->id) }}" 
                                                   class="btn btn-sm btn-outline-warning" 
                                                   title="Edit">
                                                    <i class="bx bx-edit"></i>
                                                </a>
                                                <a href="{{ route('workspace-assignment.index', $company->id) }}" 
                                                   class="btn btn-sm btn-outline-secondary" 
                                                   title="Assign Workspace">
                                                    <i class="bx bx-layer"></i>
                                                </a>
                                                <a href="{{ route('companies.users.index', $company->id) }}" 
                                                   class="btn btn-sm btn-info text-white fw-bold" 
                                                   title="Manage Company Users">
                                                    <i class="mdi mdi-account-multiple me-1"></i>
                                                </a>
                                                <button type="button" 
                                                        class="btn btn-sm manage-subscription-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';"
                                                        title="Manage Subscription"
                                                        data-company-id="{{ $company->id }}"
                                                        data-company-name="{{ $company->name }}">
                                                    <i class="bx bx-credit-card"></i>
                                                </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-sm btn-outline-danger delete-company-btn" 
                                                            title="Delete"
                                                            data-company-name="{{ $company->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 {{ $companies->firstItem() }} to {{ $companies->lastItem() }} of {{ $companies->total() }} entries
                                </small>
                            </div>
                            <div>
                                {{ $companies->links() }}
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <div class="empty-state">
                                <i class="bx bx-buildings mb-3" style="font-size: 3rem; opacity: 0.3;"></i>
                                <h5 class="text-muted">No Companies Found</h5>
                                <p class="text-muted mb-4">No company users have been created yet.</p>
                                <a href="{{ route('companies.create') }}" class="btn btn-primary">
                                    <i class="bx bx-plus"></i> Create First Company
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Statistics Card -->
            <div class="white-box-card mt-4">
                <h5 class="mb-3">Company Statistics</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Total Companies</h6>
                                    <h4 class="mb-0 text-primary">{{ $companies->total() }}</h4>
                                </div>
                                <i class="bx bx-buildings text-primary" style="font-size: 2rem;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Active Companies</h6>
                                    <h4 class="mb-0 text-success">{{ $companies->where('email_verified_at', '!=', null)->count() }}</h4>
                                </div>
                                <i class="bx bx-check-circle text-success" style="font-size: 2rem;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Pending Verification</h6>
                                    <h4 class="mb-0 text-warning">{{ $companies->where('email_verified_at', null)->count() }}</h4>
                                </div>
                                <i class="bx bx-time text-warning" style="font-size: 2rem;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-0">Total Workspaces</h6>
                                    <h4 class="mb-0 text-info">{{ $companies->sum(function($company) { return $company->workspaces->count(); }) }}</h4>
                                </div>
                                <i class="workspace-icon text-info" style="font-size: 2rem;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Subscription Management Modal -->
    <div class="modal fade" id="subscriptionModal" tabindex="-1" aria-labelledby="subscriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background: #48cfc8; color: white;">
                    <h5 class="modal-title" id="subscriptionModalLabel">
                        <i class="bx bx-credit-card"></i> Manage Subscription Plans
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="subscriptionForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-bold">Company:</label>
                            <p id="companyName" class="mb-0"></p>
                        </div>
                        
                        <div class="mb-3">
                            <label for="subscriptionSelect" class="form-label">Select Subscription Plan:</label>
                            <select class="form-select" id="subscriptionSelect" name="subscription_plan_id">
                                <option value="">-- Select a plan or unselect current --</option>
                            </select>
                        </div>

                        <div id="currentSubscription" class="alert alert-info" style="display: none;">
                            <i class="bx bx-info-circle"></i>
                            <span class="fw-bold">Current Plan:</span> <span id="currentPlanName"></span>
                        </div>

                        <div class="alert alert-warning">
                            <i class="bx bx-warning"></i>
                            <small>
                                <strong>Note:</strong> Selecting a different plan will replace the current subscription. 
                                Selecting "-- Select a plan or unselect current --" will remove the current subscription.
                            </small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bx bx-x"></i> Cancel
                    </button>
                    <button type="button" class="btn" id="saveSubscription" style="background: #48cfc8; color: white;">
                        <i class="bx bx-check"></i> Save Changes
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- end page content -->
@endsection

@section('scripts')
<script>
    // Add any specific JavaScript for the company management page here
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-dismiss alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);

        // Handle company deletion with Bootbox confirm
        document.querySelectorAll('.delete-company-btn').forEach(function(btn) {
            btn.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-warning mt-2 mb-0">
                                 <i class="bx bx-error-circle"></i> 
                                 This action cannot be undone and will delete all associated workspaces and data.
                             </div>`,
                    buttons: {
                        confirm: {
                            label: '<i class="bx bx-trash"></i> Yes, Delete Company',
                            className: 'btn-danger'
                        },
                        cancel: {
                            label: '<i class="bx bx-x"></i> Cancel',
                            className: 'btn-secondary'
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            // Show loading state
                            btn.innerHTML = '<i class="bx bx-loader bx-spin"></i>';
                            btn.disabled = true;
                            
                            // Submit the form
                            form.submit();
                        }
                    }
                });
            });
        });

        // Handle subscription management
        let currentCompanyId = null;
        let subscriptionModal = null;
        
        // Wait a bit to ensure DOM is fully rendered
        setTimeout(function() {
            // Initialize modal instance once
            const modalElement = document.getElementById('subscriptionModal');
            if (modalElement) {
                subscriptionModal = new bootstrap.Modal(modalElement);
                console.log('Subscription modal initialized successfully');
                
                // Add event listener to reset modal state when closed
                modalElement.addEventListener('hidden.bs.modal', function () {
                    // Reset modal content when closed
                    const subscriptionSelect = document.getElementById('subscriptionSelect');
                    if (subscriptionSelect) {
                        subscriptionSelect.innerHTML = '<option>Loading...</option>';
                    }
                    currentCompanyId = null;
                });
            } else {
                console.error('Modal element with id "subscriptionModal" not found');
                return;
            }
            
            // Initialize button event listeners
            initializeSubscriptionButtons();
        }, 100);
        
        function initializeSubscriptionButtons() {
            document.querySelectorAll('.manage-subscription-btn').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                
                const companyId = this.getAttribute('data-company-id');
                const companyName = this.getAttribute('data-company-name');
                
                currentCompanyId = companyId;
                
                // Safely set company name with null check
                const companyNameElement = document.getElementById('companyName');
                if (companyNameElement) {
                    companyNameElement.textContent = companyName;
                } else {
                    console.error('Element with id "companyName" not found');
                }
                
                // Load subscription data
                loadSubscriptionData(companyId);
                
                // Show modal (reuse existing instance)
                if (subscriptionModal) {
                    subscriptionModal.show();
                } else {
                    console.error('subscriptionModal is null');
                }
            });
        });

            // Save subscription changes
            const saveBtn = document.getElementById('saveSubscription');
            if (saveBtn) {
                saveBtn.addEventListener('click', function() {
                    const subscriptionPlanId = document.getElementById('subscriptionSelect').value;
                    
                    if (currentCompanyId) {
                        saveSubscriptionChanges(currentCompanyId, subscriptionPlanId);
                    }
                });
            }
        }

        function loadSubscriptionData(companyId) {
            console.log('Loading subscription data for company:', companyId);
            
            // Show loading state
            const subscriptionSelect = document.getElementById('subscriptionSelect');
            if (!subscriptionSelect) {
                console.error('Element with id "subscriptionSelect" not found');
                return;
            }
            subscriptionSelect.innerHTML = '<option>Loading...</option>';
            
            // Get CSRF token
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || 
                            document.querySelector('input[name="_token"]')?.value;
            
            console.log('Making request to:', `/companies/${companyId}/subscription-data`);
            
            // Load available subscription plans and current subscription
            fetch(`/companies/${companyId}/subscription-data`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            })
                .then(response => {
                    console.log('Response status:', response.status);
                    console.log('Response headers:', response.headers);
                    
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Received data:', data);
                    
                    // Verify subscriptionSelect still exists
                    const currentSubscriptionSelect = document.getElementById('subscriptionSelect');
                    if (!currentSubscriptionSelect) {
                        console.error('subscriptionSelect element not found during data processing');
                        return;
                    }
                    
                    // Clear and populate subscription options
                    currentSubscriptionSelect.innerHTML = '<option value="">-- Select a plan or unselect current --</option>';
                    
                    if (data.availablePlans && Array.isArray(data.availablePlans)) {
                        data.availablePlans.forEach(plan => {
                            const option = document.createElement('option');
                            option.value = plan.id;
                            option.textContent = `${plan.title} (${plan.frequency_label})`;
                            if (data.currentSubscription && data.currentSubscription.id == plan.id) {
                                option.selected = true;
                            }
                            currentSubscriptionSelect.appendChild(option);
                        });
                    }
                    
                    // Show current subscription if exists
                    const currentSubscriptionDiv = document.getElementById('currentSubscription');
                    const currentPlanNameElement = document.getElementById('currentPlanName');
                    
                    if (data.currentSubscription && currentSubscriptionDiv && currentPlanNameElement) {
                        currentPlanNameElement.textContent = 
                            `${data.currentSubscription.title} (${data.currentSubscription.frequency_label})`;
                        currentSubscriptionDiv.style.display = 'block';
                    } else if (currentSubscriptionDiv) {
                        currentSubscriptionDiv.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('Error loading subscription data:', error);
                    console.error('Company ID:', companyId);
                    console.error('Error details:', error.message);
                    subscriptionSelect.innerHTML = '<option>Error loading plans</option>';
                });
        }

        function saveSubscriptionChanges(companyId, subscriptionPlanId) {
            const saveBtn = document.getElementById('saveSubscription');
            const originalText = saveBtn.innerHTML;
            
            // Show loading state
            saveBtn.innerHTML = '<i class="bx bx-loader bx-spin"></i> Saving...';
            saveBtn.disabled = true;
            
            const formData = new FormData();
            formData.append('_token', document.querySelector('input[name="_token"]').value);
            formData.append('subscription_plan_id', subscriptionPlanId);
            
            fetch(`/companies/${companyId}/subscription`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal and reload page to show changes
                    subscriptionModal.hide();
                    
                    // Show success message and reload
                    bootbox.alert({
                        title: 'Success',
                        message: data.message,
                        callback: function() {
                            window.location.reload();
                        }
                    });
                } else {
                    throw new Error(data.message || 'Failed to update subscription');
                }
            })
            .catch(error => {
                console.error('Error saving subscription:', error);
                bootbox.alert({
                    title: 'Error',
                    message: error.message || 'Failed to update subscription. Please try again.'
                });
            })
            .finally(() => {
                // Restore button state
                saveBtn.innerHTML = originalText;
                saveBtn.disabled = false;
            });
        }
    });

    // Sync Master Workspaces functionality
    document.getElementById('syncMasterWorkspaces').addEventListener('click', function() {
        const button = this;
        const originalContent = button.innerHTML;
        
        // Show loading state
        button.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i>';
        button.disabled = true;
        
        // Make AJAX request
        fetch('{{ route("companies.sync-master-workspaces") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Show success message
                bootbox.alert({
                    title: '<i class="bx bx-check-circle text-success"></i> Success',
                    message: data.message
                });
            } else {
                // Show error message
                bootbox.alert({
                    title: '<i class="bx bx-x-circle text-danger"></i> Error',
                    message: data.message
                });
            }
        })
        .catch(error => {
            console.error('Error syncing master workspaces:', error);
            bootbox.alert({
                title: '<i class="bx bx-x-circle text-danger"></i> Error',
                message: 'Failed to sync master workspaces. Please try again.'
            });
        })
        .finally(() => {
            // Restore button state
            button.innerHTML = originalContent;
            button.disabled = false;
        });
    });
</script>
@endsection