	@extends('layouts.main')

	@section('title')
	{{ __('Article') }}
	@endsection

	@section('page-title')
	<div class="page-title">
	    <div class="row">
		<div class="col-12 col-md-6 order-md-1 order-last">
		    <h4>@yield('title')</h4>

		</div>
		<div class="col-12 col-md-6 order-md-2 order-first article_header">
		    <form action="{{ url('article_list') }}" method="POST">
		        @csrf
		        <input type="text" class="form-control order-first" placeholder="Search" id="search_input"
		            name="search">
		    </form>

		    <a href="{{url('add_article') }}" class="btn btn-primary btn_add">
		        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
		            class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
		            <path
		                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z">
		            </path>
		        </svg>
		        Add Article
		    </a>


		</div>
	    </div>
	</div>
	@endsection


	@section('content')
	<section class="section">
	    <div class="row">

		@foreach ($articles as $key => $value)
		<div class="col-md-3">

		    <div class="card article_card">
		        <img src="{{ $value->image }}" class="article_img" alt="">
		        <div class="article_title mt-2">
		            <b> {{ $value->title }}</b>
		        </div>
		        <div class="article_description">
		            @php
		            echo Str::substr(strip_tags($value->description), 0, 150) . '...';
		            @endphp
		        </div>
		        <hr style="border: 1px dashed;">
		        <div class="row mb-1">
		            <div class="col-md-6 ">
		                <div class="article_date_posted">
		                    Posted On
		                </div>
		                <div class="article_date">
		                    {{ date('d M Y', strtotime($value->created_at)) }}
		                </div>
		            </div>
		            <div class="col-md-6 text-end" id="article_action">
		                <a href="{{ route('article.edit', $value->id) }}" id="edit_btn"
		                    class="btn icon btn-primary btn-sm rounded-pill mt-2" title="Edit"><i
		                        class="fa fa-edit edit_icon"></i></a>
		                &nbsp;&nbsp;
		                <a href="{{ route('article.destroy', $value->id) }}" id="delete_btn"
		                    onclick="return confirmationDelete(event);"
		                    class="btn icon btn-danger btn-sm rounded-pill mt-2" data-bs-toggle="tooltip"
		                    data-bs-custom-class="tooltip-dark" title="Delete"><i
		                        class="bi bi-trash delete_icon"></i></a>

		            </div>
		        </div>

		    </div>

		</div>
		@endforeach

	    </div>
	    @if (count($articles)>12)

	    <div class="row d-flex text-center mb-0">

		<form action="{{ url('article_list') }}" method="POST">
		    @csrf
		    <input type="hidden" name="limit" value="1">
		    <button id="show_more" class="link-button">Show More</button>
		</form>

	    </div>
	    @endif

	</section>
	@endsection

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


		    
		    // $('#delete_btn,#edit_btn').hide();
		});
		// $('#article_action').on('mouseover', function() {
		//     $('#delete_btn,#edit_btn').show();

		// });
		// $('#article_action').on('mouseout', function() {
		//     $('#delete_btn,#edit_btn').hide();

		// });
	       
		$('#show_more').on('click', function() {
		          get_articles("",2);
		});
		 $('#search_input').on('input', function() {
		    var searchValue = $(this).val();
		    get_articles(searchValue,"all");
		
		});
		function get_articles(searchValue,limit){
		    $.ajax({
		    url: '{{ route("article_list") }}',
		    type: "POST",
		    data: {
		            "search": searchValue,
		            "limit":limit,
		            '_token': "{{ csrf_token() }}",

		    },
		    });
	}
	</script>
	@endsection
