@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">
                        {{ $categoryView->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') }}" class="text-white">Categories</a></li>
                        <li class="text-white">
                            {{ $categoryView->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">
                        CULTURE</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="ชื่อหัวข้อ..." 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/subject/detail/' . $categoryView->id . '/' . $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/subject/detail') }}"
                                            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 class=" text-center margin-100px-top md-margin-50px-top wow animate__fadeInUp">
                <div class="pagination text-small text-uppercase text-extra-dark-gray">
                    <ul class="mx-auto">
                        <li><a href="#"><i
                                    class="fas fa-long-arrow-alt-left margin-5px-right d-none d-md-inline-block"></i>
                                Prev</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">Next <i
                                    class="fas fa-long-arrow-alt-right margin-5px-left d-none d-md-inline-block"></i></a>
                        </li>
                    </ul>
                </div>
            </div> --}}
            <!-- end pagination -->
        </div>
    </section>

@stop


@section('js')
    <script>
        const baseUrl = "{{ url('category/subject') }}";
        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 id = "{{ $categoryView->id }}"; // Category ID
            const baseUrl = `/category/subject/${id}`; // 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