@php
    use App\Support\EmployeeSignatureSealFeature;
    use App\Services\StaffSignatureSealService;

    $sigSealEnabled = EmployeeSignatureSealFeature::enabled();
    $sigW = EmployeeSignatureSealFeature::signatureWidth();
    $sigH = EmployeeSignatureSealFeature::signatureHeight();
    $sealW = EmployeeSignatureSealFeature::sealWidth();
    $sealH = EmployeeSignatureSealFeature::sealHeight();
    $sigSealService = app(StaffSignatureSealService::class);
    $signatureUrl = $sigSealService->signatureUrl($staff);
    $sealUrl = $sigSealService->sealUrl($staff);
    $isStaffViewer = $isStaffViewer ?? (auth()->user()?->user_type === 'staff');
    $canUpload = true;
    $signatureAction = $isStaffViewer
        ? route('employee.profile.signature')
        : route('staffs.signature.upload', $staff->id);
    $sealAction = $isStaffViewer
        ? route('employee.profile.seal')
        : route('staffs.seal.upload', $staff->id);
@endphp

@if($sigSealEnabled)
    <div class="staff-sig-seal-block mt-3 pt-3 border-top">
        <div class="font-weight-bold small text-uppercase mb-2" style="letter-spacing:.06em;color:#64748b;">
            {{ __('Signature & seal') }}
        </div>
        <p class="text-muted small mb-3">
            {{ __('Signature: :w×:h px · Seal: :sw×:sh px. Exact size required.', [
                'w' => $sigW, 'h' => $sigH, 'sw' => $sealW, 'sh' => $sealH,
            ]) }}
        </p>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="small font-weight-bold d-block mb-2">{{ __('Signature') }} ({{ $sigW }}×{{ $sigH }})</label>
                <div class="staff-sig-preview mb-2" id="signature_preview_wrap" style="width:{{ $sigW }}px;height:{{ $sigH }}px;border:1px dashed #cbd5e1;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden;">
                    @if($signatureUrl)
                        <img src="{{ $signatureUrl }}?v={{ optional($staff->updated_at)->timestamp }}" alt="{{ __('Signature') }}" id="signature_preview_img" style="width:100%;height:100%;object-fit:contain;">
                    @else
                        <span class="text-muted small" id="signature_preview_placeholder">{{ __('No signature') }}</span>
                        <img src="" alt="" id="signature_preview_img" class="d-none" style="width:100%;height:100%;object-fit:contain;">
                    @endif
                </div>
                @if($canUpload)
                    <form action="{{ $signatureAction }}" method="POST" enctype="multipart/form-data" class="staff-sig-upload-form" data-type="signature" data-width="{{ $sigW }}" data-height="{{ $sigH }}">
                        @csrf
                        <div class="custom-file mb-2">
                            <input type="file" name="signature" class="custom-file-input staff-sig-file" id="signature_file" accept="image/jpeg,image/jpg,image/png,image/webp" required>
                            <label class="custom-file-label" for="signature_file">{{ __('Choose image…') }}</label>
                        </div>
                        <div class="small text-danger d-none staff-sig-dim-error mb-2" id="signature_dim_error"></div>
                        <button type="submit" class="btn btn-sm btn-primary staff-sig-submit" disabled>{{ __('Upload signature') }}</button>
                    </form>
                @elseif(!$signatureUrl)
                    <span class="text-muted small">{{ __('Not uploaded') }}</span>
                @endif
            </div>

            <div class="col-md-6 mb-3">
                <label class="small font-weight-bold d-block mb-2">{{ __('Seal') }} ({{ $sealW }}×{{ $sealH }})</label>
                <div class="staff-sig-preview mb-2" id="seal_preview_wrap" style="width:{{ min($sealW, 180) }}px;height:{{ min($sealH, 180) }}px;border:1px dashed #cbd5e1;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden;">
                    @if($sealUrl)
                        <img src="{{ $sealUrl }}?v={{ optional($staff->updated_at)->timestamp }}" alt="{{ __('Seal') }}" id="seal_preview_img" style="width:100%;height:100%;object-fit:contain;">
                    @else
                        <span class="text-muted small" id="seal_preview_placeholder">{{ __('No seal') }}</span>
                        <img src="" alt="" id="seal_preview_img" class="d-none" style="width:100%;height:100%;object-fit:contain;">
                    @endif
                </div>
                @if($canUpload)
                    <form action="{{ $sealAction }}" method="POST" enctype="multipart/form-data" class="staff-sig-upload-form" data-type="seal" data-width="{{ $sealW }}" data-height="{{ $sealH }}">
                        @csrf
                        <div class="custom-file mb-2">
                            <input type="file" name="seal" class="custom-file-input staff-sig-file" id="seal_file" accept="image/jpeg,image/jpg,image/png,image/webp" required>
                            <label class="custom-file-label" for="seal_file">{{ __('Choose image…') }}</label>
                        </div>
                        <div class="small text-danger d-none staff-sig-dim-error mb-2" id="seal_dim_error"></div>
                        <button type="submit" class="btn btn-sm btn-primary staff-sig-submit" disabled>{{ __('Upload seal') }}</button>
                    </form>
                @elseif(!$sealUrl)
                    <span class="text-muted small">{{ __('Not uploaded') }}</span>
                @endif
            </div>
        </div>
    </div>

    @if($canUpload)
        @push('script')
        <script>
        (function () {
            function bindSigSealForm($form) {
                var reqW = parseInt($form.data('width'), 10);
                var reqH = parseInt($form.data('height'), 10);
                var type = $form.data('type');
                var $file = $form.find('.staff-sig-file');
                var $submit = $form.find('.staff-sig-submit');
                var $err = $('#' + type + '_dim_error');
                var $img = $('#' + type + '_preview_img');
                var $placeholder = $('#' + type + '_preview_placeholder');

                $file.on('change', function () {
                    var file = this.files && this.files[0];
                    var label = file ? file.name : @json(__('Choose image…'));
                    $form.find('.custom-file-label').text(label);
                    $err.addClass('d-none').text('');
                    $submit.prop('disabled', true);

                    if (!file) {
                        return;
                    }

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var probe = new Image();
                        probe.onload = function () {
                            if (probe.width !== reqW || probe.height !== reqH) {
                                $err.removeClass('d-none').text(
                                    @json(__('Image must be exactly :w×:h pixels. Selected: '))
                                        .replace(':w', reqW).replace(':h', reqH)
                                    + probe.width + '×' + probe.height
                                );
                                $img.addClass('d-none').attr('src', '');
                                if ($placeholder.length) {
                                    $placeholder.removeClass('d-none');
                                }
                                return;
                            }
                            $img.attr('src', e.target.result).removeClass('d-none');
                            if ($placeholder.length) {
                                $placeholder.addClass('d-none');
                            }
                            $submit.prop('disabled', false);
                        };
                        probe.onerror = function () {
                            $err.removeClass('d-none').text(@json(__('Invalid image file.')));
                        };
                        probe.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                });

                $form.on('submit', function (e) {
                    if ($submit.prop('disabled')) {
                        e.preventDefault();
                    }
                });
            }

            $('.staff-sig-upload-form').each(function () {
                bindSigSealForm($(this));
            });
        })();
        </script>
        @endpush
    @endif
@endif