@extends('layouts.app')
@section('content')
<section id="edit_news">
<div class="green_back_single">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <a href="javascript:history.back()">&#60; Back</a>
                    </div>
                </div>
            </div>
        </div>
<div class="container">
<div class="form_create_job form">
    <div class="row m-0">
        <div class="col-lg-9">
            <div class="row m-0">
                <div class="col-md-4 text-end">
                    <label for="">Title News</label>
                </div>
                <div class="col-md-8">
                    <input name="news_title" type="text" placeholder="Lawyer" value="{{$change_news->title}}">
                 
                    <h3></h3>
                 
                </div>
                <div class="col-md-4 text-end">
                    <label for="">Category</label>
                </div>
                <div class="col-md-8">
                    <input name="news_category" type="text" placeholder="Toronto, ON" value="{{$change_news->category}}">
                    <!-- <select name="location_name" id="selectLocation">
                        <option value="1">Toronto, ON</option>
                        <option value="2">Toronto, OFF</option>
                        <option value="3">Toronto, CHECK</option>
                    </select> -->
                </div>
            </div>
        </div>
        <div class="col-lg-2">
            <form id="changeImageNews" method="post" enctype="multipart/form-data">
            @csrf
                <div class="image_job_wrapp">
                    <span class="close_btn" onclick="deleteImageNews({{$change_news->id}})"><i class="far fa-times-circle"></i></span>
                    <input name="title" type="hidden" value="newsImage{{$change_news->id}}">
                    <input name="id" type="hidden" value="{{$change_news->id}}">
                    <img id="news_image" src="{{$change_news->img}}" alt="">
                    <input id="input_news_image" type="file" name="input_news_image" onChange="uploadImageNews(this)" >
                    <label for="input_news_image" class="change_logo_btn">Change Logo</a>
                </div>
            </form>
            <!-- <div class="image_job_wrapp">
                <span class="close_btn"><i class="far fa-times-circle"></i></span>
                <img src="./assets/img/JobIMG.jpg" alt="">
                <a href="#" class="change_logo_btn">Change Logo</a>
            </div> -->
        </div>
        <div class="col-12 padding_left_form">
            <div class="row m-0 pt-3">
                <div class="col-md-3 text-end">
                    <label for="">Description</label>
                </div>
                <div class="col-md-8">
                    <textarea name="news_description" id="description" cols="30" rows="10">{{$change_news->description}}</textarea>
                </div>
            </div>
        </div>
        <div class="col-12 text-center">
            <button id="createNewsBtn" class="btn_save" type="submit" value="Save">Save</button>
        </div>
    </div>
</div>
</div>
</section>
<script type="text/javascript">

		var fileImage;
	function uploadImageNews(item) {
		console.log(item);
		$.ajax({
				url:'{{ route('editNews.ajaxImageUpload') }}',
				data:new FormData($("#changeImageNews")[0]),
				dataType:'json',
				async:false,
				type:'post',
				processData: false,
				contentType: false,
				success:function(response){
                    if(response.success) {
                        console.log(response.image_src);
						$('#news_image')[0].src = response.image_src;
						// response.user_image_src
					}
				},
		});
	}
	function deleteImageNews(id) {
		var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		$.ajax({
			url:'{{ route('deleteEditedNewsImage') }}',
				dataType:'json',
				type:'post',
				data:{_token: CSRF_TOKEN, id:id},
				success:function(response){
					console.log(response);
					if(response.success) {
						$('#news_image')[0].src = '/assets/img/JobIMG.jpg';
						// response.user_image_src
					}
				},
		});
	}

	
	$(document).ready(function(){
		var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
		
		$("#createNewsBtn").click(function(e){
			e.preventDefault();
			var id = $("input[name=id]").val();
			var news_title = $("input[name=news_title]").val();
			var news_category = $("input[name=news_category]").val();
			var news_description = $("textarea[name=news_description]").val();

			$.ajax({
			   type:'POST',
			   dataType: 'JSON',
			   url:'{{ route('newsUpdate')}}',
			   data:{_token: CSRF_TOKEN, id:id, news_title:news_title, news_category:news_category, news_description:news_description},
			   success:function(data){
				  alert(data.success);
			   }
			});
	  
		});	
	
	});
</script>
@endsection