@extends('layouts.app')

@section('title', 'API Transceivers')

@section('breadcrumb')
    <li class="breadcrumb-item active">API Transceivers</li>
@endsection

@section('styles')
<style>
/* Badge Colors */
.badge.bg-success {
    color: #2b4a34 !important;
    background-color: #9de3bf !important;
}

.badge.bg-primary {
    color: #1a365d !important;
    background-color: #9ec5fe !important;
}

.badge.bg-info {
    color: #1e4e8c !important;
    background-color: #a5d7f7 !important;
}

.badge.bg-warning {
    color: #603b00 !important;
    background-color: #ffd699 !important;
}

.badge.bg-secondary {
    color: #383d41 !important;
    background-color: #e2e6ea !important;
}

.badge.bg-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
}

/* Icon Colors */
.icon-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.icon-circle i {
    color: #fff !important;
}

.table td {
    vertical-align: middle;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-exchange-alt me-2"></i>API Transceivers
        </h1>
        <a href="{{ route('api-transceivers.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>Add New Transceiver
        </a>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-start border-primary border-4 shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                                Total Transceivers
                            </div>
                            <div class="h5 mb-0 fw-bold text-gray-800">
                                {{ $api_transceivers->total() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exchange-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-start border-success border-4 shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs fw-bold text-success text-uppercase mb-1">
                                Active Transceivers
                            </div>
                            <div class="h5 mb-0 fw-bold text-gray-800">
                                {{ $api_transceivers->where('is_active', true)->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-start border-info border-4 shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs fw-bold text-info text-uppercase mb-1">
                                Auto Sync Enabled
                            </div>
                            <div class="h5 mb-0 fw-bold text-gray-800">
                                {{ $api_transceivers->where('auto_sync', true)->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-sync fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-start border-warning border-4 shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col me-2">
                            <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                                Bidirectional
                            </div>
                            <div class="h5 mb-0 fw-bold text-gray-800">
                                {{ $api_transceivers->where('direction', 'bidirectional')->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exchange fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Row -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-list me-2"></i>All Transceivers
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th style="width: 25%">Name & Description</th>
                                    <th style="width: 15%">API Client</th>
                                    <th style="width: 20%">Source (Receiver)</th>
                                    <th style="width: 20%">Target</th>
                                    <th style="width: 10%">Status</th>
                                    <th style="width: 10%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($api_transceivers as $transceiver)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle bg-{{ $transceiver->is_active ? 'success' : 'secondary' }} me-2">
                                                    <i class="fas fa-exchange-alt text-white"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold text-dark">{{ $transceiver->name }}</div>
                                                    @if($transceiver->description)
                                                        <div class="small text-muted">{{ Str::limit($transceiver->description, 50) }}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            @if($transceiver->apiClient)
                                                <div class="d-flex align-items-center">
                                                    <span class="badge bg-primary me-2">{{ $transceiver->apiClient->name }}</span>
                                                    <small class="text-muted">ID: {{ Str::limit($transceiver->apiClient->client_id, 8) }}</small>
                                                </div>
                                            @else
                                                <span class="badge bg-secondary">Not Set</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($transceiver->receiver)
                                                <div class="small">
                                                    <div class="fw-bold">
                                                        <i class="fas fa-inbox me-1 text-info"></i>
                                                        {{ $transceiver->receiver->name }}
                                                    </div>
                                                    <div class="text-muted">
                                                        <i class="fas fa-link me-1"></i>
                                                        /api/in/{{ $transceiver->receiver->endpoint }}
                                                    </div>
                                                </div>
                                            @else
                                                <span class="badge bg-secondary">Not Set</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($transceiver->target)
                                                <div class="small">
                                                    <div class="fw-bold">
                                                        <i class="fas fa-external-link-alt me-1 text-success"></i>
                                                        {{ $transceiver->target->name }}
                                                    </div>
                                                    <div class="text-muted">
                                                        <i class="fas fa-link me-1"></i>
                                                        {{ Str::limit($transceiver->target->endpoint, 30) }}
                                                    </div>
                                                </div>
                                            @else
                                                <span class="badge bg-secondary">Not Set</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="badge bg-{{ $transceiver->is_active ? 'success' : 'secondary' }} mb-1">
                                                    <i class="fas fa-{{ $transceiver->is_active ? 'check' : 'times' }} me-1"></i>
                                                    {{ $transceiver->is_active ? 'Active' : 'Inactive' }}
                                                </span>
                                                @if($transceiver->auto_sync)
                                                    <span class="badge bg-info">
                                                        <i class="fas fa-sync-alt me-1"></i>Auto Sync
                                                        @if($transceiver->sync_interval)
                                                            ({{ $transceiver->sync_interval }}m)
                                                        @endif
                                                    </span>
                                                @endif
                                                @if($transceiver->direction === 'bidirectional')
                                                    <span class="badge bg-warning mt-1">
                                                        <i class="fas fa-exchange me-1"></i>Bidirectional
                                                    </span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{{ route('api-transceivers.show', $transceiver) }}" 
                                                   class="btn btn-sm btn-info" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('api-transceivers.edit', $transceiver) }}" 
                                                   class="btn btn-sm btn-primary" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                @if($transceiver->auto_sync)
                                                    <button type="button" class="btn btn-sm btn-warning sync-btn" 
                                                            data-transceiver-id="{{ $transceiver->id }}" title="Sync Now">
                                                        <i class="fas fa-sync"></i>
                                                    </button>
                                                @endif
                                                <button type="button" class="btn btn-sm btn-danger delete-btn" 
                                                        data-transceiver-id="{{ $transceiver->id }}" 
                                                        data-transceiver-name="{{ $transceiver->name }}" 
                                                        title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="text-muted">
                                                <i class="fas fa-inbox fa-3x mb-3"></i>
                                                <h5>No Transceivers Found</h5>
                                                <p>Start by creating your first API transceiver.</p>
                                                <a href="{{ route('api-transceivers.create') }}" class="btn btn-primary">
                                                    <i class="fas fa-plus me-2"></i>Create Transceiver
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <div class="text-muted">
                            Showing {{ $api_transceivers->firstItem() ?? 0 }} to {{ $api_transceivers->lastItem() ?? 0 }} 
                            of {{ $api_transceivers->total() ?? 0 }} transceivers
                        </div>
                        {{ $api_transceivers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the transceiver "<strong><span id="deleteTransceiverName"></span></strong>"?</p>
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>This action cannot be undone.
                </div>
            </div>
            <div class="modal-footer">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection



@section('scripts')
<script>
// Debug: Log that script is loading
console.log('API Transceivers script loading...');

// Function to handle sync action
function handleSyncNow(id, button) {
    console.log('handleSyncNow called with id:', id);
    
    if (!confirm('Are you sure you want to sync this transceiver now?')) {
        return;
    }
    
    // Show loading state
    const originalHtml = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    button.disabled = true;
    
    // Get CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]');
    if (!csrfToken) {
        alert('CSRF token not found');
        button.innerHTML = originalHtml;
        button.disabled = false;
        return;
    }
    
    // Send sync request
    fetch(`/api-transceivers/${id}/sync`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': csrfToken.content,
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Show success message
            if (window.Toast && window.Toast.success) {
                window.Toast.success('Sync started successfully');
            } else {
                alert('Sync started successfully');
            }
            
            // Optionally refresh the page after a short delay
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            throw new Error(data.message || 'Failed to start sync');
        }
    })
    .catch(error => {
        console.error('Sync error:', error);
        
        if (window.Toast && window.Toast.error) {
            window.Toast.error('Error: ' + error.message);
        } else {
            alert('Error: ' + error.message);
        }
    })
    .finally(() => {
        // Restore button state
        button.innerHTML = originalHtml;
        button.disabled = false;
    });
}

// Function to handle delete action
function handleDeleteTransceiver(id, name) {
    console.log('handleDeleteTransceiver called with:', id, name);
    
    try {
        document.getElementById('deleteTransceiverName').textContent = name;
        document.getElementById('deleteForm').action = `/api-transceivers/${id}`;
        var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        deleteModal.show();
    } catch (error) {
        console.error('Error in handleDeleteTransceiver:', error);
        alert('Error opening delete modal: ' + error.message);
    }
}

// Document ready handler - Attach event listeners
document.addEventListener('DOMContentLoaded', function() {
    console.log('API Transceivers page loaded - Setting up event listeners');
    
    // Attach sync button event listeners
    const syncButtons = document.querySelectorAll('.sync-btn');
    console.log('Found sync buttons:', syncButtons.length);
    
    syncButtons.forEach(button => {
        const transceiverID = button.getAttribute('data-transceiver-id');
        console.log('Attaching sync listener to button for transceiver:', transceiverID);
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Sync button clicked for transceiver:', transceiverID);
            handleSyncNow(transceiverID, button);
        });
    });
    
    // Attach delete button event listeners
    const deleteButtons = document.querySelectorAll('.delete-btn');
    console.log('Found delete buttons:', deleteButtons.length);
    
    deleteButtons.forEach(button => {
        const transceiverID = button.getAttribute('data-transceiver-id');
        const transceiverName = button.getAttribute('data-transceiver-name');
        console.log('Attaching delete listener to button for transceiver:', transceiverID, transceiverName);
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('Delete button clicked for transceiver:', transceiverID);
            handleDeleteTransceiver(transceiverID, transceiverName);
        });
    });
    
    console.log('All event listeners attached successfully');
    
    // Add global error handling for any uncaught JavaScript errors
    window.addEventListener('error', function(e) {
        console.error('JavaScript Error:', e.error);
    });
});

console.log('API Transceivers script loaded successfully');
</script>
@endsection