@extends('layouts.head_office_app')
@section('title', 'Case '.$case->id)

@section('sub-header')
@include('head_office.case_manager.notes.sub-header')
@endsection

@section('content')
<div id="content">
@include('layouts.error')
<div class="card card-qi content_widthout_sidebar">
    <div style="display: flex; justify-content: left; align-items: left; height: auto; padding:15px;">
        <div class="d-flex align-items-center gap-2" style=" padding-right: 10px;">                  

                <p class="m-0 fw-semibold">Form:</p>
                <p class="m-0">{{$case->form_name ?? ' '}} </p> 
            </div>
            <div class="d-flex align-items-center gap-2" style="font-size: 16px;white-space: nowrap;">                  
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path stroke="rgb(103,105,121)" d="M12 2V6M12 18V22M6 12H2M22 12H18M19.0784 19.0784L16.25 16.25M19.0784 4.99994L16.25 7.82837M4.92157 19.0784L7.75 16.25M4.92157 4.99994L7.75 7.82837" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                Created 
                <p class="m-0 fw-semibold">{{$case->created_at->format('d M Y,  h:i a')}} </p>
            </div>

            <div style="font-size: 16px; white-space:nowrap; margin-left: 10px" class=" d-flex gap-2">
                    <img class="img-profile rounded-circle" width="22" height="22"
                    src="{{isset($case->getReporter()->id) ? ($case->getReporter()->email != 'external@qitech.com' ? $case->getReporter()->logo : asset('images/user-external.svg')) : asset('images/user-external.svg') }}"
                    />
                    @if (isset($case->getReporter()->id) && $case->getReporter()->email != 'external@qitech.com')
                        Reported by
                        <p class="m-0 fw-semibold">
                            {{$case->getReporter()->name ?? 'External User'}}
                        </p>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8.00007L2 22.0001M18 15.0001H9M6.6 19.0001H13.3373C13.5818 19.0001 13.7041 19.0001 13.8192 18.9724C13.9213 18.9479 14.0188 18.9075 14.1083 18.8527C14.2092 18.7909 14.2957 18.7044 14.4686 18.5314L19.5 13.5001C19.739 13.2611 19.8584 13.1416 19.9546 13.0358C22.0348 10.7474 22.0348 7.25275 19.9546 4.9643C19.8584 4.85851 19.739 4.73903 19.5 4.50007C19.261 4.26111 19.1416 4.14163 19.0358 4.04547C16.7473 1.96531 13.2527 1.96531 10.9642 4.04547C10.8584 4.14163 10.739 4.26111 10.5 4.50007L5.46863 9.53144C5.29568 9.70439 5.2092 9.79087 5.14736 9.89179C5.09253 9.98126 5.05213 10.0788 5.02763 10.1808C5 10.2959 5 10.4182 5 10.6628V17.4001C5 17.9601 5 18.2401 5.10899 18.4541C5.20487 18.6422 5.35785 18.7952 5.54601 18.8911C5.75992 19.0001 6.03995 19.0001 6.6 19.0001Z" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        Reported from
                        @else
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8.00007L2 22.0001M18 15.0001H9M6.6 19.0001H13.3373C13.5818 19.0001 13.7041 19.0001 13.8192 18.9724C13.9213 18.9479 14.0188 18.9075 14.1083 18.8527C14.2092 18.7909 14.2957 18.7044 14.4686 18.5314L19.5 13.5001C19.739 13.2611 19.8584 13.1416 19.9546 13.0358C22.0348 10.7474 22.0348 7.25275 19.9546 4.9643C19.8584 4.85851 19.739 4.73903 19.5 4.50007C19.261 4.26111 19.1416 4.14163 19.0358 4.04547C16.7473 1.96531 13.2527 1.96531 10.9642 4.04547C10.8584 4.14163 10.739 4.26111 10.5 4.50007L5.46863 9.53144C5.29568 9.70439 5.2092 9.79087 5.14736 9.89179C5.09253 9.98126 5.05213 10.0788 5.02763 10.1808C5 10.2959 5 10.4182 5 10.6628V17.4001C5 17.9601 5 18.2401 5.10899 18.4541C5.20487 18.6422 5.35785 18.7952 5.54601 18.8911C5.75992 19.0001 6.03995 19.0001 6.6 19.0001Z" stroke="rgb(103,105,121)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        Reported from
                    @endif
                    <p class="m-0 fw-semibold" style="font-size: 16px; white-space:normal;" data-toggle="tooltip" data-bs-placement="top" @if (isset($case->getReporter()->id) && $case->getReporter()->email != 'external@qitech.com')
                        title="{{$case->location_full_address}}"@endif>
                        @if (isset($case->saved_loc))
                        {{ isset($case->saved_loc->location_id) ? $case->saved_loc->location_id : $case->saved_loc->trading_name}}
                        @else
                            {{ isset($case->location->location_id) ? $case->location->location_id : $case->location_name}}
                        @endif
                    </p>
                </div>

                <div class="d-flex align-items-center gap-2" style="margin-left: 10px; font-size: 14px;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke="rgb(103,105,121)"
                                            d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                                            stroke="black" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                    Last Updated
                                    <p class="m-0 fw-semibold">{{ $case->updated_at->diffForHumans() }}</p>
                                </div>
        </div>
    <div class="card-body">
        <div class="cm_content pt-2">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center text-dark h3 font-weight-bold mb-4">Autosaved Comments


                            </h3>
                            <!-- <h3 class="text-center text-info h3 font-weight-bold mb-4">Autosaved Comments</h3> -->
                            <div class="table-responsive">
                            @if($drafts->isEmpty())
                           
                            <div class="text-left my-4">
                                <p>You don't have any draft comments</p>
                            </div>
                                @else
                                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                                    {{-- <thead>
                                    <tr>
                    <th></th>
                    <th></th>
                </tr>
                                    </thead> --}}
                                    <tbody>
                @foreach($drafts as $key => $comment)
                <tr>
                    {{-- <td data-session-id="{{ $comment->id }}"></td>
                    <td> --}}
                        <div data-comment="{{$comment->id}}" class="cm_comment card @if( $key % 2 == 0 ) cm_comment_grey @endif @if($comment->parent_id) cm_comment_reply @endif">
                            <div class="cm_comment_author_date">
                                <div class="cm_comment_action_bar float-right text-right dropdown no-arrow">
                                    @if(!$comment->type)
                                        @if($comment->currentUserIsAuthor())
                                        <a href="#" class="ml-2 dropdown-toggle float-right" id="dropdownMenuButton_{{$comment->id}}" data-bs-toggle="dropdown" style="font-size: 1.5rem; display: inline-block; vertical-align: middle;">
                                        </a>
                                        @endif
                                        <div class="dropdown-menu animated--fade-in" aria-labelledby="dropdownMenuButton__{{$comment->id}}" style="">
                                            @if($comment->currentUserIsAuthor())
                                            <a href="{{route('case_manager.view',['id' => $case->id, 'comment_id' => $comment->id])}}" class="dropdown-item">Continue</a>
                                            <a href="javascript:void(0);" class="dropdown-item delete_button text-danger" onclick="confirmDelete(event, {{ $comment->id }})">
                                                    Delete
                                                </a>
                                             
                                             <form id="delete-form-{{ $comment->id }}" 
                                                   action="{{ route('case_manager.delete_comment', ['comment_id' => $comment->id]) }}" 
                                                   method="POST" style="display: none;">
                                                 @csrf
                                                 @method('DELETE')
                                             </form>                                                                                                                                                                                                                                                                    @endif
                                        </div>
                                    @endif
                                </div>
                                <b>{{$comment->user->name}}</b> @if($comment->type) {{$comment->type}} @else comment autosaved @endif ({{$comment->days_ago()}})
                                <span class="float-right">{{date('d/m/Y h:i a',strtotime($comment->updated_at))}}</span>
                            </div>
                            <div class="cm_comment_comment">
                                {!! ($comment->comment) !!}
                            </div>
                            <div class="cm_comment_people">
                                @foreach($comment->views as $view)
                                    <span data-bs-toggle="tooltip" title="Viewed by {{$view->head_office_user->user->name}}" class="badge badge-primary badge-user">{{$view->head_office_user->user->name}}</span>
                                @endforeach
                            </div>
                            @if(count($comment->documents))
                            <div class="cm_comment_attachments mt-1">
                                <ul class="list-style-none p-0">
                                    @foreach($comment->documents as $doc)
                                         <li class="relative ">
                                            <a class="relative @if($doc->type == 'image') cm_image_link @endif" href="{{route('headoffice.view.attachment', $doc->document->unique_id).$doc->document->extension()}}" target="_blank"><i class="fa fa-link"></i> {{$doc->document->original_file_name()}}
                                            @if($doc->type == 'image')
                                                <div class="cm_image_hover">
                                                    <div class="card shadow">
                                                        <div class="card-body">
                                                            <img class="image-responsive" width="300" src="{{route('headoffice.view.attachment', $doc->document->unique_id).$doc->document->extension()}}">
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
                                </table>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
