@extends('layouts.app')

@section('center')

@php
    use Carbon\Carbon;

    $totalPoles = count($data);
    $totalConnections = $data->sum('total_connections');
    $totalSending = $data->sum('sending_connections');
    $totalNotSending = $data->sum('not_sending_connections');
@endphp

<style>
.dashboard-title{
    text-align:center;
    font-weight:800;
    color:#111827;
    margin-bottom:25px;
}

.summary-card{
    background:#fff;
    border-radius:16px;
    padding:20px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:flex;
    align-items:center;
    gap:15px;
    height:100%;
    border-left:5px solid #ddd;
}

.summary-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.summary-card h6{
    margin:0;
    font-size:13px;
    color:#6b7280;
    font-weight:700;
    text-transform:uppercase;
}

.summary-card h3{
    margin:4px 0 0;
    font-size:28px;
    font-weight:800;
    color:#111827;
}

.border-total{ border-left-color:#2563eb; }
.border-online{ border-left-color:#16a34a; }
.border-offline{ border-left-color:#dc2626; }
.border-pole{ border-left-color:#7c3aed; }

.icon-total{ background:#2563eb; }
.icon-online{ background:#16a34a; }
.icon-offline{ background:#dc2626; }
.icon-pole{ background:#7c3aed; }

.table-card{
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    padding:20px;
    margin-top:20px;
}

.table thead th{
    background:#111827;
    color:#fff;
    font-size:13px;
    text-transform:uppercase;
    white-space:nowrap;
}

.table tbody td{
    vertical-align:middle;
    font-size:13px;
}

.status-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:50px;
    font-size:12px;
    font-weight:800;
    color:#fff;
}

.bg-online{
    background:#16a34a;
}

.bg-partial{
    background:#f97316;
}

.bg-offline{
    background:#dc2626;
}

.progress{
    height:10px;
    border-radius:50px;
    background:#e5e7eb;
    overflow:hidden;
}

.progress-bar{
    height:10px;
    background:#16a34a;
}

.search-form{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    max-width:500px;
}

.search-form input{
    border-radius:10px;
}

.search-form button,
.search-form a{
    border-radius:10px;
    font-weight:700;
}

.no-data{
    text-align:center;
    padding:30px;
    color:#6b7280;
    font-weight:700;
}

@media(max-width:575px){
    .search-form{
        flex-direction:column;
        max-width:100%;
    }

    .dashboard-title{
        font-size:20px;
    }
}
</style>

<h3 class="dashboard-title">
    Pole Wise Connection Sending Data Count
</h3>

<div class="row gutters mb-4">

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-pole">
            <div class="summary-icon icon-pole">
                <i class="fas fa-broadcast-tower"></i>
            </div>
            <div>
                <h6>Total Poles</h6>
                <h3>{{ $totalPoles }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-total">
            <div class="summary-icon icon-total">
                <i class="fas fa-plug"></i>
            </div>
            <div>
                <h6>Total Connections</h6>
                <h3>{{ $totalConnections }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-online">
            <div class="summary-icon icon-online">
                <i class="fas fa-wifi"></i>
            </div>
            <div>
                <h6>Sending Data</h6>
                <h3>{{ $totalSending }}</h3>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 mb-3">
        <div class="summary-card border-offline">
            <div class="summary-icon icon-offline">
                <i class="fas fa-times-circle"></i>
            </div>
            <div>
                <h6>Not Sending</h6>
                <h3>{{ $totalNotSending }}</h3>
            </div>
        </div>
    </div>

</div>

<div class="table-card">

    <form method="GET" action="{{ route('pole.connection.count') }}" class="search-form">

        <input type="text"
               name="search"
               class="form-control"
               value="{{ $search ?? '' }}"
               placeholder="Search pole or connection device ID">

        <button type="submit" class="btn btn-primary">
            <i class="fas fa-search"></i>
            Search
        </button>

        <a href="{{ route('pole.connection.count') }}" class="btn btn-secondary">
            Reset
        </a>

    </form>

    <div class="table-responsive">

        <table class="table table-bordered table-hover">

            <thead>
                <tr>
                    <th>#</th>
                    <th>Pole Device ID</th>
                    <th>Total Connections</th>
                    <th>Sending Data</th>
                    <th>Not Sending</th>
                    <th>Sending %</th>
                    <th>Last Connection Update</th>
                    <th>Status</th>
                    <th>Connected</th>
                </tr>
            </thead>

            <tbody>

            @forelse($data as $index => $row)

                @php
                    $total = (int) ($row->total_connections ?? 0);
                    $sending = (int) ($row->sending_connections ?? 0);
                    $notSending = (int) ($row->not_sending_connections ?? 0);

                    $percentage = $total > 0 ? round(($sending / $total) * 100, 1) : 0;

                    if ($sending == $total && $total > 0) {
                        $status = 'All Sending';
                        $statusClass = 'bg-online';
                    } elseif ($sending > 0) {
                        $status = 'Partial Sending';
                        $statusClass = 'bg-partial';
                    } else {
                        $status = 'Not Sending';
                        $statusClass = 'bg-offline';
                    }

                    if (!empty($row->last_connection_update)) {
                        $lastUpdate = Carbon::parse($row->last_connection_update);
                        $lastPulse = $lastUpdate->format('d M Y, h:i A');
                        $age = $lastUpdate->diffForHumans();
                    } else {
                        $lastPulse = 'Never';
                        $age = 'Never';
                    }
                @endphp

                <tr>
                    <td>{{ $index + 1 }}</td>

                    <td>
                        <strong>{{ $row->pole_device_id }}</strong>
                    </td>

                    <td>
                        {{ $total }}
                    </td>

                    <td>
                        <span class="text-success font-weight-bold">
                            {{ $sending }}
                        </span>
                    </td>

                    <td>
                        <span class="text-danger font-weight-bold">
                            {{ $notSending }}
                        </span>
                    </td>

                    <td>
                        <div>
                            <strong>{{ $percentage }}%</strong>
                        </div>

                        <div class="progress mt-1">
                            <div class="progress-bar"
                                 style="width: {{ $percentage }}%">
                            </div>
                        </div>
                    </td>

                    <td>
                        {{ $lastPulse }}
                        <br>
                        <small class="text-muted">{{ $age }}</small>
                    </td>

                    <td>
                        <span class="status-badge {{ $statusClass }}">
                            {{ $status }}
                        </span>
                    </td>

                    <td>
                        <a href="{{ route('pole.connection.details', $row->pole_device_id) }}"
                           class="btn btn-sm btn-primary">
                            <i class="fas fa-eye"></i>
                            View
                        </a>
                    </td>
                </tr>

            @empty

                <tr>
                    <td colspan="9">
                        <div class="no-data">
                            No connection devices found.
                        </div>
                    </td>
                </tr>

            @endforelse

            </tbody>

        </table>

    </div>

</div>

@endsection