@extends('layouts.app')

@section('title', 'API Transceiver Details')

@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;
}

/* Card Colors */
.card.bg-success {
    background-color: #9de3bf !important;
}
.card.bg-success .card-body {
    color: #2b4a34 !important;
}

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

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

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

/* Table Styles */
.table-borderless td {
    padding: 0.5rem;
    background-color: #f8f9fc;
    border-radius: 0.25rem;
}
</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>{{ $apiTransceiver->name }}
        </h1>
        <div class="btn-group">
            <a href="{{ route('api-transceivers.edit', $apiTransceiver) }}" class="btn btn-primary">
                <i class="fas fa-edit me-2"></i>Edit
            </a>
            <a href="{{ route('api-transceivers.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to List
            </a>
        </div>
    </div>

    <!-- Status Alert -->
    @if(!$apiTransceiver->is_active)
        <div class="alert alert-warning" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            This API Transceiver is currently inactive and will not forward data.
        </div>
    @endif

    <div class="row">
        <!-- Main Details -->
        <div class="col-lg-8">
            <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-info-circle me-2"></i>Transceiver Details
                    </h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <tr>
                                <td width="30%"><strong>API Client</strong></td>
                                <td>
                                    @if($apiTransceiver->apiClient)
                                        <div class="d-flex align-items-center">
                                            <span class="badge bg-primary me-2">{{ $apiTransceiver->apiClient->name }}</span>
                                            <small class="text-muted">
                                                Client ID: {{ $apiTransceiver->apiClient->client_id }}
                                            </small>
                                        </div>
                                    @else
                                        <span class="badge bg-secondary">Not Set</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Name</strong></td>
                                <td>{{ $apiTransceiver->name }}</td>
                            </tr>
                            <tr>
                                <td><strong>Direction</strong></td>
                                <td>
                                    <span class="badge bg-{{ $apiTransceiver->direction === 'bidirectional' ? 'info' : 'warning' }}">
                                        {{ ucfirst($apiTransceiver->direction) }}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Source (Receiver)</strong></td>
                                <td>
                                    @if($apiTransceiver->receiver)
                                        <div class="d-flex flex-column">
                                            <div class="fw-bold">{{ $apiTransceiver->receiver->name }}</div>
                                            <div class="small text-muted">
                                                <i class="fas fa-link me-1"></i>/api/in/{{ $apiTransceiver->receiver->endpoint }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="badge bg-secondary">Not Set</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Target</strong></td>
                                <td>
                                    @if($apiTransceiver->target)
                                        <div class="d-flex flex-column">
                                            <div class="fw-bold">{{ $apiTransceiver->target->name }}</div>
                                            <div class="small text-muted">
                                                <i class="fas fa-external-link-alt me-1"></i>{{ $apiTransceiver->target->endpoint }}
                                            </div>
                                        </div>
                                    @else
                                        <span class="badge bg-secondary">Not Set</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Status</strong></td>
                                <td>
                                    <div class="d-flex flex-column">
                                        <span class="badge bg-{{ $apiTransceiver->is_active ? 'success' : 'secondary' }} mb-1">
                                            {{ $apiTransceiver->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                        @if($apiTransceiver->auto_sync)
                                            <span class="badge bg-info">
                                                <i class="fas fa-sync-alt me-1"></i>Auto Sync
                                                @if($apiTransceiver->sync_interval)
                                                    (Every {{ $apiTransceiver->sync_interval }} minutes)
                                                @endif
                                            </span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @if($apiTransceiver->description)
                                <tr>
                                    <td><strong>Description</strong></td>
                                    <td>{{ $apiTransceiver->description }}</td>
                                </tr>
                            @endif
                            <tr>
                                <td><strong>Created At</strong></td>
                                <td>{{ $apiTransceiver->created_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                            <tr>
                                <td><strong>Last Updated</strong></td>
                                <td>{{ $apiTransceiver->updated_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions & Stats -->
        <div class="col-lg-4">
            <!-- Quick Actions -->
            <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-bolt me-2"></i>Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('api-transceivers.edit', $apiTransceiver) }}" class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>Edit Transceiver
                        </a>
                        @if($apiTransceiver->is_active)
                            <button type="button" class="btn btn-warning" onclick="toggleStatus()">
                                <i class="fas fa-pause me-2"></i>Deactivate
                            </button>
                        @else
                            <button type="button" class="btn btn-success" onclick="toggleStatus()">
                                <i class="fas fa-play me-2"></i>Activate
                            </button>
                        @endif
                        @if($apiTransceiver->auto_sync)
                            <button type="button" class="btn btn-info" onclick="syncNow()">
                                <i class="fas fa-sync me-2"></i>Sync Now
                            </button>
                        @endif
                        <button type="button" class="btn btn-danger" onclick="deleteTransceiver()">
                            <i class="fas fa-trash me-2"></i>Delete
                        </button>
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <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-chart-bar me-2"></i>Statistics
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <h4 class="text-primary mb-0">{{ number_format($apiTransceiver->total_forwarded ?? 0) }}</h4>
                            <small class="text-muted">Total Forwarded</small>
                        </div>
                        <div class="col-6 mb-3">
                            <h4 class="text-info mb-0">
                                @if($apiTransceiver->last_forwarded_at)
                                    {{ $apiTransceiver->last_forwarded_at->diffForHumans() }}
                                @else
                                    Never
                                @endif
                            </h4>
                            <small class="text-muted">Last Forwarded</small>
                        </div>
                    </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 this transceiver?</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 action="{{ route('api-transceivers.destroy', $apiTransceiver) }}" 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>
function toggleStatus() {
    const transceiverID = {{ $apiTransceiver->id }};
    const isActive = {{ $apiTransceiver->is_active ? 'true' : 'false' }};
    const action = isActive ? 'deactivate' : 'activate';
    
    if (confirm(`Are you sure you want to ${action} this transceiver?`)) {
        fetch(`/api-transceivers/${transceiverID}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').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 || !data.error) {
                // Reload page to reflect changes
                window.location.reload();
            } else {
                throw new Error(data.message || 'Failed to toggle status');
            }
        })
        .catch(error => {
            console.error('Toggle status error:', error);
            alert('Error: ' + error.message);
        });
    }
}

function syncNow() {
    const transceiverID = {{ $apiTransceiver->id }};
    
    if (confirm('Are you sure you want to sync this transceiver now?')) {
        // Show loading state
        const button = event.target.closest('button');
        const originalHtml = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Syncing...';
        button.disabled = true;
        
        fetch(`/api-transceivers/${transceiverID}/sync`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').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 completed successfully');
                } else {
                    alert('Sync completed successfully');
                }
                
                // Optionally refresh the page after a short delay
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                throw new Error(data.message || 'Failed to 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 deleteTransceiver() {
    var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    deleteModal.show();
}
</script>
@endsection