@extends('layouts.app')

@section('title', 'TCP Port ' . $tcpPort->port . ' - ' . $site->name)

@section('content')
<div class="mb-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('sites.index') }}">Sites</a></li>
            <li class="breadcrumb-item"><a href="{{ route('dashboard.show', $site) }}">{{ $site->name }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('tcp-ports.index', $site) }}">TCP Ports</a></li>
            <li class="breadcrumb-item active">Port {{ $tcpPort->port }}</li>
        </ol>
    </nav>
</div>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-ethernet"></i> Port {{ $tcpPort->port }} - {{ $tcpPort->display_name }}</h1>
    <div class="btn-group">
        <a href="{{ route('tcp-ports.edit', [$site, $tcpPort]) }}" class="btn btn-outline-secondary">
            <i class="bi bi-pencil"></i> Edit
        </a>
        <form action="{{ route('tcp-ports.destroy', [$site, $tcpPort]) }}"
              method="POST"
              class="d-inline"
              onsubmit="return confirm('Are you sure you want to delete this port monitor?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-outline-danger">
                <i class="bi bi-trash"></i> Delete
            </button>
        </form>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Port Details</h5>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-sm-3">Site</dt>
                    <dd class="col-sm-9">
                        <a href="{{ route('dashboard.show', $site) }}">{{ $site->name }}</a>
                        <br>
                        <small class="text-muted">{{ $site->url }}</small>
                    </dd>

                    <dt class="col-sm-3">Port Number</dt>
                    <dd class="col-sm-9"><strong>{{ $tcpPort->port }}</strong></dd>

                    <dt class="col-sm-3">Port Name</dt>
                    <dd class="col-sm-9">{{ $tcpPort->display_name }}</dd>

                    <dt class="col-sm-3">Status</dt>
                    <dd class="col-sm-9">
                        <span class="badge bg-{{ $tcpPort->status_color }}">
                            {{ $tcpPort->status_text }}
                        </span>
                    </dd>

                    <dt class="col-sm-3">Monitoring</dt>
                    <dd class="col-sm-9">
                        @if($tcpPort->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </dd>

                    <dt class="col-sm-3">Last Checked</dt>
                    <dd class="col-sm-9">
                        @if($tcpPort->last_checked_at)
                            {{ $tcpPort->last_checked_at->format('Y-m-d H:i:s') }}
                            <br>
                            <small class="text-muted">{{ $tcpPort->last_checked_at->diffForHumans() }}</small>
                        @else
                            <span class="text-muted">Never</span>
                        @endif
                    </dd>

                    @if($tcpPort->response_time_ms)
                        <dt class="col-sm-3">Response Time</dt>
                        <dd class="col-sm-9">{{ $tcpPort->response_time_ms }}ms</dd>
                    @endif

                    <dt class="col-sm-3">Created</dt>
                    <dd class="col-sm-9">
                        {{ $tcpPort->created_at->format('Y-m-d H:i:s') }}
                        <br>
                        <small class="text-muted">{{ $tcpPort->created_at->diffForHumans() }}</small>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">About Port {{ $tcpPort->port }}</h5>
            </div>
            <div class="card-body">
                @php
                    $commonPorts = \App\Models\TcpPort::getCommonPorts();
                    $portInfo = $commonPorts[$tcpPort->port] ?? null;
                @endphp

                @if($portInfo)
                    <p class="mb-2">
                        <strong>Common Service:</strong> {{ $portInfo }}
                    </p>
                @endif

                <p class="text-muted mb-0">
                    This monitor checks if port {{ $tcpPort->port }} is accessible on {{ $site->url }}.
                    Checks run every 10 minutes when monitoring is active.
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-3">
            <div class="card-header">
                <h5 class="mb-0">Current Status</h5>
            </div>
            <div class="card-body text-center">
                <div class="mb-3">
                    <span class="badge bg-{{ $tcpPort->status_color }} fs-5 px-4 py-2">
                        {{ $tcpPort->status_text }}
                    </span>
                </div>

                @if($tcpPort->is_open)
                    <p class="text-success mb-0">
                        <i class="bi bi-check-circle-fill"></i> Port is accessible
                    </p>
                @elseif($tcpPort->is_open === false)
                    <p class="text-danger mb-0">
                        <i class="bi bi-x-circle-fill"></i> Port is not accessible
                    </p>
                @else
                    <p class="text-muted mb-0">
                        <i class="bi bi-question-circle"></i> Not yet checked
                    </p>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('tcp-ports.index', $site) }}" class="btn btn-outline-primary">
                        <i class="bi bi-list-ul"></i> View All Ports
                    </a>
                    <a href="{{ route('dashboard.show', $site) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-bar-chart"></i> Site Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection