@extends('dashboard.layouts.main')

@section('title', getSiteName() . ' - Dashboard - News')

@section('content')
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/dataTables.bootstrap5.min.css') }}">
	<link rel="stylesheet" href="{{ asset('assets/css/plugins/responsive.bootstrap5.min.css') }}">
    <div class="pc-content">
        <!-- [ Main Content ] start -->
        <div class="row pt-0">
            <div class="page-header-title">
                <h2 class="mb-4">{{ __('News') }}</h2>
            </div>
        </div>
        <!-- [ Main Content ] end -->
        <div class="row">
            <!-- Both borders table start -->
            <div class="col-12">
				<div class="action-button mb-3">
					@can('add articles')
                    <a href="{{ route('news-add') }}" type="submit" class="btn btn-primary me-2 w-auto">{{ __('Add New Article') }}</a>
					@endcan
					<button type="button" class="openFilter btn btn-secondary me-2 w-auto">{{ __('Filter') }}</button>
                </div>
				<div class="card filterBox
				@if(is_null(request()->title) && is_null(request()->category) && is_null(request()->date_publish_from) && is_null(request()->date_publish_to))
				d-none
				@endif
				">
                    <div class="card-header">
                        <h5>Filters</h5>
                    </div>
                    <div class="card-body">
						<form id="formFilter">
							<div class="row">
								<div class="col-md-3">
									<div class="form-group">
										<label class="form-label" for="filterTitle">{{ __('Title') }}</label>
										<input type="text" name="title" value="{{ request()->title }}" class="form-control" id="filterTitle" placeholder="{{ __('Enter Title') }}">
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-group">
										<label class="form-label" for="category">{{ __('Category') }}</label>
										<select name="category" class="form-control" id="category">
											<option></option>
											@foreach($categories as $category)
											<option value="{{$category->id}}" @if($category->id == request()->category) selected @endif>{{$category->getInfo()->title}}</option>
											@endforeach
										</select>
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-group">
										<label class="form-label" for="date_publish_from">{{ __('Date Publish From') }}</label>
										<div class="input-group timepicker">
											<input type="text" name="date_publish_from" class="form-control flatpickr-input" id="date_publish_from" placeholder="Select date" value="{{ request()->date_publish_from }}">
											<span class="input-group-text">
												<i class="feather icon-calendar"></i>
											</span>
										</div>
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-group">
										<label class="form-label" for="date_publish_to">{{ __('Date Publish To') }}</label>
										<div class="input-group timepicker">
											<input type="text" name="date_publish_to" class="form-control flatpickr-input" id="date_publish_to" placeholder="Select date" value="{{ request()->date_publish_to }}">
											<span class="input-group-text">
												<i class="feather icon-calendar"></i>
											</span>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-12 d-flex justify-content-end">
								<button type="submit" class="btn btn-primary me-2 w-auto">{{ __('Filter') }}</button>
							</div>
						</form>
					</div>
				</div>
                <div class="card">
                    <div class="card-body table-border-style">
                        <div class="dt-responsive table-responsive">
                            @if($news->isNotEmpty())
							<table id="res-config" class="display table table-bordered dt-responsive" style="width: 100%">
                                <thead>
                                    <tr>
                                        <th style="width: 40px;">{{ __('Thumb') }}</th>
                                        <th class="sorting @if(request()->sort == 'title') sorting_{{request()->order}} @endif" data-sort="title">{{ __('Title') }}</th>
										<th style="text-align: center;">{{ __('View') }}</th>
                                        <th width="80">{{ __('Category') }}</th>
                                        <th width="80" class="sorting @if(request()->sort == 'date_publish') sorting_{{request()->order}} @endif" data-sort="date_publish">{{ __('Date Publish') }}</th>                                       
										<th width="20" class="sorting @if(request()->sort == 'views') sorting_{{request()->order}} @endif" data-sort="views"><i class="fa fa-eye"></i></th>
										<th width="50" class="sorting @if(request()->sort == 'status') sorting_{{request()->order}} @endif" data-sort="status">{{ __('Status') }}</th>
										@can('add articles')
										<th style="text-align: center;"><i class="fa fa-trash"></i></th>
										@endcan
                                    </tr>
                                </thead>
                                <tbody>
									@foreach($news as $article)
                                        <tr>
                                            <td style="text-align: center;">
												@if(!$article->preview_type)
													@if($article->image && exitstFile('storage/app/public/uploads/news/' . $article->id . '/', $article->image))
														<img class="item-preview" src="{{ resizeImage('news/' . $article->id . '/', $article->image, 100, 100) }}" alt="Image" style="background-color: #f3f3f3;">
													@else
														<img class="item-preview" src="{{ asset('assets/images/application/default.svg') }}" alt="Image" style="background-color: #f3f3f3;">
													@endif
												@else
													<img class="item-preview" src="{{ asset('assets/images/application/youtube.jpg') }}" alt="Image" style="background-color: #f3f3f3;">
												@endif	
											</td>
                                            <td style="white-space: normal;"><a href="{{ route('news-edit', $article->id) }}" title="Edit {{ $article->getInfo()->title }}">{{ $article->getInfo()->title }}</a></td>
											<td style="text-align: center;">
												<a href="{{ url('/' . $article->slug) }}?already_show=1" target="_blank" class="btn btn-primary me-2 w-auto btn-sm" data-type="add">{{ __('Open') }}</a>
											</td>
                                            <td>
                                                @foreach($article->newsCategories as $category)
                                                <div>{{ $category->getInfo()->title }}@if (!$loop->last), @endif</div>
												<br />
                                                @endforeach
                                            </td>
                                            <td>
												@if($article->date_publish)
													<div>{{ Carbon\Carbon::parse($article->date_publish)->format('d.m.Y') }}</div>
												{{ Carbon\Carbon::parse($article->date_publish)->format('H:i') }}
												@endif
											</td>                                           
                                            <td>{{ $article->views }}</td>
                                            <td>{{ $article->status ? __('Active') : __('Inactive') }}</td>
                                            @can('add articles')
                                            <td style="text-align: center;"><a class="delete" href="{{ route('news-delete', $article->id) }}"><i class="fa fa-trash"></i></a></td>
                                            @endcan
                                        </tr>
									@endforeach
                                </tbody>
                            </table>
							<div class="datatable-bottom @if(!$news->hasPages()) d-flex justify-content-start @endif">                                
                                @if($news->hasPages())
                                    {{ $news->onEachSide(1, 2)->links('dashboard.partials.pagination') }}
                                @endif
								<div class="datatable-info">Showing <strong>{{ $news->count() }}</strong> of <strong>{{ $news->total() }}</strong> articles</div>
                            </div>
                            @else
								<p>{{ __('News not found.') }}</p>
							@endif
                        </div>
                    </div>
                </div>
            </div>
            <!-- Both borders table end -->
        </div>
    </div>
@endsection

@section('footer-scripts')
	<script src="{{ asset('assets/js/plugins/flatpickr.min.js') }}"></script>
	<script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $('.delete').on('click', function(){
            if (confirm("Do you really want to delete this article?")) {
                return true;
            }
            return false;
        });
		(function () {
			$('.flatpickr-input').flatpickr({
				enableTime: false,
				noCalendar: false,
				time_24hr: true
			});
		})();
		$('.openFilter').on('click', function(){
			$('.filterBox').toggleClass('d-none');
		});
    </script>
	<script>
      // [ Configuration Option ]
      $('#res-config').DataTable({
        responsive: true,
		searching: false,
		bPaginate: false,
        bFilter: false,
        bInfo: false,
		bSort: false
      });

    </script>
@endsection