@extends('layouts.app')

@section('center')
<style>
	.wb{
		border-left:1px solid white !important;
	}
	.bb{
		border-left:1px solid lightgray !important;
	}
	.rbg{
		border-right:1px solid lightgray !important;
	}
</style>
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />

    <div class="card mt-3">

        <div class="card-body">

            <form method="GET" action="{{ route('anomaly-alerts') }}">

                <div class="row">

                    {{-- Device --}}
                    <div class="col-md-2">

                        <label>Device ID</label>

                        <select
                            name="device_id"
                            class="form-control selectpicker"
                            data-live-search="true">

                            <option value="">All Devices</option>

                            @foreach($devices as $device)

                                <option
                                    value="{{ $device->id }}"
                                    {{ request('device_id') == $device->id ? 'selected' : '' }}>

                                    {{ $device->global_device_id }}

                                </option>

                            @endforeach

                        </select>

                    </div>

                    {{-- From Date --}}
                    <div class="col-md-2">

                        <label>From Date</label>

                        <input
                            type="date"
                            name="from"
                            class="form-control"
                            value="{{ request('from') }}">

                    </div>

                    {{-- To Date --}}
                    <div class="col-md-2">

                        <label>To Date</label>

                        <input
                            type="date"
                            name="to"
                            class="form-control"
                            value="{{ request('to') }}">

                    </div>

                    {{-- Generate --}}
                    <div class="col-md-1">

                        <label>&nbsp;</label>

                        <button type="submit" class="btn btn-primary btn-block">

                            Generate

                        </button>

                    </div>

                    {{-- Clear --}}
                    <div class="col-md-1">

                        <label>&nbsp;</label>

                        <a href="{{ route('anomaly-alerts') }}"
                        class="btn btn-secondary btn-block">

                            Reset

                        </a>

                    </div>

                </div>

            </form>

        </div>

    </div>

    <div class="card mt-3">

        <div class="card-header">

            <ul class="nav nav-tabs card-header-tabs">

                @php

                    $tabs = [

                        'All',

                        'Voltage',

                        'Current',

                        'Power Factor',

                        'Power',

                        'Neutral',

                        'Energy',

                        'Frequency',

                        'Connectivity'

                    ];

                @endphp

                @foreach($tabs as $tab)

                    <li class="nav-item">

                        <a

                            class="nav-link
                            {{ request('category','All')==$tab?'active':'' }}"

                            href="{{ route('anomaly-alerts', array_merge(request()->all(),['category'=>$tab])) }}">

                            {{ $tab }}

                        </a>

                    </li>

                @endforeach

            </ul>

        </div>

        <div class="card-body">

            <div class="table-responsive" style="max-height:700px; overflow-y:auto;">

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

                    <thead class="thead-dark" style="position:sticky;top:0;z-index:100">

                    <tr>

                        <th width="70">#</th>

                        <th>Time</th>

                        <th>Device</th>

                        <th>Category</th>

                        <th>Check ID</th>

                        <th>Alert</th>

                        <th>Severity</th>

                        <th>Status</th>

                        <th>Value</th>

                        <th>Threshold</th>

                        <th>Message</th>

                    </tr>

                    </thead>

                    <tbody>

                    @forelse($alerts as $alert)

                        <tr>

                            <td>{{ $alerts->firstItem() + $loop->index }}</td>

                            <td>

                                {{ \Carbon\Carbon::parse($alert->created_at)->format('d M Y') }}

                                <br>

                                <small>

                                    {{ \Carbon\Carbon::parse($alert->created_at)->format('h:i:s A') }}

                                </small>

                            </td>

                            <td>

                                {{ optional($alert->device)->global_device_id ?? $alert->device_id }}

                            </td>

                            <td>

                                {{ $alert->category }}

                            </td>

                            <td>

                                <span class="badge badge-dark">

                                    {{ $alert->check_id }}

                                </span>

                            </td>

                            <td>

                                {{ $alert->alert_name }}

                            </td>

                            <td>

                                @if($alert->severity=='CRITICAL')

                                    <span class="badge badge-danger">

                                        CRITICAL

                                    </span>

                                @elseif($alert->severity=='MAJOR')

                                    <span class="badge badge-warning">

                                        MAJOR

                                    </span>

                                @elseif($alert->severity=='MINOR')

                                    <span class="badge badge-info">

                                        MINOR

                                    </span>

                                @else

                                    <span class="badge badge-secondary">

                                        INFO

                                    </span>

                                @endif

                            </td>

                            <td>

                                @if($alert->status=='OPEN')

                                    <span class="badge badge-danger">

                                        OPEN

                                    </span>

                                {{-- @elseif($alert->status=='ACKNOWLEDGED')

                                    <span class="badge badge-warning">

                                        ACKNOWLEDGED

                                    </span> --}}

                                @else

                                    <span class="badge badge-success">

                                        Cleared

                                    </span>

                                @endif

                            </td>

                            <td>

                                {{ $alert->value }}

                                {{ $alert->unit }}

                            </td>

                            <td>

                                {{ $alert->threshold }}

                                {{ $alert->unit }}

                            </td>

                            <td>

                                {{ $alert->message }}

                            </td>

                        </tr>

                    @empty

                        <tr>

                            <td colspan="11" class="text-center text-danger">

                                No Alerts Found

                            </td>

                        </tr>

                    @endforelse

                    </tbody>

                </table>

            </div>

            <div class="mt-3">

                {{ $alerts->appends(request()->query())->links('pagination::bootstrap-4') }}

            </div>

        </div>

    </div>




    @push('scripts')
    <script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
    <script src="{{asset('assets')}}/vendor/datepicker/js/picker.date.js"></script>
    <script src="{{asset('assets')}}/vendor/datepicker/js/custom-picker.js"></script>
    <script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
    <script src="{{asset('assets')}}/js/main.js"></script>
    
    @endpush

@endsection