@extends('layout.app')

@section('title', 'Manajemen Port ODP - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Manajemen Port ODP" 
    :breadcrumbs="[
        ['name' => 'Infrastruktur', 'url' => route('infrastruktur.index')],
        ['name' => $infrastruktur->nama, 'url' => route('infrastruktur.show', $infrastruktur)],
        ['name' => 'Port Management']
    ]"
    :action="route('infrastruktur.show', $infrastruktur)" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    <!-- ODP Info Card -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3 bg-gradient-info text-white">
                    <h6 class="mb-0">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">business</i> {{ $infrastruktur->nama }}
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0">{{ $portUsage['total'] }}</h2>
                                <small class="text-muted">Total Port</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0 text-success">{{ $portUsage['used'] }}</h2>
                                <small class="text-muted">Port Terpakai</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0 text-primary">{{ $portUsage['available'] }}</h2>
                                <small class="text-muted">Port Tersedia</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0">{{ $portUsage['usage_percentage'] }}%</h2>
                                <small class="text-muted">Tingkat Penggunaan</small>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="progress" style="height: 25px;">
                            <div class="progress-bar 
                                @if($portUsage['usage_percentage'] >= 90) bg-danger
                                @elseif($portUsage['usage_percentage'] >= 70) bg-warning
                                @else bg-success
                                @endif" 
                                role="progressbar" 
                                style="width: {{ $portUsage['usage_percentage'] }}%"
                                aria-valuenow="{{ $portUsage['usage_percentage'] }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                                {{ $portUsage['usage_percentage'] }}%
                            </div>
                        </div>
                    </div>
                    @if($infrastruktur->keterangan)
                    <div class="mt-3">
                        <strong>Keterangan:</strong> {{ $infrastruktur->keterangan }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Port Grid -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">Daftar Port</h3>
                        </div>
                        <div class="col-auto">
                            <span class="badge badge-success mr-2">
                                <i class="fas fa-circle"></i> Tersedia
                            </span>
                            <span class="badge badge-danger mr-2">
                                <i class="fas fa-circle"></i> Terpakai
                            </span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        @for($port = 1; $port <= $totalPorts; $port++)
                            @php
                                $isUsed = in_array($port, $usedPorts);
                                $pelangganOnPort = $pelangganByPort->get($port, collect());
                            @endphp
                            <div class="col-md-3 col-sm-4 col-6 mb-3">
                                <div class="card border 
                                    @if($isUsed) border-danger
                                    @else border-success
                                    @endif" 
                                    style="min-height: 150px;">
                                    <div class="card-body p-3">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">
                                                <span class="badge 
                                                    @if($isUsed) badge-danger
                                                    @else badge-success
                                                    @endif">
                                                    Port {{ $port }}
                                                </span>
                                            </h5>
                                            @if($isUsed)
                                                <i class="fas fa-lock text-danger"></i>
                                            @else
                                                <i class="fas fa-unlock text-success"></i>
                                            @endif
                                        </div>
                                        
                                        @if($isUsed && $pelangganOnPort->count() > 0)
                                            @foreach($pelangganOnPort as $pelanggan)
                                                <div class="border-left border-primary pl-2 mb-2">
                                                    <div class="small">
                                                        <strong>{{ $pelanggan->nama }}</strong><br>
                                                        <span class="text-muted">{{ $pelanggan->nomor_pelanggan }}</span><br>
                                                        <a href="{{ route('pelanggan.show', $pelanggan) }}" class="btn btn-sm btn-primary btn-block mt-1">
                                                            <i class="fas fa-eye"></i> Detail
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="text-center text-muted mt-3">
                                                <i class="fas fa-circle-notch fa-2x mb-2"></i>
                                                <div>Port Kosong</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pelanggan List -->
    @if($pelangganByPort->count() > 0)
    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card shadow">
                <div class="card-header border-0">
                    <h3 class="mb-0">Daftar Pelanggan per Port</h3>
                </div>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Port</th>
                                <th scope="col">Nomor Pelanggan</th>
                                <th scope="col">Nama</th>
                                <th scope="col">Paket</th>
                                <th scope="col">Status</th>
                                <th scope="col">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($pelangganByPort->sortKeys() as $port => $pelangganList)
                                @foreach($pelangganList as $pelanggan)
                                <tr>
                                    <td>
                                        <span class="badge badge-danger">Port {{ $port }}</span>
                                    </td>
                                    <td>{{ $pelanggan->nomor_pelanggan }}</td>
                                    <td>{{ $pelanggan->nama }}</td>
                                    <td>{{ $pelanggan->paket->nama_paket ?? '-' }}</td>
                                    <td>
                                        <span class="badge badge-{{ $pelanggan->status_badge_class }}">
                                            {{ $pelanggan->status_layanan }}
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('pelanggan.show', $pelanggan) }}" class="btn btn-sm btn-primary">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection