@extends('layouts.master')
@section('page-title', $page_info['page_title'])
@section('main-section')
<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">{{$page_info['page_title']}}</a></li>
                                <li class="breadcrumb-item active">{{$page_info['page_name']}}</li>
                            </ol>
                        </div>
                        <h4 class="page-title">{{$page_info['page_name']}}</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <div class="row">
                <div class="col-xl-4 col-lg-5">
                    <div class="card text-center">
                        <div class="card-body">
                            @php
                                $statusColors = [
                                    'Open' => 'info',
                                    'Pending' => 'warning',
                                    'Hold' => 'danger'
                                ];
                                $color = $statusColors[$ticket->status] ?? 'success';
                            @endphp
                            <button type="button" class="btn btn-{{$color}} btn-sm mb-2">Ticket: {{$ticket->status}}</button>
                            <div class="text-start mt-3">
                                <h4 class="font-13 text-uppercase">Subject :</h4>
                                <p class="text-muted font-13 mb-3">
                                    {{$ticket->subject}}
                                </p>
                                <p class="text-muted mb-2 font-13"><strong>Department :</strong> <span class="ms-2">{{$ticket->department}}</span></p>
                                <p class="text-muted mb-2 font-13"><strong>Generated By :</strong><span class="ms-2">{{getUserNameById('users','userID',$ticket->generatedBy,'displayName')}}</span></p>
                                <p class="text-muted mb-2 font-13"><strong>Solved By :</strong> <span class="ms-2 ">{{getUserNameById('users','userID',$ticket->solvedBy,'displayName')}}</span></p>
                                <p class="text-muted mb-1 font-13"><strong>Generated On :</strong> <span class="ms-2">{{dftn($ticket->addedOn)}}</span></p>
                            </div>
                            
                            <!-- Show Attachments if available -->
                            <div class="d-flex justify-content-between align-items-center">
                                @if(!empty($ticket->file))
                                    <a href="{{ Storage::url($ticket->file) }}" target="_blank" class="btn btn-warning font-13">
                                        <i class="mdi mdi-paperclip"></i> Attachment
                                    </a>
                                @else
                                    <span class="text-muted">No attachment available</span>
                                @endif
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#success-header-modal">
                                    <i class="mdi mdi-eye"></i> Description
                                </button>
                            </div>

                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col-->

                <div class="col-xl-8 col-lg-7">
                    <div class="card">
                        <div class="card-body">
                            <ul class="nav nav-pills bg-nav-pills nav-justified mb-3">
                                <li class="nav-item">
                                    <a href="#aboutme" data-bs-toggle="tab" aria-expanded="false" class="nav-link rounded-0 active">
                                        Timeline
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane show active" id="timeline">
                                    <!-- comment box -->
                                    <div class="border rounded mt-2 mb-3">
                                        <form action="{{route('replyTicket')}}" class="comment-area-box" method="POST" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="mb-1 col-md-12">
                                                    <div class="input-group mb-1">
                                                        <textarea rows="5" class="form-control" placeholder="Write something...." name="description"></textarea>
                                                    </div>
                                                    @error('description')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                                <div class="mb-1 col-md-6">
                                                    <div class="bg-light d-flex justify-content-between align-items-center">
                                                        <input type="file" class="form-control" name="file">
                                                    </div>
                                                </div>
                                                <div class="mb-1 col-md-6">
                                                    <select class="form-control" name="status">
                                                        <option value="">Select Status</option>
                                                        <option value="Pending">Pending</option>
                                                        <option value="Hold">Hold</option>
                                                        <option value="Closed">Closed</option>
                                                    </select>
                                                    @error('status')
                                                        <span class="text-danger">{{$message}}</span>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="p-2 bg-light d-flex justify-content-between align-items-end">
                                                <input type="hidden" name="referenceticketID" value="{{$ticket->ticketID}}">
                                                <button type="submit" class="btn btn-sm btn-success waves-effect text-end">Reply</button>
                                            </div>
                                        </form>
                                    </div> <!-- end .border-->
                                    <!-- end comment box -->

                                    @if(count($ticketTimeline)>0)
                                        @foreach($ticketTimeline as $arr)
                                        <div class="border border-light rounded p-2 mb-3">
                                            <div class="d-flex align-items-center">
                                                <img class="me-2 rounded-circle" src="{{Storage::url(profilePic())}}" alt="Generic placeholder image" height="32">
                                                <div>
                                                    <h5 class="m-0">{{ getUserNameById('users', 'userID', $arr->addedBy, 'displayName') }}</h5>
                                                    <p class="text-muted"><small>{{ timeAgo($arr->addedOn) }}</small></p>
                                                </div>
                                                <div class="ms-auto text-end">
                                                    <h5 class="font-13">{{ dftn($arr->addedOn)}}</h5>
                                                </div>
                                            </div>
                                            <p>{{$arr->description}}</p>
                                            @if(!empty($arr->file))
                                            <a href="{{Storage::url($arr->file)}}" target="_blank"><img src="{{Storage::url($arr->file)}}" alt="post-img" class="rounded" height="60" /></a>
                                            @endif
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="border border-light rounded p-2 mb-3">
                                            <p>No activity found</p>
                                        </div>
                                    @endif
                                    <div class="row">
                                        {{ $ticketTimeline->links('pagination::bootstrap-5') }}
                                    </div>
                                </div> <!-- end tab-content -->
                            </div> <!-- end card body -->
                        </div> <!-- end card -->
                    </div> <!-- end col -->
                </div> <!-- end row-->

        </div> <!-- end row -->
    </div> 

    <!-- Modal for Description -->
    <div id="success-header-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="success-header-modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success">
                    <h4 class="modal-title text-white" id="success-header-modalLabel">Description of Ticket</h4>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <form class="ps-1 pe-1" id="supportTicketModalForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12 mb-2">
                                <textarea id="simplemde" disabled></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div> 

