@extends('layouts.app')

@section('title', 'ISP Details')
@section('page-title', 'ISP Details')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-network-wired me-2"></i>
                                ISP Details: {{ $branch->name }}
                            </h4>
                            <small class="text-muted">Complete information about this ISP</small>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('branches.index') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back to ISP List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left Column - Basic Information -->
        <div class="col-lg-8">
            <!-- Basic ISP Information -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        Basic Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-building me-1"></i>ISP Name
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->name }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-code me-1"></i>ISP Code
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-primary fs-6">{{ $branch->code }}</span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-toggle-on me-1"></i>Status
                            </label>
                            <p class="mb-0">
                                @if($branch->is_active)
                                    <span class="badge bg-success">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                @else
                                    <span class="badge bg-danger">
                                        <i class="fas fa-times-circle me-1"></i>Inactive
                                    </span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-calendar me-1"></i>Created Date
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->created_at->format('M d, Y \a\t h:i A') }}</p>
                        </div>
                        @if($branch->description)
                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-align-left me-1"></i>Description
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->description }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-address-book me-2"></i>
                        Contact Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-phone me-1"></i>Phone Number
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->phone ?? 'Not provided' }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-envelope me-1"></i>Email Address
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->email ?? 'Not provided' }}</p>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-map-marker-alt me-1"></i>Address
                            </label>
                            <p class="mb-0 text-dark">{{ $branch->address ?? 'Not provided' }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mikrotik Servers -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-server me-2"></i>
                        Mikrotik Servers ({{ $branch->mikrotikServers->count() }})
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($branch->mikrotikServers->count() > 0)
                        <div class="row">
                            @foreach($branch->mikrotikServers as $server)
                                <div class="col-md-6 mb-3">
                                    <div class="border rounded p-3 {{ $server->pivot->is_primary ? 'border-warning bg-light' : '' }}">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">
                                                <i class="fas fa-server me-1"></i>{{ $server->name }}
                                                @if($server->pivot->is_primary)
                                                    <i class="fas fa-star text-warning ms-1" title="Primary Server"></i>
                                                @endif
                                            </h6>
                                            <span class="badge bg-{{ $server->is_active ? 'success' : 'danger' }}">
                                                {{ $server->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </div>
                                        <div class="text-muted small">
                                            <div><strong>Host:</strong> {{ $server->host }}:{{ $server->port }}</div>
                                            <div><strong>Username:</strong> {{ $server->username }}</div>
                                            <div><strong>Status:</strong> 
                                                <span class="badge bg-{{ $server->status === 'online' ? 'success' : 'danger' }} badge-sm">
                                                    {{ ucfirst($server->status) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-server fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No Mikrotik servers assigned to this ISP.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Associated Clients -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-users me-2"></i>
                        Associated Clients ({{ $branch->clients->count() }})
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($branch->clients->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-sm table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th><i class="fas fa-hashtag me-1"></i>ID</th>
                                        <th><i class="fas fa-user me-1"></i>Name</th>
                                        <th><i class="fas fa-at me-1"></i>Username</th>
                                        <th><i class="fas fa-toggle-on me-1"></i>Status</th>
                                        <th><i class="fas fa-calendar me-1"></i>Created</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($branch->clients as $client)
                                        <tr>
                                            <td><span class="badge bg-secondary">{{ $client->id }}</span></td>
                                            <td>{{ $client->name }}</td>
                                            <td><code>{{ $client->username ?? 'N/A' }}</code></td>
                                            <td>
                                                @if($client->status === 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($client->status === 'suspended')
                                                    <span class="badge bg-warning">Suspended</span>
                                                @else
                                                    <span class="badge bg-secondary">Inactive</span>
                                                @endif
                                            </td>
                                            <td>{{ $client->created_at->format('M d, Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted mb-0">No clients associated with this ISP.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column - Statistics & Additional Info -->
        <div class="col-lg-4">
            <!-- Statistics -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Statistics
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3">
                                <i class="fas fa-users fa-2x text-primary mb-2"></i>
                                <h4 class="mb-0">{{ $branch->clients->count() }}</h4>
                                <small class="text-muted">Total Clients</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3">
                                <i class="fas fa-server fa-2x text-info mb-2"></i>
                                <h4 class="mb-0">{{ $branch->mikrotikServers->count() }}</h4>
                                <small class="text-muted">Mikrotik Servers</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3">
                                <i class="fas fa-user-tie fa-2x text-success mb-2"></i>
                                <h4 class="mb-0">{{ $branch->users->count() }}</h4>
                                <small class="text-muted">Assigned Users</small>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="border rounded p-3">
                                <i class="fas fa-map fa-2x text-warning mb-2"></i>
                                <h4 class="mb-0">{{ $branch->zones->count() }}</h4>
                                <small class="text-muted">Zones</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- System Information -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>
                        System Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            <i class="fas fa-id-card me-1"></i>ISP ID
                        </label>
                        <p class="mb-0 text-dark">{{ $branch->id }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            <i class="fas fa-clock me-1"></i>Account Age
                        </label>
                        <p class="mb-0 text-dark">{{ $branch->created_at->diffForHumans() }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">
                            <i class="fas fa-edit me-1"></i>Last Updated
                        </label>
                        <p class="mb-0 text-dark">{{ $branch->updated_at->format('M d, Y \a\t h:i A') }}</p>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-bold">
                            <i class="fas fa-history me-1"></i>Update Duration
                        </label>
                        <p class="mb-0 text-dark">{{ $branch->updated_at->diffForHumans() }}</p>
                    </div>
                </div>
            </div>

            <!-- Assigned Users -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-user-tie me-2"></i>
                        Assigned Users ({{ $branch->users->count() }})
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($branch->users->count() > 0)
                        @foreach($branch->users as $user)
                            <div class="d-flex align-items-center mb-3 p-2 border rounded">
                                <div class="flex-shrink-0">
                                    @if($user->profile_photo && Storage::disk('public')->exists($user->profile_photo))
                                        <img src="{{ Storage::disk('public')->url($user->profile_photo) }}" 
                                             alt="{{ $user->name }}" 
                                             class="rounded-circle" 
                                             width="40" height="40"
                                             style="object-fit: cover;">
                                    @else
                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white" 
                                             style="width: 40px; height: 40px;">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <h6 class="mb-0">{{ $user->name }}</h6>
                                    <small class="text-muted">{{ $user->email }}</small>
                                    <br>
                                    <span class="badge bg-{{ $user->role === 'admin' ? 'danger' : ($user->role === 'manager' ? 'warning' : 'info') }} badge-sm">
                                        {{ ucfirst($user->role) }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-user-tie fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No users assigned to this ISP.</p>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</div>
@endsection