{{-- 
{
    "fch_actual": "2025-05-28 14:01:15.607187-04",
    "internet_ok": "t",
    "id_pmx": "21001",
    "fch_pmx": "2025-05-28 14:01:10",
    "pm10_pmx": "9.291181564331055",
    "pmx_ok": "t",
    "id_ws1": "21003",
    "fch_ws1": "2025-05-28 14:01:00",
    "velocidad_ws1": "0.51",
    "ws1_ok": "t",
    "id_ws2": "21004",
    "fch_ws2": "2025-05-28 14:01:00",
    "velocidad_ws2": "0",
    "ws2_ok": "t"
} --}}

@if ($data && isset($data['internet_ok']))    
    <div class="estatus-proyecto-pmx">
        <div class="estatus-proyecto-pmx__item {{ $data['internet_ok'] == 't' ? 'estatus-proyecto-pmx--ok' : 'estatus-proyecto-pmx--error' }}">
            <p class="estatus-proyecto-pmx__title">INTERNET</p>
            <div class="estatus-proyecto-pmx__circle">
                <span>({{ $data['internet_ok'] == 't' ? 'OK' : 'ERROR' }})</span>
            </div>

            <h3 class="estatus-proyecto-pmx__subtitle" title="{{ $data['fch_pmx'] }}">
                @php
                    try {
                        $fch_pmx = \Carbon\Carbon::parse($data['fch_pmx'])->format('Y-m-d H:i');
                    } catch (\Throwable $th) {
                        $fch_pmx = $data['fch_pmx'];
                    }
                @endphp
                {{ $fch_pmx }}
            </h3>
        </div>
        <div class="estatus-proyecto-pmx__item {{ $data['pmx_ok'] == 't' ? 'estatus-proyecto-pmx--ok' : 'estatus-proyecto-pmx--error' }}">
            <p class="estatus-proyecto-pmx__title">PMX</p>
            <div class="estatus-proyecto-pmx__circle">
                <span>({{ $data['pmx_ok'] == 't' ? 'OK' : 'ERROR' }})</span>
            </div>

            <h3 class="estatus-proyecto-pmx__subtitle" title="{{ $data['fch_pmx'] }}">
                {{ number_format((float)$data['pm10_pmx'], 2, '.', ',') }} ug/m3 <br>
                @php
                    try {
                        $fch_pmx = \Carbon\Carbon::parse($data['fch_pmx'])->format('Y-m-d H:i');
                    } catch (\Throwable $th) {
                        $fch_pmx = $data['fch_pmx'];
                    }
                @endphp
                {{ $fch_pmx }}
            </h3>
        </div>
        <div class="estatus-proyecto-pmx__item {{ $data['ws1_ok'] == 't' ? 'estatus-proyecto-pmx--ok' : 'estatus-proyecto-pmx--error' }}">
            <p class="estatus-proyecto-pmx__title">WS1</p>
            <div class="estatus-proyecto-pmx__circle">
                <span>({{ $data['ws1_ok'] == 't' ? 'OK' : 'ERROR' }})</span>
            </div>

            <h3 class="estatus-proyecto-pmx__subtitle" title="{{ $data['fch_ws1'] }}">
                {{ number_format((float)$data['velocidad_ws1'], 2, '.', ',') }} m/s <br>
                @php
                    try {
                        $fch_pmx = \Carbon\Carbon::parse($data['fch_ws1'])->format('Y-m-d H:i');
                    } catch (\Throwable $th) {
                        $fch_pmx = $data['fch_ws1'];
                    }
                @endphp
                {{ $fch_pmx }}
            </h3>
        </div>
        <div class="estatus-proyecto-pmx__item {{ $data['ws2_ok'] == 't' ? 'estatus-proyecto-pmx--ok' : 'estatus-proyecto-pmx--error' }}">
            <p class="estatus-proyecto-pmx__title">WS2</p>
            <div class="estatus-proyecto-pmx__circle">
                <span>({{ $data['ws2_ok'] == 't' ? 'OK' : 'ERROR' }})</span>
            </div>

            <h3 class="estatus-proyecto-pmx__subtitle" title="{{ $data['fch_ws2'] }}">
                {{ number_format((float)$data['velocidad_ws2'], 2, '.', ',') }} m/s <br>
                @php
                    try {
                        $fch_pmx = \Carbon\Carbon::parse($data['fch_ws2'])->format('Y-m-d H:i');
                    } catch (\Throwable $th) {
                        $fch_pmx = $data['fch_ws2'];
                    }
                @endphp
                {{ $fch_pmx }}
            </h3>
        </div>
    </div>

    <style>
        .estatus-proyecto-pmx {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            width: 100%;
        }

        @media (max-width: 768px) {
            .estatus-proyecto-pmx {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .estatus-proyecto-pmx__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;
        }

        .estatus-proyecto-pmx__circle {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
        }

        .estatus-proyecto-pmx--ok .estatus-proyecto-pmx__circle {
            background-color: #22c55e;
            color: #FFF;
        }
        .estatus-proyecto-pmx--error .estatus-proyecto-pmx__circle {
            background-color: #ef4444;
            color: #FFF;
        }
        .estatus-proyecto-pmx__subtitle {
            text-align: center
        }
        .estatus-proyecto-pmx__circle span {
            font-size: .75rem;
        }
    </style>
@endif