@extends ('backend.layouts.app')

@section ('title', trans('labels.backend.albums.management'))

@section('page-header')
    <h1>Photo Management</h1>
@endsection

@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">Photo Management</h3>

            <div class="box-tools pull-right">
              
            </div>
        </div><!--box-header with-border-->

        <div class="box-body">
            <div id="message"></div>
            <div class="table-responsive data-table-wrapper">
                <table id="albums-table" class="table table-condensed table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Image</th>
                            <th>{{ trans('labels.general.actions') }}</th>
                            
                        </tr>
                    </thead>
                    <thead class="transparent-bg">
                        <tr>
                            <td contenteditable id="title"></td>
                           <td contenteditable id="description"></td>
                           <td colspan="" rowspan="" headers=""></td>
                             <td><button type="button" class="btn btn-primary btn-md" id="add">Add</button></td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div><!--table-responsive-->
        </div><!-- /.box-body -->
    </div><!--box-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     
    <script>
$(document).ready(function(){
fetch_data();

 function fetch_data()
 {var _token = $('input[name="_token"]').val();

    var url = $(location).attr('href'),
    parts = url.split("/"),
    id = parts[parts.length-1];
  $.ajax({
   url:"{{ url('admin/album/fetch_data') }}",
   data:{id:id, _token:_token},
   dataType:"json",
   success:function(data)
   {
    var html = '';
    for(var count=0; count < data.length; count++)
    {
     html +='<tr>';
     html +='<td width="30%;" contenteditable class="column_name" data-column_name="title" data-id="'+data[count].photo_id+'">'+data[count].title+'</td>';
     html += '<td width="30%;" contenteditable class="column_name" data-column_name="description" data-id="'+data[count].photo_id+'">'+data[count].description+'</td>';
     html += '<td width="30%;"><img style="width:100%;" src="{{config("constant.SiteCmsurlalbum")}}'+data[count].photopath+'" alt=""></td>';

     html += '<td class="dflex"><form action="{{url("admin/album/photos")}}/'+data[count].photo_id+'" method="post" class="form-horizontal dflex" accept-charset="utf-8" enctype="multipart/form-data">@csrf<input name="photo" type="file" class="inputFile" /><input type="submit" value="&#xf093" class="btn btn-primary btn-md fawesom" style="float: right;" /></form><button type="button" class="btn btn-danger delete" id="'+data[count].photo_id+'"><i data-toggle="tooltip" data-placement="top" title="" class="fa fa-trash" data-original-title="Delete"></i></button></td></tr>';
    }
    $('tbody').html(html);
   }
  });
 }
 var _token = $('input[name="_token"]').val();

 $(document).on('click', '#add', function(){
    var url = $(location).attr('href'),
    parts = url.split("/"),
    id = parts[parts.length-1];
  var title = $('#title').text();
  var description = $('#description').text();
  if(title != '' && description != '')
  {
   $.ajax({
    url:"{{ url('admin/album/add_data') }}",
    method:"POST",
    data:{title:title,id:id, description:description, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
     fetch_data();
    }
   });
  }
  else
  {
   $('#message').html("<div class='alert alert-danger'>Both Fields are required</div>");
  }
 });

 $(document).on('blur', '.column_name', function(){
  var column_name = $(this).data("column_name");
  var column_value = $(this).text();
  var id = $(this).data("id");
  
  if(column_value != '')
  {
   $.ajax({
    url:"{{ url('admin/album/update_data') }}",
    method:"POST",
    data:{column_name:column_name, column_value:column_value, id:id, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
    }
   })
  }
  else
  {
   $('#message').html("<div class='alert alert-danger'>Enter some value</div>");
  }
 });

 $(document).on('click', '.delete', function(){
  var id = $(this).attr("id");
  if(confirm("Are you sure you want to delete this records?"))
  {
   $.ajax({
    url:"{{ url('admin/album/delete_data') }}",
    method:"POST",
    data:{id:id, _token:_token},
    success:function(data)
    {
     $('#message').html(data);
     fetch_data();
    }
   });
  }
 });


});

$("tbody").sortable({
    items: "> tr:not(:first)",
    appendTo: "parent",
    helper: "clone"
}).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
        ui.draggable.remove();
    }
});

</script>
@endsection