@extends('backend.layouts.app')
@section('content')
<div class="container">
	<div class="block">
	    <div class="block-header block-header-default">
	        <h3 class="block-title"><b>Key Management Table</b></h3>
	        <a data-toggle="modal" data-target="#modal-large" class="btn btn-sm btn-alt-primary">
	            <i class="fa fa-plus mr-5"></i>Add Key Management
	        </a>
	    </div>
	    <div class="block-content block-content-full">
	    	<div class="table-responsive">
	            <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
	                <thead>
	                    <tr>
	                        <th class="text-center">S/L &nbsp;</th>
	                        <th class="text-center">Title &nbsp;</th>
	                        <th class="text-center">Image &nbsp;</th>
	                        <th class="text-center">Status &nbsp;</th>
	                        <th class="text-center">Action &nbsp;</th>
	                    </tr>
	                </thead>
	                <tbody>
	                	@php $sl = 1; @endphp
                    	@foreach($keys as $key)
	                	<tr>
	                		<td class="text-center">{{$sl++}}</td>
	                		<td class="text-center">{{$key->title}}</td>
		                	<td class="text-center">
		                		<img style="width: 50px; height: 50px;" src="{{$key->image ? '/' . $key->image :  '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png'}}">
		                	</td>
		                	<td class="text-center">
		                		@if($key->status == 1)
		                			<span class="badge badge-success">Active</span>
		                		@else
		                			<span class="badge badge-danger">Inactive</span>
		                		@endif
		                	</td>
		                	<td class="text-center icon-statte">
	                            <form action="{{route('key.delete',$key->id)}}" method="post" accept-charset="utf-8">
	                            	<a href="{{route('key.status',$key->id)}}" class="btn btn-circle mr-5 mb-5 {{$key->status == 1 ? 'btn-alt-success' :'btn-alt-danger'}}">
		                                <i class="fa fa-refresh {{$key->status == 1 ? 'text-success' :'text-danger'}}"></i>
		                            </a>

			                		<a data-toggle="modal" data-target="#modal-edit" id="editkey" data="{{$key->id}}" class="btn btn-circle btn-alt-info mr-5 mb-5">
		                                <i class="fa fa-edit"></i>
		                            </a>
	                                @csrf
	                                @method('delete')
	    	                    	<button type="submit" class="btn btn-circle btn-alt-danger mr-5 mb-5 delete-confirm" onclick = "deleteItem();" >
		                                <i class="fa fa-trash-o"></i>
		                            </button>
	                            </form>
		                	</td>
	                	</tr>
	                	@endforeach
	                </tbody>
	            </table>
	        </div>
	    </div>
	</div>
</div>

<!-- key add modal -->
<div class="modal show" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="modal-large">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header bg-primary-dark">
                    <h3 class="block-title">Add Key Management</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <div class="modal-body">
                    	<form action="{{route('key.store')}}" method="post" enctype="multipart/form-data">
	                    	@csrf
	                    	<div class="form-group row">
	                            <label class="col-12" for="editor">Key Management Title: </label>
		                        <div class="col-lg-12">
		                            <input type="text" name="title" class="form-control" placeholder="Enter Key Management Title">
                                </div>
	                        </div>
	                        <div class="form-group row">
                            	<label class="col-12">Feature Image <span class="text-danger">*</span></label>
                            	<div class="col-lg-12">
	                                <input type='file' class="form-group" required name="image" onchange="readURL(this);" />
                        			<img id="blah" src="/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png" height="200" width="250" alt="key" /><br>
	                            </div>  
                            </div>
	                        <div class="form-group text-right">
	                            <button type="submit" class="btn btn-square btn-primary min-width-125 mb-10 mt-20">Submit</button>
	                        </div>
	                    </form>
				    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end key add modal -->

<!-- edit key edit modal -->
<div class="modal show" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="modal-large">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header bg-primary-dark">
                    <h3 class="block-title">Edit Key Management</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                            <i class="si si-close"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content">
                    <div class="modal-body">
                    	<form action="{{route('key.update')}}" method="post" enctype="multipart/form-data">
	                    	@csrf
	                    	<input type="hidden" name="id" id="key_id">
	                    	<div class="form-group row">
	                            <label class="col-12" for="editor">Key Management Title: </label>
		                        <div class="col-lg-12">
		                            <input type="text" name="title" id="title" class="form-control" placeholder="Enter Key Management Title">
                                </div>
	                        </div>
	                        <div class="form-group row">
                            	<label class="col-12">Feature Image <span class="text-danger">*</span></label>
                            	<div class="col-md-12">
	                                <input type='file' class="form-group" name="image" onchange="readURL2(this);" />
	                        		<img id="blah2" class="key_image" src="" height="200" width="250" alt="category" /><br>
                            	</div>
                            </div>
	                        <div class="form-group text-right">
	                            <button type="submit" class="btn btn-square btn-primary min-width-125 mb-10 mt-20">Update</button>
	                        </div>
	                    </form>
				    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end key edit modal -->
@endsection
@section('script')
<script type="text/javascript">
	$(document).on("click", "#editkey", function () {
        let id = $(this).attr("data");
        console.log(id);
        $.ajax({
            url: "/admin/key/edit/"+id,
            type: "get",
            dataType: "json",
            success: function (response) {
                console.log(response);
                $("#key_id").val(response.id);
                $("#title").val(response.title);
                $('.key_image').attr('src', response.image ? '/'+ response.image  : '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.png');
            }
        })
    })
    function deleteItem() {    
       alert ("If you click ok!! Then item remove from record");  
    }    
</script>
<script type="text/javascript">
	function readURL(input) {
	    if (input.files && input.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function (e) {
	            $('#blah')
	                .attr('src', e.target.result);
	        };
	        reader.readAsDataURL(input.files[0]);
	    }
	}
	function readURL2(input) {
	    if (input.files && input.files[0]) {
	        var reader = new FileReader();
	        reader.onload = function (e) {
	            $('#blah2')
	                .attr('src', e.target.result);
	        };
	        reader.readAsDataURL(input.files[0]);
	    }
	}
</script>
@endsection