{ticket.subject}

{/* Quick status dropdown */}

Status:

{ticket.reason_name && (

Support Reason {ticket.reason_name}

)}

Original Ticket Message

{ticket.description}

{ticket.voice_note_url && (

Voice Note Attachment

)}

{/* Replies Thread */}

Discussion History ({replies.length})

{replies.map((reply) => { const isDev = reply.is_developer_response; const isAdmin = reply.is_admin; return (

{isDev ? (

) : (

{reply.sender_name.charAt(0)}

)} {reply.sender_name} {isDev && '(Senior Software Developer)'}

{reply.created_at}

{reply.message}

); })} {replies.length === 0 && (

No messages posted yet.

)}

{/* Reply Form */} {ticket.status !== 'closed' ? (

Post Reply

Respond directly to the customer as admin or software developer.

replyForm.setData('message', e.target.value)}
                                            className={`w-full p-3 border border-slate-200 rounded-xl bg-slate-50/50 text-slate-800 outline-none focus:bg-white focus:border-[#185FA5] transition-all leading-relaxed ${
                                                replyForm.errors.message ? 'border-red-400' : ''
                                            }`}
                                            required
                                        />
                                    </div>

<div className="flex items-center justify-between border-t border-slate-100 pt-4 flex-wrap gap-3">
                                        {/* Toggles Group */}
                                        <div className="flex flex-col space-y-2">
                                            {/* Close ticket toggle */}
                                            <label className="flex items-center space-x-2.5 cursor-pointer select-none">
                                                <input
                                                    type="checkbox"
                                                    checked={replyForm.data.close_ticket}
                                                    onChange={e => {
                                                        replyForm.setData('close_ticket', e.target.checked);
                                                    }}
                                                    className="w-4.5 h-4.5 rounded border-slate-300 text-slate-900 focus:ring-slate-900 cursor-pointer"
                                                />
                                                <span className="text-xs text-slate-700 font-extrabold flex items-center space-x-1">
                                                    <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />
                                                    <span>Close Ticket after Reply</span>
                                                </span>
                                            </label>
                                        </div>

<button
                                            type="submit"
                                            disabled={replyForm.processing}
                                            className="px-5 py-2.5 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl transition-all shadow-md flex items-center space-x-1.5"
                                        >
                                            {replyForm.processing ? (
                                                <Loader2 className="w-3.5 h-3.5 animate-spin" />
                                            ) : (
                                                <>
                                                    <span>Post Reply</span>
                                                    <Send className="w-3.5 h-3.5" />
                                                </>
                                            )}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        ) : (
                            <div className="bg-slate-100 border border-slate-200 rounded-2xl p-5 flex items-center space-x-3.5">
                                <AlertCircle className="w-5 h-5 text-slate-400" />
                                <div className="text-xs font-bold text-slate-700">
                                    <h4 className="text-slate-800">Closed Support Ticket</h4>
                                    <p className="text-slate-400 font-semibold mt-0.5">This ticket has been marked closed. Change status above to reopen and reply.</p>
                                </div>
                            </div>
                        )}
                    </div>

{/* Right Pane: Creator Profile details (4 Cols) */}
                    <div className="lg:col-span-4 space-y-6">
                        
                        {/* Creator Profile Info */}
                        <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-5">
                            <div>
                                <h3 className="font-extrabold text-sm text-slate-900">Requester Profile</h3>
                                <p className="text-[10px] text-slate-400 font-semibold">User account information associated with ticket</p>
                            </div>

<div className="flex items-center space-x-3 border-b border-slate-100 pb-4">
                                <div className="w-10 h-10 rounded-full bg-slate-100 text-slate-600 flex items-center justify-center font-black border">
                                    {ticket.creator_name.charAt(0)}
                                </div>
                                <div>
                                    <span className="font-extrabold text-xs text-slate-800 block">{ticket.creator_name}</span>
                                    <span className={`text-[9px] font-bold px-2 py-0.5 rounded-full inline-block mt-0.5 ${
                                        ticket.user_type === 'Employer' ? 'bg-blue-50 text-[#185FA5] border border-blue-100' : 'bg-emerald-50 text-emerald-700 border border-emerald-100'
                                    }`}>
                                        {ticket.user_type} Profile
                                    </span>
                                </div>
                            </div>

<div className="space-y-3.5 text-xs font-semibold text-slate-600">
                                <div className="flex items-center space-x-2">
                                    <Mail className="w-4 h-4 text-slate-400" />
                                    <span className="truncate">{ticket.creator_email}</span>
                                </div>
                                <div className="flex items-center space-x-2">
                                    <Clock className="w-4 h-4 text-slate-400" />
                                    <span>Registered: {ticket.created_at}</span>
                                </div>
                            </div>
                        </div>

{/* Support compliance tips */}
                        <div className="bg-slate-900 p-6 rounded-2xl text-slate-100 border border-slate-800 space-y-3.5">
                            <h4 className="text-xs font-black uppercase tracking-wider flex items-center space-x-2 text-emerald-400 font-mono">
                                <Shield className="w-4 h-4" />
                                <span>Support Compliance Guard</span>
                            </h4>
                            <ul className="text-[10px] font-semibold text-slate-400 space-y-2 leading-relaxed list-disc list-inside">
                                <li>Always verify billing receipts before resolving payment failures.</li>
                                <li>Use the Senior Developer response builder to address server exceptions automatically.</li>
                                <li>Keep tickets open until client explicitly confirms resolved status.</li>
                            </ul>
                        </div>

</div>
                </div>

</div>
        </AdminLayout>
    );
}