{{--  FROM 
    /dispositivos/pons/edit  
    /dispositivos/pons/index  
--}}

<style>
    .estado{
        padding: 10px
    }
    .estado1{
        background-color: #3db962;
        border: solid 1px #000000;
        color: white;
    }
    .estado2{

        background-color: #808080;
        border: solid 1px #000000;
        color: white;
    }
    .estado3{

        background-color: #167fc5;
        border: solid 1px #000000;
        color: white;
    }
    .estado4{

        background-color: #c93e3e;
        border: solid 1px #000000;
        color: white;
    }

</style>
<div class="panel-body">
    @if(isset($da))
    <div class="col-md-4"></div>
    <div class="col-md-4">

        <div class=" row">
            <label class="col-md-3 control-label" for="formGroup">OLT</label>
            <div class="col-md-6" id="">
                <p class="md">{{$da[0]['etiqueta']}}</p>  
            </div>
        </div>

        <div class=" row">
            <label class="col-md-3 control-label" for="formGroup">Board</label>
            <div class="col-md-6" id="">
                <p class="md">{{$da[0]['board_id']}}</p>  
            </div>
        </div>
        
        <div class=" row">
            <label class="col-md-3 control-label" for="formGroup">Zona</label>
            <div class="col-md-6" id="">
                <p class="md">{{$da[0]['zona']}}</p>  
            </div>
        </div>
        
    <br>
    </div>
    <div class="col-md-4"></div>
    @endif
    <div class="col-md-6 col-md-offset-3">
  
        <form action="{{ $url ?? '' }}" method="POST"  id="form{{ $action ?? 'Create'}}" accept-charset="utf-8"  class="form-horizontal " enctype="multipart/form-data">
            {{ csrf_field() }}
    
            @if ($action ==='Edit')
                {{ method_field('PATCH')}}
            @endif
    
            <div class="form-group row @if(isset($board)) hidden @endif ">
                <label class="col-md-4 control-label" for="formGroup">OLT</label>
                <div class="col-md-8" id="">
                    <div class="loading">Cargando...</div>
                    <select name="olts" id="olts" class="form-control">
                    </select>
                    @if ($errors->first('olts'))
                    <div class="alert alert-danger" role="alert">
                        {{ $errors->first('olts') }}
                    </div>
                    @endif
                </div>
            </div>
    
            <div class="form-group row @if(isset($board)) hidden @endif ">
                <label class="col-md-4 control-label" for="formGroup">Board</label>
                <div class="col-md-8" id="">
                    <div class="loading">Cargando...</div>
                    <select name="boards" id="boards" class="form-control">
                    </select>
                    @if ($errors->first('boards'))
                    <div class="alert alert-danger" role="alert">
                        {{ $errors->first('boards') }}
                    </div>
                    @endif
                </div>
            </div>


            @if(isset($da))
            @for ($i=1; $i <= $board['max_puertos']; $i++)

            <div class="form-group row">
                <div class="col-md-1"></div>
                <div class="col-sm-3">
                <label for="puertos_{{$i}}">Puerto {{ $i }}</label>
                </div>
                
                <div class="col-md-4 ">
                <select class="form-control port port_{{$i}} estado{{$da[$i-1]['estado_id']}}" name=""  data-port-id="{{$da[$i-1]['id']}}" data-port="{{ $i }}" data-board="{{ $board['id'] }}" >
                        @foreach( $estados as $e) 
                        <option value="{{ $e['id'] }}" class='estado{{ $e['id'] }}' @if($e['id']==$da[$i-1]['estado_id']) selected @endif>{{ $e['nombre'] }}</option>
                        @endforeach
                </select>
                </div>
                <div class="col-md-4 actualizando_{{$i}}" hidden>
                    <span class="badge progress-bar-success" style="height: 100%" >Actualizando...</span>
                </div>
                <div class="col-md-4 actualizado_{{$i}}" hidden>
                    <span class="badge progress-bar-success" style="height: 100%" >Actualizado</span>
                </div>
            </div> 
            @endfor
            @endif

            <div class="form-group row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <a href="{{ url()->previous() }}" class="btn btn-primary" role="button">Volver</a>
                </div>
            </div>
        </form>
    </div>

    
</div>