@extends('layouts.admin')

@section('css')
    @parent
    
    
    {!! Html::style('css/jquery-ui.1.12.1.min.css') !!} 
    {!! Html::style('css/jquery-ui.theme.min.css') !!}  
    
    {!! Html::style("js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css") !!}
@stop

@section('content')

<div class="block-header">
	<h2><i class="material-icons">camera</i> Galerie photos</h2>
</div>

<div class="row clearfix">
    <div class="col-xs-12">
      <div class="card">              
          <div class="header">
            {!! Form::reset('Annuler', array("onclick" => "window.location = '" . action('\Plugins\Galerie\Controller\GalerieController@admin') . "'", "class" => "btn btn-sm bg-orange waves-effect pull-right")) !!}
            <h2>
              <p>{{ $galerie->libelle }}</p>
              <small>Ajouter ou supprimer des photos à l'album</small>
              <small class="font-bold col-orange">Le poids de chaque image ne doit pas dépasser 5 Mo</small>
            </h2>
          </div>        
          <div class="body">
            <div class="row clearfix">
                <div class="col-xs-12">
                    <div id="uploader">
                        <p>Votre navigateur ne supporte pas HTML5.</p>
                    </div>
                </div>
            </div>
          </div>
          
          <div class="header">
            <h2>
              <small>Liste des photos de l'album <strong>{{ $galerie->libelle }}</strong></small>
            </h2>
          </div>        
          <div class="body table-responsive">
            {!! Form::open(array('url' => action('\Plugins\Galerie\Controller\GalerieController@update_photos', array('id' => $galerie->id, "class" => "form-horizontal")))) !!}
                @if($galerie->photos)
                <div class="row clearfix">
                  <div class="col-xs-12">
                
                    <table class="table list_photo" id="table1"> 
                      <thead>
                          <tr>
                              <th>&nbsp;</th>
                              <th>&nbsp;</th>
                              <th>Visuel</th>
                              <th>Titre</th>
                              <th>Description</th>
                              <th>Actions</th>
                          </tr>
                      </thead>
                      <tbody class="table_data">
                      @foreach($galerie->photos as $photo)
                        <tr class="data" id="row_">                                               
                          <td><input type="checkbox" value="{{ $photo->id }}" name="del_{{ $photo->id }}" id="del_{{ $photo->id }}" class="filled-in chk-col-teal checkbox"><label for="del_{{ $photo->id }}"></label></td>
                          <td>
                            <input type="hidden" value="" id="rang_" name="rang_">
                            {!! Html::image('plugins/galerie/img/' . $galerie->id . "/icon/{$photo->id}.{$photo->ext}", $photo->alt) !!}
                          </td>
                          <td>{!! Form::text("title_".$photo->id, $photo->title, array("class" => "form-control")) !!}</td>
                          <td>{!! Form::text("alt_".$photo->id, $photo->alt, array("class" => "form-control")) !!}</td>
                          <td>
                            <div class="actions">
                              <a href="{{ action('\Plugins\Galerie\Controller\GalerieController@delete_photo', array('id' => $photo->id)) }}" title="Supprimer la photo" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>                      
                            </div>
                          </td>
                        </tr>
                      @endforeach
                      </tbody>
                    </table>
                  
                  </div>
                </div>
                
                <div class="row clearfix">
                  <div class="col-xs-6">
                    <div id="select">
                        <input type="checkbox" id="select_all" name="select_all"><label for="select_all" class="filled-in chk-col-teal">Tout sélectionner / Tout désélectionner</label>                       

                                            </div>
                  </div>
                  <div class="col-xs-6">
                    {!! Form::submit("Enregistrer l'ordre des photos", array('name' => "save", "class" => "btn btn-sm bg-light-green waves-effect m-l-15 pull-right")) !!}
                    {!! Form::submit("Supprimer la sélection", array("onclick" => "return confirm('Etes-vous sûr de vouloir supprimer la selection ?');", "class" => "btn btn-sm bg-red waves-effect pull-right")) !!}
                  </div>
                </div>
                @endif
            {!! Form::close() !!}
   
                
          </div> 
      </div> 
    </div> 
</div> 

@stop
@section('js')
    @parent  
    {!! Html::script("js/jquery-ui.1.12.1.min.js") !!} 

    {!! Html::script("js/plupload/plupload.full.js") !!}
    {!! Html::script("js/plupload/jquery.plupload.queue/jquery.plupload.queue.js") !!}
    <script type="text/javascript">
        
        
        
        /*** == Tout sélectionner / Tout désélectionner == ***/
          //select all checkboxes                                                                                                                                                     
          $("#select_all").change(function(){  //"select all" change
              $(".checkbox").prop('checked', $(this).prop("checked")); //change all ".checkbox" checked status
          });
          
          //".checkbox" change
          $('.checkbox').change(function(){
              //uncheck "select all", if one of the listed checkbox item is unchecked
              if(false == $(this).prop("checked")){ //if this item is unchecked
                  $("#select_all").prop('checked', false); //change "select all" checked status to false
              }
              //check "select all" if all checkbox items are checked
              if ($('.checkbox:checked').length == $('.checkbox').length ){
                  $("#select_all").prop('checked', true);
              }
          });          
        /*** // ***/
        

        $(function() {
            $( ".table_data" ).sortable({
                update: function(event, ui){
                    var rows = $("#"+$(ui.item).attr("id")).parent();
                    rows.children().each(function(index){
                        $("#" + $(this).attr('id') + " input:hidden").val(index+1);
                    });

                }
            });
            $( ".data" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" );
           // $( ".table_data" ).disableSelection();
        });

        $(function() {
            $("#uploader").pluploadQueue({
// General settings
                runtimes : 'html5,flash',
                url : '{{ action('\Plugins\Galerie\Controller\GalerieController@add_photo', array('render' => 0, 'id' => $galerie->id))  }}',
                max_file_size : '10mb',
                unique_names : true,

                resize : {width : 1600, height : 1200, quality : 90},

                urlstream_upload : true,
                flash_swf_url : '/js/plupload/plupload.flash.swf',

// Specify what files to browse for
                filters : [
                    {title : "Fichiers images", extensions : "jpeg,jpg,gif,png"}
                ],

                multipart: true,

// Post init events, bound after the internal events
                init : {

                    StateChanged: function(up) {
// Called when the state of the queue is changed
                        if(up.state == plupload.STOPPED){
                           location.reload(true);
                        }

                    },
                    Error: function(up, args) {
// Called when a error has occured
                        log('[error] ', args);
                    }
                }
            });
        });


    </script>
@stop