<div class="d-none" hidden>
    <form id="delete-form" hidden action="{{route('case_manager.delete_comment_multi')}}" method="POST">
        @csrf
        <input type="text" name="sessionIds[]" value="" id="sessionid-input">
    </form>
</div>

<div id="draggable" class="bottom-nav position-fixed " style="z-index: 9999;" aria-describedby="drag">
    <div class="left-side">
        <div class="info-wrapper">
            <div class="selected-show">
                <h5 id="count">0</h5>
            </div>
            <div class="info-heading" style="max-width: 180px;overflow:hidden;">
                <p>Items Selected</p>
                <div class="dots-wrapper">
                    <span class="dot"></span>
                </div>
            </div>
        </div>

        <div class="btn-wrapper">
            <button id='delete-btn' class="bar-btn" style="width: 180px;" title="Remove selected records">
                <img src="{{ asset('images/trash-01.svg') }}" alt="icon">
                <p>Remove Selected</p>
            </button>
        </div>
    </div>
    <button class="drag-btn">
        <img src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
        <img style="margin-top:-15px;" src="{{ asset('images/dots-horizontal.svg') }}" alt="svg">
    </button>
</div>

</div>

@section('styles')
@endsection

@endsection

@section('scripts')
<script>

    function confirmDelete(event, commentId) {
        event.preventDefault();  
        event.stopPropagation(); 

        if (confirm("Are you sure you want to delete this comment?")) {
            document.getElementById('delete-form-' + commentId).submit();
        }
    }
    
    $(document).ready(function() {
        let table = new DataTable('#session-dataTable', {
            paging: false,
            info: false,
            language: {
                search: ""
            },
            'columnDefs': [{
                "select": 'multi',
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': '',
                'render': function(data, type, full, meta) {
                    return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
                }
            }],
        });

        let sessionIds = []; // Array to store data-session-id values
        table.on('change', 'input', function() {
            let rowData = table.column(0).nodes().filter(function(value, index) {
                let inputElement = $(value).find('input');
                return inputElement.prop('checked');
            });

            sessionIds = [];
            $.each(rowData, function(index, obj) {
                let sessionId = $(obj).data('session-id');
                if (sessionId) {
                    sessionIds.push(sessionId);
                }
            });

            if (rowData.length > 0) {
                $('#draggable').addClass('anim').removeClass('reverse-anim');
            } else {
                $('#draggable').addClass('reverse-anim').removeClass('anim');
            }

            const dotsWrapper = $('.dots-wrapper');
            dotsWrapper.empty();

            for (let i = 0; i < rowData.length; i++) {
                dotsWrapper.append('<span class="dot" style="width:8px;height:8px;"></span>')
            }

            $('#count').text(rowData.length);
        });

        $('#delete-btn').on('click', function() {
            $('#sessionid-input').val(sessionIds);
            $('#delete-form').submit();
        });
    });

    $(document).ready(function() {
        const dragBtn = document.querySelector('.drag-btn');
        const draggable = document.getElementById('draggable');

        let posX = 0,
            posY = 0,
            mouseX = 0,
            mouseY = 0;

        dragBtn.addEventListener('mousedown', mouseDown, false);
        window.addEventListener('mouseup', mouseUp, false);

        function mouseDown(e) {
            e.preventDefault();
            posX = e.clientX - draggable.offsetLeft;
            posY = e.clientY - draggable.offsetTop;
            window.addEventListener('mousemove', moveElement, false);
        }

        function mouseUp() {
            window.removeEventListener('mousemove', moveElement, false);
        }

        function moveElement(e) {
            mouseX = e.clientX - posX;
            mouseY = e.clientY - posY;

            const maxX = 1000;
            const maxY = window.innerHeight - draggable.offsetHeight;

            mouseX = Math.min(Math.max(mouseX, 0), maxX);
            mouseY = Math.min(Math.max(mouseY, 0), maxY);
            draggable.style.left = mouseX + 'px';
            draggable.style.top = mouseY + 'px';
        }
    });
</script>

@endsection