198 lines
8.0 KiB
PHP
198 lines
8.0 KiB
PHP
@extends('layouts.frontendTemplate')
|
|
|
|
<style>
|
|
li a:hover {
|
|
color: #E23134 !important
|
|
}
|
|
|
|
.category span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.category p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.search-btn {
|
|
height: 42px;
|
|
border: 1px solid #1a1a1a;
|
|
padding: 0 20px;
|
|
background: #1a1a1a;
|
|
color: #fff
|
|
}
|
|
</style>
|
|
|
|
@section('main')
|
|
|
|
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
|
<!-- start page title -->
|
|
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">
|
|
{{ $subCategoryView->name_en }}</h1>
|
|
<!-- end page title -->
|
|
</div>
|
|
<div
|
|
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
|
<!-- breadcrumb -->
|
|
<ul class="text-center text-md-end">
|
|
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
|
<li><a href="{{ url('category/chiangmai') }}" class="text-white">Categories</a></li>
|
|
<li class="text-white">
|
|
{{ $subCategoryView->name_en }}</li>
|
|
</ul>
|
|
<!-- end breadcrumb -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="wow animate__fadeIn">
|
|
<div class="container">
|
|
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
|
<div class="col-12 text-center">
|
|
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
|
alt="GREATER CHIANG MAI">
|
|
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
|
Subjects</p>
|
|
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
|
{{ $subCategoryView->name_en }}
|
|
</h5>
|
|
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
|
</div>
|
|
|
|
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
|
<div class="search-bar d-inline-flex justify-content-center">
|
|
|
|
<input type="text" placeholder="Subject.." name="keyword" id="keyword"
|
|
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
|
|
|
<input placeholder="From date.." type="text" id="due_date_from" style="max-width: 300px;"
|
|
autocomplete="off" />
|
|
|
|
<input placeholder="To date.." type="text" id="due_date_to" style="max-width: 300px;"
|
|
autocomplete="off" />
|
|
|
|
<button class="search-btn" id="btn-search">Search</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 blog-content">
|
|
<ul
|
|
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
|
<li class="grid-sizer"></li>
|
|
|
|
@foreach ($itemView as $item)
|
|
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
|
<div class="blog-post bg-light-gray">
|
|
<div class="blog-post-images overflow-hidden position-relative">
|
|
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
|
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
|
alt="">
|
|
<div class="blog-hover-icon"><span
|
|
class="text-extra-large font-weight-300">+</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="post-details padding-40px-all md-padding-20px-all">
|
|
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
|
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
|
{{ $item->name_en }}
|
|
</a>
|
|
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
|
<div class="author">
|
|
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
|
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endforeach
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- start pagination -->
|
|
<div class="pagination-wrapper">
|
|
@include('uc.pagination', ['data' => $itemView])
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@stop
|
|
|
|
|
|
@section('js')
|
|
|
|
<script>
|
|
var today = new Date();
|
|
var dateFormat = "d-m-Y";
|
|
|
|
var dueDateFrom = $("#due_date_from");
|
|
var dueDateTo = $("#due_date_to");
|
|
|
|
const dateFrom = "{{ $fromDateView }}";
|
|
const dateTo = "{{ $toDateView }}";
|
|
|
|
dueDateFrom.flatpickr({
|
|
showClearButton: true,
|
|
enableTime: false,
|
|
dateFormat: dateFormat,
|
|
maxDate: today,
|
|
defaultDate: dateFrom,
|
|
|
|
});
|
|
|
|
dueDateTo.flatpickr({
|
|
showClearButton: true,
|
|
enableTime: false,
|
|
dateFormat: dateFormat,
|
|
maxDate: today,
|
|
defaultDate: dateTo,
|
|
|
|
});
|
|
|
|
const clearDatePicker = () => {
|
|
dueDateFrom.flatpickr().clear();
|
|
dueDateTo.flatpickr().clear();
|
|
|
|
// Set the date format again after clearing
|
|
dueDateFrom.flatpickr({
|
|
dateFormat: dateFormat
|
|
});
|
|
dueDateTo.flatpickr({
|
|
dateFormat: dateFormat
|
|
});
|
|
}
|
|
|
|
$('#btn-search').on('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
|
const baseUrl = `/category/chiangmai/article/${subCategoryId}`; // Base URL for your route
|
|
|
|
// Get input values
|
|
const keyword = $("#keyword").val();
|
|
const fromDate = $("#due_date_from").val();
|
|
const toDate = $("#due_date_to").val();
|
|
|
|
// Build query parameters dynamically
|
|
const params = new URLSearchParams();
|
|
|
|
if (keyword) params.append('search', keyword);
|
|
if (fromDate) params.append('from', fromDate);
|
|
if (toDate) params.append('to', toDate);
|
|
|
|
// Build the final URL with query parameters
|
|
const newUrl = `${baseUrl}?${params.toString()}`;
|
|
|
|
// Redirect to the new URL
|
|
window.location.href = newUrl;
|
|
});
|
|
</script>
|
|
@endsection
|