@extends('layouts.master')
@section('title', 'Timeline Feeds')

@section('css')
<link rel="stylesheet" href="{{asset('assets/css/timeline.css')}}" />
</script>
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    @section('breadcrumbs')
    <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
        <ol class="breadcrumb mb-0 me-1">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">
                Timeline Feeds
            </li>

        </ol>
    </nav>
    @endsection

    @include('admin.errors.error')

    <div class="card">
        <form method="POST" action="" accept-charset="UTF-8" class="form-horizontal" id="filterData" name="filterData" novalidate="novalidate">
            <div class="row ms-4 mt-4 row">

                <div class="col-md-3 col-xl-2 col-sm-4 col-6">
                    <input type="text" class="form-control flatpickr-validation " name="start_date" id="start_date" placeholder="Start Date" autocomplete="off">
                </div>
                <div class="col-md-3 col-xl-2 col-sm-4 col-6">
                    <input type="text" class="form-control flatpickr-validation" name="end_date" id="end_date" placeholder="End Date" value="" autocomplete="off">
                </div>

                <div class="col-md-3 col-xl-1 col-sm-12">
                    <button id="filteroptionreset" type="button" class="btn btn-primary resetbtn">Reset</button>
                </div>
                <input type="hidden" name="page" id="page" value="1">

            </div>
        </form>
        <div class="card-header d-flex justify-content-center align-items-center">
            <h5 class="mb-0">Timeline Feed</h5>
        </div>
        <div class="card-body">
            <div class="timeline">
                <ul id="activity_feed_ul">

                </ul>
            </div>
        </div>
    </div>



</div>
@include('admin.confirmalert')
@endsection

@section('scripts')


<script>
    $(document).ready(function() {

        var page = 1;
        var morePages = true;
        var lastDate = ''

        const date = [].slice.call(document.querySelectorAll('.flatpickr-validation'));
        // Flat pickr
        if (date) {
            date.forEach(flatPickr => {
                flatPickr.flatpickr({
                    allowInput: true,
                    monthSelectorType: 'static',
                    dateFormat: "{{ config('const.displayDate') }}",
                    maxDate: new Date().fp_incr(0)
                });
            });
        }

        function fetchData(pageNumber) {
            const start_date = $('#start_date').val();
            const end_date = $('#end_date').val();
            $.ajax({
                url: "{{route('admin.timeline-feed-list')}}",
                dataType: 'json',
                data: {
                    page: pageNumber,
                    start_date,
                    end_date
                },
                processData: true,
                success: function(response) {
                    const {
                        data
                    } = response.data
                    let lastHtml = ''
                    const ulElement = $('#activity_feed_ul');
                    const nocontenttext = `<p class="text-center mb-2" id="no_timeline_text">No Timeline Feeds Found!</p>`;

                    if (page == 1 && data.length <= 0) {
                        ulElement.append(nocontenttext);
                    }else {
                        $(document).find('#no_timeline_text').remove();
                    }

                    for (let index = 0; index < data.length; index++) {
                        const element = data[index];
                        lastDate = $(document).find('.last_date').last().text();

                        const dateWithTimezone = moment.utc(element.created_at).tz(tz);
                        const displayTime = dateWithTimezone.format('hh:mm A');
                        if (lastDate == element.date) {
                            let lastHtml = `
                                <div class="timeline-block w-50 position-relative">
                                    <div class="right_content d-flex">
                                        ${element.get_original_profile_pic ? '<span  class="flex-shrink-0 me-2 name-initial d-inline-flex align-items-center justify-content-center rounded-pill"><img src="' + element.get_created_by_name.profile_pic +'" alt="profile picsture" class="w-100 h-100 object-fit rounded-pill" /></span>'  : '<span class="flex-shrink-0 me-2 name-initial d-inline-flex align-items-center justify-content-center rounded-pill bg-primary">'+ element.get_created_by_name.first_name[0] + element.get_created_by_name.last_name[0] + '</span>'}
                                        <div class="block flex-grow-1">
                                            <h4 class="timeline-title">
                                                ${element.comment}
                                                <a class="decorated" href="${element.redirect_url}">${element.title}</a>
                                            </h4>
                                            <p>${element.description ? element.description : ''}</p>
                                        </div>
                                        <span class="time-block">${displayTime}</span>
                                    </div>
                                </div>
                            `
                            $(document).find('.last_date').last().parent().parent().append(lastHtml);
                        } else {

                            var html = `
                            <li>
                                <div class="timeline-heading fw-bold text-center bg-white position-relative py-1">
                                    <span class="last_date">${element.date}</span>
                                </div>
                                <div class="timeline-block w-50 position-relative">
                                    <div class="right_content d-flex">
                                        ${element.get_original_profile_pic ? '<span  class="flex-shrink-0 me-2 name-initial d-inline-flex align-items-center justify-content-center rounded-pill"><img src="' + element.get_created_by_name.profile_pic +'" alt="profile picsture" class="w-100 h-100 object-fit rounded-pill" /></span>'  : '<span class="flex-shrink-0 me-2 name-initial d-inline-flex align-items-center justify-content-center rounded-pill bg-primary">'+ element.get_created_by_name.first_name[0] + element.get_created_by_name.last_name[0] + '</span>'}
                                        <div class="block flex-grow-1">
                                            <h4 class="timeline-title">
                                                ${element.comment}
                                                <a class="decorated" href="${element.redirect_url}">${element.title}</a>
                                            </h4>
                                            <p>${element.description ? element.description : ''}</p>
                                        </div>
                                        <span class="time-block">${displayTime}</span>
                                    </div>
                                </div>
                            </li>
                            `
                            ulElement.append(html);
                        }
                    }

                    if (response.data.last_page == page) {
                        morePages = false;
                    }

                    page += 1;
                },
                error: function(e) {
                    $('.loader-btn').addClass('d-none');
                    if (e.responseJSON.msg) {
                        toastr.error(e.responseJSON.msg, "@lang('admin.error')");
                    } else {
                        toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                    }
                },
            })
        }

        fetchData(page);

        window.onscroll = function(ev) {
            if ((window.innerHeight + Math.round(window.scrollY)) >= document.body.offsetHeight) {
                if (morePages) {
                    fetchData(page);
                }
            }
        };

        $('#filteroptionreset').on("click", function() {
            resetData();
            $("#filterData")[0].reset();
            $('#start_date').trigger('change');
        });

        function resetData() {
            $("#start_date").val('');
            $("#end_date").val('');
        }

        $('#start_date, #end_date').on('change', function() {
            page = 1;
            morePages = true;
            const ulElement = $('#activity_feed_ul').html('');
            fetchData(page);
        })
    });
</script>
@endsection