@extends('layouts.app')
@section('title', trans('menu.daily_update_title'))

@section('content')
    <div class="content">
        <x-content.header title="{{ __('settings.daily_update_title') }} / {{ $dailyupdate->location->name }}"
            subTitle="{{ __('forms.lbl_created_at') }} : {{ $dailyupdate->occured_date }}" />

        <div class="w-full flex gap-4 pb-8">

            <div id="update-item-container" class="w-full lg:w-[calc(100%-461px-16px)]">

                <div class="w-full flex mb-5 items-center p-[8px] gap-2 overflow-x-scroll no-scrollbar">
                    @foreach ($categories as $key => $cases)
                        <div>
                            <button data-content-id="content-update-{{ strtolower(str_replace(' ', '-', $key)) }}"
                                class="tabs-btn-update {{ $loop->first ? 'active bg-custom-orange-50 text-custom-orange-500' : '' }}">
                                {{ $key }}
                            </button>
                        </div>
                    @endforeach
                </div>

                <div class="tabContentUpdate">
                    @php $firstCase = null; @endphp
                    @foreach ($categories as $category => $cases)

                        @php $isFirstCategory = $loop->first; @endphp

                        <div id="content-update-{{ strtolower(str_replace(' ', '-', $category)) }}"
                            data-cases-id="{{ implode(',', collect($cases)->pluck('id')->toArray()) }}"
                            data-category-id="{{ $cases[0]->category->id }}"
                            class="{{ $loop->first ? '' : 'hidden' }} tab-pane-update category-cases-container">
                            <div class="accordion flex flex-col gap-5">
                                @foreach ($cases as $case)
                                    @php
                                        if ($isFirstCategory && $loop->first) {
                                            $firstCase = $case;
                                        }
                                    @endphp

                                    <!-- Accordion Card -->
                                    <div class="accordion-card case-container bg-base-white border border-custom-grey-200 rounded-[8px] px-[32px] py-[24px]"
                                        data-readers-id="{{ implode(',', $case->readers->pluck('id')->toArray()) }}">
                                        <div
                                            class="accordion-title cursor-pointer flex justify-between items-center text-base-black active">
                                            <div>
                                                <h1 class="text-lg-semibold text-custom-grey-900">
                                                    #{{ $case->identifier != ""? $case->identifier : __('label.unknown') }}
                                                </h1>
                                                <p class="text-sm-regular text-custom-grey-600">
                                                    {{ $case->name }}
                                                </p>
                                            </div>
                                            <x-svg-icon class="accordion-icon float-right rotate-180" icon="icon-chevron-up" width="24" height="24" />

                                        </div>

                                        <div class="accordion-content mt-5 {{ $loop->first ? '' : 'hidden' }}">
                                            <div class="flex flex-col gap-5">
                                                <p class="text-sm-regular text-base-black">
                                                    {{ $case->note }}
                                                </p>

                                                <div>
                                                    @php $assets = $case->getMedia('files');@endphp

                                                    <div class="flex justify-between">
                                                        <h1 class="text-sm-semibold text-custom-grey-900 mb-2">
                                                            {{ __('title.lbl_attachments') }} ({{ $assets->count() }})
                                                        </h1>
                                                        <button class="case-reader-popup flex items-center gap-2"
                                                            data-id="case-readers-{{ $case->id }}" href="javascript:;">
                                                            <span>{{ $case->readers->count() }}</span> <x-svg-icon icon="icon-eye" width="16" height="16" />
                                                        </button>
                                                    </div>

                                                    @if (isset($assets) && $assets->count() > 0)
                                                        {!! get_grid_formatted_assets($assets) !!}
                                                    @endif
                                                </div>

                                                <div class="lg:hidden">
                                                    <button
                                                        data-uri="{{ route('dailyupdate.case.replies', [$dailyupdate, $case]) }}"
                                                        data-modal-id="dailyupdate-modal"
                                                        class="openModal btn-primary-sm case-replies-render" type="button">
                                                        {{ __('forms.lbl_see_conversation') }}
                                                    </button>
                                                </div>

                                                <div class="hidden lg:block">
                                                    <button
                                                        data-uri="{{ route('dailyupdate.case.replies', [$dailyupdate, $case]) }}"
                                                        class="btn-primary-sm case-replies-render" type="button">
                                                        {{ __('forms.lbl_see_conversation') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="case-readers-{{ $case->id }}" class="hidden">
                                        <ul class="readers">
                                            @foreach ($case->readers as $reader)
                                                @include('dailyupdate::readers.cases', [
                                                    'reader' => $reader,
                                                ])
                                            @endforeach
                                        </ul>
                                    </div>
                                @endforeach
                            </div>

                        </div>
                    @endforeach
                </div>

            </div>

            <div id="conversation-outer" class="bg-custom-grey-50 rounded-lg w-[461px] h-max shadow-base hidden lg:block">
                <div class="px-5 py-6 case-replies">
                    @include('dailyupdate::replies.index', ['case' => $firstCase])
                </div>
            </div>

        </div>

    </div>

@stop

@section('panel-content')
    <!-- my schedule modal start  -->
    <div id="dailyupdate-modal"
        class="hidden modal fixed inset-0 w-full h-full overflow-auto bg-[rgba(0,0,0,0.5)] z-[9999]">
        <div class="modal-content bg-white py-8 px-4 rounded-lg shadow-md mt-[20%] lg:mt-[2%] mx-auto w-[90%] relative">
            <!-- modal button -->
            <button type="button"
                class="close absolute right-2.5 top-2.5 w-8 h-8 rounded-full bg-custom-grey-100 flex items-center justify-center">
                <x-svg-icon icon="icon-close" />
            </button>
            <div class="px-5 py-6 case-replies">
                @include('dailyupdate::replies.index', ['case' => $firstCase])
            </div>
        </div>
    </div>
    <!-- my schedule modal ends  -->
@stop


@section('footer-script')
    <!-- plugin js for this page -->
    <script src="{{ asset('vendors/jquery-file-upload/jquery.uploadfile.min.js') }}"></script>

    <!-- Custom js for this page-->
    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>


    <script type="text/javascript">
        $(document).ready(function() {

            var whiteList = $.fn.tooltip.Constructor.Default.whiteList
            whiteList.img = ['src', 'alt', 'title', 'width', 'height', 'data-toggle', 'data-title'];

            $(document).tooltip({
                trigger: 'click',
                placement: 'bottom',
                selector: '.reader-profile-image'
            });

            function updateCaseReader(domObj) {

                let cases = domObj.data('cases-id').toString().split(','),
                    caseContainers = domObj.find('.case-container'),
                    readerUpdateToCases = [];

                for (let i = 0; i < caseContainers.length; i++) {

                    let node = $(caseContainers[i]),
                        readers = node.attr('data-readers-id').toString();

                    if (readers.split(',').map(function(item) {
                            return parseInt(item);
                        }).indexOf(window.user.id) < 0) {

                        readerUpdateToCases.push(cases[i]);
                        node.attr('data-readers-id', readers + (readers === '' ? '' : ',') + window.user.id);
                    }
                }

                if (readerUpdateToCases.length > 0) {

                    PDRequest({
                        type: "POST",
                        url: '/dailyupdate/cases/reader',
                        data: {
                            cases: readerUpdateToCases
                        },
                        isFlash: false
                    }).then((response) => {

                        if (response.status === 'success' && response.data) {

                            $.each(response.data, function(index, element) {

                                $("a.case-reader-popup[data-id=case-readers-" + index + "]")
                                    .find('span')
                                    .text(element['count']);

                                $('div#case-readers-' + index)
                                    .children('div:first-child')
                                    .html(element['content']);
                            });
                            initiateReaderPopup($(".case-reader-popup"));
                        }
                    });


                    PDRequest({
                        type: "POST",
                        url: '/dailyupdate/cases/replies/reader',
                        data: {
                            cases: readerUpdateToCases
                        },
                        isFlash: false
                    }).then((response) => {

                        if (response.status === 'success' && response.data) {

                            $.each(response.data, function(index, element) {

                                domObj
                                    .find('div.case-reply-' + index)
                                    .find('a.readers-popup span')
                                    .text(element['count']);

                                domObj
                                    .find('div#reply-readers-' + index)
                                    .children('div:first-child')
                                    .html(element['content']);
                            });
                            initiateReaderPopup($(".readers-popup"));
                        }
                    });
                }
            }

            $(".tabs-btn-update").on("click", function() {

                // Reset all tabs and contents for the first set
                $(".tabs-btn-update").removeClass("active bg-custom-orange-50 text-custom-orange-500");
                $(".tabContentUpdate .tab-pane-update").addClass("hidden");

                // Set new active state for the clicked tab in the first set
                 let caseContainer = $("#"+$(this).data("content-id"));

                $(this).addClass("active bg-custom-orange-50 text-custom-orange-500");
                caseContainer.removeClass("hidden");

                updateCaseReader(caseContainer);
            });

            updateCaseReader($('div.category-cases-container').first());

        });

        $("body").on('click', ".case-replies-render", function(event) {

            PDRequest({
                type: "GET",
                url: $(this).data('uri'),
                isFlash: false,
                event: event
            }).then((response) => {

                if (response.status === 'success' && response.html) {
                    $(".case-replies").html(response.html);
                    initializeGallery();
                    initBaseFileUploader($("#fileuploader"));
                    initBaseFileUploader($("#dailyupdate-modal #fileuploader"));
                }
            });
        });

        $("body").on('click', '.btn-save', function(event) {
            event.preventDefault();
            let data = $(this).parents('form').serialize();
            data = data + "&files=" + JSON.stringify(selectedFiles);

            PDRequest({
                type: "POST",
                url: $(this).parents('form').prop("action"),
                data: data,
                event: event
            }).then((response) => {
                if (response.status == "success") {
                    $(this).parents('form').resetForm();

                    window.fileuploader.reset();

                    $(document).trigger("detachSelectedFiles", {});

                    $(".case-inner-replies").append(response.html);

                }
            });
        });

        $("body").on("click", ".btn-read", function(event) {

            event.preventDefault();

            var $this = $(this),
                url = $this.data('uri'),
                status = parseInt($this.data('read-status'));

            PDRequest({
                type: "POST",
                url: url,
                event: event
            }).then((response) => {

                if (response && response.status && response.status == 'success') {
                    //$this.attr('data-read-status', (!status ? '1' : '0') );
                    $this.remove();
                }
            });;
        });

        function initiateReaderPopup(domObj) {
            domObj.each(function(i, obj) {
                $(this).popover({
                    html: true,
                    trigger: 'focus',
                    content: function() {
                        var id = $(this).data('id')
                        return $('#' + id).html();
                    }
                });
            });
        }

        initiateReaderPopup($(".readers-popup"));
        initiateReaderPopup($(".case-reader-popup"));

        initBaseFileUploader($("#dailyupdate-modal #fileuploader"));
    </script>
@stop