@extends('layouts.app')

@section('title', 'View Connection Type')

@section('content')
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header-modern">
                <div class="header-content">
                    <div class="header-left">
                        <div class="header-icon">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <div class="header-text">
                            <h2 class="header-title">Connection Type Details</h2>
                            <p class="header-subtitle">View connection type information</p>
                        </div>
                    </div>
                    <div class="header-right">
                        <div class="btn-group-modern">
                            <a href="{{ route('connection-types.edit', $connectionType) }}" class="btn btn-warning-modern">
                                <i class="fas fa-edit"></i>
                                <span>Edit</span>
                            </a>
                            <a href="{{ route('connection-types.index') }}" class="btn btn-secondary-modern">
                                <i class="fas fa-arrow-left"></i>
                                <span>Back to List</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Section -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card-modern">
                <div class="card-header-modern">
                    <h5 class="card-title-modern">
                        <i class="fas fa-info-circle me-2"></i>
                        Connection Type Information
                    </h5>
                </div>
                <div class="card-body-modern">
                    <div class="info-grid">
                        <div class="info-section">
                            <h6 class="info-section-title">Basic Information</h6>
                            <div class="info-items">
                                <div class="info-item-modern">
                                    <div class="info-item-header">
                                        <i class="fas fa-hashtag info-icon"></i>
                                        <span class="info-label">ID</span>
                                    </div>
                                    <span class="info-value">{{ $connectionType->id }}</span>
                                </div>
                                
                                <div class="info-item-modern">
                                    <div class="info-item-header">
                                        <i class="fas fa-tag info-icon"></i>
                                        <span class="info-label">Name</span>
                                    </div>
                                    <span class="info-value info-value-primary">{{ $connectionType->name }}</span>
                                </div>
                                
                                <div class="info-item-modern">
                                    <div class="info-item-header">
                                        <i class="fas fa-toggle-on info-icon"></i>
                                        <span class="info-label">Status</span>
                                    </div>
                                    <span class="info-value">
                                        @if($connectionType->is_active)
                                            <span class="status-badge-modern status-active">
                                                <i class="fas fa-check"></i>
                                                <span>Active</span>
                                            </span>
                                        @else
                                            <span class="status-badge-modern status-inactive">
                                                <i class="fas fa-times"></i>
                                                <span>Inactive</span>
                                            </span>
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>

                        @if($connectionType->description)
                        <div class="info-section">
                            <h6 class="info-section-title">Description</h6>
                            <div class="info-items">
                                <div class="info-item-modern info-item-full">
                                    <div class="info-item-header">
                                        <i class="fas fa-align-left info-icon"></i>
                                        <span class="info-label">Description</span>
                                    </div>
                                    <div class="info-value info-value-description">{{ $connectionType->description }}</div>
                                </div>
                            </div>
                        </div>
                        @endif

                        <div class="info-section">
                            <h6 class="info-section-title">Timestamps</h6>
                            <div class="info-items">
                                <div class="info-item-modern">
                                    <div class="info-item-header">
                                        <i class="fas fa-calendar-plus info-icon"></i>
                                        <span class="info-label">Created At</span>
                                    </div>
                                    <span class="info-value">{{ $connectionType->created_at->format('M d, Y H:i A') }}</span>
                                </div>
                                
                                <div class="info-item-modern">
                                    <div class="info-item-header">
                                        <i class="fas fa-calendar-edit info-icon"></i>
                                        <span class="info-label">Updated At</span>
                                    </div>
                                    <span class="info-value">{{ $connectionType->updated_at->format('M d, Y H:i A') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('styles')
<style>
.page-header-modern{background:#2F4255;border-radius:12px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 20px rgba(47,66,85,0.3)}
.header-content{display:flex;justify-content:space-between;align-items:center}
.header-left{display:flex;align-items:center;gap:1rem}
.header-icon{width:60px;height:60px;background:rgba(255,255,255,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white}
.header-title{color:white;font-size:1.75rem;font-weight:700;margin:0}
.header-subtitle{color:rgba(255,255,255,0.8);font-size:0.95rem;margin:0.25rem 0 0 0}
.btn-group-modern{display:flex;gap:0.75rem}
.btn-primary-modern,.btn-secondary-modern,.btn-warning-modern{border:none;border-radius:8px;padding:0.75rem 1.5rem;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease;text-decoration:none}
.btn-primary-modern{background:#3b82f6;color:white;box-shadow:0 2px 10px rgba(59,130,246,0.3)}
.btn-primary-modern:hover{background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 20px rgba(59,130,246,0.4);color:white}
.btn-secondary-modern{background:#6b7280;color:white;box-shadow:0 2px 10px rgba(107,114,128,0.3)}
.btn-secondary-modern:hover{background:#4b5563;transform:translateY(-2px);box-shadow:0 4px 20px rgba(107,114,128,0.4);color:white}
.btn-warning-modern{background:#f59e0b;color:white;box-shadow:0 2px 10px rgba(245,158,11,0.3)}
.btn-warning-modern:hover{background:#d97706;transform:translateY(-2px);box-shadow:0 4px 20px rgba(245,158,11,0.4);color:white}
.card-modern{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:none;overflow:hidden}
.card-header-modern{background:#f8fafc;padding:1.5rem;border-bottom:1px solid #e5e7eb}
.card-title-modern{color:#374151;font-size:1.1rem;font-weight:600;margin:0;display:flex;align-items:center}
.card-body-modern{padding:2rem}
.info-grid{display:flex;flex-direction:column;gap:2rem}
.info-section{background:#f9fafb;border-radius:8px;padding:1.5rem;border:1px solid #e5e7eb}
.info-section-title{color:#374151;font-size:1rem;font-weight:600;margin-bottom:1rem;padding-bottom:0.5rem;border-bottom:2px solid #e5e7eb}
.info-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.info-item-modern{background:white;border-radius:8px;padding:1rem;border:1px solid #e5e7eb;transition:all 0.2s ease}
.info-item-modern:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1);transform:translateY(-1px)}
.info-item-full{grid-column:1/-1}
.info-item-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem}
.info-icon{color:#3b82f6;font-size:0.875rem}
.info-label{color:#6b7280;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.info-value{color:#111827;font-size:0.95rem;font-weight:500}
.info-value-primary{color:#1e40af;font-weight:600;font-size:1rem}
.info-value-description{line-height:1.6;color:#374151}
.status-badge-modern{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;border-radius:20px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.status-active{background:#dcfce7;color:#166534}
.status-inactive{background:#f3f4f6;color:#6b7280}
@media (max-width:768px){
.header-content{flex-direction:column;gap:1rem;text-align:center}
.btn-group-modern{flex-direction:column;width:100%}
.info-items{grid-template-columns:1fr}
.card-body-modern{padding:1rem}
}
</style>
@endsection
@endsection