@php($settingsRec = $settings ?? null)
<div class="col-12 mt-3">
    <div id="ticket-settings-wrapper" class="project-box mobile-mb-15 h-100">
        <form id="form-ticket-settings" class="ajax-no-change position-relative" method="POST" action="{{ route($routePrefix.'.save-settings') }}">
            @csrf
            <div class="heading-btn-sec">
                <h3>Notification Defaults</h3>
                <div class="heading-btn">
                    <button type="submit" id="btn-save-settings" class="green-btn-inner waves-effect" position="tr">
                        <i class="mdi mdi-content-save"></i>
                        Save Settings
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-7 col-12">
                    @php($mode = (int)(optional($settingsRec)->default_notification_mode ?? 1))
                    <label class="fw-bold mb-2">Default Notification Mode</label>
                    <p>When a user comments on a ticket, which notification option is selected as default.</p>
                    <div class="project-form form-line" id="notification-mode-wrapper">
                        <label class="mb-2 project-checkbox"><input type="radio" name="default_notification_mode" value="1" {{ $mode===1 ? 'checked' : '' }}> <span>Notify All Associated Users 
                            <i class="bx bx-info-circle fs-5" title="Notify all users with Helpdesk Ticket Comment notifications enabled who created, updated, or commented on the ticket, or are assigned to the ticket or the linked lead/merchant." data-toggle="tooltip"></i>
                        </span></label>
                        @php($n1 = optional($settingsRec)->notify_assigned_to_ticket ?? null)
                        @php($n2 = optional($settingsRec)->notify_assigned_to_lead_merchant ?? null)
                        @php($n3 = optional($settingsRec)->notify_created_updated_commented ?? null)
                        <div id="notify-associated-options" class="ml-4 mb-2 {{ $mode===1 ? '' : 'd-none' }}">
                            <label class="project-checkbox me-3 mb-2"><input type="checkbox" name="notify_assigned_to_ticket" value="1" id="notify_assigned_to_ticket" {{ $n1 ? 'checked' : '' }}> <span>Assigned to Ticket
                                <i class="bx bx-info-circle fs-5" title="Notify the users assigned to the ticket." data-toggle="tooltip"></i>
                            </span></label>
                            <label class="project-checkbox me-3 mb-2"><input type="checkbox" name="notify_assigned_to_lead_merchant" value="1" id="notify_assigned_to_lead_merchant" {{ $n2 ? 'checked' : '' }}> <span>Assigned to Lead/Merchant
                                <i class="bx bx-info-circle fs-5" title="Notify the users assigned to the associated lead or merchant." data-toggle="tooltip"></i>
                            </span></label>
                            <label class="project-checkbox me-3 mb-2"><input type="checkbox" name="notify_created_updated_commented" value="1" id="notify_created_updated_commented" {{ $n3 ? 'checked' : '' }}> <span>Created, Updated, Commented Ticket
                                <i class="bx bx-info-circle fs-5" title="Notify users when the ticket is created, updated, or commented on the ticket." data-toggle="tooltip"></i>
                            </span></label>
                        </div>
                        <label class="project-checkbox"><input type="radio" name="default_notification_mode" value="2" {{ $mode===2 ? 'checked' : '' }}> <span>Last Notified Users 
                            <i class="bx bx-info-circle fs-5" title="Notify the users who received or posted the most recent comment on the ticket." data-toggle="tooltip"></i>
                        </span></label>
                    </div>
                </div>
                <div class="col-md-5 col-12">
                    <div class="project-form form-line">
                        <label for="assignee_limit">Assignee Limit</label>
                        <input type="number" name="assignee_limit" id="assignee_limit" class="form-control" value="{{ optional($settingsRec)->assignee_limit ?? '' }}" min="1" max="20" />
                        <small class="text-muted">Set the limit for how many users can be assigned to a ticket. Maximum is 20 users.</small>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="col-12 mt-3">
    <div id="custom-channels-wrapper" class="project-box">
        <div class="heading-btn-sec">
            <h3>Custom Channels</h3>
            {{-- <div class="heading-btn">
                <a href="{{ route($routePrefix.'.custom-channel-form-ui') }}" class="green-btn-inner waves-effect btn-sm-custom w-auto show-modal" data-url="{{ route($routePrefix.'.custom-channel-form-ui') }}">
                    <i class="fa fa-plus"></i>
                    Add Channel
                </a>
            </div> --}}
        </div>
        <div>
            <p>
                Set the Channel options available on Helpdesk tickets.
                <i class="bx bx-info-circle fs-5" title="Channel is never visible to Merchant users." data-toggle="tooltip"></i>
            </p>
        </div>
        <div class="table-responsive">
            <table class="table mb-0" id="tbl-custom-channels">
                <thead class="table-light">
                    <tr>
                        <th style="width:35px"></th>
                        <th>Name</th>
                        <th style="width:90px" class="text-center">Active</th>
                        <th style="width:90px" class="text-center">Default</th>
                        <th style="width:120px" class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody id="custom-channels-sortable">
                @php($channelsList = $channels ?? collect())
                @forelse($channelsList as $ch)
                <tr data-id="{{ $ch->id }}">
                    <td class="w-5 align-middle"><img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle" style="cursor:move" /></td>
                    <td class="align-middle channel-name">{{ $ch->name }}</td>
                    <td class="text-center align-middle">
                        <input type="checkbox" switch="dark" class="channel-status-switch" id="channel-status-{{ $ch->id }}"
                         {{ $ch->status ? 'checked' : '' }} {{ $ch->is_default ? 'disabled' : '' }} />
                        <label class="mb-0" for="channel-status-{{ $ch->id }}" data-on-label="" data-off-label=""></label>
                    </td>
                    <td class="text-center align-middle">
                        <button type="button" class="action-btn  {{ $ch->is_default ? 'set-default-btn active' : ( $ch->status ? 'set_default_btn_click' : '' ) }} m-auto" data-toggle="tooltip" title="{{$ch->status ? ($ch->is_default ? 'Already Default' : 'Set Default') : ''}}"><i class="fa fa-star"></i></button>
                    </td>
                    <td class="text-end">
                        <div class="d-flex justify-content-end">
                            <a href="{{ route($routePrefix.'.custom-channel-form-ui.edit', ['id'=>$ch->id]) }}" data-url="{{ route($routePrefix.'.custom-channel-form-ui.edit', ['id'=>$ch->id]) }}" class="action-btn edit-listing-btn show-modal" data-toggle="tooltip" title="Edit"><i class="bx bx-pencil"></i></a>
                         

                            @if(!$ch->is_default)
                            <a href="javascript:void(0);" class="action-btn delete-channel-btn ms-2" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault(); document.getElementById('delete-channel-form-{{ $ch->id }}').submit();"><i class="bx bx-trash"></i></a>
                            <form method="POST" action="{{ route($routePrefix.'.delete-channel', ['id'=>$ch->id]) }}" style="display:inline" id="delete-channel-form-{{ $ch->id }}" >@csrf @method('DELETE')</form>
                            @else
                            <a href="javascript:void(0);" class="action-btn ms-2 disabled" data-toggle="tooltip" title="Delete"><i class="bx bx-trash"></i></a>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="py-2 px-3">No channels found.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>


