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

<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">
                        <div class="panel-options">
                            <a href="{{url('support/addCustomerSupport/')}}" class="btn btn-info pull-right addViewBtn">
                                  <i class="glyphicon glyphicon-plus-sign addIcon"></i>Add New Issue</a>
                        </div>
                        <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">Client Support List</font></h1>
                    </div>
                    <div class="panel-body panelBodyView">
                        <div>
                            <script type="text/javascript">
                            jQuery(document).ready(function($)
                            {
                              $("#ProCategoryView").dataTable().yadcf([ ]);
                            });
                            </script>
                        </div>
                        <table class="table table-striped table-bordered" id="ProCategoryView" style="color:black;">
                            <thead>
                                <tr>
                                    <th width="20">SL#</th>
                                    <th width="20">Date</th>
                                    <th width="80">Company Name</th>
                                    <th width="65">Product</th>
                                    <th width="65">Regular Person</th>
                                    <th width="65">Support Person</th>
                                    <th width="65">Issue</th>
                                    <th width="60">Status</th>
                                    <th width="70">Action</th>

                                </tr>
                                {{ csrf_field() }}
                            </thead>
                            <tbody>
                                                                @foreach($ClientSupport as $supportList)
                                    <tr class="item{{$supportList->id}}">
                                        <td class="text-center slNo">{{++$no}}</td>
                                        <td style="padding-left: 25px; text-align: center;">{{ \Carbon\Carbon::parse($supportList->issueDate)->format('d-m-Y') }}</td>
                                        <td style="padding-left: 25px; text-align: center;">{{ $supportList->client->clientCompanyName ?? 'N/A' }}</td>
                                        <td style="padding-left: 25px; text-align: center;">{{ $supportList->product->name ?? 'N/A' }}</td>
                                        <td style="padding-left: 25px; text-align: center;">{{ $supportList->regularSupportPerson->emp_name_english ?? 'N/A' }}</td>
                                        <td style="padding-left: 25px; text-align: center;">{{ $supportList->assignSupportPerson->emp_name_english ?? 'N/A' }}</td>
                                        <td style="text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
                                            {{ Str::limit($supportList->issue, 70, '...') }}
                                        </td>
                                        
                                        <td style="padding-left: 25px; text-align: center;">{{ $supportList->status }}</td>
                                
                                        <td class="text-center" width="50">
                                            <a id="viewIcon" href="javascript:;" class="view-modal" supportId="{{$supportList->id}}">
                                                <span class="fa fa-eye"></span>
                                            </a> &nbsp;
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




@include('dataTableScript')
@endsection

<!-- Include Issue Details View Modal -->
 @include('support.IssueList.viewModal')

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
<script type="text/javascript">

$(document).ready(function() {
    /*Update Modal Start*/
    $(document).on('click', '#viewIcon', function() {
    var supportId = $(this).attr('supportId');
    // $("#updateButton").val(supportId)
    // console.log("supportId", supportId)

    $.ajax({

        url: './viewIssue',
        type: 'get',
        dataType: 'json',
        data: {id:supportId},
        success: function(data) {

            console.log(data);
            $('#issueDate').val(data.issueDate);
            $('#clientName').val(data.clientName);
            $('#productName').val(data.productName);
            $('#supportPerson').val(data.supportPerson);
            $('#issue').val(data.issue);
            $('#issueCreatedBy').val(data.createdBy);
            $('#source').val(data.source);
            $('#solution').val(data.solution);
            $('#solutionDate').val(data.solutionDate);
            $('#issueSolutionBy').val(data.solutionBy);
            $('#regularSupportPerson').val(data.regularPerson);
            $('#comments').val(data.comment);
            $('#priority').val(data.clientPriority);
            $('#status').val(data.status);

            $('#operationsAssignDate').val(data.operationsAssignDate);
            $('#operationsComment').val(data.operationsFeedback);
            $('#expectedDate').val(data.operationsSolveDate);


            let relatedIssues = data.relatedIssue;
            $('#relatedIssueList').empty();

            
            if (relatedIssues != null) {
                Object.values(relatedIssues).forEach(function(issue, index) {
                    if (issue.id) {
                        let formattedDate = new Date(issue.date).toISOString().slice(0, 10);
                        $("#relatedIssueList").append("<tr>" +
                            "<td>" + (index + 1) + "</td>" +
                            "<td>" + formattedDate  + "</td>" +
                            "<td>" + issue.name + "</td>" +
                            "<td>" + issue.comment + "</td>" +
                            "<td id='relatedStatus_" + (index + 1) + "' class='relatedStatus'>" + issue.status + "</td>" +
                            "</tr>");
                    }
                });
            }

            $('#viewModal').modal('show');
            $("#viewModal").find('.modal-dialog').css('width', '65%');
        },
            error: function(argument) {
            alert('response error');
        }
        });
    });
    /*Update Modal End*/
})
</script>
</script>