@extends('backend.layouts.app')
@section('content')
<div class="container">
	<div class="block">
	    <div class="block-header block-header-default">
	        <h3 class="block-title"><b>Slider 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 Slider
	        </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">Priority &nbsp;</th>
	                        <th class="text-center">Link &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($all_slider as $slider)
	                	<tr>
	                		<td class="text-center">{{$sl++}}</td>
	                		<td class="text-center">{{$slider->priority}}</td>
		                	<td class="text-center">{{$slider->link}}</td>
		                	<td class="text-center">
		                		<img style="width: 50px; height: 50px;" src="{{$slider->image ? '/' . $slider->image :  '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.svg'}}">
		                	</td>
		                	<td class="text-center">
		                		@if($slider->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('slider.delete',$slider->id)}}" method="post" accept-charset="utf-8">
	                            	<a href="{{route('slider.status',$slider->id)}}" class="btn btn-circle mr-5 mb-5 {{$slider->status == 1 ? 'btn-alt-success' :'btn-alt-danger'}}">
		                                <i class="fa fa-refresh {{$slider->status == 1 ? 'text-success' :'text-danger'}}"></i>
		                            </a>

			                		<a data-toggle="modal" data-target="#modal-edit" id="editslider" data="{{$slider->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>

<!-- slider 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 Slider</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('slider.store')}}" method="post" enctype="multipart/form-data">
	                    	@csrf
	                    	<div class="form-group row">
                                <label class="col-12" for="editor">Priority: </label>
                                <div class="col-lg-12">
                                    <input type="number" min="0" name="priority" class="form-control" placeholder="Enter Priority">
                                </div>
                            </div>
	                       	<div class="form-group row">
	                            <label class="col-12" for="editor">Slider Clickable Link: </label>
		                        <div class="col-lg-12">
		                            <input type="text" name="link" class="form-control" placeholder="Enter Slider Clickable Link">
                                </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.svg" height="200" width="250" alt="slider" /><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 slider add modal -->

<!-- edit slider 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 Slider</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('slider.update')}}" method="post" enctype="multipart/form-data">
	                    	@csrf
	                    	<input type="hidden" name="id" id="slider_id">
	                    	<div class="form-group row">
                                <label class="col-12" for="editor">Priority: </label>
                                <div class="col-lg-12">
                                    <input type="number" id="priority" min="0" name="priority" class="form-control" placeholder="Enter Priority">
                                </div>
                            </div>
	                        <div class="form-group row">
	                            <label class="col-12" for="editor">Slider Clickable Link: </label>
		                        <div class="col-lg-12">
		                            <input type="text" id="slider_link" name="link" class="form-control" placeholder="Enter Slider Clickable Link">
                                </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="slider_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 slider edit modal -->
@endsection
@section('script')
<script type="text/javascript">
	$(document).on("click", "#editslider", function () {
        let id = $(this).attr("data");
        console.log(id);
        $.ajax({
            url: "/admin/slider/edit/"+id,
            type: "get",
            dataType: "json",
            success: function (response) {
                console.log(response);
                $("#slider_id").val(response.id);
                $("#slider_link").val(response.link);
                $("#priority").val(response.priority);
                $('.slider_image').attr('src', response.image ? '/'+ response.image  : '/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.svg');
            }
        })
    })
    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