@endsection
@section('custom-js')

<script type="text/javascript">
     $(document).ready(function() {
    var simplemde; // Declare SimpleMDE outside to ensure it's not initialized multiple times
    var ticketContent = @json($ticket->description); // Content to populate in the editor
    console.log(ticketContent);  // Log content to ensure it's correct

    // Open modal and initialize SimpleMDE editor when modal is shown
    $('#success-header-modal').on('shown.bs.modal', function () {
        if (!simplemde) {
            // Initialize SimpleMDE only if it hasn't been created yet
            simplemde = new SimpleMDE({
                element: $("#simplemde")[0], // Initialize the editor on the textarea
                spellChecker: false,  // Optional: disable spell checker if needed
                readOnly: true         // Make the editor readonly
            });
            // Set the value of SimpleMDE to the content
            simplemde.value(ticketContent);
        } else {
            // If SimpleMDE is already initialized, just update the content
            simplemde.value(ticketContent);
        }
    });
});

   $(document).ready(function() {
    // Function to update containers based on selected option
    function updateContainers(selectedOption) {
        // Hide all containers and disable inputs
        $('.searchBoxContainer, .dateRangeContainer, .customSortContainer, .exportAllContainer, .exportByDateContainer').hide();
        $('.searchInput, .singledaterange, .customSearchInput, .customDateRange, .exportDateRange').prop('disabled', true);

        // Show the corresponding container and enable relevant inputs based on selected option
         if (selectedOption === 'sortByDate') {
            $('.dateRangeContainer').show();
            $('.singledaterange').prop('disabled', false);
        } else if (selectedOption === 'customSort') {
            $('.customSortContainer').show();
            $('.customSearchInput, .customDateRange').prop('disabled', false);
        } else if (selectedOption === 'exportAll') {
            $('.exportAllContainer').show();
            // No specific input to enable/disable
        } else if (selectedOption === 'exportByDate') {
            $('.exportByDateContainer').show();
            $('.exportDateRange').prop('disabled', false);
        } else if (selectedOption === 'sortByToday' || selectedOption ==='sortByWeek' || selectedOption === 'sortByThisMonth' || selectedOption === 'sortByLastMonth') {
            // Only show the search button in searchBoxContainer for these options
            $('.searchBoxContainer').show();
            $('#searchButton').show();
        } else {
            // Default behavior if no valid option selected or if selectedOption is blank
            selectedOption = 'sortByToday'; // Default to 'sortBySearch'
            $('.searchBoxContainer').show();
            $('.searchInput').prop('disabled', false);
        }
        
        // Set the selected option in the dropdown
        $('.exportSelect').val(selectedOption);
    }

    // Initialize with default option 'sortBySearch'
     @php
       $selectedOption = !empty($filter) ? $filter : 'sortBySearch';
      @endphp
    var selectedOption = '{{ $selectedOption }}';
    updateContainers(selectedOption);

    // Handle change event on the select dropdown
    $('.exportSelect').change(function() {
        var selectedOption = $(this).val();
        updateContainers(selectedOption);
    });
});
  
</script>
@endsection