@extends('layouts.app')

@section('title', 'Switches - ISP ERP System')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-0">
                                <i class="fas fa-network-wired me-2"></i>
                                Network Switches
                            </h3>
                            <p class="mb-0 opacity-75">Manage network switches and their configurations</p>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('switches.create') }}" class="btn btn-primary btn-custom">
                                <i class="fas fa-plus me-2"></i>Add Switch
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body">
                    <form method="GET" action="{{ route('switches.index') }}" class="row g-3">
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text bg-transparent border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" name="search" class="form-control border-start-0" 
                                       placeholder="Search switches..." value="{{ request('search') }}">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary btn-custom w-100">
                                <i class="fas fa-filter me-2"></i>Search
                            </button>
                        </div>
                        <div class="col-md-2">
                            <a href="{{ route('switches.index') }}" class="btn btn-secondary btn-custom w-100">
                                <i class="fas fa-redo me-2"></i>Reset
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Switches List -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-list me-2"></i>
                        All Switches ({{ $switches->total() }})
                    </h4>
                </div>
                <div class="custom-card-body">
                    @if($switches->count() > 0)
                        <div class="table-responsive">
                            <table class="table custom-table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>IP Address</th>
                                        <th>Community</th>
                                        <th>Brand</th>
                                        <th>Location</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($switches as $switch)
                                        <tr>
                                            <td>{{ $switches->firstItem() + $loop->index }}</td>
                                            <td>
                                                <strong>{{ $switch->name }}</strong>
                                            </td>
                                            <td>
                                                <code class="text-primary">{{ $switch->ip }}</code>
                                            </td>
                                            <td>
                                                <span class="badge bg-info custom-badge">{{ $switch->community }}</span>
                                            </td>
                                            <td>{{ $switch->brand ?? '—' }}</td>
                                            <td>{{ $switch->location ?? '—' }}</td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ $switch->created_at->format('M d, Y') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{{ route('switches.show', $switch->id) }}" 
                                                       class="btn btn-info btn-custom" title="View">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    <a href="{{ route('switches.edit', $switch->id) }}" 
                                                       class="btn btn-warning btn-custom" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('switches.destroy', $switch->id) }}" 
                                                          method="POST" class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to delete this switch?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger btn-custom" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-4">
                            {{ $switches->links() }}
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-network-wired fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No switches found</h5>
                            <p class="text-muted">Get started by adding your first network switch.</p>
                            <a href="{{ route('switches.create') }}" class="btn btn-primary btn-custom mt-3">
                                <i class="fas fa-plus me-2"></i>Add Switch
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection