@extends("layouts.master")

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

@section('breadcrumb')
  @include('partials.message')
  <div class="page-bar">
    <ul class="page-breadcrumb">
      <li>
        <a href="{!!URL::to('/')!!}">Inicio</a>
        <i class="fa fa-circle"></i>
      </li>
      <li>
        <a href="{!!URL::to('/packages')!!}">Paquetes</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">Paquetes</span></div>
            <div class="col-md-6">
              <div class="btn-group pull-right">
                <a href="{{URL::route('packages.create')}}" class="btn green"><i class="fa fa-plus"></i> Nuevo paquete </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">Categoría</th>
              <th class="center">Descripción</th>
              <th class="center">Acciones</th>
            </tr>
            </thead>

            <tbody>
            @foreach($packs as $pack)
              <tr>
                <td class="center"><img src="{{$pack->image}}" alt="banner" height="75"/></td>
                <td class="center"> {{$pack->title}} </td>
                <td class="center"> {{$pack->category->name}}</td>
                <td class="center"> {{$pack->description}} </td>
                <td>@if($pack->pack_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>
                <td>
                <input type="checkbox" data-toggle="toggle" data-size="sm"  data-onstyle="info" class="switch_{{$pack->id}}"  onchange="changestatuspromo({{$pack->id}})"
                                  {{$pack->pack_status == 1 ? 'checked': ''}}>
                  <a href="{{  URL::route('packages.show', $pack->id) }}" title="Ver" class="btn btn-icon-only blue-dark ">
                    <i class="fa fa-eye"></i>
                  </a>
                  <a href="{{  URL::route('packages.edit', $pack->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="{{$pack->title}}" data-id="{{$pack->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 paquete</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(){
      $("#liPack").addClass("active");
    });

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

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

            });

        }

    $(".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 paquete?");
      nodeName.appendChild(nameNode);
      $("#bodyDelete").empty();
      document.getElementById("bodyDelete").appendChild(nodeName);
    });

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

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