@extends('layouts.boxes')

@section('content')
<div class="card my-4">
    <div class="card-header bg-dark text-light">
        <ul class="nav nav-tabs card-header-tabs" id="boxTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="list-tab" data-bs-toggle="tab" data-bs-target="#lista" type="button" role="tab">
                    Ver boxes
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="form-tab" data-bs-toggle="tab" data-bs-target="#formulario" type="button" role="tab">
                    Crear Boxes
                </button>
            </li>
        </ul>
    </div>

    <div class="card-body">
        {{-- Mensajes de éxito --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        {{-- Errores de validación --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                       <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="tab-content" id="templateTabsContent">
            {{-- TAB LISTA --}}
            <div class="tab-pane fade show active" id="lista" role="tabbox" aria-labelledby="list-tab">
                <h5 class="mb-3">Boxes existentes</h5>
                <table class="table table-striped table-hover my-4 rounded-2 overflow-hidden">
                    <thead>
                        <tr class="table-dark">
                            {{-- <td scope="col">Id</td> --}}
                            <td scope="col">Modelo</td>
                            <td scope="col">Serie</td>
                            <td scope="col">Host</td>
                            <td scope="col">Ubicacion</td>
                            <td scope="col">Update <span style="font-size:10px">{{ $now }}</span></td>
                        </tr>
                    </thead>
                    @php
                        {{
                            $blue=0;
                            $yellow=0;
                            $gray=0;
                        }}
                    @endphp
                    @foreach($boxes as $box)
                    <tr>
                        {{-- <td>{{ $box['id'] }}</td> --}}
                        <td>{{ $box['modelo'] }}</td>
                        <td>{{ $box['serie'] }}</td>
                        <td>{{ $box['host'] }}</td>
                        <td>{{ $box['ubicacionact'] }}</td>
                        <td>
                            @switch($box['diffdate'])
                                @case(1)
                                    @php
                                        {{ $blue++;}}
                                    @endphp
                                    <span data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="Menos de 1 hora<br>{{ $box['lastupdate'] }}" class="bi-check-circle-fill" style="color: #003399;"></span>
                                @break
                                @case(2)
                                    @php
                                        {{ $yellow++;}}
                                    @endphp
                                    <span data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="Mas de 1 hora<br>{{ $box['lastupdate'] }}" class="bi-dash-circle-fill" style="color: rgb(255, 140, 0);"></span>
                                @break
                                @case(3)
                                    @php
                                        {{ $gray++;}}
                                    @endphp
                                    <span data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="Mas de 24hrs<br>{{ $box['lastupdate'] }}" class="bi-exclamation-circle-fill" style="color: gray;"></span>
                            @endswitch
                            <a class="navbar-brand bi-bar-chart-fill" href="{{ "bw/".$box['id'] }}"></a>
                            <span  style='font-size:.7rem'>{{ $box['bw'] }}</span>
                        </td>
                    </tr>
                    @endforeach
                </table>
                <style>
                    .pagination .page-link {
                        background: black;
                        color: white;
                    }
                    .active>.page-link {
                        border-color: black;
                        background: darkgray;
                    }
                </style>
                <div class='text-end' style='font-size:.7rem'>
                    
                    {{ $status[1] ?? '0' }} <span class="bi-check-circle-fill" style="color: #003399;"></span>:Menos de una hora
                    {{ $status[2] ?? '0' }} <span class="bi-dash-circle-fill" style="color: rgb(255, 140, 0);"></span>:Mas de una hora
                    {{ $status[3] ?? '0' }} <span class="bi-exclamation-circle-fill" style="color: gray;"></span>:Mas de un dia
                </div>
                <span>{{ $boxes->links() }}</span>
            </div>
            {{-- TAB FORMULARIO --}}
            <div class="tab-pane fade" id="formulario" role="tabpanel" aria-labelledby="form-tab">
                <form method="post" action="{{ route('boxes.store') }}">
                    @csrf
                    <div class="form-group">
                        <label for="modelo">Modelo:</label>
                        <input type="text" class="form-control" name="modelo" id="modelo">
                    </div>
                    <div class="form-group">
                        <label for="serie">Serie:</label>
                        <input type="text" class="form-control" name="serie" id="serie">
                    </div>
                    <div class="form-group">
                        <label for="host">Host</label>
                        <input type="text" class="form-control" name="host" id="host">
                    </div>
                    <div class="form-group">
                        <label for="ubicacion">Ubicacion:</label>
                        <input type="text" class="form-control" name="ubicacion" id="ubicacion">
                    </div>
                    <button type="submit" class="btn btn-dark">Guardar</button>
                    
                </form>
            </div>
        </div>
    </div>
</div>
    
    
    
        
@endsection