@extends('layout.adminLayout')


@section('content')


    <center><h2>Lista de elementos del slider</h2></center>

     @if (isset($eliminado))

        <div class="alert alert-danger" role="alert">

            Registro Eliminado correctamente
        </div>
    @endif

    @if (isset($actualizado))

        <div class="alert alert-success" id="actualizado" role="alert">
            Registro Actualizado correctamente
        </div>

        @endif



    
    <style>

        #SliderPosition p{

            font-size:11px;

        }
    </style>

    <div class="row" id="SliderPosition" style="margin-bottom: 50px">


    @foreach($slider as $cargaSlider)

        
            <div class="col-md-4">

               <form name="form{{ $cargaSlider->id }}" action="EditarSlider" enctype="multipart/form-data" method="post">


                   <input type="text" name="_token" value="{{ csrf_token() }}" id="token" hidden>

                    <input type="text" name="titulo" class="form-control {{ $cargaSlider->id }}" id="titulo{{ $cargaSlider->id }}" disabled value="{{$cargaSlider->titulo}}">
                    <input type="text" name="subtitulo" class="form-control {{ $cargaSlider->id }}" disabled value="{{$cargaSlider->subtitulo}}" >
                   @if($cargaSlider->articulo==1)
                    <input type="text" name="subtitulo" class="form-control {{ $cargaSlider->id }}" disabled value="/{{$cargaSlider->url}}" required>
                   @else
                       <input type="text" name="url" onKeyPress="return permite(event,'urlamigable')" class="form-control {{ $cargaSlider->id }}" placeholder="URL" disabled value="{{$cargaSlider->url}}" required>
                       @endif


                   @if($cargaSlider->articulo!=0)
                    <img src="img/ImagenesBlog/{{$cargaSlider->foto}}"  class="img-responsive">
                   @else
                       <img src="img/slider/{{$cargaSlider->foto}}"  class="img-responsive">
                   @endif
                    <select name="posicion" id="posicion{{ $cargaSlider->id }}" class="form-control" onchange="ChangePo(this.value,'{{ $cargaSlider->posicion }}','{{ $cargaSlider->id }}')">
                    <option value="{{$cargaSlider->posicion}}">{{$cargaSlider->posicion}}</option>
                    @for($i=1;$i<$cantiElement+1; $i++)
                        @if ($i!=$cargaSlider->posicion)
                        <option value="{{$i}}">{{$i}}</option>
                        @endif
                    @endfor
                   </select>
                   <input type="text" name="id" value="{{ $cargaSlider->id }}" hidden>
                   <div class="col-md-12" style="background-color:#9d9d9d; opacity: 0.7;">
                       @if($cargaSlider->articulo!=0)
                           <h5><strong>Slider Blog</strong></h5>
                       @else
                           <h5><strong>Slider Estándar</strong></h5>
                       @endif


                   </div>
                   <div class="form-group">
                       @if($cargaSlider->articulo==0)
                       <button type="button" class="btn btn-primary" value="{{ $cargaSlider->id }}" onclick="editar(this.value)">Editar</button>
                       @endif
                       <button type="button" class="btn btn-danger" id="eliminar1" value="{{ $cargaSlider->id }}" onclick="eliminar(this.value)">Eliminar</button>

                   </div>

                   <div class="form-group opciones{{ $cargaSlider->id }}" hidden>
                       <input type="file" name="foto" class="form-control">
                       <p class="alert-danger">Para asegurar la integridad del Carrusel la medida recomendada de la imagen es de 1620 x 1080</p>
                       <button type="submit" class="btn btn-primary">Guardar</button>

                   </div>
               </form>
            </div>


@endforeach

<style>

.agregar{

    margin-top:100px;
    margin-bottom: 50px;
    cursor: pointer;

}

    #superior{

        background-color:#000 ;
        opacity: 0.8;
        height: 370px;
        width:100%;
        position: absolute;
        margin-left: -15px;
        border-radius: 5px;

    }


</style>


    <div class="col-md-4">


            <div id="superior">
        <center> <img src="img/iconos/mas01.png" class="img-responsive agregar" id="agregar" width="40%" onmouseover="this.src='img/iconos/mas02.png';" onmouseout="this.src='img/iconos/mas01.png';"/>
        <h2>Agregar</h2>
        </center>
            </div>


            <form name="formAgregar" action="AgregarSlider" enctype="multipart/form-data" method="post">


                <input type="text" name="_token" value="{{ csrf_token() }}" id="token" hidden>

                <input type="text" name="titulo" class="form-control" id="tituloAgregar" placeholder="Titulo">
                <input type="text" name="subtitulo" class="form-control" placeholder="Subtitulo">
                <img src="img/FondoAgregar.jpg"  class="img-responsive">
                <input type="text" value="{{ $cantidadRegistros+1 }}" name="posicion" hidden>

                <div class="form-group opcionesAgregar" hidden>
                    <input type="file" name="foto" class="form-control" required>
                    <p class="alert-danger">Para asegurar la integridad del Carrusel la medida recomendada de la imagen es de 1620 x 1080</p>
                    <button type="submit" class="btn btn-primary">Guardar</button>

                </div>
            </form>

    </div>


    {{-- Para calcular la cantidad de registros y asi poderlos desahabilitar --}}
        <input type="text" value="{{ $cantidadRegistros }}" id="cantidadRegistros" hidden>



    </div>





@stop