@extends('layout.app')

@section('title', 'Manajemen Core ODC - Sistem Manajemen ISP')

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

<div class="container-fluid py-4">
    <!-- ODC 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-primary 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">{{ $coreUsage['total'] }}</h2>
                                <small class="text-muted">Total Core</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0 text-success">{{ $coreUsage['used'] }}</h2>
                                <small class="text-muted">Core Terpakai</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0 text-primary">{{ $coreUsage['available'] }}</h2>
                                <small class="text-muted">Core Tersedia</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h2 class="mb-0">{{ $coreUsage['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($coreUsage['usage_percentage'] >= 90) bg-danger
                                @elseif($coreUsage['usage_percentage'] >= 70) bg-warning
                                @else bg-success
                                @endif" 
                                role="progressbar" 
                                style="width: {{ $coreUsage['usage_percentage'] }}%"
                                aria-valuenow="{{ $coreUsage['usage_percentage'] }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                                {{ $coreUsage['usage_percentage'] }}%
                            </div>
                        </div>
                    </div>
                    @if($infrastruktur->keterangan)
                    <div class="mt-3">
                        <strong>Keterangan:</strong> {{ $infrastruktur->keterangan }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Core 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 Core</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">
                        @php
                            $totalCores = $coreUsage['total'];
                            $usedCores = $infrastruktur->used_cores ?? [];
                            $warnaCores = ['Merah', 'Kuning', 'Hijau', 'Biru', 'Putih', 'Hitam', 'Orange', 'Coklat', 'Abu-abu', 'Pink', 'Ungu', 'Aqua'];
                        @endphp
                        @for($core = 1; $core <= $totalCores; $core++)
                            @php
                                $isUsed = in_array($core, $usedCores);
                                $warnaIndex = ($core - 1) % count($warnaCores);
                                $warna = $warnaCores[$warnaIndex];
                            @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: 120px;">
                                    <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">
                                                    Core {{ $core }}
                                                </span>
                                            </h5>
                                            @if($isUsed)
                                                <i class="fas fa-lock text-danger"></i>
                                            @else
                                                <i class="fas fa-unlock text-success"></i>
                                            @endif
                                        </div>
                                        
                                        <div class="text-center">
                                            <div class="mb-2">
                                                <span class="badge badge-secondary" style="background-color: {{ strtolower($warna) }}; color: {{ in_array($warna, ['Putih', 'Kuning']) ? '#000' : '#fff' }};">
                                                    {{ $warna }}
                                                </span>
                                            </div>
                                            @if($isUsed)
                                                <div class="text-danger small">
                                                    <i class="fas fa-times-circle"></i> Terpakai
                                                </div>
                                            @else
                                                <div class="text-success small">
                                                    <i class="fas fa-check-circle"></i> Tersedia
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection