@extends('layouts.app')

@section('title', 'Tracking Form')

@section('meta')
    @vite('resources/css/agent.css')
    <meta name="last-feedback-id"
        content="{{ isset($ici) && $ici && isset($feedbacks) && $feedbacks->count() > 0 ? $feedbacks->last()->id : 0 }}">
@endsection

@section('content')

    <!-- 📝 RU CASE Form Section -->
    <section class="py-5 bg-light agent-page">
        <div class="container">
            {{-- Success Message --}}
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif


            {{-- Error Messages --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <h2 class="fw-bold mb-2 text-center d-flex align-items-center justify-content-center gap-2">
                <i class="bi bi-clipboard2-check text-primary"></i>
                RU CASE
            </h2>
            <p class="text-muted text-center mb-4">Record, track and collaborate on customer escalations</p>

            <!-- Customer Detail From COMS -->
            <div class="card border-0 shadow-sm mb-4">

                <!-- Error Alert for No Ticket Found -->
                <div id="noTicketError" class="alert alert-danger d-none" role="alert">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    <strong>No Ticket Found:</strong> <span id="errorMessage"></span>
                </div>

                <!-- Customer Detail From COMS -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header card-header-warning d-flex align-items-center">
                        <i class="bi bi-database-gear text-warning me-2"></i>
                        <span class="fw-semibold text-warning">Customer Detail From COMS</span>
                        @if ($ici)
                            <span class="badge bg-info ms-2">Viewing Specific Ticket</span>
                        @endif
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Complaint #</label>
                                <div class="input-group">
                                    <input type="text" id="complaint_number" name="complaint_number" class="form-control"
                                        placeholder="000000-000000" value="{{ $ici && $ici->coms ? $ici->coms->complaint_number : '' }}"
                                        {{ $ici ? 'disabled' : '' }}>
                                    <button type="button" id="searchComplaintBtn" class="btn btn-primary"
                                        {{ $ici ? 'disabled' : '' }}>
                                        <i class="bi bi-search"></i>
                                    </button>
                                </div>
                                <small class="text-muted">
                                    @if ($ici)
                                        Search disabled - viewing ticket {{ $ici->ticket_number }}
                                    @else
                                        Fetch customer/job details from COMS
                                    @endif
                                </small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Job #</label>
                                <input type="text" name="job_number" id="job_number" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->job : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">COMS Complaint Date</label>
                                <input type="date" name="coms_complaint_date" id="coms_complaint_date"
                                    class="form-control" readonly value="{{ $ici && $ici->coms && $ici->coms->coms_complaint_date ? \Carbon\Carbon::parse($ici->coms->coms_complaint_date)->format('Y-m-d') : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Job Type</label>
                                <input type="text" name="job_type" id="job_type" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->job_type : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Service Center</label>
                                <input type="text" name="service_center" id="service_center" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->service_center : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer Name</label>
                                <input type="text" name="customer_name" id="customer_name" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->customer_name : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Contact No</label>
                                <input type="text" name="contact_no" id="contact_no" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->contact_number : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Technician Name</label>
                                <input type="text" name="technician_name" id="technician_name" class="form-control"
                                    readonly value="{{ $ici && $ici->coms ? $ici->coms->technician_name : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Date of Purchase</label>
                                <input type="date" name="purchase_date" id="purchase_date" class="form-control" readonly
                                    value="{{ $ici && $ici->coms && $ici->coms->date_of_purchase ? \Carbon\Carbon::parse($ici->coms->date_of_purchase)->format('Y-m-d') : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Product</label>
                                <input type="text" name="product" id="product" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->product : '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Job Status</label>
                                <input type="text" name="job_status" id="job_status" class="form-control" readonly
                                    value="{{ $ici && $ici->coms ? $ici->coms->job_status : '' }}">
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Problem</label>
                                <textarea id="problem" name="problem" rows="2" class="form-control" readonly>{{ $ici && $ici->coms ? $ici->coms->problem : '' }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Work Done</label>
                                <textarea id="workdone" name="workdone" rows="2" class="form-control" readonly>{{ $ici && $ici->coms ? $ici->coms->work_done : '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Complaint History Accordion -->
                <div class="accordion mt-4" id="complaintHistoryAccordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="historyHeading">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#historyCollapse" aria-expanded="false" aria-controls="historyCollapse">
                                <i class="bi bi-clock-history me-2"></i>
                                Complaint History
                            </button>
                        </h2>
                        <div id="historyCollapse" class="accordion-collapse collapse" aria-labelledby="historyHeading"
                             data-bs-parent="#complaintHistoryAccordion">
                            <div class="accordion-body">
                                <div id="historyContent">
                                    <p class="text-muted">No history available. Search for a complaint to see history.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-4">

                <!-- Ticket Status Information -->
                <div id="ticketStatusInfo" class="alert alert-info" style="display: none;">
                    <div id="ticketStatusContent"></div>
                </div>

                <!-- Initial Customer Information -->
                <form action="#" method="POST" class="form-card p-4 shadow rounded" id="mainForm">
                    @csrf
                    <input type="hidden" name="complaint_number_hidden" id="complaint_number_hidden" value="">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <h5 class="mb-0 text-primary d-flex align-items-center gap-2">
                            <i class="bi bi-person-vcard"></i> Initial Customer Information
                        </h5>
                        <span class="badge rounded-pill bg-light text-secondary">View Only</span>
                    </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Ticket No</label>
                        <input type="text" name="ticket_number" id="ticket_number" class="form-control" readonly
                            value="{{ $ici->ticket_number ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label for="complaint_escalation_date" class="form-label fw-semibold">Complaint Escalation
                            Date</label>
                        <input type="date" class="form-control" name="complaint_escalation_date"
                            id="complaint_escalation_date" readonly
                            value="{{ $ici && $ici->complaint_escalation_date ? \Carbon\Carbon::parse($ici->complaint_escalation_date)->format('Y-m-d') : '' }}">
                    </div>
                    <div class="col-md-3">
                        <label for="case_status" class="form-label fw-semibold">Case Status</label>
                        <input name="case_status" id="case_status" class="form-control" readonly
                            value="{{ $ici->case_status ?? '' }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Aging</label>
                        <input type="number" name="aging" id="aging" class="form-control" readonly
                            value="">
                    </div>
                    <div class="col-md-6">
                        <label for="complaint_category" class="form-label fw-semibold">Complaint Category</label>
                        <input name="complaint_category" id="complaint_category" class="form-control" readonly
                            value="{{ $ici->complaint_category ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label for="agent_name" class="form-label fw-semibold">Agent Name</label>
                        <input type="text" class="form-control" name="agent_name" id="agent_name" readonly
                            value="{{ $ici->agent_name ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label for="reason_of_escalation" class="form-label fw-semibold">Reason of Escalation</label>
                        <input name="reason_of_escalation" id="reason_of_escalation" class="form-control" readonly
                            value="{{ $ici->reason_of_escalation ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Escalation Level</label>
                        <input name="escalation_level" id="escalation_level" class="form-control" readonly
                            value="{{ $ici->escalation_level ?? '' }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold">Voice of Customer</label>
                        <textarea name="voice_of_customer" id="voice_of_customer" rows="3" class="form-control" readonly>{{ $ici->voice_of_customer ?? '' }}</textarea>
                    </div>
                </div>

                {{-- Happy Call Section --}}
                @if($ici && $ici->case_status === 'Resolved' && $ici->happyCallStatus)
                    <div id="happyCallSection" class="mt-4" style="display: block;">
                        <hr class="my-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0 text-success d-flex align-items-center gap-2">
                                <i class="bi bi-emoji-smile"></i> Happy Call Status
                            </h5>
                            <span class="badge rounded-pill bg-success text-white">Completed</span>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Case Resolved Date</label>
                                <input type="date" class="form-control" value="{{ $ici->happyCallStatus->resolved_date ? \Carbon\Carbon::parse($ici->happyCallStatus->resolved_date)->format('Y-m-d') : '' }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Happy Call Date</label>
                                <input type="date" class="form-control" value="{{ $ici->happyCallStatus->happy_call_date ? \Carbon\Carbon::parse($ici->happyCallStatus->happy_call_date)->format('Y-m-d') : '' }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer Satisfied</label>
                                <input type="text" class="form-control" value="{{ $ici->happyCallStatus->customer_satisfied }}" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Delay Reason</label>
                                <input type="text" class="form-control" value="{{ $ici->happyCallStatus->delay_reason }}" readonly>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Additional Customer Feedback</label>
                                <textarea class="form-control" rows="2" readonly>{{ $ici->happyCallStatus->voice_of_customer }}</textarea>
                            </div>
                        </div>
                    </div>
                @elseif($ici && $ici->case_status === 'Resolved' && !$ici->happyCallStatus)
                    <div id="happyCallSection" class="mt-4" style="display: block;">
                        <hr class="my-4">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h5 class="mb-0 text-success d-flex align-items-center gap-2">
                                <i class="bi bi-emoji-smile"></i> Happy Call Status
                            </h5>
                            <span class="badge rounded-pill bg-warning text-dark">Pending Submission</span>
                        </div>
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Happy Call data has not been submitted yet. Only authorized personnel can submit this information.
                        </div>
                    </div>
                @endif

            </form>

                {{-- Chat section --}}
                @php
                    $shouldShowChat = $ici;
                @endphp
                <div id="chatSection" style="{{ $shouldShowChat ? '' : 'display: none;' }}">
                    {{-- Config for chat.js (used when chatArea is updated via AJAX) --}}
                    <div id="chatConfig"
                        data-feedback-list-url="{{ $ici ? route('management.feedback.list', $ici->ticket_number) : '' }}"
                        data-current-user="{{ auth()->user()->name }}"
                        data-agent-index-url="{{ route('t_management.index') }}"
                        data-last-feedback-id="{{ $feedbacks->last()->id ?? 0 }}"></div>

                    {{-- Chat header --}}
                    <div class="d-flex align-items-center mb-3 mt-4">
                        <h4 class="mb-0">
                            Feedback <span class="badge rounded-pill text-bg-primary"
                                id="ticketBadge">{{ $ici->ticket_number ?? '' }}</span>
                        </h4>
                    </div>

                    {{-- Chat box --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-body chat-scroll" id="chatScrollArea" style="height: 420px; overflow-y: auto;">
                            @if ($ici)
                                @forelse($feedbacks as $feedback)
                                    @php
                                        $isMe = isset(auth()->user()->name) && $feedback->name === auth()->user()->name;
                                        $messageClass = $isMe ? 'justify-content-end' : 'justify-content-start';
                                        $bgColor = $isMe ? '#d1e7dd' : '#e2e3e5';
                                        $senderName = $isMe ? 'You' : $feedback->name;
                                    @endphp

                                    <div class="d-flex {{ $messageClass }} mb-3">
                                        <div class="p-2 rounded-3"
                                            style="max-width: 70%; background-color: {{ $bgColor }};">
                                            <div class="fw-semibold mb-1">{{ $senderName }} <span
                                                    class="text-muted">({{ $feedback->role }})</span></div>
                                            <div>{{ $feedback->message }}</div>
                                            <div class="mt-1"><small
                                                    class="text-muted">{{ $feedback->created_at->format('d M Y, h:i A') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <p class="text-center text-muted my-5">No feedback yet. Be the first to send a message!
                                    </p>
                                @endforelse
                            @endif
                        </div>

                        {{-- Chat input --}}
                        <div class="card-footer card-footer-grey">
                            @php
                                $chatTicketNo = $ici ? $ici->ticket_number : null;
                            @endphp
                            <form id="chatForm"
                                action="{{ $chatTicketNo ? route('management.feedback.store', $chatTicketNo) : '#' }}"
                                method="POST" class="chat-input-form">
                                <div class="input-group">
                                    <input type="text" name="message" id="chatMessage"
                                        class="form-control @error('message') is-invalid @enderror"
                                        placeholder="Type your message…" autocomplete="off" required
                                        {{ empty($chatTicketNo) ? 'disabled' : '' }}">
                                    <button type="submit" class="btn btn-primary"
                                        {{ empty($chatTicketNo) ? 'disabled' : '' }}>
                                        <i class="bi bi-send-fill me-1"></i> Send
                                    </button>
                                </div>
                                @error('message')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
                    // Helper function to extract date part from datetime strings
                    function extractDatePart(dateTimeString) {
                        if (!dateTimeString) return '';
                        let dateStr = dateTimeString;
                        if (dateTimeString.includes('T')) {
                            dateStr = dateTimeString.split('T')[0];
                        } else if (dateTimeString.includes(' ')) {
                            dateStr = dateTimeString.split(' ')[0];
                        }
                        return dateStr;
                    }

                    // Function to enable/disable chat input based on ticket status
                    function updateChatInputStatus(caseStatus) {
                        const chatMessage = document.getElementById("chatMessage");
                        const chatFormButton = document.getElementById("chatForm").querySelector("button");

                        if (caseStatus && caseStatus.toLowerCase() === 'resolved') {
                            if (chatMessage) chatMessage.disabled = true;
                            if (chatFormButton) chatFormButton.disabled = true;
                            // Optional: Add visual indicator
                            if (chatMessage) chatMessage.placeholder = "Chat disabled for resolved tickets";
                        } else {
                            if (chatMessage) chatMessage.disabled = false;
                            if (chatFormButton) chatFormButton.disabled = false;
                            if (chatMessage) chatMessage.placeholder = "Type your message…";
                        }
                    }

                    // Function to calculate and update aging
                    function updateAging(complaintDate) {
                        if (complaintDate) {
                            try {
                                // Handle different date formats
                                let complaintDateObj;
                                if (complaintDate.includes(' ')) {
                                    // Handle Laravel date format like "2025-10-07 00:00:00"
                                    complaintDateObj = new Date(complaintDate.replace(' ', 'T'));
                                } else {
                                    // Handle date format like "2025-10-07"
                                    complaintDateObj = new Date(complaintDate);
                                }

                                const today = new Date();
                                const diffTime = Math.abs(today - complaintDateObj);
                                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                                document.getElementById('aging').value = diffDays;
                            } catch (error) {
                                document.getElementById('aging').value = '';
                            }
                        } else {
                            document.getElementById('aging').value = '';
                        }
                    }

                    // Initialize aging on page load if we have existing data
                    document.addEventListener('DOMContentLoaded', function() {
                        @if ($ici && $ici->complaint_escalation_date)
                            updateAging('{{ $ici->complaint_escalation_date }}');
                        @endif

                        // Also fetch complaint history for the loaded ticket
                        @if ($ici && $ici->coms && $ici->coms->complaint_number)
                            fetchComplaintHistory('{{ $ici->coms->complaint_number }}');
                        @endif

                        // Check initial ticket status and update chat input accordingly
                        @if ($ici && $ici->case_status)
                            updateChatInputStatus('{{ $ici->case_status }}');
                        @endif

                        // Initialize Happy Call section visibility and required attributes
                        const happyCallSection = document.getElementById('happyCallSection');
                        if (happyCallSection) {
                            if (happyCallSection.style.display === 'none') {
                                // Remove required attributes from hidden fields
                                const happyCallFields = happyCallSection.querySelectorAll('input[required], select[required], textarea[required]');
                                happyCallFields.forEach(field => {
                                    field.removeAttribute('required');
                                });
                            } else if (happyCallSection.style.display === 'block') {
                                // Add required attributes to visible fields
                                const happyCallFields = happyCallSection.querySelectorAll('input[name="resolved_date"], input[name="happy_call_date"], select[name="customer_satisfied"], select[name="delay_reason"]');
                                happyCallFields.forEach(field => {
                                    field.setAttribute('required', 'required');
                                });
                            }
                        }

                    });


                    // Function to fetch and display complaint history
                    function fetchComplaintHistory(complaintNumber) {
                        console.log('Fetching history for complaint number:', complaintNumber);

                        fetch('{{ route("management.complaint.history") }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    complaint_number: complaintNumber
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                const historyContent = document.getElementById('historyContent');

                                if (data.error) {
                                    historyContent.innerHTML = '<p class="text-danger">Error loading history: ' + data.error +
                                        '</p>';
                                    return;
                                }

                                if (!data.history || data.history.length === 0) {
                                    historyContent.innerHTML =
                                        '<p class="text-muted">No previous ticket found for this complaint number.</p>';
                                    return;
                                }

                                // Build history HTML
                                let historyHtml = '<div class="table-responsive"><table class="table table-striped table-sm">';
                                historyHtml += '<thead><tr>';
                                historyHtml += '<th>Complaint #</th>';
                                historyHtml += '<th>Job #</th>';
                                historyHtml += '<th>Date</th>';
                                historyHtml += '<th>Product</th>';
                                historyHtml += '<th>Status</th>';
                                historyHtml += '<th>Ticket #</th>';
                                historyHtml += '<th>Case Status</th>';
                                historyHtml += '</tr></thead><tbody>';

                                data.history.forEach(item => {
                                    historyHtml += '<tr>';
                                    historyHtml += '<td>' + (item.complaint_number || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.job || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.coms_complaint_date || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.product || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.job_status || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.ticket_number || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.case_status || 'N/A') + '</td>';
                                    historyHtml += '</tr>';
                                });

                                historyHtml += '</tbody></table></div>';
                                historyHtml += '<small class="text-muted">Showing ' + data.history.length +
                                    ' resolved ticket(s) for this Complaint number.</small>';

                                historyContent.innerHTML = historyHtml;

                                // Auto-expand the accordion if there's history
                                const historyCollapse = document.getElementById('historyCollapse');
                                if (historyCollapse && data.history.length > 0) {
                                    const bsCollapse = new bootstrap.Collapse(historyCollapse, {
                                        show: true
                                    });
                                }
                            })
                            .catch(error => {
                                // Handle history fetch error
                                const historyContent = document.getElementById('historyContent');
                                historyContent.innerHTML = '<p class="text-danger">Failed to load complaint history.</p>';
                            });
                    }

                    // Function to show error message
                    function showErrorMessage(message) {
                        const errorDiv = document.getElementById("noTicketError");
                        const errorMessageSpan = document.getElementById("errorMessage");
                        if (errorDiv && errorMessageSpan) {
                            errorMessageSpan.textContent = message;
                            errorDiv.classList.remove("d-none");
                            // Scroll to the error message
                            errorDiv.scrollIntoView({
                                behavior: 'smooth',
                                block: 'nearest'
                            });
                        }
                    }

                    // Function to hide error message
                    function hideErrorMessage() {
                        const errorDiv = document.getElementById("noTicketError");
                        if (errorDiv) {
                            errorDiv.classList.add("d-none");
                        }
                    }

                    // Function to fetch and display complaint history
                    function fetchComplaintHistory(complaintNumber) {
                        console.log('Fetching history for complaint number:', complaintNumber);

                        fetch('{{ route("management.complaint.history") }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    complaint_number: complaintNumber
                                })
                            })
                            .then(response => response.json())
                            .then(data => {
                                const historyContent = document.getElementById('historyContent');

                                if (data.error) {
                                    historyContent.innerHTML = '<p class="text-danger">Error loading history: ' + data.error +
                                        '</p>';
                                    return;
                                }

                                if (!data.history || data.history.length === 0) {
                                    historyContent.innerHTML =
                                        '<p class="text-muted">No previous ticket found for this complaint number.</p>';
                                    return;
                                }

                                // Build history HTML
                                let historyHtml = '<div class="table-responsive"><table class="table table-striped table-sm">';
                                historyHtml += '<thead><tr>';
                                historyHtml += '<th>Complaint #</th>';
                                historyHtml += '<th>Job #</th>';
                                historyHtml += '<th>Date</th>';
                                historyHtml += '<th>Product</th>';
                                historyHtml += '<th>Status</th>';
                                historyHtml += '<th>Ticket #</th>';
                                historyHtml += '<th>Case Status</th>';
                                historyHtml += '</tr></thead><tbody>';

                                data.history.forEach(item => {
                                    historyHtml += '<tr>';
                                    historyHtml += '<td>' + (item.complaint_number || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.job || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.coms_complaint_date || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.product || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.job_status || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.ticket_number || 'N/A') + '</td>';
                                    historyHtml += '<td>' + (item.case_status || 'N/A') + '</td>';
                                    historyHtml += '</tr>';
                                });

                                historyHtml += '</tbody></table></div>';
                                historyHtml += '<small class="text-muted">Showing ' + data.history.length +
                                    ' resolved ticket(s) for this Complaint number.</small>';

                                historyContent.innerHTML = historyHtml;

                                // Auto-expand the accordion if there's history
                                const historyCollapse = document.getElementById('historyCollapse');
                                if (historyCollapse && data.history.length > 0) {
                                    const bsCollapse = new bootstrap.Collapse(historyCollapse, {
                                        show: true
                                    });
                                }
                            })
                            .catch(error => {
                                // Handle history fetch error
                                const historyContent = document.getElementById('historyContent');
                                historyContent.innerHTML = '<p class="text-danger">Failed to load complaint history.</p>';
                            });
                    }

                    // Function to validate complaint number format (6 digits - 6 digits)
                    function isValidComplaintNumber(complaintNumber) {
                        const regex = /^\d{6}-\d{6}$/;
                        return regex.test(complaintNumber.trim());
                    }

                    // Function to perform complaint search
                    function performComplaintSearch() {
                        const complaintNumber = document.getElementById("complaint_number").value.trim();

                        if (!complaintNumber) {
                            showErrorMessage("Please enter a complaint number");
                            return;
                        }

                        if (!isValidComplaintNumber(complaintNumber)) {
                            showErrorMessage('Please enter a valid complaint number in format: 000000-000000');
                            return;
                        }

                        // Hide any previous error messages
                        hideErrorMessage();

                        // Clear all form fields before searching
                        // Clear COMS fields
                        document.getElementById('job_number').value = '';
                        document.getElementById('coms_complaint_date').value = '';
                        document.getElementById('job_type').value = '';
                        document.getElementById('customer_name').value = '';
                        document.getElementById('contact_no').value = '';
                        document.getElementById('technician_name').value = '';
                        document.getElementById('purchase_date').value = '';
                        document.getElementById('product').value = '';
                        document.getElementById('job_status').value = '';
                        document.getElementById('problem').value = '';
                        document.getElementById('workdone').value = '';

                        // Clear ICI fields
                        document.getElementById('ticket_number').value = '';
                        document.getElementById('service_center').value = '';
                        document.getElementById('complaint_escalation_date').value = '';
                        document.getElementById('case_status').value = '';
                        document.getElementById('aging').value = '';
                        document.getElementById('complaint_category').value = '';
                        document.getElementById('agent_name').value = '';
                        document.getElementById('reason_of_escalation').value = '';
                        document.getElementById('escalation_level').value = '';
                        document.getElementById('voice_of_customer').value = '';

                        // Hide ticket status info
                        document.getElementById('ticketStatusInfo').style.display = 'none';

                        // Hide chat section
                        document.getElementById('chatSection').style.display = 'none';

                        // Clear and reset history
                        document.getElementById('historyContent').innerHTML = '<p class="text-muted">No history available. Search for a complaint to see history.</p>';
                        const historyCollapse = document.getElementById('historyCollapse');
                        if (historyCollapse) {
                            const bsCollapse = new bootstrap.Collapse(historyCollapse, {
                                hide: true
                            });
                        }

                        // Show loading state
                        document.getElementById("searchComplaintBtn").innerHTML = '<i class="bi bi-hourglass-split"></i>';
                        document.getElementById("searchComplaintBtn").disabled = true;

                        // Fetch COMS data directly from database
                        fetch("{{ route('management.fetch.coms') }}", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json",
                                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                                    "Accept": "application/json"
                                },
                                body: JSON.stringify({
                                    complaint_number: complaintNumber
                                })
                            })
                            .then(response => response.json())
                            .then(comsData => {
                                // Reset button state
                                document.getElementById("searchComplaintBtn").innerHTML = '<i class="bi bi-search"></i>';
                                document.getElementById("searchComplaintBtn").disabled = false;

                                if (comsData.error) {
                                    // No complaint found in database
                                    showErrorMessage('No complaint found');
                                    return;
                                }

                                // Debug: Log the received COMS data
                                console.log('COMS data received:', comsData);

                                // Populate COMS fields with data from database
                                if (comsData.JobNo) document.getElementById('job_number').value = comsData.JobNo;
                                if (comsData.COMSComplaintDate) {
                                    const complaintDateStr = extractDatePart(comsData.COMSComplaintDate);
                                    document.getElementById('coms_complaint_date').value = complaintDateStr;
                                    updateAging(complaintDateStr);
                                }
                                if (comsData.JobType) document.getElementById('job_type').value = comsData.JobType;
                                // Always set service center, even if empty
                                document.getElementById('service_center').value = comsData.ServiceCenter || '';
                                console.log('Setting service center to:', comsData.ServiceCenter || '');
                                if (comsData.CustomerName) document.getElementById('customer_name').value = comsData
                                    .CustomerName;
                                if (comsData.ContactNo) document.getElementById('contact_no').value = comsData.ContactNo;
                                if (comsData.TCN_NAME) document.getElementById('technician_name').value = comsData
                                    .TCN_NAME;
                                if (comsData.DateofPurchase) document.getElementById('purchase_date').value = extractDatePart(comsData
                                    .DateofPurchase);
                                if (comsData.Product) document.getElementById('product').value = comsData.Product;
                                if (comsData.JobStatus) document.getElementById('job_status').value = comsData.JobStatus;
                                if (comsData.Problem) document.getElementById('problem').value = comsData.Problem;
                                if (comsData.WorkDone) document.getElementById('workdone').value = comsData.WorkDone;

                                // Fetch and display complaint history for the complaint number
                                if (complaintNumber) {
                                    fetchComplaintHistory(complaintNumber);
                                }

                                // Now fetch ticket information for this complaint
                                return fetch("{{ route('management.fetch.ticket.info') }}", {
                                    method: "POST",
                                    headers: {
                                        "Content-Type": "application/json",
                                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                                        "Accept": "application/json"
                                    },
                                    body: JSON.stringify({
                                        complaint_number: complaintNumber
                                    })
                                });
                            })
                            .then(response => response ? response.json() : null)
                            .then(ticketData => {
                                console.log('Ticket data received:', ticketData);
                                if (!ticketData) {
                                    console.log('No ticket data received');
                                    return; // Skip if no ticket data (COMS fetch failed)
                                }

                                if (ticketData.success && ticketData.exists) {
                                    // Set the ticket number
                                    const ticketInput = document.getElementById('ticket_number');
                                    ticketInput.value = ticketData.ticket_number;

                                    // Show status message for existing ticket (read-only)
                                    const statusInfo = document.getElementById('ticketStatusInfo');
                                    const statusContent = document.getElementById('ticketStatusContent');
                                    if (statusInfo && statusContent) {
                                        statusInfo.className = 'alert alert-info';
                                        statusContent.innerHTML = `
                                    <strong>📋 Ticket Found</strong><br>
                                    <small>Ticket <strong>${ticketData.ticket_number}</strong> found for this complaint number.</small><br>
                                `;
                                        statusInfo.style.display = 'block';
                                    }

                                    // Populate Initial Customer Information fields
                                    if (ticketData.ticket_data.case_status) {
                                        document.getElementById('case_status').value = ticketData.ticket_data.case_status;
                                        // Update chat input status based on case status
                                        updateChatInputStatus(ticketData.ticket_data.case_status);
                                    }
                                    if (ticketData.ticket_data.complaint_category) {
                                        document.getElementById('complaint_category').value = ticketData.ticket_data
                                            .complaint_category;
                                    }
                                    if (ticketData.ticket_data.agent_name) {
                                        document.getElementById('agent_name').value = ticketData.ticket_data.agent_name;
                                    }
                                    if (ticketData.ticket_data.reason_of_escalation) {
                                        document.getElementById('reason_of_escalation').value = ticketData.ticket_data
                                            .reason_of_escalation;
                                    }
                                    if (ticketData.ticket_data.voice_of_customer) {
                                        document.getElementById('voice_of_customer').value = ticketData.ticket_data
                                            .voice_of_customer;
                                    }

                                    // Display current escalation level (read-only) - ACTUAL DATABASE VALUE
                                    if (ticketData.ticket_data.escalation_level) {
                                        const escalationInput = document.getElementById('escalation_level');
                                        if (escalationInput) {
                                            escalationInput.value = ticketData.ticket_data.escalation_level;
                                            escalationInput.style.borderColor = '#17a2b8';
                                            escalationInput.title =
                                                `Current escalation level: ${ticketData.ticket_data.escalation_level}`;
                                        }
                                    }

                                    // Update aging based on ICI complaint escalation date
                                    if (ticketData.ticket_data.complaint_escalation_date) {
                                        document.getElementById('complaint_escalation_date').value = extractDatePart(ticketData.ticket_data
                                            .complaint_escalation_date);
                                        updateAging(ticketData.ticket_data.complaint_escalation_date);
                                    }

                                    // Show chat section and update it
                                    const chatSection = document.getElementById("chatSection");
                                    if (chatSection) {
                                        chatSection.style.display = "block";
                                    }

                                    // Update ticket badge
                                    const ticketBadge = document.getElementById("ticketBadge");
                                    if (ticketBadge) {
                                        ticketBadge.textContent = ticketData.ticket_number;
                                    }

                                    // Update chat form action
                                    const chatForm = document.getElementById("chatForm");
                                    if (chatForm) {
                                        chatForm.action = "{{ url('/home-management/ticket') }}/" + ticketData
                                            .ticket_number + "/feedback";
                                    }


                                    // Clear existing chat messages
                                    const chatScrollArea = document.getElementById("chatScrollArea");
                                    if (chatScrollArea) {
                                        chatScrollArea.innerHTML =
                                            '<p class="text-center text-muted my-5">Loading chat...</p>';
                                    }

                                    // Load feedbacks
                                    console.log('Loading feedbacks for ticket:', ticketData.ticket_number);
                                    fetch("{{ url('/home-management/ticket') }}/" + ticketData.ticket_number +
                                            "/feedbacks")
                                        .then(response => {
                                            console.log('Feedbacks API response status:', response.status);
                                            return response.json();
                                        })
                                        .then(feedbacks => {
                                            console.log('Feedbacks data:', feedbacks);
                                            const chatBox = document.getElementById("chatScrollArea");
                                            if (chatBox) {
                                                chatBox.innerHTML = '';

                                                if (feedbacks.length === 0) {
                                                    chatBox.innerHTML =
                                                        '<p class="text-center text-muted my-5">No feedback yet. Be the first to send a message!</p>';
                                                } else {
                                                    feedbacks.forEach(fb => {
                                                        const isMe = fb.name === "{{ auth()->user()->name }}";
                                                        const messageClass = isMe ? 'justify-content-end' :
                                                            'justify-content-start';
                                                        const bgColor = isMe ? '#d1e7dd' : '#e2e3e5';
                                                        const senderName = isMe ? 'You' : fb.name;

                                                        const bubble = document.createElement('div');
                                                        bubble.className = `d-flex ${messageClass} mb-3`;
                                                        bubble.innerHTML = `
                                                    <div class="p-2 rounded-3" style="max-width: 70%; background-color: ${bgColor};">
                                                        <div class="fw-semibold mb-1">${senderName} <span class="text-muted">(${fb.role})</span></div>
                                                        <div>${fb.message}</div>
                                                        <div class="mt-1"><small class="text-muted">${fb.time}</small></div>
                                                    </div>
                                                `;
                                                        chatBox.appendChild(bubble);
                                                    });
                                                    chatBox.scrollTop = chatBox.scrollHeight;
                                                }
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Error loading feedbacks:', error);
                                            if (chatScrollArea) {
                                                chatScrollArea.innerHTML =
                                                    '<p class="text-center text-muted my-5">Error loading chat messages.</p>';
                                            }
                                        });
                                } else {
                                    // COMS data found but no ticket exists - still show COMS data but no chat
                                    showErrorMessage('COMS data found but no ticket exists for this complaint number.');
                                }
                            })
                            .catch(error => {
                                // Reset button state
                                document.getElementById("searchComplaintBtn").innerHTML = '<i class="bi bi-search"></i>';
                                document.getElementById("searchComplaintBtn").disabled = false;

                                showErrorMessage('Failed to search complaint. Please try again.');
                            });
                    }

                    // Handle complaint number search
                    document.getElementById("searchComplaintBtn").addEventListener("click", function() {
                        performComplaintSearch();
                    });

                    // Auto-search on blur (when user leaves the input field)
                    document.getElementById("complaint_number").addEventListener('blur', function () {
                        const complaintNumber = this.value.trim();
                        if (complaintNumber && isValidComplaintNumber(complaintNumber)) {
                            performComplaintSearch();
                        }
                    });

                    // Auto-search on Enter key press
                    document.getElementById("complaint_number").addEventListener('keydown', function (event) {
                        if (event.key === 'Enter') {
                            event.preventDefault();
                            performComplaintSearch();
                        }
                    });
                </script>
            </div>
        </div>
    </section>

    @endsection


    @section('scripts')
        <script>
            // Initialize window variables for chat functionality
            window.agentIndexUrl = "{{ route('t_management.index') }}";
            @if (isset($ici) && $ici)
                window.feedbackListUrl = "{{ route('management.feedback.list', $ici->ticket_number) }}";
                window.currentUser = "{{ auth()->user()->name }}";
            @endif
        </script>
        <script src="{{ asset('js/chat.js') }}"></script>

        <!-- Mention Autocomplete Script -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const chatMessage = document.getElementById('chatMessage');
                let mentionDropdown = null;
                let currentMentionStart = -1;
                let currentQuery = '';

                // Create dropdown element
                function createDropdown() {
                    if (mentionDropdown) return;

                    mentionDropdown = document.createElement('div');
                    mentionDropdown.className = 'mention-dropdown position-absolute bg-white border rounded shadow-sm';
                    mentionDropdown.style.cssText = `
                    z-index: 1050;
                    max-height: 200px;
                    overflow-y: auto;
                    min-width: 250px;
                    display: none;
                `;
                    document.body.appendChild(mentionDropdown);
                }

                // Position dropdown
                function positionDropdown() {
                    if (!mentionDropdown || !chatMessage) return;

                    const rect = chatMessage.getBoundingClientRect();

                    // Position relative to the chat input field - directly below it
                    mentionDropdown.style.left = rect.left + 'px';
                    mentionDropdown.style.top = (rect.bottom + window.scrollY + 2) + 'px';
                    mentionDropdown.style.width = rect.width + 'px';
                    mentionDropdown.style.position = 'absolute';
                }

                // Get caret coordinates (simple approximation)
                function getCaretCoordinates(element, position) {
                    const div = document.createElement('div');
                    const style = getComputedStyle(element);

                    // Copy styles
                    ['fontSize', 'fontFamily', 'fontWeight', 'letterSpacing', 'wordSpacing'].forEach(prop => {
                        div.style[prop] = style[prop];
                    });

                    div.style.position = 'absolute';
                    div.style.visibility = 'hidden';
                    div.style.whiteSpace = 'pre-wrap';
                    div.style.width = element.offsetWidth + 'px';

                    // Create text up to cursor
                    const text = element.value.substring(0, position);
                    div.textContent = text;

                    document.body.appendChild(div);
                    const coordinates = {
                        left: div.offsetWidth,
                        top: div.offsetHeight - 20
                    };
                    document.body.removeChild(div);

                    return coordinates;
                }

                // Show dropdown with suggestions
                function showSuggestions(suggestions) {
                    if (!mentionDropdown) createDropdown();

                    mentionDropdown.innerHTML = '';

                    if (suggestions.length === 0) {
                        mentionDropdown.style.display = 'none';
                        return;
                    }

                    suggestions.forEach((user, index) => {
                        const item = document.createElement('div');
                        item.className = 'mention-item px-3 py-2 cursor-pointer';
                        item.style.cssText = 'cursor: pointer; border-bottom: 1px solid #f0f0f0;';
                        item.innerHTML = `<strong>@${user.username}</strong> (${user.name})`;

                        item.addEventListener('mouseenter', function() {
                            this.style.backgroundColor = '#f8f9fa';
                        });

                        item.addEventListener('mouseleave', function() {
                            this.style.backgroundColor = '';
                        });

                        item.addEventListener('click', function() {
                            insertMention(user.username);
                        });

                        mentionDropdown.appendChild(item);
                    });

                    positionDropdown();
                    mentionDropdown.style.display = 'block';
                }

                // Hide dropdown
                function hideDropdown() {
                    if (mentionDropdown) {
                        mentionDropdown.style.display = 'none';
                    }
                }

                // Insert mention into textarea
                function insertMention(username) {
                    if (currentMentionStart === -1) return;

                    const beforeMention = chatMessage.value.substring(0, currentMentionStart);
                    const afterMention = chatMessage.value.substring(chatMessage.selectionStart);
                    const mention = '@' + username + ' ';

                    chatMessage.value = beforeMention + mention + afterMention;
                    chatMessage.selectionStart = chatMessage.selectionEnd = beforeMention.length + mention.length;

                    hideDropdown();
                    currentMentionStart = -1;
                    currentQuery = '';
                }

                // Search for usernames
                function searchUsernames(query) {
                    if (query.length === 0) {
                        hideDropdown();
                        return;
                    }

                    fetch('{{ route('usernames.search') }}?query=' + encodeURIComponent(query), {
                            method: 'GET',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                showSuggestions(data.usernames);
                            }
                        })
                        .catch(error => {
                            console.error('Error searching usernames:', error);
                            hideDropdown();
                        });
                }

                // Handle input events
                chatMessage.addEventListener('input', function(e) {
                    const value = this.value;
                    const cursorPos = this.selectionStart;

                    // Find if we're in a mention
                    const beforeCursor = value.substring(0, cursorPos);
                    const atIndex = beforeCursor.lastIndexOf('@');

                    if (atIndex !== -1) {
                        const afterAt = beforeCursor.substring(atIndex + 1);
                        const spaceIndex = afterAt.indexOf(' ');

                        // Check if we're still in the mention (no space after @)
                        if (spaceIndex === -1) {
                            currentMentionStart = atIndex;
                            currentQuery = afterAt;
                            searchUsernames(currentQuery);
                            return;
                        }
                    }

                    // Not in a mention
                    hideDropdown();
                    currentMentionStart = -1;
                    currentQuery = '';
                });

                // Handle keydown for navigation
                chatMessage.addEventListener('keydown', function(e) {
                    if (!mentionDropdown || mentionDropdown.style.display === 'none') return;

                    const items = mentionDropdown.querySelectorAll('.mention-item');
                    let activeItem = mentionDropdown.querySelector('.mention-active');

                    if (e.key === 'ArrowDown') {
                        e.preventDefault();
                        if (!activeItem) {
                            items[0].classList.add('mention-active');
                            items[0].style.backgroundColor = '#e3f2fd';
                        } else {
                            activeItem.classList.remove('mention-active');
                            activeItem.style.backgroundColor = '';
                            const nextItem = activeItem.nextElementSibling || items[0];
                            nextItem.classList.add('mention-active');
                            nextItem.style.backgroundColor = '#e3f2fd';
                        }
                    } else if (e.key === 'ArrowUp') {
                        e.preventDefault();
                        if (!activeItem) {
                            items[items.length - 1].classList.add('mention-active');
                            items[items.length - 1].style.backgroundColor = '#e3f2fd';
                        } else {
                            activeItem.classList.remove('mention-active');
                            activeItem.style.backgroundColor = '';
                            const prevItem = activeItem.previousElementSibling || items[items.length - 1];
                            prevItem.classList.add('mention-active');
                            prevItem.style.backgroundColor = '#e3f2fd';
                        }
                    } else if (e.key === 'Enter' || e.key === 'Tab') {
                        e.preventDefault();
                        if (activeItem) {
                            const username = activeItem.textContent.split(' ')[0].substring(
                                1); // Remove @ and get username
                            insertMention(username);
                        }
                    } else if (e.key === 'Escape') {
                        hideDropdown();
                    }
                });

                // Hide dropdown when clicking outside
                document.addEventListener('click', function(e) {
                    if (!chatMessage.contains(e.target) && (!mentionDropdown || !mentionDropdown.contains(e
                            .target))) {
                        hideDropdown();
                    }
                });

                // Hide dropdown on blur
                chatMessage.addEventListener('blur', function() {
                    // Delay hiding to allow for dropdown clicks
                    setTimeout(() => {
                        hideDropdown();
                    }, 150);
                });
            });
        </script>
    @endsection