@extends('layouts.'.(isset($layout)?$layout:'app'))

@section('custom_css')
    <style>
        @foreach($box->Slaves()->active()->get() as $slave)
            .icon_id_{{$slave->id}}_main {
            padding: 0 4%;
            font-size: 3.1rem;
            color: {{$slave->tempColor}}  !important;
        }

        .icon_id_{{$slave->id}}:before {
            color: {{$slave->tempColor}}  !important;
        }
        @endforeach
    </style>
@endsection


@section('pagetitle', $box->alias ?: $box->name)

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item active">{{$box->client->name}}</li>
        @if(count($box->client->controlboxes) > 1)
            <li class="breadcrumb-item active">
                <select onchange="switchBox()" class="select" id="boxswitcher">
                    @foreach($box->client->controlboxes as $sibling)
                        <option @if($sibling->id == $box->id) selected
                                @endif value="{{$sibling->id}}">{{$sibling->alias ?: $sibling->name}}</option>
                    @endforeach
                </select>
            </li>
        @else
            <li class="breadcrumb-item active">{{$box->alias ?: $box->name}}</li>
        @endif
    </ol>
@endsection

@section('content')

    @if( $box->tlogs()->count() != 0)
        <a class="btn col-xs-12 col-sm-12 col-md-auto btn-primary" href="{{route('controlbox.templogs', $box)}}"><i
                class="fa fa-thermometer-empty"></i> {{__("Temperature log(s)")}}
            @unless($box->hasCycledProperly)
                <div style="width: 1em; vertical-align: top; line-height: unset; height: auto;"  data-toggle="tooltip"  data-placement="top" title="{{__("warnings.badCycle")}}" class="fa-stack" style="vertical-align: top;"><i class="fa fa-circle fa-stack-1x"></i> <i class="fa fa-exclamation-circle text-red fa-stack-1x"></i></div>
            @endunless
            @if($box->hasNotCycledEnough)
                <div style="width: 1em; vertical-align: top; line-height: unset; height: auto;"  data-toggle="tooltip"  data-placement="top" title="{{__("warnings.noRecentCycle", ['days' => $box->max_days_without_cycling])}}" class="fa-stack" style="vertical-align: top;"><i class="fa fa-circle fa-stack-1x"></i> <i class="fa fa-exclamation-circle text-orange fa-stack-1x"></i></div>
            @endif</a>
    @endif

    @if( $box->Eventlogs()->count() != 0)
        <a class="btn  col-xs-12 col-sm-12 col-md-auto btn-primary" href="{{route('controlbox.eventlog.index', $box)}}"><i
                class="fa fa-list"></i> {{__("Event logs")}}</a>
    @endif



    <a class="btn col-xs-12 col-sm-12 col-md-auto btn-primary" href="{{route('controlbox.locationmap', $box)}}"><i
            class="fa fa-map-marked"></i> {{__("Location map")}}</a>

    @if( $box->NetworkSettingsSet != null)
        <a class="btn  col-xs-12 col-sm-12 col-md-auto pull-right btn-primary"
           href="{{route('controlbox.settings', $box)}}"><i
                class="fa fa-cog"></i> {{__("Configure controlbox")}}</a>
    @endif

    @if( $box->SlavesSettingsSet != null)
        <a class="btn col-xs-12 col-sm-12 col-md-auto pull-right btn-primary "
           href="{{route('controlbox.settings.slaves.mass', $box)}}">
            <i class="fa fa-cogs"></i> {{ __('Configure all showers at once')}} </a>
    @endif

    @if( $box->Sensors()->count() != 0)
        <a class="btn  col-xs-12 col-sm-12 col-md-auto btn-primary" href="{{route('controlbox.flow', $box)}}"><i
                class="fa fa-water"></i> {{__("waterflow.waterflow")}}</a>
    @endif

    <hr/>

    <div class="card col-12 mt-1 card-theme card-outline">
        <div data-card-widget="collapse" class="card-header">
            <h3 class="card-title">{{__('Tap point(s)')}}</h3>


            <div class="card-tools">
                <!-- This will cause the card to maximize when clicked -->

                <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i>
                </button>
                <!-- This will cause the card to collapse when clicked -->
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                </button>
            </div>
        </div>

        <div class="card-body row">

            @foreach($slaves as $slave)
                <div class="col-xs-12 col-sm-12 col-md-4 p-1">
                    <div class="info-box ">

                        <i class="icon_id_{{$slave->id}}_main text-center text-left @isset($slave::SLAVE_TYPE_ICONS[$slave->type]){{$slave::SLAVE_TYPE_ICONS[$slave->type]}} @else {{$slave::SLAVE_TYPE_ICONS[$slave::SLAVE_TYPE_DEFAULT]}} @endisset"></i>
                        <div class="info-box-content ">
                            <div class="dropdown float-right">
                                <a class="btn btn-primary"
                                   href="{{route('controlbox.settings.slaves', ['box' => $box, 'slave' => $slave])}}">
                                    <i class="fa fa-cog"></i>
                                </a>

                            </div>
                            <span class="info-box-text">{{$slave->alias ?: $slave->name}} v{{$slave->version}}</span>
                            <span class="info-box-number">{{$slave->colorTemp}}<small>&deg;</small>
                </span>
                        </div>
                    </div>
                    <!-- /.info-box-content -->
                </div>
            @endforeach
        </div>
    </div>
@endsection

@section("page_js")

    <script>
        function switchBox() {
            if ($("#boxswitcher").val() != '{{$box->id}}') {
                newUrl = "{{route("controlbox", '0010')}}".replace('0010', $("#boxswitcher").val());
                window.location.href = newUrl;
            }
        }
    </script>
@endsection