@extends('layouts.app')

@section('title', 'Connection Types')

@section('content')
<div class="container-fluid">
    <!-- Main 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 Types Management</h2>
                            <p class="header-subtitle">Manage connection types and their configurations</p>
                        </div>
                    </div>
                    <div class="header-right">
                        <a href="{{ route('connection-types.create') }}" class="btn btn-primary-modern">
                            <i class="fas fa-plus"></i>
                            <span>Add New Connection Type</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sub Header Section -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="sub-header-modern">
                <div class="sub-header-content">
                    <div class="sub-header-left">
                        <div class="menu-icon">
                            <i class="fas fa-bars"></i>
                        </div>
                        <div class="sub-header-text">
                            <h3 class="sub-header-title">All Connection Types</h3>
                            <p class="sub-header-subtitle">
                                @if(isset($isSuperAdmin) && $isSuperAdmin)
                                    Showing all connection types (Super Admin)
                                @else
                                    Showing your ISP's connection types
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <div class="col-12">
            <div class="card-modern">
                <div class="card-body-modern">
                    @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"></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"></button>
                        </div>
                    @endif

                    <div class="table-responsive-modern">
                        <table class="table-modern">
                            <thead class="table-header-modern">
                                <tr>
                                    <th>ID</th>
                                    <th>Type Name</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody class="table-body-modern">
                                @forelse($connectionTypes as $connectionType)
                                    <tr class="table-row-modern">
                                        <td class="table-cell-id">
                                            <div class="id-badge">{{ $connectionType->id }}</div>
                                        </td>
                                        <td class="table-cell-name">
                                            <div class="name-content">
                                                <i class="fas fa-network-wired name-icon"></i>
                                                <span class="name-text">{{ $connectionType->name }}</span>
                                            </div>
                                        </td>
                                        <td class="table-cell-description">
                                            <span class="description-text">{{ $connectionType->description ?: '-' }}</span>
                                        </td>
                                        <td class="table-cell-status">
                                            @if($connectionType->is_active)
                                                <span class="status-badge status-active">
                                                    <i class="fas fa-check"></i>
                                                    <span>Active</span>
                                                </span>
                                            @else
                                                <span class="status-badge status-inactive">
                                                    <i class="fas fa-times"></i>
                                                    <span>Inactive</span>
                                                </span>
                                            @endif
                                        </td>
                                        <td class="table-cell-date">
                                            <span class="date-text">{{ $connectionType->created_at->format('M d, Y') }}</span>
                                        </td>
                                        <td class="table-cell-actions">
                                            <div class="action-buttons">
                                                <a href="{{ route('connection-types.show', $connectionType) }}" 
                                                   class="action-btn action-view" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <a href="{{ route('connection-types.edit', $connectionType) }}" 
                                                   class="action-btn action-edit" title="Edit Type">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <form action="{{ route('connection-types.destroy', $connectionType) }}" 
                                                      method="POST" class="d-inline" 
                                                      onsubmit="return confirm('Are you sure you want to delete this connection type?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="action-btn action-delete" title="Delete Type">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="empty-state">
                                            <div class="empty-content">
                                                <i class="fas fa-info-circle empty-icon"></i>
                                                <h4 class="empty-title">No Connection Types Found</h4>
                                                <p class="empty-text">Get started by creating your first connection type.</p>
                                                <a href="{{ route('connection-types.create') }}" class="btn btn-primary-modern">
                                                    <i class="fas fa-plus"></i>
                                                    <span>Add First Connection Type</span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </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-primary-modern{background:#3b82f6;border:none;border-radius:8px;padding:0.75rem 1.5rem;color:white;font-weight:600;display:flex;align-items:center;gap:0.5rem;transition:all 0.3s ease;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}
.sub-header-modern{background:#2F4255;border-radius:8px;padding:1rem 1.5rem;margin-bottom:1rem}
.sub-header-content{display:flex;align-items:center;gap:1rem}
.menu-icon{color:white;font-size:1.2rem}
.sub-header-title{color:white;font-size:1.1rem;font-weight:600;margin:0}
.sub-header-subtitle{color:rgba(255,255,255,0.8);font-size:0.85rem;margin:0.25rem 0 0 0}
.card-modern{background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:none;overflow:hidden}
.card-body-modern{padding:0}
.table-responsive-modern{overflow-x:auto}
.table-modern{width:100%;border-collapse:collapse;margin:0}
.table-header-modern{background:#f8fafc}
.table-header-modern th{padding:1rem;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.5px}
.table-body-modern{background:white}
.table-row-modern{border-bottom:1px solid #f3f4f6;transition:all 0.2s ease}
.table-row-modern:hover{background:#f9fafb}
.table-cell-id{padding:1rem;width:80px}
.id-badge{width:32px;height:32px;background:#e5e7eb;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:#374151;font-size:0.875rem}
.table-cell-name{padding:1rem;min-width:200px}
.name-content{display:flex;align-items:center;gap:0.75rem}
.name-icon{color:#3b82f6;font-size:1rem}
.name-text{font-weight:600;color:#111827;font-size:0.95rem}
.table-cell-description{padding:1rem;min-width:250px}
.description-text{color:#6b7280;font-size:0.875rem}
.table-cell-status{padding:1rem;width:120px}
.status-badge{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}
.table-cell-date{padding:1rem;width:120px}
.date-text{color:#6b7280;font-size:0.875rem}
.table-cell-actions{padding:1rem;width:140px}
.action-buttons{display:flex;gap:0.5rem}
.action-btn{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.2s ease;border:none;font-size:0.875rem}
.action-view{background:#dbeafe;color:#1d4ed8}
.action-view:hover{background:#bfdbfe;color:#1e40af}
.action-edit{background:#dbeafe;color:#1d4ed8}
.action-edit:hover{background:#bfdbfe;color:#1e40af}
.action-delete{background:#fee2e2;color:#dc2626}
.action-delete:hover{background:#fecaca;color:#b91c1c}
.empty-state{text-align:center;padding:3rem 1rem}
.empty-content{max-width:400px;margin:0 auto}
.empty-icon{font-size:3rem;color:#d1d5db;margin-bottom:1rem}
.empty-title{color:#374151;font-size:1.25rem;font-weight:600;margin-bottom:0.5rem}
.empty-text{color:#6b7280;margin-bottom:1.5rem}
@media (max-width:768px){
.header-content{flex-direction:column;gap:1rem;text-align:center}
.sub-header-content{flex-direction:column;text-align:center;gap:0.5rem}
.table-responsive-modern{font-size:0.875rem}
.action-buttons{flex-direction:column;gap:0.25rem}
}
</style>
@endsection
@endsection