@props([
    'as' => 'modal', // 'modal' | 'trigger'

    // Shared
    'modalId' => 'viewDetailsModal',

    // Modal only
    /** When false, no dimmed overlay; page behind stays clickable (Bootstrap data-backdrop="false"). */
    'backdrop' => true,
    'entityLabel' => 'Details',
    'historyTarget' => '#versionHistoryModal',
    'form' => null,
    /** Permission form slug for gating Edit/Delete/History (e.g. 'user', 'permission', 'item', 'plans'). Edit/Delete use 'edit'|'delete'; History uses 'view_history_modal'. */
    'formKey' => null,

    // Trigger only
    'detailsUrl' => '',
    'entityId' => '',
    'entityName' => '',
    'editUrl' => '',
    'deleteUrl' => '',
])

@if($as === 'trigger')
    {{-- Clickable trigger (use in table rows): opens modal and loads content via JS. --}}
    <a href="#"
       {{ $attributes->merge(['class' => 'details-modal-trigger text-primary font-weight-medium'])->merge(['style' => 'text-decoration: none; cursor: pointer;']) }}
       data-modal-id="{{ $modalId }}"
       data-details-url="{{ $detailsUrl }}"
       data-entity-id="{{ $entityId }}"
       data-entity-name="{{ display_attr($entityName) }}"
       data-edit-url="{{ $editUrl }}"
       data-delete-url="{{ $deleteUrl }}">
        @if($slot->isEmpty())
            {{ display_text($entityName) }}
        @else
            {{ $slot }}
        @endif
    </a>
@else
    @php
        $useModernDetailsShell = ! in_array($modalId, ['projectDetailsModal', 'pcFormDetailsModal'], true);
    @endphp
    @if ($useModernDetailsShell)
        @once
            @push('stylesheets')
                <link rel="stylesheet" href="{{ asset('assets/css/pms-details-modal.css') }}">
            @endpush
            @push('scripts')
                <script src="{{ asset('assets/js/pms-details-modal.js') }}"></script>
            @endpush
        @endonce
    @endif

    {{-- Full modal: view details (body loaded via AJAX) + footer with Edit, Delete, History, Close. --}}
    <div class="modal fade{{ $useModernDetailsShell ? ' pms-details-modal' : '' }}" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ $modalId }}Label" aria-hidden="true" @if ($backdrop === false) data-backdrop="false" @endif>
        <div class="modal-dialog {{ $useModernDetailsShell ? 'modal-dialog-centered ' : '' }}{{ $modalId === 'projectDetailsModal' ? 'modal-xl' : 'modal-lg' }}" role="document">
            <div class="modal-content">
                @if ($useModernDetailsShell)
                <div class="modal-header pms-details-modal__header">
                    <div class="pms-details-modal__header-text">
                        <span class="pms-details-modal__eyebrow">{{ $entityLabel }}</span>
                        <h5 class="modal-title" id="{{ $modalId }}Label"><span id="{{ $modalId }}-title-name"></span></h5>
                    </div>
                    <button type="button" class="close pms-details-modal__close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <i class="fas fa-times" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="modal-body pms-details-modal__body" id="{{ $modalId }}-body">
                    <div class="pms-details-modal__loading" role="status">
                        <div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>
                        <p>Loading details…</p>
                    </div>
                </div>
                <div class="modal-footer pms-details-modal__footer">
                    <div class="pms-details-modal__actions modal-footer-actions-left">
                        @isset($customFooter)
                            {{ $customFooter }}
                        @else
                            @if (!$formKey || can($formKey, 'edit'))
                            <a href="#" id="{{ $modalId }}-edit-btn" class="btn btn-success" style="display: none;"><i class="fas fa-edit" aria-hidden="true"></i> Edit</a>
                            @endif
                            @if (!$formKey || can($formKey, 'delete'))
                            <form method="POST" id="{{ $modalId }}-delete-form" class="d-inline" style="display: none;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-details-modal-delete"><i class="fas fa-trash" aria-hidden="true"></i> Delete</button>
                            </form>
                            @endif
                            @if (!$formKey || can($formKey, 'view_history_modal'))
                            <button type="button" class="btn btn-secondary btn-history" id="{{ $modalId }}-history-btn" data-toggle="modal" data-target="{{ $historyTarget }}" data-id="" data-name="" style="display: none;">
                                <i class="fas fa-history" aria-hidden="true"></i> History
                            </button>
                            @endif
                        @endif
                    </div>
                    <button type="button" class="btn pms-details-modal__close-btn" data-dismiss="modal">Close</button>
                </div>
                @elseif ($modalId === 'pcFormDetailsModal')
                {{-- Design-only hero header (top.png); IDs preserved for existing JS. --}}
                <div class="modal-header pci-pc-modal-hero">
                    <img
                        class="pci-pc-modal-hero__banner"
                        src="/assets/dist/img/top.png"
                        alt=""
                        aria-hidden="true"
                        decoding="async"
                    >
                    <div class="pci-pc-modal-hero__main">
                        <div class="pci-pc-modal-hero__icon" aria-hidden="true">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="pci-pc-modal-hero__text">
                            <h5 class="modal-title" id="{{ $modalId }}Label">
                                <span id="{{ $modalId }}-title-name"></span>
                            </h5>
                            <div class="pci-pc-modal-hero__badges" id="{{ $modalId }}-header-badges" hidden></div>
                        </div>
                    </div>
                    <div class="pci-pc-modal-hero__meta" id="{{ $modalId }}-header-meta" hidden>
                        <div class="pci-pc-modal-hero__meta-item">
                            <span class="pci-pc-modal-hero__meta-label">Ref No.</span>
                            <span class="pci-pc-modal-hero__meta-value" data-pci-header-ref>—</span>
                        </div>
                        <div class="pci-pc-modal-hero__meta-item">
                            <span class="pci-pc-modal-hero__meta-label">Form</span>
                            <span class="pci-pc-modal-hero__meta-value" data-pci-header-form>—</span>
                        </div>
                        <div class="pci-pc-modal-hero__meta-item">
                            <span class="pci-pc-modal-hero__meta-label">Created On</span>
                            <span class="pci-pc-modal-hero__meta-value" data-pci-header-created>—</span>
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="{{ $modalId }}-body" style="min-height: 200px;">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>
                        <p class="mt-2">Loading...</p>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between align-items-center flex-wrap">
                    <div class="modal-footer-actions-left mr-auto d-flex flex-wrap align-items-center gap-2">
                        @isset($customFooter)
                            {{ $customFooter }}
                        @else
                            @if (!$formKey || can($formKey, 'edit'))
                            <a href="#" id="{{ $modalId }}-edit-btn" class="btn btn-success mr-2" style="display: none;"><i class="fas fa-edit"></i> Edit</a>
                            @endif
                            @if (!$formKey || can($formKey, 'delete'))
                            <form method="POST" id="{{ $modalId }}-delete-form" class="d-inline" style="display: none;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-details-modal-delete mr-2"><i class="fas fa-trash"></i> Delete</button>
                            </form>
                            @endif
                            @if (!$formKey || can($formKey, 'view_history_modal'))
                            <button type="button" class="btn btn-secondary btn-history" id="{{ $modalId }}-history-btn" data-toggle="modal" data-target="{{ $historyTarget }}" data-id="" data-name="" style="display: none;">
                                <i class="fas fa-history"></i> History
                            </button>
                            @endif
                        @endif
                    </div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                @else
                <div class="modal-header">
                    <h5 class="modal-title" id="{{ $modalId }}Label">{{ $entityLabel }} – <span id="{{ $modalId }}-title-name"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="{{ $modalId }}-body" style="min-height: 200px;">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>
                        <p class="mt-2">Loading...</p>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between align-items-center flex-wrap">
                    <div class="modal-footer-actions-left mr-auto d-flex flex-wrap align-items-center gap-2">
                        @isset($customFooter)
                            {{ $customFooter }}
                        @else
                            @if (!$formKey || can($formKey, 'edit'))
                            <a href="#" id="{{ $modalId }}-edit-btn" class="btn btn-success mr-2" style="display: none;"><i class="fas fa-edit"></i> Edit</a>
                            @endif
                            @if (!$formKey || can($formKey, 'delete'))
                            <form method="POST" id="{{ $modalId }}-delete-form" class="d-inline" style="display: none;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-details-modal-delete mr-2"><i class="fas fa-trash"></i> Delete</button>
                            </form>
                            @endif
                            @if (!$formKey || can($formKey, 'view_history_modal'))
                            <button type="button" class="btn btn-secondary btn-history" id="{{ $modalId }}-history-btn" data-toggle="modal" data-target="{{ $historyTarget }}" data-id="" data-name="" style="display: none;">
                                <i class="fas fa-history"></i> History
                            </button>
                            @endif
                        @endif
                    </div>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                @endif
            </div>
        </div>
    </div>
@endif