@extends('layouts.dashboardnew')

@section('content')

<div class="row mt-3">
    <div class="col-md-8 col-12">
         <div class="card">
            <div class="card-body">

                <div class="col-md-3 col-6">
                    <div class="form-group mb-3">
                        <a class="btn btn-info w-100" href="{{ route('archivo.blog-show') }}">Ver Blog y Articulos <i class="fa-solid fa-arrow-right"></i> </a>
                    </div>
                </div>

                <table class="table table-striped table-bordered zero-configuration">
                    <thead>
                        <th class="text-center">Título</th>
                        <th class="text-center">Categoría</th>
                        <th class="text-center">Imagen</th>
                        <th class="text-center">Acciones</th>
                    </thead>
                    <tbody>
                        
                    @foreach($contenido as $archi)
                    <tr>
                        <td class="text-center">
                            {{$archi->titulo}}
                        </td>
                        
                        <td class="text-center">
                            {{$archi->categoria->titulo}}
                        </td>

                        <td class="text-center">
                            @if($archi->imagen != null)
                            <img src="{{ asset('imagen/'.$archi->imagen) }}" style="width: 50px; height: 50px; border-radius: 50%;">
                            @endif
                        </td>
                        
                        <td class="text-center">
                            
                           <a class="btn btn-info text-white" href="{{ route('archivo.actualizar', ['id' => $archi->id]) }}" title="Editar Blog y Articulo">
                               <i class="fa-solid fa-pen-to-square"></i>
                           </a>
                           
                           <a class="btn btn-danger text-white" href="{{ route('archivo.eliminar', ['id' => $archi->id]) }}" title="Eliminar Blog y Articulo">
                               <i class="fa-solid fa-trash"></i>
                           </a>
                           
                        </td>
                    </tr>
                    @endforeach

                    </tbody>
                </table>

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



    <div class="col-md-4 col-12">
        <div class="card">
            <div class="card-body">
                
                <form method="POST" action="{{ route('archivo.guardar') }}" enctype="multipart/form-data">
                    {{ csrf_field() }}


                    <div class="row">
                        
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <h4>Nuevo Blog y Artículos</h4>
                            </div>
                        </div>
                        

                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="control-label">Título</label>
                                <input class="form-control" type="text" name="titulo" required>
                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label class="control-label">Categorías</label>
                                <select class="form-control" name="categoria" required>
                                    <option value="" selected disabled>Seleccione una Categoría</option>
                                    @foreach($categorias as $cat)
                                        <option value="{{$cat->id}}">{{$cat->titulo}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label>Texto Corto</label>
                                <textarea class="form-control" type="textarea" name="text_corto" required></textarea>
                            </div>
                        </div>
                        

                        @livewire('blog')

                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <div class="form-check">
                                   <input class="form-check-input programa" type="checkbox" name="contenido_programado" value="1" id="flexCheckDefault" onclick="programacion_content()">
                                   <label class="form-check-label" for="flexCheckDefault">Programación de contenido</label>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="col-md-12 mostrar_programa" style="display:none;">
                            <div class="form-group mb-3">
                                <label>Desde</label>
                                <input type="text" name="fecha1" class="form-control datepicker">
                            </div>
                        </div>
                        
                        <div class="col-md-12 mostrar_programa" style="display:none;">
                            <div class="form-group mb-3">
                                <label>Hasta</label>
                                <input type="text" name="fecha2" class="form-control datepicker">
                            </div>
                        </div>


                        <div class="col-sm-12">
                            <div class="form-group mb-3">
                                <div class="alert alert-info" role="alert">
                                    <h5>dimensiones de imagenes 300 x 300 formato PNG,JPG,JPEG</h5>
                                </div>     
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="formFileMultiple" class="form-label">Seleccione un archivo</label>
                                <input class="form-control" type="file" name="imagen" id="formFileMultiple" required>
                            </div>    
                        </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <button class="btn btn-info w-100" type="submit">Aceptar</button>
                            </div> 
                        </div>

                    </div>  

                </form>
                

            </div>
        </div>

        @include('layouts.include.centro_aprendizaje_peque')
    </div>

</div>


@include('usuario.componentes.scritpTable')

@endsection


@push('script')
<script type="text/javascript">
    function programacion_content(){
        
       
        if ($('.programa').prop('checked')) {
            $('.mostrar_programa').show();
        }else{
            $('.mostrar_programa').hide();
        }
        
    }
</script>
@endpush