@extends("layouts.master")

@section("styles")
  {!!Html::style("/assets/global/plugins/datatables/datatables.min.css")!!}
  {!! Html::style("/assets/css/main.css") !!}
@endsection

@section('breadcrumb')
  <div class="page-bar">
  @include('partials.message')
    <ul class="page-breadcrumb">
      <li>
        <a href="{!!URL::to('/')!!}">Inicio</a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <a href="{!!URL::to('/blog')!!}">Blog</a>
      </li>
    </ul>
  </div>
@endsection

@section("page-content")
  <div class="row content_container">
    <div class="col-md-12">
      <!-- BEGIN EXAMPLE TABLE PORTLET-->
      <div class="portlet light portlet-fit bordered">
        <div class="portlet-title">
          <div class="row">
            <div class="col-md-6"> <span class="caption-subject bold" style="font-size: 16px; color:gray">Blog</span></div>
            <div class="col-md-6">
              <div class="btn-group pull-right">
                <a href="{{URL::route('blog.create')}}" class="btn green"><i class="fa fa-plus"></i> Nuevo Blog </a>
              </div>
            </div>
          </div>
        </div>
        <div class="portlet-body">
          <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
            <thead>
            <tr>
              <th class="center">Imagen</th>
              <th class="center">Titulo</th>
              <th class="center">Descripción</th>
              <th class="center">Estatus</th>
              <th class="center">Acciones</th>
            </tr>
            </thead>

            <tbody>
            @foreach($blogs as $blog)
              <tr>
                <td class="center"><img src="{{$blog->image}}"  height="75"/></td>
                <td class="center"> {{$blog->title}} </td>
                <td class="center"><div style="width: 740px; overflow:hidden;white-space: nowrap;text-overflow: ellipsis;"> {{$blog->description}}</div> </td>
                <td>@if($blog->blog_status == 1)
                                    <span class="m-badge m-badge--success m-badge--wide"> Activo </span>
                                @else
                                    <span class="m-badge m-badge--info m-badge--wide"> Inactivo </span>
                                @endif</td>
                <td>
                  <input type="checkbox" data-toggle="toggle" data-size="sm" data-onstyle="info" class="switch_{{$blog->id}}"  onChange="changestatusblog({{$blog->id}})"
                                    {{$blog->blog_status == 1 ? 'checked': ''}}>
                  <a href="{{  URL::route('blog.edit', $blog->id) }}" title="Editar" class="btn btn-icon-only green-meadow ">
                    <i class="fa fa-edit"></i>
                  </a>
                  <a href="#basic" data-toggle="modal" data-name="{{$blog->title}}" data-id="{{$blog->id}}" title="Eliminar" class="btn btn-icon-only red modalDelete">
                    <i class="fa fa-times"></i>
                  </a>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      <!-- END EXAMPLE TABLE PORTLET-->
    </div>
  </div>

  <div class="modal fade" id="basic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Eliminar Blog</h4>
        </div>
        <div class="modal-body" id="bodyDelete">
        </div>
        <div class="modal-footer">
          <input type="hidden" name="_token" value="{{csrf_token()}}" id="token">
          <button type="button" class="btn green-meadow" data-dismiss="modal" onclick="deleteUser()">Aceptar</button>
          <button type="button" class="btn red " data-dismiss="modal"></i>Cancelar</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
@endsection

@section("scripts")
  {!! Html::script("/assets/global/scripts/datatable.js") !!}
  {!! Html::script("/assets/global/plugins/datatables/datatables.min.js") !!}
  {!! Html::script("/assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js") !!}
  {!! Html::script("/assets/scripts/simplified_datatable.js") !!}
  <script type="application/javascript">
    $(document).ready(function(){
      $("#liBlo").addClass("active");
    });

    function  changestatusblog(blogid) {
  
      var check = $('.switch_'+blogid).is(':checked');
            var token = $("#token").val();
            $.ajax({

                url: "/changestatusblog",
                headers: {'X-CSRF-TOKEN': token},
                type: "POST",
                data:{id:blogid,status:check},
                success: function(data) {
                    window.location = "/blog";
                  
                }

            });

        }
        
    $(".modalDelete").click(function(){
      id = $(this).data("id");
      var name = $(this).data("name");
      var nodeName=document.createElement("p");
      var nameNode=document.createTextNode("¿Seguro que desea eliminar el blog?");
      nodeName.appendChild(nameNode);
      $("#bodyDelete").empty();
      document.getElementById("bodyDelete").appendChild(nodeName);
    });

    function deleteUser(){
      var token = $("#token").val();

      $.ajax({
        url: "blog/"+id+"",
        headers: {'X-CSRF-TOKEN': token},
        type: "DELETE",
        success: function() {
          window.location = "/blog";
          $("#message").fadeIn();
        }
      });
    }
    
  </script>
@endsection