@php
    $ticketId = isset($ticket) && isset($ticket->id) ? $ticket->id : 0;
    $ticketSubject = isset($ticket) && isset($ticket->subject) ? $ticket->subject : '';
@endphp

<div id="merge-ticket-modal" 
     data-ticket-id="{{ $ticketId }}"
     data-search-url="{{ route('merchant-helpdesk-tickets.merge.search', $ticketId) }}"
     data-merge-url="{{ route('merchant-helpdesk-tickets.merge.execute', $ticketId) }}">
    <div class="modal-header">
        <h5 class="modal-title mt-0">Select Target Ticket</h5>
        <button type="button" data-bs-dismiss="modal" aria-label="Close" class="close cros-btn">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-12 mb-3">
                <p class="mb-3">Please select the target ticket to merge with ticket {{ $ticketId }}:</p>
            </div>
            
            <div class="heading-btn">
                    <div class="col-md-3">
                        <div class="project-form">
                            <label>Search By</label>
                            <select class="form-select select2 no-search" id="merge-search-by" aria-label="Search by select">
                                <option value="all" selected>All</option>
                                <option value="subject">Subject</option>
                                <option value="ticket_id">Ticket ID</option>
                                <option value="dba">DBA</option>
                                <option value="mid">MID</option>
                                <option value="lead_id">Lead ID</option>
                                <!-- <option value="external_id">External ID</option> -->
                            </select>
                        </div>
                    </div>
                    <div class="project-form mb-0">
                        <div class="search-field position-relative">
                            <input type="text" class="form-control pr-45" id="merge-search-input" placeholder="Search Tickets" autocomplete="off">
                            <i class="mdi mdi-magnify"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div id="merge-ticket-results" class="table-responsive merge-ticket-results-container">
                    <table class="table table-bordered mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th width="5%"></th>
                                <th>Ticket ID</th>
                                <th>Subject</th>
                                <th>Status</th>
                                <th>Priority</th>
                                <th>Created</th>
                            </tr>
                        </thead>
                        <tbody id="merge-ticket-results-body">
                            <tr>
                                <td colspan="6" class="text-center text-muted">
                                    <div class="py-4">
                                        <i class="mdi mdi-information-outline merge-info-icon"></i>
                                        <p class="mt-2 mb-0">Start typing to search for tickets</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            <i class="mdi mdi-close me-1"></i> Cancel
        </button>
        <button type="button" class="btn green-btn-inner waves-effect" id="merge-ticket-continue" disabled>
            <i class="mdi mdi-arrow-right me-1"></i> Continue
        </button>
    </div>
</div>