<script>
// Ticket Settings & Custom Channels script (deferred until layout includes pushed scripts)
(function initTicketSettings(){
if(typeof window.jQuery === 'undefined'){ return setTimeout(initTicketSettings, 50); }
	var $tblBody = $('#custom-channels-sortable');
    var previousMode = parseInt($('input[name=default_notification_mode]:checked').val(),10) || 1;
    function toggleNotifyOptions(){
        var mode = parseInt($('input[name=default_notification_mode]:checked').val(),10);
        var $opts = $('#notify-associated-options');
        var $checks = $opts.find('input[type=checkbox]');
        if(mode === 2){
            // Last Notified Users: disable and uncheck (values stored as null)
            $checks.prop('checked', false).prop('disabled', true);
            $opts.addClass('opacity-50 d-none');
        } else {
            // Mode 1: enable; auto-check if coming from mode 2 or none selected
            $opts.removeClass('opacity-50 d-none');
            $checks.prop('disabled', false);
            if(previousMode === 2 || !$checks.filter(':checked').length){
                $checks.prop('checked', true);
            }
        }
        previousMode = mode;
    }
	$(document).on('change','input[name=default_notification_mode]', toggleNotifyOptions);
    // Initial call to enforce default selection rules on load
    toggleNotifyOptions();
	$tblBody.on('change','.channel-status-switch', function(){ var id=$(this).closest('tr').data('id'); $.post('{{ route($routePrefix.'.toggle-channel-status', ['id'=>'__ID__']) }}'.replace('__ID__', id), {_token:'{{ csrf_token() }}', _method:'PUT'}, function(resp){ if(resp.status!==200) { Swal.fire('Error',resp.message||'Failed','error'); } else { 
        showSuccessToast('Channel status updated successfully!');
        location.reload();
     } }); });
	$tblBody.on('click','.set_default_btn_click', function(){ var id=$(this).closest('tr').data('id'); $.post('{{ route($routePrefix.'.set-default-channel', ['id'=>'__ID__']) }}'.replace('__ID__', id), {_token:'{{ csrf_token() }}'}, function(resp){ if(resp.status===200){ showSuccessToast('Default channel set successfully!'); location.reload(); } else Swal.fire('Error',resp.message||'Failed','error'); }); });
	// Drag & drop ordering (guarded for jQuery UI presence)
	var sortableInitialized = false; var sortableAttempts = 0;
	function initSortable(){
		if(sortableInitialized) return;
		if(typeof $.fn.sortable !== 'function'){
			if(sortableAttempts++ < 10){ return setTimeout(initSortable,150); }
			return;
		}
		$('#custom-channels-sortable').sortable({ handle: '.drag-handle', update: debounce(saveChannelOrder,300) });
		sortableInitialized = true;
	}
	function saveChannelOrder(){ if(!sortableInitialized) return; var order=[]; $tblBody.find('tr').each(function(){ order.push($(this).data('id')); }); if(!order.length) return; $.post('{{ route($routePrefix.'.update-channel-order') }}', {order:order,_token:'{{ csrf_token() }}'}, function(resp){ if(resp.status!==200){ Swal.fire('Error',resp.message||'Order failed','error'); }else{ showSuccessToast('Order updated successfully!'); } }); }
	function debounce(fn,delay){ var t; return function(){ clearTimeout(t); var a=arguments; t=setTimeout(function(){ fn.apply(null,a); },delay); } }
	initSortable();
})();
</script>