@extends('layouts/support_layout')
@section('title', '| Client Pending || Processing Issue List')
@section('content')
@include('successMsg')

<!-- Included this file related all CSS -->
@include('support.ProcessingIssue._tableStyle')

<!-- Included product color from dynamicProductColorSet file -->
@include('support.ProcessingIssue.dynamicProductColorSet', ['productColors' => $productColors])


<div class="row">
    <div class="col-md-12">
        <div class="" style="">
            <div class="">
                <div class="panel panel-default" style="background-color:#708090;">
                    <div class="panel-heading" style="padding-bottom:0px">
                        <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">Client Support List</font></h1>
                    </div>
                    <div class="panel-body panelBodyView">
                        <ul id="pendingProcessingTable" style="color:black;">
                            <li class="table-header">
                                <div class="col col-1">#SN</div>
                                <div class="col col-2">Date</div>
                                <div class="col col-3">Client Name</div>
                                <div class="col col-4">Product</div>
                                <div class="col col-5">Regular Person</div>
                                <div class="col col-6">Issue</div>
                                <div class="col col-7">Priority</div>
                                <div class="col col-8">Client Priority</div>
                                <div class="col col-9">Status</div>
                                <div class="col col-10">Action</div>
                            </li>
                                                        @foreach($ClientSupport as $supportList)
                                <li class="table-row">
                                    <div class="col col-1">{{++$no}}</div>
                                    <div class="col col-2">{{ \Carbon\Carbon::parse($supportList->issueDate)->format('d-m-Y') }}</div>
                                    <div class="col col-3">{{ Str::limit($supportList->client->clientCompanyName ?? 'N/A', 40, '...') }}</div>

                                    @php
                                        $productId = $supportList->product->id ?? null;
                                        $productColorClass = $productColors[$productId]['class'] ?? '';
                                    @endphp
                                    <div class="col col-2 {{ $productColorClass }}">
                                        {{ Str::limit($supportList->product->name ?? 'N/A', 30, '...') }}
                                    </div>

                                    <div class="col col-5">{{ $supportList->regularSupportPerson->emp_name_english ?? 'N/A' }}</div>
                                    <div class="col col-6 tooltip-wrapper">
                                        <span class="ellipsis-box">
                                            {{ Str::limit($supportList->issue, 70, '...') }}
                                        </span>
                                        <span class="popup-full-text">
                                            {{ $supportList->issue }}
                                            <!-- {{ Str::limit($supportList->issue, 70, '...') }} -->
                                        </span>
                                    </div>
                                    <div class="col supervisorPriority 
                                        {{ $supportList->supervisorPriority % 2 === 0 ? 'priority-even' : 'priority-odd' }}">
                                        {{ $supportList->supervisorPriority }}
                                    </div>
                                    <div class="col col-8
                                        {{
                                            $supportList->clientPriority === 'High' ? 'priority-high' :
                                            ($supportList->clientPriority === 'Medium' ? 'priority-medium' :
                                            ($supportList->clientPriority === 'Low' ? 'priority-low' : ''))
                                        }}">
                                        {{ $supportList->clientPriority }}
                                    </div>
                                    <div class="col col-9 
                                        {{ 
                                            $supportList->status === 'Pending' ? 'status-pending' : 
                                            ($supportList->status === 'Processing' ? 'status-processing' : 
                                            ($supportList->status === 'SentToOperation' ? 'status-SentToOperation' : 
                                            ($supportList->status === 'Solved' ? 'status-solved' : ''))) 
                                        }} col-gap">
                                        {{ $supportList->status }}
                                    </div>

                                    <div class="col col-10">
                                        <a id="updateIcon" href="javascript:;" class="update-modal" supportId="{{$supportList->id}}">
                                            <span class="glyphicon glyphicon-plus-sign"></span>
                                            </a> &nbsp;
                                        <!-- {{-- <a id="viewIcon" href="javascript:;" class="view-modal" supportId="{{$supportList->id}}">
                                            <span class="fa fa-eye"></span>
                                        </a> &nbsp; --}} -->
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="imagePopup" style="display: none;">
    <span onclick="closePopup()" style="cursor: pointer; position: absolute; top: 10px; right: 20px; font-size: 24px;">&times;</span>
    <img id="fullImage" style="max-width: 90%; max-height: 90%;" />
</div>

@endsection

<!-- Update Modal Included -->
@include('support.ProcessingIssue.updateModal')


<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript">
$(function () {
    $("#pendingProcessingTable").sortable({
        items: 'li:not(li:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
            var prioritySet = [];
            $(this).find("li").each(function (index) {
                var supportId = $(this).find(".update-modal").attr("supportId");
                if (index > 0) {
                    prioritySet.push({'id': supportId, 'priority': index});
                    $(this).find("div").eq(6).html(index);
                }
            });
            // console.log("Priority Set: ", prioritySet);

            $.ajax({
                url: './prioritySet',
                type: 'PATCH',
                dataType: 'json',
                data: {prioritySet},
                success: function (response) {
                    console.log("Update successful:", response);
                },
                error: function (xhr, status, error) {
                    console.error("Update failed:", error);
                }
            });
        }
    });
});



</script>