@extends('layouts.admin')

@section('page-header')
AnB Documents
@endsection


@section('content')
<div class="panel" id="spy3">
  <div class="panel-body pn">
    <div class="bs-component">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th width="80" class="text-center">No</th>
            <th class="text-center">Document</th>
			<th class="text-center">Writer</th>
			<th class="text-center">Write date</th>
			<th class="text-center">delete</th>
          </tr>
        </thead>
        <tbody>
		@for($i=0,$cnt=count($documents); $i<$cnt; $i++)
				  <tr>
		    <td class="text-center">{{ $documents->total() - ($documents->perPage() * ($documents->currentPage()-1)) - $i }}</td>
		    <td><a href="/download?file_path=document&file_id={{ $document->id }}">{{ $document->file_name }}</a></td>
		    <td>{{ $document->writer->firstname }} {{ $document->writer->lastname }}</td>
		    <td  class="text-center">
			Jul/05/2025			</td>
			<td class="text-center" style="padding:4px;"><button class="btn btn-danger btn_delete" data-id="{{ $document->id }}">Delete</button></td>
		  </tr>
		@endfor
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="admin-form">
	<div class="section text-left" style="width:61px;height:39px;margin-left:10px;">
	  <label class="field file">
		<span class="button btn-system">Add</span>
		<input type="file" class="gui-file" name="image1_file" id="image1_file">
		<input type="text" class="gui-input" id="image1" placeholder="Please Select A File" value="">
	  </label>
	</div>
</div>

<nav class="text-center">
	{{ $documents->links() }}
</nav>

<!-- Admin Form Popup -->
<div id="modal" class="popup-basic admin-form mfp-with-anim mfp-hide"></div>
@endsection



@section('script')
<script>
	jQuery(document).ready(function() {

		$('#image1_file').on('change', function() {
			var form = new FormData();
			form.append('document', $(this)[0].files[0]);

			$.ajax({
				type: "POST",
				url: "/api/document",
				data: form,
				processData: false,
				contentType: false
			})
			.done(function(s) {
				location.href = '/admin/document';
			})
			.fail(function(err) {
				alert(err.responseJSON.msg);
			});
		});

		$('.btn_delete').on('click', function() {
			var document_id = $(this).attr('data-id');

			swal({   
				title: "Delete document?",
				text: '',
				type: "info",
				html: true,
				allowOutsideClick: true,
				showCancelButton: true,
				cancelButtonText: "No",
				confirmButtonText: "Yes",
				closeOnConfirm: true
			},
			function(isConfirm){
				if(!isConfirm) return;

				$.ajax({
					method: "delete",
					url: "/api/document/"+document_id
				})
				.done(function( msg ) {
					alert('delete success!');
					location.reload();
				})
				.fail(function( a ) {
				});
			});
			
		});
	});
</script>
@endsection