@extends('layouts.app')

@section('title', 'Registration 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

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

            
            <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">
                <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>
                </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" class="form-control" placeholder="000000-000000"
                                    value="{{ $ici ? $ici->coms->complaint_number : '' }}"
                                    {{ $ici && !auth()->user()->hasRole('Management') ? 'disabled' : '' }}>
                                <button type="button" id="searchComplaintBtn" class="btn btn-primary"
                                    {{ $ici && !auth()->user()->hasRole('Management') ? 'disabled' : '' }}>
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                            <small class="text-muted">Fetch customer/job details from COMS</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->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->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->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->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->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->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->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->job_status ?? '' : '' }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Problem</label>
                            <input id="problem" name="problem" class="form-control" readonly
                                value="{{ $ici ? $ici->coms->problem ?? '' : '' }}">
                        </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->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">

            

            <!-- Initial Customer Information -->
            <form action="{{ $ici && auth()->user()->hasRole('AdminOperations') && $ici->case_status !== 'Resolved' ? route('admin_operations.update_ticket', $ici->ticket_number) : route('agent.store') }}" 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 {{ $ici && isset($is_resolved_ticket) && $is_resolved_ticket ? 'bg-danger text-white' : 'bg-light text-secondary' }}">
                        {{ $ici && isset($is_resolved_ticket) && $is_resolved_ticket ? 'Resolved Ticket (View Only)' : ($ici ? 'View Only' : 'Step 1') }}
                    </span>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">
                            Ticket No
                            <span class="text-muted">{{ $ici ? '' : '(Auto-generated)' }}</span>
                        </label>
                        <input type="text" name="ticket_number" class="form-control" required readonly
                            placeholder="{{ $ici ? '' : '00-0000' }}" value="{{ $ici->ticket_number ?? '' }}"
                            onblur="this.value = this.value.trim();">
                        <small
                            class="text-muted">{{ $ici ? 'Ticket number' : 'Ticket number will be generated automatically' }}</small>
                    </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"
                            value="{{ $ici && $ici->complaint_escalation_date ? \Carbon\Carbon::parse($ici->complaint_escalation_date)->format('Y-m-d') : ($ici && $ici->coms && $ici->coms->coms_complaint_date ? \Carbon\Carbon::parse($ici->coms->coms_complaint_date)->format('Y-m-d') : '') }}"
                            readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Case Status</label>
                        <select name="case_status" id="case_status" class="form-select" required
                            {{ ($ici && (!auth()->user()->hasRole('AdminOperations') || (isset($is_resolved_ticket) && $is_resolved_ticket))) || auth()->user()->hasRole('Management') ? 'disabled' : '' }}>
                            @foreach ($caseStatuses as $status)
                                <option value="{{ $status->status }}"
                                    {{ ($ici && $ici->case_status == $status->status) || (!$ici && $status->status === 'In Process') ? 'selected' : '' }}>
                                    {{ $status->status }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="complaint_category" class="form-label fw-semibold">Complaint Category</label>
                        <select name="complaint_category" id="complaint_category" class="form-control" required
                            {{ ($ici || auth()->user()->hasRole('Management') || (isset($is_resolved_ticket) && $is_resolved_ticket)) ? 'disabled' : '' }}>
                            <option value="">-- Select Complaint Category --</option>
                            @foreach ($complaintCategory as $category)
                                <option value="{{ $category->category_name }}"
                                    {{ $ici && $ici->complaint_category == $category->category_name ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @if (auth()->user()->hasRole('Agent') || auth()->user()->hasRole('TL-Agent') || $ici)
                        <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"
                                value="{{ $ici ? $ici->agent_name : auth()->user()->name }}" readonly>
                        </div>
                    @endif

                    <div class="col-md-6">
                        <label for="reason_of_escalation" class="form-label fw-semibold">Reason of Escalation</label>
                        <select name="reason_of_escalation" id="reason_of_escalation" class="form-control" required
                            {{ ($ici || auth()->user()->hasRole('Management') || (isset($is_resolved_ticket) && $is_resolved_ticket)) ? 'disabled' : '' }}>
                            <option value="">-- Select Reason of Escalation --</option>
                            @foreach ($reasonofEscalation as $reason)
                                <option value="{{ $reason->reason }}"
                                    {{ $ici && $ici->reason_of_escalation == $reason->reason ? 'selected' : '' }}>
                                    {{ $reason->reason }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Escalation Level</label>
                        <select name="escalation_level" class="form-select"
                            {{ ($ici && (!auth()->user()->hasRole('AdminOperations') || (isset($is_resolved_ticket) && $is_resolved_ticket))) || auth()->user()->hasRole('Management') ? 'disabled' : '' }}>
                            <option value="Low" {{ !$ici || $ici->escalation_level === 'Low' ? 'selected' : '' }}>Low
                            </option>
                            <option value="Medium" {{ $ici && $ici->escalation_level === 'Medium' ? 'selected' : '' }}>
                                Medium</option>
                            <option value="High" {{ $ici && $ici->escalation_level === 'High' ? 'selected' : '' }}>High
                            </option>
                        </select>
                    </div>
                    @if ($ici)
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Aging</label>
                            <input type="text" name="aging" id="aging" class="form-control" readonly
                                value="">
                        </div>
                    @endif
                    <div class="col-12">
                        <label class="form-label fw-semibold">Voice of Customer</label>
                        <textarea name="voice_of_customer" rows="3" class="form-control" required
                            {{ ($ici && (!auth()->user()->hasRole('AdminOperations') || (isset($is_resolved_ticket) && $is_resolved_ticket))) || auth()->user()->hasRole('Management') ? '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" id="resolved_date"
                                    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-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 && !auth()->user()->hasRole('Management'))
                    <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="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Case Resolved Date</label>
                                <input type="date" name="resolved_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Happy Call Date</label>
                                <input type="date" name="happy_call_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer Satisfied</label>
                                <select name="customer_satisfied" class="form-select">
                                    <option value="">-- Select --</option>
                                    @foreach ($customerSatisfied as $satisfied)
                                        <option value="{{ $satisfied->status }}">{{ $satisfied->status }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Additional Customer Feedback</label>
                                <textarea name="happy_call_voice_of_customer" class="form-control" required rows="2"
                                    placeholder="Additional feedback from customer..."></textarea>
                            </div>
                        </div>
                    </div>
                @elseif($ici && $ici->case_status === 'Resolved' && !$ici->happyCallStatus && auth()->user()->hasRole('Management'))
                    <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>
                @elseif(!auth()->user()->hasRole('Management'))
                    <div id="happyCallSection" class="mt-4" style="display: none;">
                        <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-light text-secondary">Required for Resolved Cases</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" name="resolved_date" id="resolved_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Happy Call Date</label>
                                <input type="date" name="happy_call_date" class="form-control" value="{{ now()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Customer Satisfied</label>
                                <select name="customer_satisfied" class="form-select">
                                    <option value="">-- Select --</option>
                                    @foreach ($customerSatisfied as $satisfied)
                                        <option value="{{ $satisfied->status }}">{{ $satisfied->status }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Additional Customer Feedback</label>
                                <textarea name="happy_call_voice_of_customer" class="form-control" rows="2"
                                    placeholder="Additional feedback from customer..." required></textarea>
                            </div>
                        </div>
                    </div>
                @endif

                @if (!$ici && !auth()->user()->hasRole('Management'))
                    <div class="mt-4 text-center">
                        <button type="submit" class="btn btn-primary px-5" id="submitBtn">Submit</button>
                    </div>
                @elseif($ici && auth()->user()->hasRole('AdminOperations') && $ici->case_status !== 'Resolved')
                    <div class="mt-4 text-center">
                        <button type="submit" class="btn btn-warning px-5" id="updateBtn">Update Ticket</button>
                    </div>
                @elseif($ici && isset($is_resolved_ticket) && $is_resolved_ticket)
                    <div class="mt-4 text-center">
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            This ticket is resolved and cannot be edited. All fields are displayed in view-only mode.
                        </div>
                    </div>
                @endif
            </form>
        </div>
    </section>

    {{-- Chat section --}}
    <div id="chatSection" style="{{ $ici ? '' : 'display: none;' }}">
        {{-- Config for chat.js (used when chatArea is updated via AJAX) --}}
        <div id="chatConfig"
            data-feedback-list-url="{{ $ici ? (auth()->user()->hasRole('Management') ? route('management.feedback.list', $ici->ticket_number) : route('agent.feedback.list', $ici->ticket_number)) : '' }}"
            data-current-user="{{ auth()->user()->name }}"
            data-agent-index-url="{{ auth()->user()->hasRole('Management') ? route('t_management.index') : route('agent.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 ?? ($submitted_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 ? (auth()->user()->hasRole('Management') ? route('management.feedback.store', $chatTicketNo) : route('agent.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>

        @role('ServiceCenter')
            {{-- Service Center form --}}
            <div id="serviceCenterForm"
                class="card mt-4 {{ $ici && auth()->user()->hasRole('ServiceCenter') ? '' : 'd-none' }}">
                <div class="card-header card-header-primary d-flex align-items-center gap-2">
                    <i class="bi bi-tools text-primary"></i>
                    <span class="fw-semibold text-primary">Service Center Form</span>
                </div>
                <div class="card-body">
                    <form id="serviceCenterFormElement" method="POST"
                        action="{{ route('agent.service-center.save', $ici->ticket_number) }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="submission_date" class="form-label fw-semibold">Submission
                                    Date</label>
                                <input type="date" class="form-control" name="submission_date" id="submission_date"
                                    value="{{ now()->format('Y-m-d') }}" readonly
                                    {{ $ici && $ici->case_status === 'Resolved' ? 'disabled' : '' }}>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Delay Reason</label>
                                <select name="delay_reason" class="form-select"
                                    {{ $ici && (!auth()->user()->hasRole('ServiceCenter') || $ici->case_status === 'Resolved') ? 'disabled' : '' }}>
                                    <option value="">-- Select Reason --</option>
                                    @foreach ($delayReason as $reason)
                                        <option value="{{ $reason->reason }}">{{ $reason->reason }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Case Status</label>
                                <select name="case_status" class="form-select" required
                                    {{ $ici && (!auth()->user()->hasRole('ServiceCenter') || $ici->case_status === 'Resolved') ? 'disabled' : '' }}>
                                    @php
                                        $hidden = ['Resolved']; // add any values you want to hide
                                    @endphp
                                    @foreach ($caseStatuses as $status)
                                        @continue(in_array($status->status, $hidden))
                                        <option value="{{ $status->status }}"
                                            {{ $ici && $ici->case_status == $status->status ? 'selected' : '' }}>
                                            {{ $status->status }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 text-end">
                                <button type="submit" class="btn btn-primary" id="scFormSubmitBtn"
                                    {{ $ici && (!auth()->user()->hasRole('ServiceCenter') || $ici->case_status === 'Resolved') ? 'disabled' : '' }}>Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @endrole

    </div>

@endsection

@section('scripts')
    <script>
        // Initialize window variables for chat functionality
        window.agentIndexUrl =
            "{{ auth()->user()->hasRole('Management') ? route('t_management.index') : route('agent.index') }}";
        window.baseUrl = "{{ url('/') }}";
        @php
            $isManagement = auth()->user()->hasRole('Management');
            $checkComplaintTicketUrl = $isManagement ? route('management.fetch.ticket.info') : route('check.complaint.ticket');
            $complaintHistoryUrl = route('complaint.history');
            $userPermissions = auth()->user()->getAllPermissions()->pluck('name')->toArray();
        @endphp
        window.checkComplaintTicketUrl = "{{ $checkComplaintTicketUrl }}";
        window.complaintHistoryUrl = "{{ $complaintHistoryUrl }}";
        window.isManagementUser = {{ $isManagement ? 'true' : 'false' }};
        window.userPermissions = @json($userPermissions);
        @if (isset($ici) && $ici)
            @php
                $feedbackListUrl = $isManagement ? route('management.feedback.list', $ici->ticket_number) : route('agent.feedback.list', $ici->ticket_number);
            @endphp
            window.feedbackListUrl = "{{ $feedbackListUrl }}";
            window.currentUser = "{{ auth()->user()->name }}";
        @endif
    </script>
    <script src="{{ asset('js/script.js') }}"></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>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
                    // 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');
                            });
                        }
                    }

                    // 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.querySelector('#chatForm button[type="submit"]');

                        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…";
                        }
                    }

                    // Universal function to populate ticket fields systematically
                    function populateTicketFields(ticketData) {
                        console.log('=== POPULATING TICKET FIELDS ===');

                        // Define field mappings: data_key => selector
                        const fieldMappings = {
                            'case_status': '#case_status',
                            'complaint_category': '#complaint_category',
                            'agent_name': '#agent_name',
                            'reason_of_escalation': '#reason_of_escalation',
                            'escalation_level': 'select[name="escalation_level"]',
                            'voice_of_customer': 'textarea[name="voice_of_customer"]',
                            'complaint_escalation_date': '#complaint_escalation_date'
                        };

                        // Populate each field
                        Object.keys(fieldMappings).forEach(dataKey => {
                            const selector = fieldMappings[dataKey];
                            const value = ticketData[dataKey];

                            if (value !== undefined && value !== null && value !== '') {
                                const element = document.querySelector(selector);
                                if (element) {
                                    element.value = value;
                                    console.log(`✓ Populated ${dataKey} (${selector}) with:`, value, 'DOM value:', element.value);

                                    // Special handling for escalation level
                                    if (dataKey === 'escalation_level') {
                                        element.style.borderColor = '';
                                        element.title = `Current escalation level: ${value}`;
                                    }
                                } else {
                                    console.warn(`✗ Element not found for ${dataKey}: ${selector}`);
                                }
                            } else {
                                console.log(`- Skipped ${dataKey}: empty or null value`);
                            }
                        });

                        console.log('=== FIELD POPULATION COMPLETED ===');
                    }

                    // Function to calculate and update aging from escalation date
                    function updateAging(escalationDate, resolvedDate = null, caseStatus = null) {
                        const agingElement = document.getElementById('aging');
                        if (!agingElement) return; // Exit if aging element doesn't exist

                        if (escalationDate) {
                            try {
                                let endDate;
                                let agingText = '';

                                // Parse escalation date
                                let escalationDateObj = new Date(escalationDate.includes(' ') ?
                                    escalationDate.replace(' ', 'T') : escalationDate);

                                // Determine end date based on resolution status
                                if (caseStatus === 'Resolved') {
                                    if (resolvedDate) {
                                        // Resolved ticket: escalation to resolution date
                                        let resolvedDateObj = new Date(resolvedDate.includes(' ') ?
                                            resolvedDate.replace(' ', 'T') : resolvedDate);
                                        endDate = resolvedDateObj;
                                        agingText = ' (Resolved)';
                                    } else {
                                        // Resolved but no resolved date available, calculate based on current date
                                        // This should only happen temporarily until happy call is submitted
                                        endDate = new Date();
                                        agingText = ' (Pending Happy Call)';
                                    }
                                } else {
                                    // Unresolved ticket: escalation to current date
                                    endDate = new Date();
                                    agingText = ' (Active)';
                                }

                                // Calculate difference in days (inclusive)
                                const diffTime = Math.abs(endDate - escalationDateObj);
                                const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1;
                                agingElement.value = diffDays + agingText;

                            } catch (error) {
                                console.error('Error calculating aging:', error);
                                agingElement.value = '';
                            }
                        } else {
                            agingElement.value = '';
                        }
                    }

                    // Initialize aging on page load if we have existing data
                    // Aging is now calculated in real-time on frontend

                    // Check for existing Happy Call on page load
                    @if ($ici && $ici->ticket_number)
                        // Also fetch complaint history for the loaded ticket
                        @if ($ici->coms && $ici->coms->complaint_number)
                            fetchComplaintHistory('{{ $ici->coms->complaint_number }}');
                        @endif

                        // Fetch COMS data if not already populated server-side
                        @if (!$ici->coms || !$ici->coms->complaint_number)
                            fetchComsDataForViewMode('{{ $ici->ticket_number }}');
                        @endif

                        // Show Service Center form for Service Center users when ticket is loaded
                        @if (auth()->user()->hasRole('ServiceCenter'))
                            const serviceCenterForm = document.getElementById("serviceCenterForm");
                            const serviceCenterFormElement = document.getElementById("serviceCenterFormElement");
                            if (serviceCenterForm && serviceCenterFormElement) {
                                serviceCenterForm.classList.remove("d-none");
                                serviceCenterForm.style.display = "block";
                            }
                        @endif

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

                        // Initialize aging based on ticket status
                        @if ($ici && $ici->case_status === 'Resolved')
                            // Resolved ticket
                            const existingEscalationDate = document.getElementById('complaint_escalation_date').value;
                            @php
                                $resolvedDateForJs = null;
                                if ($ici->happyCallStatus && $ici->happyCallStatus->resolved_date) {
                                    try {
                                        $resolvedDateForJs = \Carbon\Carbon::parse($ici->happyCallStatus->resolved_date)->format("Y-m-d");
                                    } catch (\Exception $e) {
                                        $resolvedDateForJs = \Carbon\Carbon::parse($ici->updated_at)->format("Y-m-d");
                                    }
                                } else {
                                    $resolvedDateForJs = \Carbon\Carbon::parse($ici->updated_at)->format("Y-m-d");
                                }
                            @endphp
                            const resolvedDate = '{{ $resolvedDateForJs }}';
                            if (existingEscalationDate) {
                                updateAging(existingEscalationDate, resolvedDate, '{{ $ici->case_status }}');
                            }
                        @elseif ($ici)
                            // Unresolved ticket
                            const existingEscalationDate = document.getElementById('complaint_escalation_date').value;
                            if (existingEscalationDate) {
                                updateAging(existingEscalationDate, null, '{{ $ici->case_status }}');
                            }
                        @endif
                    @endif


                    // Function to fetch and populate COMS data for view-only mode
                    function fetchComsDataForViewMode(ticketNumber) {
                        // First get the ticket data to find the complaint number
                        fetch(baseUrl + '/search-ticket', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    ticket_number: ticketNumber
                                })
                            })
                            .then(response => response.json())
                            .then(ticketData => {
                                if (ticketData.complaint_number) {
                                    // Now fetch COMS data using the complaint number
                                    fetch(baseUrl + '/fetch-coms-data', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                                'Accept': 'application/json'
                                            },
                                            body: JSON.stringify({
                                                complaint_number: ticketData.complaint_number
                                            })
                                        })
                                        .then(response => response.json())
                                        .then(comsData => {
                                            if (!comsData.error) {
                                                // Populate COMS form fields
                                                if (comsData.JobNo) document.getElementById('job_number').value =
                                                    comsData.JobNo;
                                                if (comsData.COMSComplaintDate || comsData.ComplaintDate) {
                                                    const complaintDateRaw = comsData.COMSComplaintDate || comsData
                                                        .ComplaintDate;
                                                    let dateStr = complaintDateRaw;
                                                    if (complaintDateRaw.includes('T')) {
                                                        dateStr = complaintDateRaw.split('T')[0];
                                                    } else if (complaintDateRaw.includes(' ')) {
                                                        dateStr = complaintDateRaw.split(' ')[0];
                                                    }
                                                    document.getElementById('coms_complaint_date').value = dateStr;
                                                    // Update aging in real-time using escalation date
                                                    const escalationDate = document.getElementById(
                                                        'complaint_escalation_date').value;
                                                    const caseStatus = document.getElementById('case_status').value;
                                                    const resolvedDate = document.getElementById('resolved_date')?.value;
                                                    updateAging(escalationDate, resolvedDate, caseStatus);
                                                }
                                                if (comsData.JobType) document.getElementById('job_type').value =
                                                    comsData.JobType;
                                                if (comsData.ServiceCenter) document.getElementById(
                                                    'service_center').value = 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 || comsData.TechnicianName) {
                                                    const techName = comsData.TCN_NAME || comsData.TechnicianName;
                                                    document.getElementById('technician_name').value = techName;
                                                }
                                                if (comsData.DateofPurchase || comsData.PurchaseDate) {
                                                    const purchaseDateRaw = comsData.DateofPurchase || comsData
                                                        .PurchaseDate;
                                                    let purchaseDateStr = purchaseDateRaw;
                                                    if (purchaseDateRaw.includes('T')) {
                                                        purchaseDateStr = purchaseDateRaw.split('T')[0];
                                                    } else if (purchaseDateRaw.includes(' ')) {
                                                        purchaseDateStr = purchaseDateRaw.split(' ')[0];
                                                    }
                                                    document.getElementById('purchase_date').value =
                                                    purchaseDateStr;
                                                }
                                                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;
                                            }
                                        })
                                        .catch(error => {
                                            console.error('Error fetching COMS data for view mode:', error);
                                        });
                                }
                            })
                            .catch(error => {
                                console.error('Error fetching ticket data for COMS:', error);
                            });
                    }

                    // Function to hide all ticket-related forms when no active ticket exists
                    function hideTicketForms() {
                        // Hide chat section
                        const chatSection = document.getElementById('chatSection');
                        if (chatSection) {
                            chatSection.style.display = 'none';
                        }

                        // Hide Service Center form
                        const serviceCenterForm = document.getElementById("serviceCenterForm");
                        if (serviceCenterForm) {
                            serviceCenterForm.classList.add("d-none");
                            serviceCenterForm.style.display = "none";
                        }

                        // Hide Happy Call section
                        const happyCallSection = document.getElementById('happyCallSection');
                        if (happyCallSection) {
                            happyCallSection.style.display = 'none';
                        }
                    }

                    const searchComplaintBtn = document.getElementById('searchComplaintBtn');
                    const complaintNumberInput = document.getElementById('complaint_number');
                    const ticketNoInput = document.querySelector('input[name="ticket_number"]');
                    let lastSearchedComplaint = '';

                    // 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() {
                        console.log('=== STARTING COMPLAINT SEARCH ===');
                        const complaintNumber = complaintNumberInput.value.trim();
                        console.log('Complaint number entered:', complaintNumber);

                        if (!complaintNumber) {
                            console.warn('Complaint search aborted: no complaint number entered');
                            alert('Please enter a complaint number');
                            return;
                        }

                        if (!isValidComplaintNumber(complaintNumber)) {
                            console.warn('Complaint search aborted: invalid format');
                            alert('Please enter a valid complaint number in format: 000000-000000');
                            return;
                        }

                        console.log('Complaint number format validated, proceeding with search');

                        // Reset ICI form values before fetching new data
                        console.log('Resetting Initial Customer Information form fields');
                        document.querySelector('input[name="ticket_number"]').value = '';
                        document.getElementById('case_status').value = 'In Process';
                        document.getElementById('complaint_category').value = '';
                        document.getElementById('reason_of_escalation').value = '';
                        document.querySelector('select[name="escalation_level"]').value = 'Low';
                        document.querySelector('textarea[name="voice_of_customer"]').value = '';
                        console.log('Form reset completed');

                        // Re-enable disabled fields (only for non-Management users)
                        if (!window.isManagementUser) {
                            document.getElementById('complaint_category').disabled = false;
                            document.getElementById('reason_of_escalation').disabled = false;
                            const agentNameInput = document.getElementById('agent_name');
                            if (agentNameInput) {
                                agentNameInput.disabled = false;
                            }
                        }

                        // Reset submit button
                        const submitBtn = document.getElementById('submitBtn');
                        if (submitBtn) {
                            submitBtn.textContent = 'Submit';
                            submitBtn.className = 'btn btn-primary px-5';
                            submitBtn.disabled = false;
                        }

                        // Hide status info
                        const statusInfo = document.getElementById('ticketStatusInfo');
                        if (statusInfo) {
                            statusInfo.style.display = 'none';
                        }

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

                        // Make AJAX request to fetch COMS data
                        fetch(baseUrl + '/fetch-coms-data', {
                                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 => {
                                // Reset button state
                                searchComplaintBtn.innerHTML = '<i class="bi bi-search"></i>';
                                searchComplaintBtn.disabled = false;

                                // Reset button state
                                searchComplaintBtn.innerHTML = '<i class="bi bi-search"></i>';
                                searchComplaintBtn.disabled = false;

                                if (data.error) {
                                    alert('Error: ' + data.error);
                                    return;
                                }

                                // Check if complaint number exists and handle accordingly
                                console.log('Fetching checkComplaintTicket for:', complaintNumber);
                                fetch(window.checkComplaintTicketUrl + '?complaint_number=' + encodeURIComponent(complaintNumber), {
                                    method: 'GET',
                                    headers: {
                                        'Accept': 'application/json'
                                    }
                                })
                                    .then(response => {
                                        console.log('checkComplaintTicket response status:', response.status);
                                        console.log('checkComplaintTicket request URL:', window.checkComplaintTicketUrl + '?complaint_number=' + encodeURIComponent(complaintNumber));
                                        return response.json();
                                    })
                                    .then(ticketData => {
                                        console.log('=== CHECKCOMPLAINTTICKET RESPONSE RECEIVED ===');
                                        console.log('Response data:', ticketData);
                                        console.log('Response success:', ticketData.success);
                                        console.log('Response exists:', ticketData.exists);
                                        console.log('Response no_active_ticket:', ticketData.no_active_ticket);
                                        console.log('Response is_new_ticket:', ticketData.is_new_ticket);

                                        if (ticketData.success) {
                                            console.log('✓ API call successful, processing response');
                                            // NEW CODE: Handle "no active ticket" scenario for TL-Agent
                                            if (ticketData.no_active_ticket) {
                                                console.log('⚠ Handling no_active_ticket scenario');
                                                console.log('No active ticket message:', ticketData.message);
                                                console.log('User permissions check for ticket-edit:', window.userPermissions && window.userPermissions.includes('ticket-edit'));
                                                // Clear the ticket number field
                                                const ticketInput = document.querySelector('input[name="ticket_number"]');
                                                if (ticketInput) {
                                                    ticketInput.value = '';
                                                    ticketInput.style.borderColor = '';
                                                    console.log('Cleared ticket number field');
                                                }

                                                // Disable submit button
                                                const submitBtn = document.getElementById('submitBtn');
                                                if (submitBtn) {
                                                    submitBtn.disabled = true;
                                                    submitBtn.textContent = 'No Active Ticket';
                                                    submitBtn.className = 'btn btn-secondary px-5';
                                                }

                                                // Show informative warning message (not error)
                                                const statusInfo = document.getElementById('ticketStatusInfo');
                                                const statusContent = document.getElementById('ticketStatusContent');
                                                if (statusInfo && statusContent) {
                                                    statusInfo.className = 'alert alert-warning';
                                                    statusContent.innerHTML = `
                                                        <strong>ℹ️ No Ticket Available</strong><br>
                                                        <small>${ticketData.message}</small><br>
                                                    `;
                                                    statusInfo.style.display = 'block';
                                                }

                                                // Hide all ticket-related forms (chat, service center, etc.)
                                                hideTicketForms();

                                                // Reset search button
                                                searchComplaintBtn.innerHTML = '<i class="bi bi-search"></i>';
                                                searchComplaintBtn.disabled = false;

                                                return; // Exit here - don't process further
                                            }

                                            // Set the ticket number (existing or new)
                                            console.log('Setting ticket number:', ticketData.ticket_number, 'exists:', ticketData.exists, 'is_new_ticket:', ticketData.is_new_ticket);
                                            const ticketInput = document.querySelector(
                                                'input[name="ticket_number"]');
                                            ticketInput.value = ticketData.ticket_number;
                                            ticketInput.style.borderColor = '#28a745';
                                            ticketInput.title = ticketData.exists ? 'Existing ticket number' : (
                                                ticketData.is_new_ticket ? 'Auto-generated ticket number' :
                                                'Ticket number');
                                            console.log('Ticket number field set to:', ticketInput.value);

                                            // Update submit button text based on scenario
                                            const submitBtn = document.getElementById('submitBtn');
                                            if (!window.isManagementUser) {
                                                if (ticketData.exists) {
                                                    submitBtn.textContent = 'Update Ticket';
                                                    submitBtn.className = 'btn btn-warning px-5';
                                                    submitBtn.disabled = false;
                                                } else if (ticketData.is_new_ticket) {
                                                    submitBtn.textContent = 'Create Ticket';
                                                    submitBtn.className = 'btn btn-primary px-5';
                                                    submitBtn.disabled = false;
                                                }
                                            }

                                            // Store next escalation for later use
                                            let nextEscalation = ticketData.next_escalation;

                                            // Set the escalation level (only for existing tickets) - show current level
                                            if (ticketData.exists && ticketData.ticket_data) {
                                                const escalationSelect = document.querySelector(
                                                    'select[name="escalation_level"]');
                                                if (escalationSelect) {
                                                    // Show the current escalation level from database
                                                    escalationSelect.value = ticketData.ticket_data
                                                        .escalation_level;

                                                    // Add visual indicator for escalation level progression
                                                    escalationSelect.style.borderColor = '#17a2b8';
                                                    escalationSelect.title = 'Current: ' + ticketData
                                                        .current_escalation + ' → Will update to: ' + ticketData
                                                        .next_escalation +
                                                        ' (if case status changes to In Process)';
                                                }
                                            }

                                            // Show status information
                                            const statusInfo = document.getElementById('ticketStatusInfo');
                                            const statusContent = document.getElementById('ticketStatusContent');

                                            if (ticketData.exists) {
                                                if (window.isManagementUser) {
                                                    // For Management - show view-only message
                                                    statusInfo.className = 'alert alert-info';
                                                    statusContent.innerHTML = `
                                <strong>📋 Ticket Data Loaded</strong><br>
                                <small>Ticket <strong>${ticketData.ticket_number}</strong> data loaded for viewing.</small><br>
                                <small>All form fields are disabled except feedback section.</small>
                            `;
                                                } else {
                                                    // Existing ticket - show information with escalation progression
                                                    statusInfo.className = 'alert alert-info';
                                                    statusContent.innerHTML = `
                                <strong>📋 Existing Ticket Found</strong><br>
                                <small>Ticket <strong>${ticketData.ticket_number}</strong> found for this complaint number.</small><br>
                                <small>Current: <strong>${ticketData.current_escalation}</strong> → Will update to: <strong>${ticketData.next_escalation}</strong></small><br>
                            `;
                                                }
                                                statusInfo.style.display = 'block';

                                                // Populate form fields with existing data using universal function
                                                console.log('Populating Initial Customer Information form with ticket data:', ticketData.ticket_data);
                                                if (ticketData.ticket_data) {
                                                    populateTicketFields(ticketData.ticket_data);
                                                }
                                                console.log('Initial Customer Information form population completed');

                                                // Debug: Check all form field values after population
                                                setTimeout(() => {
                                                    console.log('=== FORM FIELD VALUES AFTER POPULATION ===');
                                                    const ticketNumberField = document.querySelector('input[name="ticket_number"]');
                                                    const caseStatusField = document.getElementById('case_status');
                                                    const complaintCategoryField = document.getElementById('complaint_category');
                                                    const agentNameField = document.getElementById('agent_name');
                                                    const reasonField = document.getElementById('reason_of_escalation');
                                                    const voiceField = document.querySelector('textarea[name="voice_of_customer"]');
                                                    const escalationDateField = document.getElementById('complaint_escalation_date');
                                                    const escalationLevelField = document.querySelector('select[name="escalation_level"]');

                                                    console.log('ticket_number:', ticketNumberField?.value, 'exists:', !!ticketNumberField, 'visible:', ticketNumberField?.offsetWidth > 0 && ticketNumberField?.offsetHeight > 0);
                                                    console.log('case_status:', caseStatusField?.value, 'exists:', !!caseStatusField, 'disabled:', caseStatusField?.disabled, 'visible:', caseStatusField?.offsetWidth > 0 && caseStatusField?.offsetHeight > 0);
                                                    console.log('complaint_category:', complaintCategoryField?.value, 'exists:', !!complaintCategoryField, 'disabled:', complaintCategoryField?.disabled, 'visible:', complaintCategoryField?.offsetWidth > 0 && complaintCategoryField?.offsetHeight > 0);
                                                    console.log('agent_name:', agentNameField?.value, 'exists:', !!agentNameField, 'disabled:', agentNameField?.disabled, 'visible:', agentNameField?.offsetWidth > 0 && agentNameField?.offsetHeight > 0);
                                                    console.log('reason_of_escalation:', reasonField?.value, 'exists:', !!reasonField, 'disabled:', reasonField?.disabled, 'visible:', reasonField?.offsetWidth > 0 && reasonField?.offsetHeight > 0);
                                                    console.log('voice_of_customer:', voiceField?.value, 'exists:', !!voiceField, 'disabled:', voiceField?.disabled, 'visible:', voiceField?.offsetWidth > 0 && voiceField?.offsetHeight > 0);
                                                    console.log('complaint_escalation_date:', escalationDateField?.value, 'exists:', !!escalationDateField, 'disabled:', escalationDateField?.disabled, 'visible:', escalationDateField?.offsetWidth > 0 && escalationDateField?.offsetHeight > 0);
                                                    console.log('escalation_level:', escalationLevelField?.value, 'exists:', !!escalationLevelField, 'disabled:', escalationLevelField?.disabled, 'visible:', escalationLevelField?.offsetWidth > 0 && escalationLevelField?.offsetHeight > 0);

                                                    // Check if main form is visible
                                                    const mainForm = document.getElementById('mainForm');
                                                    console.log('mainForm exists:', !!mainForm, 'visible:', mainForm?.offsetWidth > 0 && mainForm?.offsetHeight > 0);

                                                    console.log('=====================================');
                                                }, 100);

                                                // Disable non-editable fields for existing tickets based on permissions
                                                console.log('Disabling fields for existing ticket based on permissions');
                                                console.log('User permissions:', window.userPermissions);

                                                // Always disable complaint_category for existing tickets (business rule)
                                                const complaintCategoryField = document.getElementById('complaint_category');
                                                complaintCategoryField.disabled = true;
                                                console.log('Disabled complaint_category field, current value:', complaintCategoryField.value);

                                                // Always disable agent_name for existing tickets (business rule)
                                                const agentNameInput = document.getElementById('agent_name');
                                                if (agentNameInput) {
                                                    agentNameInput.disabled = true;
                                                    console.log('Disabled agent_name field, current value:', agentNameInput.value);
                                                }

                                                // Check if user has 'ticket-edit' permission
                                                const hasTicketEditPermission = window.userPermissions && window.userPermissions.includes('ticket-edit');
                                                console.log('User has ticket-edit permission:', hasTicketEditPermission);

                                                // For users without 'ticket-edit' permission, disable editable fields
                                                if (!hasTicketEditPermission) {
                                                    // Disable all form fields for view-only mode
                                                    const allFormFields = [
                                                        'case_status', 'reason_of_escalation',
                                                        'escalation_level', 'voice_of_customer'
                                                    ];
                                                    allFormFields.forEach(fieldId => {
                                                        const field = document.getElementById(fieldId);
                                                        if (field) {
                                                            field.disabled = true;
                                                            console.log('Disabled field for view-only mode:', fieldId);
                                                        }
                                                    });
                                                } else {
                                                    // User has 'ticket-edit' permission - enable editable fields
                                                    console.log('User has ticket-edit permission - keeping editable fields enabled');
                                                    // Note: case_status, escalation_level, voice_of_customer remain enabled
                                                }

                                            } else if (ticketData.is_new_ticket) {
                                                // New ticket - show creation information
                                                statusInfo.className = 'alert alert-success';
                                                statusContent.innerHTML = `
                                            <strong>✅ New Ticket Generated</strong><br>
                                            <small>Ticket <strong>${ticketData.ticket_number}</strong> generated successfully for this complaint.</small><br>
                                            <small>Ready for form submission.</small>
                                        `;
                                                statusInfo.style.display = 'block';

                                                // Set current date as escalation date for new tickets
                                                const today = new Date();
                                                const formattedDate = today.toISOString().split('T')[0];
                                                document.getElementById('complaint_escalation_date').value =
                                                    formattedDate;

                                                // Set default case status for new tickets
                                                if (ticketData.ticket_data && ticketData.ticket_data.case_status) {
                                                    document.getElementById('case_status').value = ticketData
                                                        .ticket_data.case_status;
                                                }

                                            } else {
                                                // Handle actual errors
                                                alert('Error: ' + (ticketData.error || ticketData.message));
                                                return;
                                            }

                                            // Add event listener for case status change to update escalation level and Happy Call form
                                            const caseStatusSelect = document.getElementById('case_status');
                                            const escalationSelect = document.querySelector(
                                                'select[name="escalation_level"]');
                                            if (caseStatusSelect && escalationSelect) {
                                                caseStatusSelect.addEventListener('change', function() {
                                                    if (this.value === 'In Process' && nextEscalation) {
                                                        escalationSelect.value = nextEscalation;
                                                        escalationSelect.style.borderColor = '#ffc107';
                                                        escalationSelect.title =
                                                            `Updated to: ${nextEscalation} (due to In Process status)`;
                                                    } else {
                                                        // For all other case statuses, reset escalation level to current database value
                                                        if (ticketData.exists && ticketData.ticket_data &&
                                                            ticketData.ticket_data.escalation_level) {
                                                            escalationSelect.value = ticketData.ticket_data
                                                                .escalation_level;
                                                            escalationSelect.style.borderColor = '';
                                                            escalationSelect.title =
                                                                `Current escalation level: ${ticketData.ticket_data.escalation_level}`;
                                                        }
                                                    }

                                                    // Handle Happy Call section visibility based on case status
                                                    const happyCallSection = document.getElementById(
                                                        'happyCallSection');
                                                    if (this.value === 'Resolved') {
                                                        if (happyCallSection) {
                                                            happyCallSection.style.display = 'block';
                                                            // Make Happy Call fields required
                                                            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');
                                                            });
                                                        }
                                                    } else {
                                                        if (happyCallSection) {
                                                            happyCallSection.style.display = 'none';
                                                            // Remove required attribute when not resolved
                                                            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.removeAttribute('required');
                                                                // Clear values when hiding
                                                                if (field.type === 'checkbox' ||
                                                                    field.type === 'radio') {
                                                                    field.checked = false;
                                                                } else {
                                                                    field.value = '';
                                                                }
                                                            });
                                                        }
                                                    }
                                                    // Update aging when case status changes
                                                    const escalationDate = document.getElementById('complaint_escalation_date').value;
                                                    const resolvedDate = document.getElementById('resolved_date')?.value;
                                                    updateAging(escalationDate, resolvedDate, this.value);
                                                });
                                            }

                                            // Store original escalation level for comparison
                                            window.originalEscalationLevel = ticketData.exists && ticketData
                                                .ticket_data ? ticketData.ticket_data.escalation_level : 'Low';

                                            // If ticket exists, load feedback and show chat section
                                            if (ticketData.exists) {
                                                loadFeedbackForTicket(ticketData.ticket_number, ticketData
                                                    .ticket_data);
                                            } else {
                                                // Hide feedback section, service center form, and happy call form for new tickets
                                                hideTicketForms();
                                            }

                                            // Set focus to service center field (or case_status for existing)
                                            setTimeout(() => {
                                                if (ticketData.exists) {
                                                    document.getElementById('case_status').focus();
                                                } else {
                                                    document.getElementById('service_center').focus();
                                                }
                                            }, 100);
                                        } else {
                                            console.log('ticketData.success is false, error:', ticketData.error);
                                            if (ticketData.error) {
                                                alert('Error: ' + ticketData.error);
                                                // Clear the form and disable submit since ticket cannot be created
                                                document.querySelector('input[name="ticket_number"]').value = '';
                                                const submitBtn = document.getElementById('submitBtn');
                                                if (submitBtn) {
                                                    submitBtn.disabled = true;
                                                    submitBtn.textContent = 'Cannot Create Ticket';
                                                }
                                            } else {
                                                alert('Error: Unknown error occurred');
                                            }
                                        }
                                    })
                                    .catch(error => {
                                        console.log('checkComplaintTicket fetch error:', error);
                                        alert('Failed to process complaint ticket. Please try again.');
                                    });

                                // Store complaint number for form submission
                                window.complaintNumber = complaintNumber;

                                // Immediately set the hidden field value (for both new and existing tickets)
                                const complaintNumberHidden = document.getElementById('complaint_number_hidden');
                                if (complaintNumberHidden) {
                                    complaintNumberHidden.value = complaintNumber;
                                }

                                // Populate form fields with the fetched data
                                console.log('Populating COMS form fields with data:', data);
                                if (data.JobNo) {
                                    document.getElementById('job_number').value = data.JobNo;
                                    console.log('Set job_number to:', data.JobNo);
                                }
                                if (data.COMSComplaintDate || data.ComplaintDate) {
                                    // Extract date part from datetime string (format: 2025-01-13T09:10:07 or 2025-01-13 00:00:00)
                                    const complaintDateRaw = data.COMSComplaintDate || data.ComplaintDate;
                                    let dateStr = complaintDateRaw;
                                    if (complaintDateRaw.includes('T')) {
                                        dateStr = complaintDateRaw.split('T')[0];
                                    } else if (complaintDateRaw.includes(' ')) {
                                        dateStr = complaintDateRaw.split(' ')[0];
                                    }
                                    document.getElementById('coms_complaint_date').value = dateStr;
                                    console.log('Set coms_complaint_date to:', dateStr);
                                    // Update aging in real-time using escalation date
                                    const escalationDate = document.getElementById('complaint_escalation_date').value;
                                    const caseStatus = document.getElementById('case_status').value;
                                    const resolvedDate = document.getElementById('resolved_date')?.value;
                                    updateAging(escalationDate, resolvedDate, caseStatus);
                                }
                                if (data.JobType) {
                                    document.getElementById('job_type').value = data.JobType;
                                    console.log('Set job_type to:', data.JobType);
                                }
                                if (data.ServiceCenter) {
                                    document.getElementById('service_center').value = data.ServiceCenter;
                                    console.log('Set service_center to:', data.ServiceCenter);
                                }
                                if (data.CustomerName) {
                                    document.getElementById('customer_name').value = data.CustomerName;
                                    console.log('Set customer_name to:', data.CustomerName);
                                }
                                if (data.ContactNo) {
                                    document.getElementById('contact_no').value = data.ContactNo;
                                    console.log('Set contact_no to:', data.ContactNo);
                                }
                                if (data.TCN_NAME || data.TechnicianName) {
                                    const techName = data.TCN_NAME || data.TechnicianName;
                                    document.getElementById('technician_name').value = techName;
                                    console.log('Set technician_name to:', techName);
                                }
                                if (data.DateofPurchase || data.PurchaseDate) {
                                    // Extract date part from datetime string
                                    const purchaseDateRaw = data.DateofPurchase || data.PurchaseDate;
                                    let purchaseDateStr = purchaseDateRaw;
                                    if (purchaseDateRaw.includes('T')) {
                                        purchaseDateStr = purchaseDateRaw.split('T')[0];
                                    } else if (purchaseDateRaw.includes(' ')) {
                                        purchaseDateStr = purchaseDateRaw.split(' ')[0];
                                    }
                                    document.getElementById('purchase_date').value = purchaseDateStr;
                                    console.log('Set purchase_date to:', purchaseDateStr);
                                }
                                if (data.Product) {
                                    document.getElementById('product').value = data.Product;
                                    console.log('Set product to:', data.Product);
                                }
                                if (data.JobStatus) {
                                    document.getElementById('job_status').value = data.JobStatus;
                                    console.log('Set job_status to:', data.JobStatus);
                                }
                                if (data.Problem) {
                                    document.getElementById('problem').value = data.Problem;
                                    console.log('Set problem to:', data.Problem);
                                }
                                if (data.WorkDone) {
                                    document.getElementById('workdone').value = data.WorkDone;
                                    console.log('Set workdone to:', data.WorkDone);
                                }
                                console.log('COMS form population completed');

                                // Fields populated successfully

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

                            })
                            .catch(error => {
                                // Handle fetch error
                                // Reset button state
                                searchComplaintBtn.innerHTML = '<i class="bi bi-search"></i>';
                                searchComplaintBtn.disabled = false;

                                alert('Failed to fetch COMS data. Please check the complaint number and try again.');
                            });
                    }

                    if (searchComplaintBtn && complaintNumberInput) {
                        // Auto-search on blur (when user leaves the input field)
                        complaintNumberInput.addEventListener('blur', function() {
                            const complaintNumber = complaintNumberInput.value.trim();
                            if (complaintNumber && isValidComplaintNumber(complaintNumber) && complaintNumber !== lastSearchedComplaint) {
                                lastSearchedComplaint = complaintNumber;
                                performComplaintSearch();
                            }
                        });

                        // Auto-search when complaint number is fully entered
                        complaintNumberInput.addEventListener('input', function() {
                            const complaintNumber = complaintNumberInput.value.trim();
                            if (complaintNumber.length === 13 && isValidComplaintNumber(complaintNumber) && complaintNumber !== lastSearchedComplaint) {
                                lastSearchedComplaint = complaintNumber;
                                performComplaintSearch();
                            }
                        });
                    }

                    // Handle form submission and reset for next use
                    const form = document.querySelector('form[action*="agent.store"]');
                    if (form) {
                        form.addEventListener('submit', function(e) {
                            const caseStatus = document.getElementById('case_status').value;
                            const complaintNumberHidden = document.getElementById('complaint_number_hidden');

                            // Validate main form required fields
                            const mainFormRequiredFields = form.querySelectorAll(
                                'input[required], select[required], textarea[required]');
                            let hasEmptyRequiredField = false;

                            mainFormRequiredFields.forEach(field => {
                                // Skip Happy Call fields for now - they'll be validated separately
                                if (field.closest('#happyCallSection')) {
                                    return;
                                }

                                if (!field.value.trim()) {
                                    hasEmptyRequiredField = true;
                                    field.classList.add('is-invalid');
                                    field.addEventListener('input', function() {
                                        this.classList.remove('is-invalid');
                                    });
                                }
                            });

                            if (hasEmptyRequiredField) {
                                e.preventDefault();
                                alert('Please fill all required fields.');
                                return false;
                            }

                            // Validate Happy Call fields if case status is Resolved
                            if (caseStatus === 'Resolved') {
                                const happyCallSection = document.getElementById('happyCallSection');
                                if (happyCallSection && happyCallSection.style.display !== 'none') {
                                    const requiredFields = happyCallSection.querySelectorAll(
                                        'input[required], select[required], textarea[required]');
                                    let hasEmptyHappyCallField = false;

                                    requiredFields.forEach(field => {
                                        if (!field.value.trim()) {
                                            hasEmptyHappyCallField = true;
                                            field.classList.add('is-invalid');
                                            field.addEventListener('input', function() {
                                                this.classList.remove('is-invalid');
                                            });
                                        }
                                    });

                                    if (hasEmptyHappyCallField) {
                                        e.preventDefault();
                                        alert(
                                            'Please fill all required Happy Call fields when case status is Resolved.');
                                        return false;
                                    }
                                }
                            }

                            // Final verification before submission
                            if (complaintNumberHidden && window.complaintNumber) {
                                complaintNumberHidden.value = window.complaintNumber;
                            }

                            // Re-enable disabled fields for form submission (so they get included in POST data)
                            const disabledFields = ['service_center', 'complaint_category', 'reason_of_escalation',
                                'agent_name'
                            ];
                            disabledFields.forEach(fieldId => {
                                const field = document.getElementById(fieldId);
                                if (field && field.disabled) {
                                    field.disabled = false;
                                }
                            });

                            // Show loading state on submit button
                            const submitBtn = document.getElementById('submitBtn');
                            if (submitBtn) {
                                submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Saving...';
                                submitBtn.disabled = true;
                            }
                        });
                    }

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

                        fetch(window.complaintHistoryUrl, {
                                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>';
                            });
                    }


                    // Handle Service Center form submission
                    const scFormElement = document.getElementById("serviceCenterFormElement");
                    if (scFormElement) {
                        scFormElement.addEventListener("submit", function(e) {
                            e.preventDefault();

                            const form = this;
                            const submitBtn = document.getElementById("scFormSubmitBtn");
                            const formData = new FormData(form);

                            submitBtn.disabled = true;
                            submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> Submitting...';

                            fetch(form.action, {
                                    method: 'POST',
                                    body: formData,
                                    headers: {
                                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                        'X-Requested-With': 'XMLHttpRequest'
                                    }
                                })
                                .then(response => {
                                    return response.json();
                                })
                                .then(data => {
                                    submitBtn.disabled = false;
                                    submitBtn.innerHTML = 'Submit';

                                    if (data.success) {
                                        alert('Service center information updated successfully');
                                        window.location.reload(); // Reload the page to show updated case status
                                    } else {
                                        alert('Error: ' + (data.error || 'Unknown error'));
                                    }
                                })
                                .catch(error => {
                                    submitBtn.disabled = false;
                                    submitBtn.innerHTML = 'Submit';
                                    alert('Failed to update service center information. Please try again.');
                                });
                        });
                    }
                    // Function to load feedback for a specific ticket and show chat section
                    function loadFeedbackForTicket(ticketNumber, ticketData) {
                        // Set ticket badge
                        const ticketBadge = document.getElementById('ticketBadge');
                        if (ticketBadge) {
                            ticketBadge.textContent = ticketNumber;
                        }

                        // Show chat section
                        const chatSection = document.getElementById('chatSection');
                        if (chatSection) {
                            chatSection.style.display = 'block';
                        }

                        // Set chat form action
                        const chatForm = document.getElementById('chatForm');
                        if (chatForm) {
                            @if (auth()->user()->hasRole('Management'))
                                chatForm.action = baseUrl + '/home-management/ticket/' + ticketNumber + '/feedback';
                            @else
                                chatForm.action = baseUrl + '/home-agent/ticket/' + ticketNumber + '/feedback';
                            @endif
                        }

                        // Update chat input status based on ticket status
                        updateChatInputStatus(ticketData.case_status);

                        // Update aging for service center users
                        const escalationDate = document.getElementById('complaint_escalation_date').value;
                        const caseStatus = document.getElementById('case_status').value;
                        const resolvedDate = document.getElementById('resolved_date')?.value;
                        if (escalationDate) {
                            updateAging(escalationDate, resolvedDate, caseStatus);
                        }

                        // Load feedback data
                        @if (auth()->user()->hasRole('Management'))
                            fetch(baseUrl + '/home-management/ticket/' + ticketNumber + '/feedbacks', {
                                @else
                                    fetch(baseUrl + '/home-agent/ticket/' + ticketNumber + '/feedbacks', {
                                        @endif
                                        method: 'GET',
                                        headers: {
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                            'Accept': 'application/json'
                                        }
                                    })
                                .then(response => response.json())
                                .then(feedbacks => {
                                    const chatScrollArea = document.getElementById('chatScrollArea');
                                    if (chatScrollArea) {
                                        let feedbackHtml = '';
                                        if (feedbacks.length === 0) {
                                            feedbackHtml =
                                                '<p class="text-center text-muted my-5">No feedback yet. Be the first to send a message!</p>';
                                        } else {
                                            feedbacks.forEach(feedback => {
                                                const isMe = feedback.name ===
                                                    '{{ auth()->user()->name }}';
                                                const messageClass = isMe ? 'justify-content-end' :
                                                    'justify-content-start';
                                                const bgColor = isMe ? '#d1e7dd' : '#e2e3e5';
                                                const senderName = isMe ? 'You' : feedback.name;

                                                feedbackHtml += `
                                            <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.time}</small></div>
                                                </div>
                                            </div>
                                        `;
                                            });
                                        }
                                        chatScrollArea.innerHTML = feedbackHtml;

                                        // Scroll to bottom
                                        chatScrollArea.scrollTop = chatScrollArea.scrollHeight;
                                    }
                                })
                                .catch(error => {
                                    console.error('Error loading feedback:', error);
                                });

                                // Happy Call form visibility is now handled dynamically by case status change event

                                // Show Service Center form for Service Center users only
                                @if (auth()->user()->hasRole('ServiceCenter'))
                                    const serviceCenterForm = document.getElementById("serviceCenterForm");
                                    const serviceCenterFormElement = document.getElementById(
                                    "serviceCenterFormElement");
                                    if (serviceCenterForm && serviceCenterFormElement) {
                                        serviceCenterForm.classList.remove("d-none");
                                        serviceCenterForm.style.display = "block";

                                        // Set the current case status in the Service Center form
                                        if (ticketData && ticketData.case_status) {
                                            const scCaseStatusSelect = serviceCenterFormElement.querySelector(
                                                'select[name="case_status"]');
                                            if (scCaseStatusSelect) {
                                                scCaseStatusSelect.value = ticketData.case_status;
                                            }
                                        }
                                    }
                                @endif
                            }

                            // Reset form after successful page reload (for new complaint entry)
                            @if (session('success'))
                                // Reset form for next complaint entry (only if not in view-only mode)
                                @if (!$ici)
                                    setTimeout(() => {
                                        // Clear COMS form fields
                                        document.getElementById('complaint_number').value = '';
                                        document.getElementById('job_number').value = '';
                                        document.getElementById('coms_complaint_date').value = '';
                                        document.getElementById('job_type').value = '';
                                        document.getElementById('service_center').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 ticket number and reset to readonly
                                        const ticketInput = document.querySelector('input[name="ticket_number"]');
                                        if (ticketInput) {
                                            ticketInput.value = '';
                                            ticketInput.readOnly = true;
                                            ticketInput.placeholder =
                                                'Will be auto-generated when complaint is searched';
                                            ticketInput.style.borderColor = '';
                                        }

                                        // Reset escalation level to Low
                                        document.querySelector('select[name="escalation_level"]').value = 'Low';

                                        // Reset submit button
                                        const submitBtn = document.getElementById('submitBtn');
                                        if (submitBtn) {
                                            submitBtn.textContent = 'Submit';
                                            submitBtn.className = 'btn btn-primary px-5';
                                            submitBtn.disabled = false;
                                        }

                                        // Hide status info
                                        const statusInfo = document.getElementById('ticketStatusInfo');
                                        if (statusInfo) {
                                            statusInfo.style.display = 'none';
                                        }

                                        // Clear stored complaint number
                                        window.complaintNumber = null;
                                        lastSearchedComplaint = '';

                                        // Reset history accordion
                                        const historyContent = document.getElementById('historyContent');
                                        if (historyContent) {
                                            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 = bootstrap.Collapse.getInstance(historyCollapse);
                                            if (bsCollapse) {
                                                bsCollapse.hide();
                                            }
                                        }
                                    }, 1000);
                                @endif
                            @endif

                            // Set up real-time aging update every minute (only for unresolved tickets)
                            setInterval(() => {
                                const escalationDate = document.getElementById('complaint_escalation_date').value;
                                const caseStatus = document.getElementById('case_status').value;

                                // Only update aging for unresolved tickets
                                if (escalationDate && caseStatus !== 'Resolved') {
                                    updateAging(escalationDate, null, caseStatus);
                                }
                            }, 60000); // Update every 60 seconds

                            // Ensure aging and chat status are updated for all users (including ServiceCenter)
                            const escalationDateField = document.getElementById('complaint_escalation_date');
                            const comsDateField = document.getElementById('coms_complaint_date');
                            const caseStatusField = document.querySelector('select[name="case_status"]');
                            const resolvedDateField = document.getElementById('resolved_date');
        
                            // Use escalation date if available, otherwise use COMS date for ServiceCenter
                            const agingDate = (escalationDateField && escalationDateField.value) ? escalationDateField
                                .value :
                                (comsDateField && comsDateField.value) ? comsDateField.value : null;
                            const currentResolvedDate = resolvedDateField ? resolvedDateField.value : null;
        
                            if (agingDate) {
                                updateAging(agingDate, currentResolvedDate, caseStatusField ? caseStatusField.value : null);
                            }
        
                            if (caseStatusField && caseStatusField.value) {
                                updateChatInputStatus(caseStatusField.value);
                            }
                        });
    </script>
@endsection