@php(
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    )
)
@php($isEdit = isset($ticket) && isset($ticket->id))
@php($backRoute = request()->has('tf') && request()->get('tf') == 'merchant' ? route('my-merchants.show', $ticket->merchant_id) . '?tab=tickets' : route('merchant-helpdesk-tickets.index'))
@php($headingOptions = [
    '<a href="' . $backRoute . '" class="'. \Config::get('view.buttons.secondary') .'"><i class="' . \Config::get('settings.icon_back') . '"></i> Back</a>',
    '<button type="submit" class="green-btn-inner waves-effect"><i class="mdi mdi-plus"></i> Save Ticket</button>'
])
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <form action="{{ route('merchant-helpdesk-tickets.update', $ticket->id) }}" method="POST" enctype="multipart/form-data" id="helpdeskTicketForm" autocomplete="off">
        @csrf
        @method('PUT')
        <x-heading-sec :module="'Helpdesk Ticket Details' . (isset($ticket) && !empty($ticket->subject) ? ' (' . $ticket->subject . ')' : '')" :options="$headingOptions" />
        <div class="container-fluid">
          <div id="ticketShowRoot"
              data-change-status-url="{{ route('merchant-helpdesk-tickets.change-status',$ticket->id) }}"
              data-comment-store-url="{{ route('merchant-helpdesk-tickets.comments.store',$ticket->id) }}"
              data-comment-update-url-base="{{ route('merchant-helpdesk-tickets.comments.update',['id'=>$ticket->id,'commentId'=>'__CID__']) }}"
              data-comment-delete-url-base="{{ route('merchant-helpdesk-tickets.comments.delete',['id'=>$ticket->id,'commentId'=>'__CID__']) }}"
              data-comment-pin-url-base="{{ route('merchant-helpdesk-tickets.comments.pin',['id'=>$ticket->id,'commentId'=>'__CID__']) }}"
              data-delete-ticket-url="{{ route('merchant-helpdesk-tickets.delete',$ticket->id) }}"
              data-index-route="{{ route('merchant-helpdesk-tickets.index') }}"
              data-attachment-update-url-base="{{ route('merchant-helpdesk-tickets.attachments.update',['id'=>$ticket->id,'attachmentId'=>'__AID__']) }}"
              data-attachment-delete-url-base="{{ route('merchant-helpdesk-tickets.attachments.delete',['id'=>$ticket->id,'attachmentId'=>'__AID__']) }}"
              data-csrf-token="{{ csrf_token() }}"></div>
            <div class="arrow-box my-3">
                <ul>
                    @foreach(($statuses ?? []) as $sid=>$s)
                        <li>
                            <button type="button" class="arrow-btn ticket-status-btn {{ $ticket->status == $sid ? 'active' : '' }}" data-status="{{ $sid }}" data-status-text="{{ $s['name'] }}">{{ $s['name'] }}</button>
                        </li>
                    @endforeach
                    @if($ticket->status != 5)
                        <li><button type="button" class="narrow-green-btn ticket-status-btn" data-status="5" data-status-text="Resolved">Mark As Resolved</button></li>
                    @endif
                </ul>
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-12 col-12">
                    <div class="project-box">
                        <h3>Ticket Details</h3>
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form w-100 mb-0">
                                <label>Ticket Category</label>
                                <select class="form-select select2 no-search" name="master_helpdesk_ticket_category_id" aria-label="Ticket category select">
                                    <option value="">None</option>
                                    @foreach($categories ?? [] as $cid=>$ctitle)
                                        <option value="{{ $cid }}" {{ old('master_helpdesk_ticket_category_id', $ticket->master_helpdesk_ticket_category_id ?? '') == $cid ? 'selected' : '' }}>{{ $ctitle }}</option>
                                    @endforeach
                                </select>
                                @error('master_helpdesk_ticket_category_id')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form w-100 mb-0">
                                <label>Ticket Type <sup class="text-danger">*</sup></label>
                                <select class="form-select select2 no-search" name="master_helpdesk_ticket_type_id" aria-label="Ticket type select" required>
                                    <option value="">Select Type</option>
                                    @foreach($types ?? [] as $tid=>$ttitle)
                                        <option value="{{ $tid }}" {{ old('master_helpdesk_ticket_type_id', $ticket->master_helpdesk_ticket_type_id ?? '') == $tid ? 'selected' : '' }}>{{ $ttitle }}</option>
                                    @endforeach
                                </select>
                                @error('master_helpdesk_ticket_type_id')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form w-100 mb-0">
                                <label>Priority</label>
                                <select class="form-select select2 no-search" name="priority" aria-label="Priority select">
                                    @foreach($priorities ?? [] as $pid=>$pname)
                                        <option value="{{ $pid }}" {{ old('priority', $ticket->priority ?? '') == $pid ? 'selected' : '' }}>{{ $pname }}</option>
                                    @endforeach
                                </select>
                                @error('priority')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form mb-0 w-100">
                                <label>Due date</label>
                                <input type="datetime-local" class="form-control" name="due_at" value="{{ old('due_at', (isset($ticket->due_at) && $ticket->due_at != '') ? $ticket->due_at : '') }}">
                                @error('due_at')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form w-100 mb-0">
                                <label>For</label>
                                <select class="form-control select2 no-search ticket_for" name="ticket_for" aria-label="Merchant or Lead select">
                                    <option value="">None</option>
                                    <option value="merchant" {{ old('ticket_for', $ticket_for ?? '') == 'merchant' ? 'selected' : '' }}>Merchant</option>
                                    <option value="lead" {{ old('ticket_for', $ticket_for ?? '') == 'lead' ? 'selected' : '' }}>Lead</option>
                                </select>
                                @error('ticket_for')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4 merchant-lead-wrapper {{ old('ticket_for', $ticket_for ?? 'merchant') ? '' : 'd-none' }}">
                            <div class="project-form w-100 mb-0">
                                <label>Merchant/Lead</label>
                                <select class="form-control select2 select2-ajax-autocomplete" 
                                        name="{{ old('ticket_for', $ticket_for ?? 'merchant') == 'lead' ? 'lead_id' : 'merchant_id' }}" 
                                        data-ajax-url="{{ old('ticket_for', $ticket_for ?? 'merchant') == 'lead' ? route('merchant-helpdesk-tickets.search-leads') : route('merchant-helpdesk-tickets.search-merchants') }}" 
                                        data-lead-url="{{ route('merchant-helpdesk-tickets.search-leads') }}"
                                        data-merchant-url="{{ route('merchant-helpdesk-tickets.search-merchants') }}"
                                        data-placeholder="Type to search..." data-minimum-input-length="2">
                                    @if($isEdit && $ticket_for == 'merchant' && isset($ticket->merchant_id) && isset($ticket->merchant))
                                        <option value="{{ $ticket->merchant_id }}" selected>{{ $ticket->merchant->dba }} (MID: {{ $ticket->merchant->mid }})</option>
                                    @elseif($isEdit && $ticket_for == 'lead' && isset($ticket->lead_id) && isset($ticket->lead))
                                        @php($leadDisplay = ($ticket->lead->full_name ?? trim(($ticket->lead->first_name ?? '') . ' ' . ($ticket->lead->last_name ?? ''))) . ($ticket->lead->email ? ' ('.$ticket->lead->email.')' : ''))
                                        <option value="{{ $ticket->lead_id }}" selected>{{ $leadDisplay }}</option>
                                    @endif
                                </select>
                                @error('merchant_id')<small class="text-danger">{{ $message }}</small>@enderror
                                @error('lead_id')<small class="text-danger">{{ $message }}</small>@enderror
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-12 mb-4">
                            <div class="project-form w-100 mb-0">
                                <label>Merchant Visibility <sup class="text-danger">*</sup></label>
                                <select class="form-select select2 no-search" name="merchant_visibility" aria-label="Merchant visibility select">
                                    <option value="1" {{ old('merchant_visibility', $ticket->merchant_visibility ?? 1) == 1 ? 'selected' : '' }}>Visible</option>
                                    <option value="0" {{ old('merchant_visibility', $ticket->merchant_visibility ?? 1) == 0 ? 'selected' : '' }}>Hidden</option>
                                </select>
                                <small class="text-muted">Ticket visibility to the merchant</small>
                            </div>
                        </div>
                            <div class="col-12 mb-4">
                                <div class="d-flex align-items-center gap-15">
                                    <label class="ticket-page-subhead text-nowrap">Subject :</label>
                                    <div class="d-flex align-items-center justify-content-between w-100">
                                        <p class="ticket-page-para mb-2">{{ $ticket->subject ?? '' }}</p>
                                        <a href="#"><span class="mdi mdi-pencil-outline pencil-colour "
                                                data-bs-toggle="collapse" data-bs-target="#ticket_subject"></span></a>
                                    </div>
                                </div>
                                <div id="ticket_subject" class="collapse project-box mt-3 pt-4">
                                    <div class="row">
                                        <div class="col-12 mb-4">
                                            <div class="project-form w-100 mb-0">
                                                <label>Subject <sup class="text-danger">*</sup></label>
                                                <input type="text" class="form-control" name="subject" value="{{ old('subject', $ticket->subject ?? '') }}" placeholder="Enter Subject" required>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="d-flex align-items-center gap-15">
                                    <label class="ticket-page-subhead text-nowrap">Description :</label>
                                    <div class="d-flex align-items-center justify-content-between w-100">
                                        <p class="ticket-page-para mb-2">{{ \Illuminate\Support\Str::limit($ticket->description ?? '', 120) }}</p>
                                        <a href="#"><span class="mdi mdi-pencil-outline pencil-colour " data-bs-toggle="collapse" data-bs-target="#ticket_description"></span></a>
                                    </div>
                                </div>
                                <div id="ticket_description" class="collapse project-box mt-3 pt-4">
                                    <div class="row">
                                        <div class="col-12 ">
                                            <div class="project-form w-100 mb-0">
                                                <label>Description</label>
                                                <textarea type="text" class="form-control" name="description" rows="5" placeholder="Enter your description or copy and paste an image">{{ old('description', $ticket->description ?? '') }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <div class="project-form mb-0">
                                    <label>Assigned Users</label>
                                    <select class="form-select select2 select2-multiple" name="assigned_user_ids[]" multiple="multiple" aria-label="Assign user select">
                                        @foreach($userOptions ?? [] as $uid=>$uname)
                                            <option value="{{ $uid }}" {{ in_array($uid, old('assigned_user_ids', $existingAssigned ?? [])) ? 'selected' : '' }}>{{ $uname }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <div class="project-form w-100 mb-0">
                                    <label>Group</label>
                                    <select class="form-select select2 no-search" name="master_group_id" aria-label="Group select">
                                        @foreach($groups ?? [] as $id=>$gTitle)
                                            <option value="{{ $id }}" {{ old('master_group_id', $ticket->master_group_id ?? '') == $id ? 'selected' : '' }}>{{ $gTitle }}</option>
                                        @endforeach
                                    </select>
                                    @error('master_group_id')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <div class="d-flex align-items-center gap-15 h-100">
                                    <label class="ticket-page-subhead text-nowrap">Created :</label>
                                    <div class="d-flex align-items-center  w-100">
                                        <p class="ticket-page-para mb-2">{!! $ticket->created_at ? \App\Helpers\Helper::showdate($ticket->created_at) : '' !!} by ({{ $ticket->createdBy->full_name ?? $ticket->createdBy->name ?? 'System' }})</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <div class="d-flex align-items-center gap-15 h-100">
                                    <label class="ticket-page-subhead text-nowrap">Last Modified :</label>
                                    <div class="d-flex align-items-center  w-100">
                                        <p class="ticket-page-para mb-2">{{ $ticket->updated_at ? \App\Helpers\Helper::showdate($ticket->updated_at) : '' }} by ({{ $ticket->updatedBy->full_name ?? $ticket->updatedBy->name ?? 'System' }})</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-12 mb-4">
                                <div class="d-flex align-items-center gap-15 h-100">
                                    <label class="ticket-page-subhead text-nowrap">Last Status Update :</label>
                                    <div class="d-flex align-items-center  w-100">
                                        <p class="ticket-page-para mb-2">{{ $ticket->resolved_at ? \App\Helpers\Helper::showdate($ticket->resolved_at) : ($ticket->updated_at ? \App\Helpers\Helper::showdate($ticket->updated_at) : '') }} by ({{ $ticket->resolved_at ? ($ticket->resolvedBy->full_name ?? $ticket->resolvedBy->name ?? 'System') : ($ticket->updatedBy->full_name ?? $ticket->updatedBy->name ?? 'System') }})</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <div class="gap-2 d-flex">
                                    <button type="button" class="green-btn-inner-short delete_ticket">Delete Ticket</button>
                                    <button type="button" class="green-btn-inner-short">Merge Ticket</button>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-12 mb-4">
                                <div class="d-flex gap-4 w-100">
                                    <div class="input-upload-file-box w-100">
                                        <label>Files</label>
                                        <div class="input-upload-file-main-box">
                                            <button type="button" class="btn">Browse File(s)</button>
                                            <span>Attach Existing File(s)</span>
                                            <input type="file" class="main-file">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="text-end mb-3">
                                    <div class="d-flex gap-2 align-items-center justify-content-end">
                                        <div class="search-field">
                                            <input type="text" class="form-control pr-45" placeholder="Search">
                                            <i class="mdi mdi-magnify"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive project-table">

                                    <table id="datatable" class="table mb-0 dt-responsive nowrap">

                                        <thead class="thead-light ">

                                            <tr>
                                                <th>Upload Date</th>

                                                <th>File Name</th>

                                                <th>Label</th>
                                                <th>Font Size</th>
                                                <th>Action</th>
                                            </tr>

                                        </thead>
                                    </table>
                                    <div class="table-text mt-2">
                                        <p class="mb-0">Files uploaded to the ticket will be shown here.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-12">
                    <div class="project-box">
                        <div class="d-flex align-items-center gap-2">
                            <h3><b>Comments</b></h3>
                        </div>
                        <div id="ticketCommentForm" class="mb-4" data-no-form="1" enctype="multipart/form-data">
                            @csrf
                            <div class="project-form w-100">
                                <label>Add Comments</label>
                                <textarea name="comment_text" class="form-control validate-comment" rows="5" placeholder="Enter your comment or paste an image"></textarea>
                            </div>
                            <div class="pr-upload-box mb-3">
                                <span>Drag & Drop to Upload, or</span>
                                <div class="position-relative">
                                    <button type="button" class="btn trigger-comment-attachment"><i class="mdi mdi-tray-arrow-up"></i> Upload File(s)</button>
                                    <input type="file" name="comment_attachments[]" class="file-sec d-none" multiple>
                                </div>
                            </div>
                            <div class="project-form">
                                <label>Notify Users</label>
                                <select name="notify_user_ids[]" class="form-select select2 select2-multiple" multiple data-placeholder="Select users to notify">
                                    @foreach(($userOptions ?? []) as $uid=>$uname)
                                        <option value="{{ $uid }}">{{ $uname }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="custom-control custom-checkbox mb-2 project-checkbox">
                                <input type="checkbox" name="notify_all" class="custom-control-input input-mini" id="notifyAllCheckbox" value="1">
                                <label class="custom-control-label" for="notifyAllCheckbox">Notify All Associated Users</label>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="button" id="addCommentBtn" class="green-btn-inner mt-3"><i class="mdi mdi-plus"></i> Add Comment</button>
                            </div>
                        </div>
                        <div id="ticketCommentsList">
                            @forelse(($comments ?? []) as $c)
                                <div class="ticket-comment-item mb-3" data-comment-id="{{ $c->id }}">
                                    <div class="d-flex gap-15 align-items-start">
                                        <div class="f-logo"><i class="mdi mdi-account-circle" style="font-size:32px;color:#666"></i></div>
                                        <div class="f-logo-text w-100">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <h4 class="mb-2">
                                                    <i class="mdi mdi-comment-text-outline"></i> {{ $c->author->full_name ?? ($c->author->name ?? 'User') }}
                                                    <span>{{ $c->created_at? $c->created_at->format('h:i A \o\n D, M d, Y') : '' }}</span>
                                                    @if($c->updated_at && $c->updated_at->gt($c->created_at))<span class="badge bg-light text-dark">Edited</span>@endif
                                                    @if($c->is_pinned)<span class="badge bg-warning text-dark">Pinned</span>@endif
                                                </h4>
                                                <div class="d-flex gap-2">
                                                    <a href="javascript:void(0)" class="text-decoration-none" title="Edit Comment"><span class="mdi mdi-pencil-outline pencil-colour edit-collapse-trigger" data-bs-toggle="collapse" data-bs-target="#comment_edit_{{ $c->id }}"></span></a>
                                                    <button type="button" class="btn btn-sm p-0 pin-comment" data-id="{{ $c->id }}" title="{{ $c->is_pinned ? 'Unpin' : 'Pin' }} Comment">
                                                        <span class="mdi {{ $c->is_pinned ? 'mdi-pin' : 'mdi-pin-outline' }}" style="font-size:20px; {{ $c->is_pinned ? 'color:#d97706;' : 'color:#666;' }}"></span>
                                                    </button>
                                                </div>
                                            </div>
                                            <p class="comment-text mb-1">{!! nl2br(e($c->comment_text)) !!}</p>
                                            @if($c->attachments->count())
                                                <div class="comment-attachments mb-2">
                                                    @foreach($c->attachments as $att)
                                                        <div class="d-flex align-items-center gap-2 mb-1" data-attachment-id="{{ $att->id }}">
                                                            <i class="mdi mdi-paperclip"></i>
                                                            <a href="{{ asset($att->path) }}" target="_blank">{{ $att->filename }}</a>
                                                            <small class="text-muted">{{ $att->label_text ?? ($attachmentLabelOptions[$att->label] ?? $att->label) }}</small>
                                                            <a href="{{ route('merchant-helpdesk-tickets.attachments.edit',['id'=>$ticket->id,'attachmentId'=>$att->id]) }}" class="btn btn-sm btn-link p-0 text-decoration-none show-modal" data-modal-size="md" data-modal-title="Edit Attachment" data-id="{{ $att->id }}"><i class="mdi mdi-pencil"></i></a>
                                                            <button type="button" class="btn btn-sm btn-link p-0 text-danger delete-attachment" data-id="{{ $att->id }}"><i class="mdi mdi-delete"></i></button>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @endif
                                            <div id="comment_edit_{{ $c->id }}" class="collapse project-box mt-3 pt-4">
                                                <div class="row">
                                                    <div class="col-12 mb-3">
                                                        <div class="project-form w-100 mb-0">
                                                            <label>Comment</label>
                                                            <textarea class="form-control" rows="5" name="comment_text_{{ $c->id }}" placeholder="Edit your comment">{{ $c->comment_text }}</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 mb-3">
                                                        <div class="pr-upload-box mb-3">
                                                            <span>Drag & Drop to Upload, or</span>
                                                            <div class="position-relative">
                                                                <button type="button" class="btn trigger-comment-attachment"><i class="mdi mdi-tray-arrow-up"></i> Upload File(s)</button>
                                                                <input type="file" name="comment_attachments[]" class="file-sec d-none" multiple>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 mb-3">
                                                        <div class="d-flex gap-2 justify-content-end">
                                                            <button type="button" class="black-btn-inner waves-effect" data-bs-toggle="collapse" data-bs-target="#comment_edit_{{ $c->id }}">Cancel</button>
                                                            <button type="button" class="green-btn-inner waves-effect save-comment-edit-collapse" data-id="{{ $c->id }}"><i class="mdi mdi-content-save"></i> Save</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr/>
                                </div>
                            @empty
                                <p class="text-muted">No comments yet.</p>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('page_script')
<script src="{{ asset('assets/js/merchant-helpdesk-ticket-show.js') }}"></script>
@endpush