{{-- Modal partial for Application Permissions --}}
<div class="modal-header" style="background:#16C4C0;">
    <h5 class="modal-title text-white"><i class="bx bx-lock me-1"></i> Application Permissions</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
    {{-- Section 1: Application is available for --}}
    <fieldset class="border rounded p-3 mb-3">
        <legend class="float-none w-auto px-2 small fw-semibold">Application is available for:</legend>
        <div id="currentAccessList">
            @if(empty($currentAccess))
                <p class="text-muted small mb-0"><em>Everyone</em></p>
            @else
                @foreach($currentAccess as $entry)
                <div class="d-flex justify-content-between align-items-center py-1 border-bottom access-entry" data-entry-id="{{ $entry['id'] }}">
                    <span class="small">{{ $entry['label'] }} <span class="text-muted">({{ $entry['type'] }})</span></span>
                    <button type="button" class="btn btn-sm p-0 btn-remove-access" data-entry-id="{{ $entry['id'] }}" title="Remove">
                        <i class="bx bx-x-circle text-danger" style="font-size:18px;"></i>
                    </button>
                </div>
                @endforeach
            @endif
        </div>
    </fieldset>

    {{-- Section 2: Add Application Access for --}}
    <fieldset class="border rounded p-3 mb-3">
        <legend class="float-none w-auto px-2 small fw-semibold">Add Application Access for:</legend>

        <div class="row mb-2 align-items-center">
            <div class="col-4"><label class="small fw-semibold mb-0">Group:</label></div>
            <div class="col-8">
                <select class="form-control select2 perm-select" id="permGroupSelect" data-access-type="group" data-placeholder="-- Select Group --">
                    <option value=""></option>
                    @foreach($groups as $g)
                    <option value="{{ $g->id }}">{{ $g->title }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row mb-2 align-items-center">
            <div class="col-4"><label class="small fw-semibold mb-0">User Class:</label></div>
            <div class="col-8">
                <select class="form-control select2 perm-select" id="permRoleSelect" data-access-type="role" data-placeholder="-- Select Class --">
                    <option value=""></option>
                    @foreach($roles as $r)
                    <option value="{{ $r->id }}">{{ $r->title }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="row mb-2 align-items-center">
            <div class="col-4"><label class="small fw-semibold mb-0">User:</label></div>
            <div class="col-8">
                <select class="form-control select2 perm-select" id="permUserSelect" data-access-type="user" data-placeholder="--- Select User ---">
                    <option value=""></option>
                    @foreach($users as $u)
                    <option value="{{ $u->id }}">{{ $u->first_name }} {{ $u->last_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </fieldset>

    {{-- Section 3: Filter Application By --}}
    <fieldset class="border rounded p-3">
        <legend class="float-none w-auto px-2 small fw-semibold">Filter Application By:</legend>
        <div class="row align-items-center">
            <div class="col-4"><label class="small fw-semibold mb-0">Custom Property:</label></div>
            <div class="col-8">
                <select class="form-control select2" id="permCustomPropSelect" data-placeholder="None">
                    <option value="">None</option>
                </select>
            </div>
        </div>
    </fieldset>
</div>
<div class="modal-footer">
    <button type="button" class="black-btn-inner waves-effect btn-sm" data-bs-dismiss="modal">
        <i class="bx bx-x"></i> Close
    </button>
</div>

<script>
(function($) {
    var templateId = {{ $template->id }};
    var saveUrl = '{{ route("manages.pdf-mappings.save-permissions", $template->id) }}';
    var csrfToken = '{{ csrf_token() }}';

    // Init select2 inside modal
    if (typeof $.fn.select2 !== 'undefined') {
        $('.perm-select, #permCustomPropSelect').each(function() {
            $(this).select2({
                width: '100%',
                dropdownParent: $(this).closest('.modal'),
                placeholder: $(this).data('placeholder') || '',
                allowClear: true
            });
        });
    }

    // Add access when a dropdown value is selected
    $(document).on('change', '.perm-select', function() {
        var $sel = $(this);
        var entityId = $sel.val();
        var accessType = $sel.data('access-type');
        var label = $sel.find('option:selected').text();
        if (!entityId) return;

        $.ajax({
            url: saveUrl,
            method: 'POST',
            data: {
                _token: csrfToken,
                action: 'add',
                access_type: accessType,
                entity_id: entityId
            },
            success: function(res) {
                if (res && res.status === 200) {
                    showSuccessToast(res.message || 'Access added.');
                    // Add to the list dynamically
                    var typeLabel = accessType === 'group' ? 'Group' : (accessType === 'role' ? 'User Class' : 'User');
                    var emptyMsg = $('#currentAccessList .text-muted');
                    if (emptyMsg.length) emptyMsg.remove();

                    // Reload to get the entry ID
                    reloadPermissionsModal();
                } else {
                    showErrorToast(res.message || 'Failed to add access.');
                }
            },
            error: function(xhr) {
                showErrorToast(xhr.responseJSON?.message || 'Failed');
            }
        });

        // Reset dropdown
        $sel.val('').trigger('change');
    });

    // Remove access
    $(document).on('click', '.btn-remove-access', function() {
        var entryId = $(this).data('entry-id');
        var $row = $(this).closest('.access-entry');

        confirmDialog({
            title: 'Remove Access',
            text: 'Are you sure you want to remove this access?',
            icon: 'warning',
            confirmButtonText: 'Yes, Remove',
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $.ajax({
                url: saveUrl,
                method: 'POST',
                data: {
                    _token: csrfToken,
                    action: 'remove',
                    entry_id: entryId
                },
                success: function(res) {
                    if (res && res.status === 200) {
                        showSuccessToast(res.message || 'Access removed.');
                        $row.fadeOut(300, function() {
                            $row.remove();
                            if ($('#currentAccessList .access-entry').length === 0) {
                                $('#currentAccessList').html('<p class="text-muted small mb-0"><em>Everyone</em></p>');
                            }
                        });
                    } else {
                        showErrorToast(res.message || 'Failed');
                    }
                },
                error: function(xhr) {
                    showErrorToast(xhr.responseJSON?.message || 'Failed');
                }
            });
        });
    });

    function reloadPermissionsModal() {
        var url = '{{ route("manages.pdf-mappings.permissions", $template->id) }}';
        $.get(url, function(html) {
            var $modal = $('#myModal .modal-content');
            if ($modal.length) {
                $modal.html(html);
            }
        });
    }
})(jQuery);
</script>