<?php

use humhub\modules\animal_management\events\AnimalTileRenderEvent;
use humhub\modules\animal_management\events\AnimalTileSizeEvent;
use humhub\modules\animal_management\helpers\DateDisplayHelper;
use humhub\modules\animal_management\models\Animal;
use humhub\modules\animal_management\models\AnimalGalleryItem;
use humhub\modules\animal_management\models\AnimalMedicalVisit;
use humhub\modules\animal_management\models\AnimalProgressUpdate;
use humhub\modules\animal_management\models\AnimalTransfer;
use humhub\modules\animal_management\models\AnimalTransferEvent;
use humhub\modules\animal_management\permissions\ManageAnimals;
use humhub\modules\space\models\Space;
use yii\base\Event;
use yii\helpers\Html;
use yii\helpers\Json;
use yii\web\View;

/* @var Animal $animal */
/* @var ContentContainerActiveRecord $contentContainer */
/* @var AnimalMedicalVisit|null $lastMedical */
/* @var string $imageUrl */
/* @var array $tileFields */
/* @var bool $showMedicalIcon */
/* @var bool $showDonationSettingsButton */
/* @var mixed $existingDonationGoal */
/* @var string $tileLayoutMode */

$showMedicalIcon = isset($showMedicalIcon) ? (bool)$showMedicalIcon : true;
$showDonationSettingsButton = isset($showDonationSettingsButton) ? (bool)$showDonationSettingsButton : false;
$existingDonationGoal = $existingDonationGoal ?? null;
$tileLayoutMode = isset($tileLayoutMode) ? trim((string)$tileLayoutMode) : 'tiles';
$canManageTile = false;
if ($contentContainer instanceof Space && !Yii::$app->user->isGuest) {
    $canManageTile = $contentContainer->permissionManager->can(new ManageAnimals());
}
$showInlineAddControls = $canManageTile;
$imageUrl = trim((string)$imageUrl);
$hasImage = $imageUrl !== '' && (preg_match('/^https?:\/\//i', $imageUrl) || substr($imageUrl, 0, 1) === '/');

$statusLabel = Animal::statusOptions()[$animal->status] ?? (string)$animal->status;
$fieldMap = [
    'name' => (string)$animal->getDisplayName(),
    'species' => (string)$animal->species,
    'breed' => (string)$animal->breed,
    'sex' => (string)$animal->sex,
    'status' => (string)$statusLabel,
    'location_name' => (string)$animal->location_name,
    'animal_uid' => (string)$animal->animal_uid,
    'public_summary' => trim((string)$animal->public_summary),
    'last_medical' => $lastMedical instanceof AnimalMedicalVisit ? DateDisplayHelper::format((string)$lastMedical->visit_at) : '',
];

$tileFields = is_array($tileFields) ? $tileFields : [];
$selectedMeta = [];
foreach ($tileFields as $fieldKey) {
    $fieldKey = trim((string)$fieldKey);
    if ($fieldKey === '' || $fieldKey === 'name' || !array_key_exists($fieldKey, $fieldMap)) {
        continue;
    }

    $value = trim((string)$fieldMap[$fieldKey]);
    if ($value === '') {
        continue;
    }

    $selectedMeta[] = $value;
}

$summaryText = trim((string)$fieldMap['public_summary']);
if ($summaryText !== '') {
    $summaryText = substr($summaryText, 0, 160) . (strlen($summaryText) > 160 ? '...' : '');
}

$animalViewUrl = $contentContainer->createUrl('/animal_management/animals/view', ['id' => $animal->id]);
$medicalUrl = $contentContainer->createUrl('/animal_management/animals/medical-visits', ['id' => $animal->id]);
$createInlineGoalUrl = $contentContainer->createUrl('/donations/settings/create-animal-goal-inline', [
    'animalId' => (int)$animal->id,
]);

$toggleInputId = 'animal-donation-toggle-' . (int)$animal->id;
$inlineFormId = 'animal-donation-inline-' . (int)$animal->id;
$fileFieldId = 'animal-donation-image-file-' . (int)$animal->id;
$previewId = 'animal-donation-image-preview-' . (int)$animal->id;

$galleryItems = [];
if (class_exists(AnimalGalleryItem::class)) {
    $galleryItems = $animal->getGalleryItems()
        ->orderBy(['id' => SORT_DESC])
        ->limit(8)
        ->all();
}

$galleryUrls = [];
foreach ($galleryItems as $galleryItem) {
    if (!$galleryItem instanceof AnimalGalleryItem) {
        continue;
    }

    $url = trim((string)$galleryItem->getImageUrl());
    if ($url === '') {
        continue;
    }

    $galleryUrls[] = $url;
}

$overlayStackId = 'animal-tile-overlay-stack-' . (int)$animal->id;
$inlineMenuId = 'animal-tile-inline-menu-' . (int)$animal->id;
$inlinePanelWrapId = 'animal-tile-inline-panel-wrap-' . (int)$animal->id;
$tileUiGalleryId = 'animal-tile-gallery-' . (int)$animal->id;
$inlinePanelRadioName = 'animal-tile-inline-panel-' . (int)$animal->id;
$inlinePanelNoneId = 'animal-tile-inline-none-' . (int)$animal->id;
$inlinePanelIds = [
    'gallery' => 'animal-tile-inline-gallery-' . (int)$animal->id,
    'files' => 'animal-tile-inline-files-' . (int)$animal->id,
    'medical-progress' => 'animal-tile-inline-medical-progress-' . (int)$animal->id,
    'transfer' => 'animal-tile-inline-transfer-' . (int)$animal->id,
];
$galleryColsRadioName = 'animal-tile-gallery-cols-' . (int)$animal->id;
$galleryCols2Id = 'animal-tile-gallery-cols-2-' . (int)$animal->id;
$galleryCols3Id = 'animal-tile-gallery-cols-3-' . (int)$animal->id;
$formModeRadioName = 'animal-tile-form-mode-' . (int)$animal->id;
$formModeNoneId = 'animal-tile-form-none-' . (int)$animal->id;
$formModeMedicalId = 'animal-tile-form-medical-' . (int)$animal->id;
$formModeProgressId = 'animal-tile-form-progress-' . (int)$animal->id;
$galleryAddToggleId = 'animal-tile-gallery-add-toggle-' . (int)$animal->id;
$galleryFormWrapId = 'animal-tile-gallery-form-wrap-' . (int)$animal->id;
$galleryListWrapId = 'animal-tile-gallery-list-' . (int)$animal->id;
$transferAddToggleId = 'animal-tile-transfer-add-toggle-' . (int)$animal->id;
$transferFormWrapId = 'animal-tile-transfer-form-wrap-' . (int)$animal->id;
$transferHistoryWrapId = 'animal-tile-transfer-history-wrap-' . (int)$animal->id;
$medicalFormWrapId = 'animal-tile-medical-form-wrap-' . (int)$animal->id;
$progressFormWrapId = 'animal-tile-progress-form-wrap-' . (int)$animal->id;
$donorHistoryToggleId = 'donation-goal-toggle-' . (int)$animal->id;
$quickDonateToggleId = 'donation-goal-quick-toggle-' . (int)$animal->id;
$goalCardId = 'donation-goal-card-' . (int)$animal->id;
$donorPanelId = 'donation-goal-donors-panel-' . (int)$animal->id;
$quickDonatePanelId = 'donation-goal-quick-panel-' . (int)$animal->id;
$goalEditorToggleId = 'donation-goal-editor-toggle-' . (int)$animal->id;

$cfilesEnabled = false;
$cfilesBrowseUrl = '';
$recentMedicalVisits = [];
$recentProgressUpdates = [];
$recentTransferEvents = [];
$recentTransfersById = [];
$medicalAddInlineUrl = $contentContainer->createUrl('/animal_management/animals/add-medical-visit-inline', ['id' => (int)$animal->id, 'inline' => 1, 'returnTo' => 'medical-visits']);
$progressAddInlineUrl = $contentContainer->createUrl('/animal_management/animals/add-progress-update-inline', ['id' => (int)$animal->id, 'inline' => 1, 'returnTo' => 'progress-updates']);
$galleryAddInlineUrl = $contentContainer->createUrl('/animal_management/animals/add-gallery-images-inline', ['id' => (int)$animal->id, 'inline' => 1, 'returnTo' => 'view']);
$transferAddInlineUrl = $contentContainer->createUrl('/animal_management/animals/transfer-inline', ['id' => (int)$animal->id, 'inline' => 1, 'returnTo' => 'view']);

$donationHistoryRows = [];
$existingGoalIdForHistory = is_object($existingDonationGoal) ? (int)($existingDonationGoal->id ?? 0) : 0;

if ($tileLayoutMode === 'tablet') {
    if ($contentContainer instanceof Space) {
        $cfilesEnabled = $contentContainer->moduleManager->isEnabled('cfiles');
    }
    if ($cfilesEnabled) {
        $cfilesBrowseUrl = $contentContainer->createUrl('/cfiles/browse');
    }

    $recentMedicalVisits = $animal->getMedicalVisits()
        ->orderBy(['visit_at' => SORT_DESC, 'id' => SORT_DESC])
        ->limit(6)
        ->all();

    if (class_exists(AnimalProgressUpdate::class)) {
        $recentProgressUpdates = $animal->getProgressUpdates()
            ->orderBy(['update_at' => SORT_DESC, 'id' => SORT_DESC])
            ->limit(6)
            ->all();
    }

    if (class_exists(AnimalTransferEvent::class)) {
        $recentTransferEvents = $animal->getTransferEvents()
            ->orderBy(['id' => SORT_DESC])
            ->limit(18)
            ->all();

        $transferIds = [];
        foreach ($recentTransferEvents as $recentTransferEvent) {
            if ($recentTransferEvent instanceof AnimalTransferEvent) {
                $transferIds[] = (int)$recentTransferEvent->transfer_id;
            }
        }
        $transferIds = array_values(array_unique(array_filter($transferIds)));

        if (!empty($transferIds)) {
            $recentTransfersById = AnimalTransfer::find()
                ->where(['id' => $transferIds])
                ->indexBy('id')
                ->all();
        }
    }

    if ($existingGoalIdForHistory > 0) {
        $transactionClass = 'humhub\\modules\\donations\\models\\DonationTransaction';
        if (class_exists($transactionClass) && Yii::$app->db->schema->getTableSchema($transactionClass::tableName(), true) !== null) {
            $transactions = $transactionClass::find()
                ->where([
                    'contentcontainer_id' => (int)$contentContainer->contentcontainer_id,
                    'goal_id' => $existingGoalIdForHistory,
                    'status' => $transactionClass::STATUS_SUCCEEDED,
                ])
                ->orderBy(['id' => SORT_DESC])
                ->limit(120)
                ->all();

            foreach ($transactions as $transaction) {
                $amount = max(0.0, (float)($transaction->amount ?? 0));
                if ($amount <= 0) {
                    continue;
                }

                $donorLabel = Yii::t('DonationsModule.base', 'Anonymous');
                $donorUrl = '';
                $donorAvatarUrl = '';
                $createdAtRaw = trim((string)($transaction->created_at ?? ''));
                $createdAtTs = $createdAtRaw !== '' ? strtotime($createdAtRaw) : false;
                $whenText = $createdAtTs !== false
                    ? date('m/d/y g:i A', $createdAtTs)
                    : DateDisplayHelper::format($createdAtRaw);
                if ((int)($transaction->is_anonymous ?? 0) !== 1 && (int)($transaction->donor_user_id ?? 0) > 0) {
                    $userClass = 'humhub\\modules\\user\\models\\User';
                    if (class_exists($userClass)) {
                        $donor = $userClass::findOne(['id' => (int)$transaction->donor_user_id]);
                        if ($donor !== null) {
                            $donorLabel = (string)$donor->getDisplayName();
                            if (method_exists($donor, 'getUrl')) {
                                $donorUrl = (string)$donor->getUrl();
                            } elseif (method_exists($donor, 'createUrl')) {
                                $donorUrl = (string)$donor->createUrl('/user/profile');
                            }
                            if (method_exists($donor, 'getProfileImage')) {
                                $profileImage = $donor->getProfileImage();
                                if ($profileImage !== null && method_exists($profileImage, 'getUrl')) {
                                    $donorAvatarUrl = (string)$profileImage->getUrl();
                                }
                            }
                        }
                    }
                }

                $donationHistoryRows[] = [
                    'when' => $whenText,
                    'donor' => $donorLabel,
                    'donorUrl' => $donorUrl,
                    'avatarUrl' => $donorAvatarUrl,
                    'amount' => '$' . number_format($amount, 2),
                ];
            }
        }
    }
}
$defaultGoalTitle = Yii::t('DonationsModule.base', '{animalName} Care Fund', [
    'animalName' => (string)$animal->getDisplayName(),
]);

$existingGoalId = is_object($existingDonationGoal) ? (int)($existingDonationGoal->id ?? 0) : 0;
$existingGoalTitle = trim((string)(is_object($existingDonationGoal) ? ($existingDonationGoal->title ?? '') : ''));
$existingGoalTargetAmount = is_object($existingDonationGoal) ? (float)($existingDonationGoal->target_amount ?? 0) : 0.0;
$existingGoalDescription = trim((string)(is_object($existingDonationGoal) ? ($existingDonationGoal->description ?? '') : ''));
$existingGoalImage = trim((string)(is_object($existingDonationGoal) ? ($existingDonationGoal->image_path ?? '') : ''));
$existingGoalActive = is_object($existingDonationGoal) ? (int)($existingDonationGoal->is_active ?? 1) : 1;

if ($existingGoalTitle === '') {
    $existingGoalTitle = $defaultGoalTitle;
}

$tileRenderEvent = new AnimalTileRenderEvent([
    'animal' => $animal,
    'contentContainer' => $contentContainer,
    'existingDonationGoal' => $existingDonationGoal,
    'showDonationSettingsButton' => $showDonationSettingsButton,
    'donationToggleInputId' => $toggleInputId,
    'donationInlineFormId' => $inlineFormId,
]);
Event::trigger(AnimalTileRenderEvent::class, AnimalTileRenderEvent::EVENT_RENDER_OVERLAY, $tileRenderEvent);
$tileOverlayAddonHtml = $tileRenderEvent->getHtml();

if ($tileLayoutMode === 'tablet' && $tileOverlayAddonHtml !== '') {
    $tabletQuickDonateExtrasHtml = trim((string)$this->render('_tablet_quick_donate_extras', [
        'donationHistoryRows' => $donationHistoryRows,
        'showDonationSettingsButton' => $showDonationSettingsButton,
        'goalEditorToggleId' => $goalEditorToggleId,
        'existingGoalId' => $existingGoalId,
        'createInlineGoalUrl' => $createInlineGoalUrl,
        'existingGoalTitle' => $existingGoalTitle,
        'existingGoalTargetAmount' => $existingGoalTargetAmount,
        'existingGoalDescription' => $existingGoalDescription,
        'existingGoalImage' => $existingGoalImage,
        'galleryUrls' => $galleryUrls,
        'animal' => $animal,
        'existingGoalActive' => $existingGoalActive,
        'fileFieldId' => $fileFieldId,
        'previewId' => $previewId,
        'quickDonateToggleId' => $quickDonateToggleId,
        'quickDonatePanelId' => $quickDonatePanelId,
    ]));

    if ($tabletQuickDonateExtrasHtml !== '') {
        $quickPanelPattern = '/(<div id="' . preg_quote($quickDonatePanelId, '/') . '"[^>]*>)(\s*<form\b.*?<\/form>)(\s*<\/div>)/s';
        $replaceCount = 0;
        $replacedOverlayHtml = preg_replace_callback(
            $quickPanelPattern,
            static function (array $matches) use ($tabletQuickDonateExtrasHtml): string {
                $layoutHtml = str_replace('__ANIMAL_TILE_QUICK_DONATE_FORM_SLOT__', $matches[2], $tabletQuickDonateExtrasHtml);
                return $matches[1]
                    . $layoutHtml
                    . $matches[3];
            },
            $tileOverlayAddonHtml,
            1,
            $replaceCount
        );
        if ($replaceCount > 0 && is_string($replacedOverlayHtml)) {
            $tileOverlayAddonHtml = $replacedOverlayHtml;
        }
    }
}

$tileSizeEvent = new AnimalTileSizeEvent([
    'animal' => $animal,
    'contentContainer' => $contentContainer,
    'existingDonationGoal' => $existingDonationGoal,
]);
Event::trigger(AnimalTileSizeEvent::class, AnimalTileSizeEvent::EVENT_RESOLVE_SIZE, $tileSizeEvent);
$extraTileHeightPx = $tileSizeEvent->getAdditionalHeightPx();

// Fallback: read donations setting directly in case size hook listeners are not yet active in cache.
if ($extraTileHeightPx <= 0
    && $contentContainer instanceof Space
    && $contentContainer->moduleManager->isEnabled('donations')
) {
    $donationsModule = Yii::$app->getModule('donations', false);
    if ($donationsModule !== null) {
        $extraTileHeightPx = max(0, (int)$donationsModule->settings->contentContainer($contentContainer)->get('animal_tile_extra_height_px', 0));
    }
}

$tileBaseHeightPx = 260;
if ($tileLayoutMode === 'rows') {
    $tileBaseHeightPx = 210;
} elseif ($tileLayoutMode === 'tiles2') {
    $tileBaseHeightPx = 360;
} elseif ($tileLayoutMode === 'tablet') {
    $tileBaseHeightPx = 560;
}
$tileTotalHeightPx = $tileBaseHeightPx + max(0, (int)$extraTileHeightPx);
$tileMediaStyle = 'display:block;position:relative;background:#d8dee8;height:' . (int)$tileTotalHeightPx . 'px;overflow:visible;border-radius:12px;';
if ($tileLayoutMode === 'tablet') {
    $tileMediaStyle = 'display:block;position:relative;background:#d8dee8;min-height:520px;height:min(84vh,860px);overflow:visible;border-radius:12px;';
}
$tileImageFitMode = 'cover';
$overlayPointerEvents = $tileLayoutMode === 'tablet' ? 'auto' : 'none';
$overlayVerticalStyle = $tileLayoutMode === 'tablet' ? 'top:12px;' : '';

$inlineFormBackgroundStyle = 'display:none;position:absolute;left:12px;right:12px;top:12px;z-index:5;max-height:calc(100% - 24px);overflow:auto;padding:12px;border:1px solid rgba(213,222,234,0.9);border-radius:10px;background:#fff;';
if ($existingGoalImage !== '') {
    $inlineFormBackgroundStyle = 'display:none;position:absolute;left:12px;right:12px;top:12px;z-index:5;max-height:calc(100% - 24px);overflow:auto;padding:12px;border:1px solid rgba(213,222,234,0.9);border-radius:10px;'
    . 'background-image:linear-gradient(rgba(255,255,255,0.35),rgba(255,255,255,0.45)),url(' . Html::encode($existingGoalImage) . ');'
        . 'background-size:cover;background-position:center;';
}
?>

<div class="panel panel-default" style="margin-bottom:0;overflow:visible;border-radius:12px;border:0;box-shadow:0 8px 24px rgba(15,23,42,0.14);position:relative;">
    <?php if ($showDonationSettingsButton && $tileLayoutMode !== 'tablet'): ?>
        <input
            type="checkbox"
            id="<?= Html::encode($toggleInputId) ?>"
            style="display:none;"
            onchange="var f=document.getElementById('<?= Html::encode($inlineFormId) ?>');if(f){f.style.display=this.checked?'block':'none';}"
        >
    <?php endif; ?>

    <?php if ($tileLayoutMode === 'tablet'): ?>
        <input type="radio" name="<?= Html::encode($inlinePanelRadioName) ?>" id="<?= Html::encode($inlinePanelNoneId) ?>" style="display:none;" checked>
        <input type="radio" name="<?= Html::encode($inlinePanelRadioName) ?>" id="<?= Html::encode($inlinePanelIds['gallery']) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($inlinePanelRadioName) ?>" id="<?= Html::encode($inlinePanelIds['files']) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($inlinePanelRadioName) ?>" id="<?= Html::encode($inlinePanelIds['medical-progress']) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($inlinePanelRadioName) ?>" id="<?= Html::encode($inlinePanelIds['transfer']) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($galleryColsRadioName) ?>" id="<?= Html::encode($galleryCols2Id) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($galleryColsRadioName) ?>" id="<?= Html::encode($galleryCols3Id) ?>" style="display:none;" checked>
        <input type="radio" name="<?= Html::encode($formModeRadioName) ?>" id="<?= Html::encode($formModeNoneId) ?>" style="display:none;" checked>
        <input type="radio" name="<?= Html::encode($formModeRadioName) ?>" id="<?= Html::encode($formModeMedicalId) ?>" style="display:none;">
        <input type="radio" name="<?= Html::encode($formModeRadioName) ?>" id="<?= Html::encode($formModeProgressId) ?>" style="display:none;">
        <?php if ($showInlineAddControls): ?>
            <input type="checkbox" id="<?= Html::encode($galleryAddToggleId) ?>" class="animal-tile-item-edit-toggle">
            <input type="checkbox" id="<?= Html::encode($transferAddToggleId) ?>" class="animal-tile-item-edit-toggle">
        <?php endif; ?>
    <?php endif; ?>

    <div style="<?= Html::encode($tileMediaStyle) ?>">
        <a href="<?= Html::encode($animalViewUrl) ?>" aria-label="<?= Html::encode($animal->getDisplayName()) ?>" style="position:absolute;inset:0;z-index:1;border-radius:12px;"></a>
        <?php if ($hasImage): ?>
            <img src="<?= Html::encode($imageUrl) ?>" alt="<?= Html::encode($animal->getDisplayName()) ?>" style="position:absolute;inset:0;width:100%;height:100%;object-fit:<?= Html::encode($tileImageFitMode) ?>;object-position:center center;border-radius:12px;">
        <?php endif; ?>
        <div style="position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,10,16,0.05) 0%, rgba(7,10,16,0.62) 58%, rgba(7,10,16,0.78) 100%);border-radius:12px;"></div>

        <div id="<?= Html::encode($overlayStackId) ?>" data-animal-tile-overlay-stack="1" style="position:absolute;left:12px;right:12px;bottom:12px;<?= Html::encode($overlayVerticalStyle) ?>z-index:2;color:#fff;pointer-events:<?= Html::encode($overlayPointerEvents) ?>;transition:top 150ms ease,bottom 150ms ease;display:flex;flex-direction:column;justify-content:flex-end;">
            <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;">
                <a href="<?= Html::encode($animalViewUrl) ?>" style="font-size:20px;font-weight:700;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,0.4);color:#fff;pointer-events:auto;text-decoration:none;">
                    <?= Html::encode($animal->getDisplayName()) ?>
                </a>
                <span style="display:flex;align-items:center;gap:6px;position:relative;z-index:3;pointer-events:auto;">
                    <?php if ($showDonationSettingsButton && $tileLayoutMode !== 'tablet' && $existingGoalId <= 0): ?>
                        <label for="<?= Html::encode($toggleInputId) ?>" class="btn btn-xs btn-default" title="<?= Yii::t('DonationsModule.base', 'Set Goal') ?>" aria-label="<?= Yii::t('DonationsModule.base', 'Set Goal') ?>" style="border-radius:999px;padding:6px 10px;background:rgba(255,255,255,0.92);border:0;margin:0;">
                            <i class="fa fa-plus"></i> <?= Yii::t('DonationsModule.base', 'Set Goal') ?>
                        </label>
                    <?php endif; ?>
                </span>
            </div>
            <?php if (!empty($selectedMeta)): ?>
                <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;pointer-events:none;">
                    <?php foreach ($selectedMeta as $metaValue): ?>
                        <span style="display:inline-block;background:rgba(15,23,42,0.58);border:1px solid rgba(255,255,255,0.28);padding:2px 8px;border-radius:999px;font-size:12px;">
                            <?= Html::encode($metaValue) ?>
                        </span>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
            <?php if ($summaryText !== ''): ?>
                <div style="font-size:12px;line-height:1.35;color:rgba(255,255,255,0.92);text-shadow:0 1px 4px rgba(0,0,0,0.5);pointer-events:none;">
                    <?= Html::encode($summaryText) ?>
                </div>
            <?php endif; ?>
            <?php if ($tileOverlayAddonHtml !== ''): ?>
                <div style="margin-top:8px;pointer-events:auto;max-width:100%;">
                    <?= $tileOverlayAddonHtml ?>
                </div>
            <?php endif; ?>

            <?php if ($tileLayoutMode === 'tablet'): ?>
                <div id="<?= Html::encode($inlinePanelWrapId) ?>" style="display:none;margin-top:8px;flex:1 1 auto;min-height:0;width:100%;max-width:100%;padding:10px;border-radius:10px;background:rgba(15,23,42,0.34);border:1px solid rgba(255,255,255,0.16);color:#f8fafc;pointer-events:auto;overflow:hidden;">
                    <div data-inline-tile-panel="gallery" style="display:none;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;">
                        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;">
                            <div style="font-size:12px;font-weight:700;color:#f8fafc;"><?= Yii::t('AnimalManagementModule.base', 'Gallery') ?></div>
                            <div style="display:flex;gap:6px;align-items:center;">
                                <?php if ($showInlineAddControls): ?>
                                    <label for="<?= Html::encode($galleryAddToggleId) ?>" class="animal-tile-inline-add-action"><i class="fa fa-plus"></i> <?= Yii::t('AnimalManagementModule.base', 'New') ?></label>
                                <?php endif; ?>
                                <label for="<?= Html::encode($galleryCols2Id) ?>" class="animal-tile-gallery-cols-toggle" title="<?= Yii::t('AnimalManagementModule.base', '2 Columns') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', '2 Columns') ?>">
                                    <i class="fa fa-th-large"></i> 2
                                </label>
                                <label for="<?= Html::encode($galleryCols3Id) ?>" class="animal-tile-gallery-cols-toggle" title="<?= Yii::t('AnimalManagementModule.base', '3 Columns') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', '3 Columns') ?>">
                                    <i class="fa fa-th"></i> 3
                                </label>
                            </div>
                        </div>

                        <?php if ($showInlineAddControls): ?>
                            <div id="<?= Html::encode($galleryFormWrapId) ?>" style="display:none;position:relative;margin-bottom:0;min-height:0;">
                                <label for="<?= Html::encode($galleryAddToggleId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                    <i class="fa fa-times"></i>
                                </label>
                                <iframe src="<?= Html::encode($galleryAddInlineUrl) ?>" data-animal-inline-collapse-id="gallery-add-inline" style="width:100%;height:100%;min-height:100%;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                            </div>
                        <?php endif; ?>

                        <div id="<?= Html::encode($galleryListWrapId) ?>" style="min-height:0;">
                            <?php if (empty($galleryUrls)): ?>
                                <div style="font-size:12px;color:rgba(226,232,240,0.9);"><?= Yii::t('AnimalManagementModule.base', 'No gallery images yet.') ?></div>
                            <?php else: ?>
                                <div class="animal-tile-gallery-grid" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;">
                                    <?php foreach ($galleryUrls as $galleryUrl): ?>
                                        <a href="<?= Html::encode($galleryUrl) ?>#.jpeg"
                                           data-type="image"
                                           data-toggle="lightbox"
                                           data-parent="#<?= Html::encode($inlinePanelWrapId) ?>"
                                           data-ui-gallery="<?= Html::encode($tileUiGalleryId) ?>"
                                           data-pjax="0"
                                           data-pjax-prevent
                                           aria-label="<?= Yii::t('AnimalManagementModule.base', 'Open image') ?>"
                                           class="animal-tile-gallery-item">
                                            <img src="<?= Html::encode($galleryUrl) ?>" alt="" class="animal-tile-gallery-image">
                                        </a>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                    <div data-inline-tile-panel="files" style="display:none;">
                        <div style="min-height:220px;"></div>
                    </div>

                    <div data-inline-tile-panel="medical-progress" style="display:none;width:100%;height:100%;overflow:hidden;">
                        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;height:100%;">
                            <div style="min-width:0;border:1px solid rgba(255,255,255,0.12);border-radius:10px;background:rgba(15,23,42,0.14);padding:8px;display:flex;flex-direction:column;min-height:0;">
                                <div style="display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;">
                                    <a href="<?= Html::encode($medicalUrl) ?>" class="animal-tile-section-title"><?= Yii::t('AnimalManagementModule.base', 'Medical Visits') ?></a>
                                    <?php if ($showInlineAddControls): ?>
                                        <label for="<?= Html::encode($formModeMedicalId) ?>" class="animal-tile-inline-add-action"><i class="fa fa-plus"></i> <?= Yii::t('AnimalManagementModule.base', 'New') ?></label>
                                    <?php endif; ?>
                                </div>
                                <div id="<?= Html::encode($medicalFormWrapId) ?>" style="display:none;position:relative;margin-top:0;margin-bottom:8px;">
                                    <label for="<?= Html::encode($formModeNoneId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                        <i class="fa fa-times"></i>
                                    </label>
                                    <iframe src="<?= Html::encode($medicalAddInlineUrl) ?>" data-animal-inline-collapse-id="medical-add-inline" style="width:100%;min-height:560px;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                                </div>

                                <div class="animal-tile-scroll-region" style="flex:1 1 auto;min-height:0;overflow:auto;">
                                    <?php if (empty($recentMedicalVisits)): ?>
                                        <div style="font-size:12px;color:rgba(226,232,240,0.9);margin-bottom:8px;"><?= Yii::t('AnimalManagementModule.base', 'No medical visits recorded.') ?></div>
                                    <?php else: ?>
                                        <?php foreach ($recentMedicalVisits as $visit): ?>
                                            <?php
                                                $visitCustomValues = method_exists($visit, 'getCustomFieldDisplayValues') ? $visit->getCustomFieldDisplayValues(true) : [];
                                                $medicalMedia = '';
                                                foreach ($visitCustomValues as $visitCustomField) {
                                                    $fieldKey = (string)($visitCustomField['field_key'] ?? '');
                                                    if ($fieldKey === 'medical_media_reference' || $fieldKey === 'media_reference') {
                                                        $candidateUrl = trim((string)($visitCustomField['value'] ?? ''));
                                                        if ($candidateUrl !== '') {
                                                            $medicalMedia = $candidateUrl;
                                                            break;
                                                        }
                                                    }
                                                }
                                                $hasMedicalMedia = $medicalMedia !== '' && (preg_match('/^https?:\/\//i', $medicalMedia) || substr($medicalMedia, 0, 1) === '/');
                                                $canEditMedicalVisit = $showInlineAddControls;
                                                $medicalEditToggleId = 'animal-tile-medical-edit-toggle-' . (int)$animal->id . '-' . (int)$visit->id;
                                                $medicalEditInlineUrl = $contentContainer->createUrl('/animal_management/animals/edit-medical-visit', [
                                                    'id' => (int)$animal->id,
                                                    'visitId' => (int)$visit->id,
                                                    'inline' => 1,
                                                    'returnTo' => 'medical-visits',
                                                ]);
                                            ?>
                                            <?php if ($canEditMedicalVisit): ?>
                                                <input type="checkbox" id="<?= Html::encode($medicalEditToggleId) ?>" class="animal-tile-item-edit-toggle">
                                            <?php endif; ?>
                                            <div class="panel panel-default animal-tile-feed-card animal-tile-item-card" style="margin-bottom:10px;">
                                                <?php if ($hasMedicalMedia): ?>
                                                    <img class="animal-tile-feed-cover" src="<?= Html::encode($medicalMedia) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Medical media') ?>">
                                                <?php endif; ?>
                                                <div class="animal-tile-feed-overlay"></div>
                                                <div class="animal-tile-feed-content">
                                                    <div class="animal-tile-feed-top-row">
                                                        <span class="animal-tile-feed-date"><?= Html::encode(DateDisplayHelper::format((string)$visit->visit_at)) ?></span>
                                                        <?php if ($canEditMedicalVisit): ?>
                                                            <label for="<?= Html::encode($medicalEditToggleId) ?>" class="animal-tile-item-edit-btn" title="<?= Yii::t('AnimalManagementModule.base', 'Edit Medical Visit') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Edit Medical Visit') ?>">
                                                                <i class="fa fa-pencil"></i>
                                                            </label>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="animal-tile-feed-details">
                                                        <?php if (!empty($visit->provider_name)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Provider') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= Html::encode((string)$visit->provider_name) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($visit->notes)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Clinical Notes') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$visit->notes)) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($visit->recommendations)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Recommendations') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$visit->recommendations)) ?></div>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php if ($canEditMedicalVisit): ?>
                                                <div class="animal-tile-item-editor" style="position:relative;margin-bottom:10px;">
                                                    <label for="<?= Html::encode($medicalEditToggleId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                                        <i class="fa fa-times"></i>
                                                    </label>
                                                    <iframe src="<?= Html::encode($medicalEditInlineUrl) ?>" data-animal-inline-collapse-id="medical-edit-inline-<?= (int)$visit->id ?>" style="width:100%;min-height:600px;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                                                </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <div style="min-width:0;border:1px solid rgba(255,255,255,0.12);border-radius:10px;background:rgba(15,23,42,0.14);padding:8px;display:flex;flex-direction:column;min-height:0;">
                                <div style="display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;">
                                    <a href="<?= Html::encode($contentContainer->createUrl('/animal_management/animals/progress-updates', ['id' => $animal->id])) ?>" class="animal-tile-section-title"><?= Yii::t('AnimalManagementModule.base', 'Progress Feed') ?></a>
                                    <?php if ($showInlineAddControls): ?>
                                        <label for="<?= Html::encode($formModeProgressId) ?>" class="animal-tile-inline-add-action"><i class="fa fa-plus"></i> <?= Yii::t('AnimalManagementModule.base', 'New') ?></label>
                                    <?php endif; ?>
                                </div>
                                <div class="animal-tile-scroll-region" style="flex:1 1 auto;min-height:0;overflow:auto;">
                                    <?php if (empty($recentProgressUpdates)): ?>
                                        <div style="font-size:12px;color:rgba(226,232,240,0.9);margin-bottom:8px;"><?= Yii::t('AnimalManagementModule.base', 'No progress updates recorded.') ?></div>
                                    <?php else: ?>
                                        <?php foreach ($recentProgressUpdates as $update): ?>
                                            <?php
                                                $progressCustomValues = method_exists($update, 'getCustomFieldDisplayValues') ? $update->getCustomFieldDisplayValues(true) : [];
                                                $progressMedia = '';
                                                foreach ($progressCustomValues as $progressCustomField) {
                                                    if ((string)($progressCustomField['field_key'] ?? '') !== 'media_reference') {
                                                        continue;
                                                    }
                                                    $candidateUrl = trim((string)($progressCustomField['value'] ?? ''));
                                                    if ($candidateUrl !== '') {
                                                        $progressMedia = $candidateUrl;
                                                        break;
                                                    }
                                                }
                                                $hasProgressMedia = $progressMedia !== '' && (preg_match('/^https?:\/\//i', $progressMedia) || substr($progressMedia, 0, 1) === '/');
                                                $canEditProgressUpdate = $showInlineAddControls;
                                                $progressEditToggleId = 'animal-tile-progress-edit-toggle-' . (int)$animal->id . '-' . (int)$update->id;
                                                $progressEditInlineUrl = $contentContainer->createUrl('/animal_management/animals/edit-progress-update', [
                                                    'id' => (int)$animal->id,
                                                    'updateId' => (int)$update->id,
                                                    'inline' => 1,
                                                    'returnTo' => 'progress-updates',
                                                ]);
                                            ?>
                                            <?php if ($canEditProgressUpdate): ?>
                                                <input type="checkbox" id="<?= Html::encode($progressEditToggleId) ?>" class="animal-tile-item-edit-toggle">
                                            <?php endif; ?>
                                            <div class="panel panel-default animal-tile-feed-card animal-tile-item-card" style="margin-bottom:10px;">
                                                <?php if ($hasProgressMedia): ?>
                                                    <img class="animal-tile-feed-cover" src="<?= Html::encode($progressMedia) ?>" alt="<?= Yii::t('AnimalManagementModule.base', 'Progress media') ?>">
                                                <?php endif; ?>
                                                <div class="animal-tile-feed-overlay"></div>
                                                <div class="animal-tile-feed-content">
                                                    <div class="animal-tile-feed-top-row">
                                                        <span class="animal-tile-feed-date"><?= Html::encode(DateDisplayHelper::format((string)$update->update_at)) ?></span>
                                                        <?php if ($canEditProgressUpdate): ?>
                                                            <label for="<?= Html::encode($progressEditToggleId) ?>" class="animal-tile-item-edit-btn" title="<?= Yii::t('AnimalManagementModule.base', 'Edit Progress Update') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Edit Progress Update') ?>">
                                                                <i class="fa fa-pencil"></i>
                                                            </label>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="animal-tile-feed-details">
                                                        <?php if (!empty($update->vitals)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Vitals') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$update->vitals)) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($update->behavior_notes)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Behavior') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$update->behavior_notes)) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($update->meal_plan_changes)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Meal Plan') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$update->meal_plan_changes)) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($update->housing_changes)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Housing') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$update->housing_changes)) ?></div>
                                                        <?php endif; ?>
                                                        <?php if (!empty($update->medical_concerns)): ?>
                                                            <div class="animal-tile-feed-label"><?= Yii::t('AnimalManagementModule.base', 'Medical Concerns') ?></div>
                                                            <div class="animal-tile-feed-copy"><?= nl2br(Html::encode((string)$update->medical_concerns)) ?></div>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php if ($canEditProgressUpdate): ?>
                                                <div class="animal-tile-item-editor" style="position:relative;margin-bottom:10px;">
                                                    <label for="<?= Html::encode($progressEditToggleId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                                        <i class="fa fa-times"></i>
                                                    </label>
                                                    <iframe src="<?= Html::encode($progressEditInlineUrl) ?>" data-animal-inline-collapse-id="progress-edit-inline-<?= (int)$update->id ?>" style="width:100%;min-height:620px;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                                                </div>
                                            <?php endif; ?>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                </div>

                                <div id="<?= Html::encode($progressFormWrapId) ?>" style="display:none;position:relative;margin-top:8px;">
                                    <label for="<?= Html::encode($formModeNoneId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                        <i class="fa fa-times"></i>
                                    </label>
                                    <iframe src="<?= Html::encode($progressAddInlineUrl) ?>" data-animal-inline-collapse-id="progress-add-inline" style="width:100%;min-height:620px;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div data-inline-tile-panel="transfer" style="display:none;width:100%;height:100%;overflow-y:auto;">
                        <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;">
                            <?php if ($showInlineAddControls): ?>
                                <label for="<?= Html::encode($transferAddToggleId) ?>" class="animal-tile-inline-add-action"><i class="fa fa-plus"></i> <?= Yii::t('AnimalManagementModule.base', 'Transfer Form') ?></label>
                            <?php endif; ?>
                            <span style="display:inline-block;font-size:11px;padding:3px 8px;border-radius:999px;background:#e7eff8;color:#27435f;"><?= Yii::t('AnimalManagementModule.base', 'Intelligent Rescue Matching (Coming Soon)') ?></span>
                        </div>

                        <?php if ($showInlineAddControls): ?>
                            <div id="<?= Html::encode($transferFormWrapId) ?>" style="display:none;position:relative;margin-bottom:8px;">
                                <label for="<?= Html::encode($transferAddToggleId) ?>" class="animal-tile-inline-iframe-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Form') ?>">
                                    <i class="fa fa-times"></i>
                                </label>
                                <iframe src="<?= Html::encode($transferAddInlineUrl) ?>" data-animal-inline-collapse-id="transfer-add-inline" style="width:100%;min-height:500px;border:0;border-radius:8px;background:transparent;" loading="lazy"></iframe>
                            </div>
                        <?php endif; ?>

                        <div id="<?= Html::encode($transferHistoryWrapId) ?>" style="max-width:500px;">
                        <?php if (empty($recentTransferEvents)): ?>
                            <div style="font-size:12px;color:rgba(226,232,240,0.9);"><?= Yii::t('AnimalManagementModule.base', 'No transfer events recorded yet.') ?></div>
                        <?php else: ?>
                            <?php
                                $eventsByTransfer = [];
                                foreach ($recentTransferEvents as $transferEvent) {
                                    if (!$transferEvent instanceof AnimalTransferEvent) {
                                        continue;
                                    }
                                    $transferId = (int)$transferEvent->transfer_id;
                                    if ($transferId <= 0) {
                                        continue;
                                    }
                                    if (!isset($eventsByTransfer[$transferId])) {
                                        $eventsByTransfer[$transferId] = [];
                                    }
                                    $eventsByTransfer[$transferId][] = $transferEvent;
                                }

                                $eventActionMap = [
                                    AnimalTransferEvent::EVENT_REQUESTED => Yii::t('AnimalManagementModule.base', 'requested Transfer'),
                                    AnimalTransferEvent::EVENT_ACCEPTED => Yii::t('AnimalManagementModule.base', 'accepted Transfer'),
                                    AnimalTransferEvent::EVENT_DECLINED => Yii::t('AnimalManagementModule.base', 'declined Transfer'),
                                    AnimalTransferEvent::EVENT_COMPLETED => Yii::t('AnimalManagementModule.base', 'completed Transfer'),
                                    AnimalTransferEvent::EVENT_CANCELLED => Yii::t('AnimalManagementModule.base', 'cancelled Transfer'),
                                ];

                                $eventBadgeMap = [
                                    AnimalTransferEvent::EVENT_REQUESTED => ['label' => Yii::t('AnimalManagementModule.base', 'Requested'), 'class' => 'animal-tile-transfer-badge-requested'],
                                    AnimalTransferEvent::EVENT_ACCEPTED => ['label' => Yii::t('AnimalManagementModule.base', 'Accepted'), 'class' => 'animal-tile-transfer-badge-accepted'],
                                    AnimalTransferEvent::EVENT_DECLINED => ['label' => Yii::t('AnimalManagementModule.base', 'Declined'), 'class' => 'animal-tile-transfer-badge-declined'],
                                    AnimalTransferEvent::EVENT_COMPLETED => ['label' => Yii::t('AnimalManagementModule.base', 'Completed'), 'class' => 'animal-tile-transfer-badge-completed'],
                                    AnimalTransferEvent::EVENT_CANCELLED => ['label' => Yii::t('AnimalManagementModule.base', 'Cancelled'), 'class' => 'animal-tile-transfer-badge-cancelled'],
                                ];
                            ?>
                            <?php foreach ($eventsByTransfer as $transferId => $transferEventsGroup): ?>
                                <?php
                                    $latestEvent = $transferEventsGroup[0] ?? null;
                                    $latestType = $latestEvent instanceof AnimalTransferEvent ? (string)$latestEvent->event_type : '';
                                    $eventBadge = $eventBadgeMap[$latestType] ?? ['label' => Yii::t('AnimalManagementModule.base', 'Updated'), 'class' => 'animal-tile-transfer-badge-default'];
                                    $latestTimeText = $latestEvent instanceof AnimalTransferEvent ? date('m/d/y g:i A', strtotime((string)$latestEvent->created_at)) : '';

                                    $transferModel = $recentTransfersById[(int)$transferId] ?? null;
                                    $fromName = Yii::t('AnimalManagementModule.base', 'Unknown Rescue');
                                    $toName = Yii::t('AnimalManagementModule.base', 'Unknown Rescue');
                                    $fromUrl = '';
                                    $toUrl = '';
                                    $careWindow = '';

                                    if ($transferModel instanceof AnimalTransfer) {
                                        $fromSpace = $transferModel->getFromSpace();
                                        $toSpace = $transferModel->getToSpace();
                                        if ($fromSpace !== null) {
                                            $fromName = (string)$fromSpace->name;
                                            $fromUrl = (string)$fromSpace->createUrl('/rescues');
                                        }
                                        if ($toSpace !== null) {
                                            $toName = (string)$toSpace->name;
                                            $toUrl = (string)$toSpace->createUrl('/rescues');
                                        }

                                        $startTs = strtotime((string)$transferModel->created_at);
                                        $endRaw = trim((string)($transferModel->completed_at ?? ''));
                                        if ($endRaw === '') {
                                            $endRaw = trim((string)$transferModel->updated_at);
                                        }
                                        $endTs = $endRaw !== '' ? strtotime($endRaw) : false;

                                        if ($startTs !== false) {
                                            $careWindow = date('m/d/y', $startTs);
                                            if ($endTs !== false) {
                                                $careWindow .= ' - ' . date('m/d/y', $endTs);
                                            }
                                        }
                                    }

                                    $routeFromHtml = $fromUrl !== ''
                                        ? Html::a(Html::encode($fromName), $fromUrl, ['style' => 'color:#f8fafc;text-decoration:underline;'])
                                        : '<span style="color:#f8fafc;">' . Html::encode($fromName) . '</span>';
                                    $routeToHtml = $toUrl !== ''
                                        ? Html::a(Html::encode($toName), $toUrl, ['style' => 'color:#f8fafc;text-decoration:underline;'])
                                        : '<span style="color:#f8fafc;">' . Html::encode($toName) . '</span>';
                                ?>
                                <?php
                                    // Match the animal profile transfer tile markup and logic
                                    $historyImageUrl = $hasImage ? $imageUrl : '';
                                    $fromAvatarUrl = '';
                                    $toAvatarUrl = '';
                                    if ($transferModel instanceof AnimalTransfer) {
                                        $fromSpace = $transferModel->getFromSpace();
                                        $toSpace = $transferModel->getToSpace();
                                        if ($fromSpace && method_exists($fromSpace, 'getProfileImage')) {
                                            $profileImage = $fromSpace->getProfileImage();
                                            if ($profileImage && method_exists($profileImage, 'getUrl')) {
                                                $fromAvatarUrl = $profileImage->getUrl();
                                            }
                                        }
                                        if ($toSpace && method_exists($toSpace, 'getProfileImage')) {
                                            $profileImage = $toSpace->getProfileImage();
                                            if ($profileImage && method_exists($profileImage, 'getUrl')) {
                                                $toAvatarUrl = $profileImage->getUrl();
                                            }
                                        }
                                    }
                                    $fromNameHtml = $fromUrl !== ''
                                        ? Html::a(Html::encode($fromName), $fromUrl, ['class' => 'animal-profile-transfer-rescue-name'])
                                        : '<span class="animal-profile-transfer-rescue-name">' . Html::encode($fromName) . '</span>';
                                    $toNameHtml = $toUrl !== ''
                                        ? Html::a(Html::encode($toName), $toUrl, ['class' => 'animal-profile-transfer-rescue-name'])
                                        : '<span class="animal-profile-transfer-rescue-name">' . Html::encode($toName) . '</span>';
                                    $careWindowText = $careWindow;
                                    $receivingStatusDateText = '';
                                ?>
                                <div class="animal-profile-transfer-history-card" style="margin-bottom:10px;">
                                    <?php if ($historyImageUrl !== ''): ?>
                                        <img class="animal-profile-transfer-history-cover" src="<?= Html::encode($historyImageUrl) ?>" alt="<?= Html::encode($animal->getDisplayName()) ?>">
                                    <?php endif; ?>
                                    <div class="animal-profile-transfer-history-overlay"></div>
                                    <div class="animal-profile-transfer-history-body">
                                        <div class="animal-profile-transfer-event-head">
                                            <span class="animal-profile-transfer-badge <?= Html::encode($eventBadge['class']) ?>"><?= Html::encode($eventBadge['label']) ?></span>
                                        </div>
                                        <div class="animal-profile-transfer-route-row">
                                            <div class="animal-profile-transfer-rescue-col">
                                                <?php if ($fromAvatarUrl !== ''): ?>
                                                    <?php if ($fromUrl !== ''): ?>
                                                        <a href="<?= Html::encode($fromUrl) ?>" class="animal-profile-transfer-rescue-avatar-link">
                                                            <img class="animal-profile-transfer-rescue-avatar" src="<?= Html::encode($fromAvatarUrl) ?>" alt="<?= Html::encode($fromName) ?>">
                                                        </a>
                                                    <?php else: ?>
                                                        <img class="animal-profile-transfer-rescue-avatar" src="<?= Html::encode($fromAvatarUrl) ?>" alt="<?= Html::encode($fromName) ?>">
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <span class="animal-profile-transfer-rescue-avatar animal-profile-transfer-rescue-avatar-fallback"><i class="fa fa-home"></i></span>
                                                <?php endif; ?>
                                                <?= $fromNameHtml ?>
                                                <?php if ($careWindowText !== ''): ?>
                                                    <span class="animal-profile-transfer-rescue-date"><?= Html::encode($careWindowText) ?></span>
                                                <?php endif; ?>
                                            </div>
                                            <div class="animal-profile-transfer-route-arrow" aria-hidden="true">&rarr;</div>
                                            <div class="animal-profile-transfer-rescue-col">
                                                <?php if ($toAvatarUrl !== ''): ?>
                                                    <?php if ($toUrl !== ''): ?>
                                                        <a href="<?= Html::encode($toUrl) ?>" class="animal-profile-transfer-rescue-avatar-link">
                                                            <img class="animal-profile-transfer-rescue-avatar" src="<?= Html::encode($toAvatarUrl) ?>" alt="<?= Html::encode($toName) ?>">
                                                        </a>
                                                    <?php else: ?>
                                                        <img class="animal-profile-transfer-rescue-avatar" src="<?= Html::encode($toAvatarUrl) ?>" alt="<?= Html::encode($toName) ?>">
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <span class="animal-profile-transfer-rescue-avatar animal-profile-transfer-rescue-avatar-fallback"><i class="fa fa-home"></i></span>
                                                <?php endif; ?>
                                                <?= $toNameHtml ?>
                                                <?php if ($receivingStatusDateText !== ''): ?>
                                                    <span class="animal-profile-transfer-rescue-date"><?= Html::encode($receivingStatusDateText) ?></span>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <div class="animal-profile-transfer-event-lines">
                                            <?php foreach ($transferEventsGroup as $transferEvent): ?>
                                                <?php
                                                    $eventTimeText = date('m/d/y g:i A', strtotime((string)$transferEvent->created_at));
                                                    $eventActionText = $eventActionMap[(string)$transferEvent->event_type] ?? (string)$transferEvent->event_type;
                                                    $transferActor = $transferEvent->createdByUser;
                                                    $actorName = $transferActor ? (string)$transferActor->displayName : Yii::t('AnimalManagementModule.base', 'System');
                                                    $actorUrl = ($transferActor && method_exists($transferActor, 'getUrl')) ? (string)$transferActor->getUrl() : '';
                                                    $actorAvatarUrl = '';
                                                    if ($transferActor && method_exists($transferActor, 'getProfileImage')) {
                                                        $actorProfileImage = $transferActor->getProfileImage();
                                                        if ($actorProfileImage !== null && method_exists($actorProfileImage, 'getUrl')) {
                                                            $actorAvatarUrl = trim((string)$actorProfileImage->getUrl());
                                                        }
                                                    }
                                                ?>
                                                <div class="animal-profile-transfer-event-line">
                                                    <div class="animal-profile-transfer-event-actor">
                                                        <?php if ($actorAvatarUrl !== ''): ?>
                                                            <?php if ($actorUrl !== ''): ?>
                                                                <a href="<?= Html::encode($actorUrl) ?>" class="animal-profile-transfer-event-avatar-link">
                                                                    <img class="animal-profile-transfer-event-avatar" src="<?= Html::encode($actorAvatarUrl) ?>" alt="<?= Html::encode($actorName) ?>">
                                                                </a>
                                                            <?php else: ?>
                                                                <img class="animal-profile-transfer-event-avatar" src="<?= Html::encode($actorAvatarUrl) ?>" alt="<?= Html::encode($actorName) ?>">
                                                            <?php endif; ?>
                                                        <?php else: ?>
                                                            <span class="animal-profile-transfer-event-avatar animal-profile-transfer-event-avatar-fallback"><i class="fa fa-user"></i></span>
                                                        <?php endif; ?>
                                                        <div class="animal-profile-transfer-event-identity">
                                                            <?php if ($actorUrl !== ''): ?>
                                                                <?= Html::a(Html::encode($actorName), $actorUrl, ['class' => 'animal-profile-transfer-event-actor-name']) ?>
                                                            <?php else: ?>
                                                                <span class="animal-profile-transfer-event-actor-name"><?= Html::encode($actorName) ?></span>
                                                            <?php endif; ?>
                                                            <span class="animal-profile-transfer-event-line-time"><?= Html::encode($eventTimeText) ?></span>
                                                        </div>
                                                    </div>
                                                    <span class="animal-profile-transfer-event-action"><?= Html::encode($eventActionText) ?></span>
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                        </div>
                    </div>
                </div>

                <div id="<?= Html::encode($inlineMenuId) ?>" style="margin-top:8px;display:flex;align-items:center;justify-content:flex-start;gap:12px;pointer-events:auto;">
                    <label for="<?= Html::encode($inlinePanelIds['gallery']) ?>" data-panel-id="<?= Html::encode($inlinePanelIds['gallery']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-open" title="<?= Yii::t('AnimalManagementModule.base', 'Gallery') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Gallery') ?>">
                        <i class="fa fa-picture-o"></i>
                    </label>
                    <label for="<?= Html::encode($inlinePanelNoneId) ?>" data-panel-id-close="<?= Html::encode($inlinePanelIds['gallery']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Gallery') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Gallery') ?>">
                        <i class="fa fa-times"></i>
                    </label>

                    <label for="<?= Html::encode($inlinePanelIds['medical-progress']) ?>" data-panel-id="<?= Html::encode($inlinePanelIds['medical-progress']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-open" title="<?= Yii::t('AnimalManagementModule.base', 'Medical & Progress') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Medical & Progress') ?>">
                        <i class="fa fa-heartbeat"></i>
                    </label>
                    <label for="<?= Html::encode($inlinePanelNoneId) ?>" data-panel-id-close="<?= Html::encode($inlinePanelIds['medical-progress']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Medical & Progress') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Medical & Progress') ?>">
                        <i class="fa fa-times"></i>
                    </label>

                    <label for="<?= Html::encode($inlinePanelIds['transfer']) ?>" data-panel-id="<?= Html::encode($inlinePanelIds['transfer']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-open" title="<?= Yii::t('AnimalManagementModule.base', 'Transfer') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Transfer') ?>">
                        <i class="fa fa-exchange"></i>
                    </label>
                    <label for="<?= Html::encode($inlinePanelNoneId) ?>" data-panel-id-close="<?= Html::encode($inlinePanelIds['transfer']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Transfer') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Transfer') ?>">
                        <i class="fa fa-times"></i>
                    </label>

                    <label for="<?= Html::encode($inlinePanelIds['files']) ?>" data-panel-id="<?= Html::encode($inlinePanelIds['files']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-open" title="<?= Yii::t('AnimalManagementModule.base', 'Files') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Files') ?>">
                        <i class="fa fa-folder-open"></i>
                    </label>
                    <label for="<?= Html::encode($inlinePanelNoneId) ?>" data-panel-id-close="<?= Html::encode($inlinePanelIds['files']) ?>" class="animal-tile-inline-icon animal-tile-inline-icon-close" title="<?= Yii::t('AnimalManagementModule.base', 'Close Files') ?>" aria-label="<?= Yii::t('AnimalManagementModule.base', 'Close Files') ?>">
                        <i class="fa fa-times"></i>
                    </label>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <?php if ($showDonationSettingsButton && $tileLayoutMode !== 'tablet'): ?>
        <div id="<?= Html::encode($inlineFormId) ?>" style="<?= $inlineFormBackgroundStyle ?>">
            <div class="animal-donation-inline-surface" style="background:rgba(255,255,255,0.28);padding:10px;border-radius:8px;backdrop-filter:blur(1.8px);">
            <div style="font-weight:700;margin-bottom:8px;color:#1f2937;">
                <?= Yii::t('DonationsModule.base', 'Animal Donation Goal') ?>
            </div>

            <?= Html::beginForm($createInlineGoalUrl, 'post', [
                'enctype' => 'multipart/form-data',
                'style' => 'margin:0;',
            ]) ?>
            <?= Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->getCsrfToken()) ?>
            <?= Html::hiddenInput('DonationGoalForm[id]', $existingGoalId) ?>
            <?= Html::hiddenInput('DonationGoalForm[goal_type]', 'animal') ?>
            <?= Html::hiddenInput('DonationGoalForm[target_animal_id]', (int)$animal->id) ?>
            <?= Html::hiddenInput('DonationGoalForm[is_active]', $existingGoalActive) ?>

            <div class="form-group" style="margin-bottom:8px;">
                <label style="font-size:12px;font-weight:600;margin-bottom:4px;display:block;"><?= Yii::t('DonationsModule.base', 'Title') ?></label>
                <?= Html::textInput('DonationGoalForm[title]', $existingGoalTitle, [
                    'class' => 'form-control input-sm animal-donation-inline-input',
                    'maxlength' => 190,
                    'required' => true,
                ]) ?>
            </div>

            <div class="form-group" style="margin-bottom:8px;">
                <label style="font-size:12px;font-weight:600;margin-bottom:4px;display:block;"><?= Yii::t('DonationsModule.base', 'Target') ?></label>
                <?= Html::input('number', 'DonationGoalForm[target_amount]', $existingGoalTargetAmount > 0 ? (string)$existingGoalTargetAmount : '', [
                    'class' => 'form-control input-sm animal-donation-inline-input',
                    'step' => '0.01',
                    'min' => '0',
                    'required' => true,
                ]) ?>
            </div>

            <div class="form-group" style="margin-bottom:8px;">
                <label style="font-size:12px;font-weight:600;margin-bottom:4px;display:block;"><?= Yii::t('DonationsModule.base', 'Description') ?></label>
                <?= Html::textarea('DonationGoalForm[description]', $existingGoalDescription, [
                    'class' => 'form-control input-sm animal-donation-inline-input',
                    'rows' => 2,
                ]) ?>
            </div>

            <div class="form-group" style="margin-bottom:8px;">
                <label style="font-size:12px;font-weight:600;margin-bottom:6px;display:block;"><?= Yii::t('DonationsModule.base', 'Image') ?></label>
                <div id="<?= Html::encode($previewId) ?>" class="text-muted" style="font-size:12px;margin-bottom:6px;">
                    <?php if ($existingGoalImage !== ''): ?>
                        <img src="<?= Html::encode($existingGoalImage) ?>" alt="" style="width:64px;height:64px;object-fit:cover;border-radius:3px;border:1px solid #d5deea;">
                    <?php else: ?>
                        <?= Yii::t('DonationsModule.base', 'No image selected.') ?>
                    <?php endif; ?>
                </div>

                <?php if (!empty($galleryUrls)): ?>
                    <div class="animal-donation-inline-gallery" style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;">
                        <?php foreach ($galleryUrls as $galleryIndex => $galleryUrl): ?>
                            <?php $galleryOptionId = 'animal-donation-gallery-option-' . (int)$animal->id . '-' . (int)$galleryIndex; ?>
                            <div class="animal-donation-inline-gallery-option" style="position:relative;">
                                <input
                                    type="radio"
                                    class="animal-donation-gallery-radio"
                                    id="<?= Html::encode($galleryOptionId) ?>"
                                    name="DonationGoalForm[imageGalleryPath]"
                                    value="<?= Html::encode($galleryUrl) ?>"
                                    data-preview="#<?= Html::encode($previewId) ?>"
                                    data-editor-bg="#<?= Html::encode($inlineFormId) ?>"
                                    <?= $existingGoalImage === $galleryUrl ? 'checked' : '' ?>
                                >
                                <label
                                    for="<?= Html::encode($galleryOptionId) ?>"
                                    class="animal-donation-inline-gallery-item"
                                    style="display:block;border:1px solid #d5deea;background:rgba(255,255,255,0.34);padding:3px;border-radius:4px;line-height:0;pointer-events:auto;cursor:pointer;"
                                >
                                    <img src="<?= Html::encode($galleryUrl) ?>" alt="" style="width:56px;height:56px;object-fit:cover;border-radius:2px;">
                                </label>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="text-muted" style="font-size:12px;margin-bottom:8px;">
                        <?= Yii::t('DonationsModule.base', 'No gallery images found for this animal.') ?>
                    </div>
                <?php endif; ?>

                <?= Html::fileInput('DonationGoalForm[imageFile]', null, [
                    'id' => $fileFieldId,
                    'class' => 'form-control input-sm js-animal-donation-upload animal-donation-inline-input',
                    'data-preview' => '#' . $previewId,
                    'data-editor-bg' => '#' . $inlineFormId,
                    'accept' => 'image/*',
                ]) ?>
            </div>

            <div style="display:flex;gap:8px;align-items:center;">
                <?= Html::submitButton($existingGoalId > 0 ? Yii::t('DonationsModule.base', 'Update Goal') : Yii::t('DonationsModule.base', 'Save Goal'), ['class' => 'btn btn-primary btn-sm animal-donation-inline-btn']) ?>
                <label for="<?= Html::encode($toggleInputId) ?>" class="btn btn-default btn-sm animal-donation-inline-btn" style="margin:0;">
                    <?= Yii::t('DonationsModule.base', 'Cancel') ?>
                </label>
            </div>
            <?= Html::endForm() ?>
            </div>
        </div>
    <?php endif; ?>
</div>

<?php
$this->registerCss("#{$toggleInputId}:checked ~ #{$inlineFormId}{display:block !important;}\n"
    . ".animal-tile-gallery-grid{align-content:start;grid-auto-flow:row;grid-auto-rows:auto;}\n"
    . ".animal-tile-gallery-grid{scrollbar-width:none;-ms-overflow-style:none;}\n"
    . ".animal-tile-gallery-grid::-webkit-scrollbar{width:0;height:0;}\n"
    . ".animal-tile-gallery-item{display:block;line-height:0;border-radius:8px;overflow:visible;border:1px solid rgba(255,255,255,0.22);background:rgba(15,23,42,0.36);width:100%;margin:0;}\n"
    . ".animal-tile-gallery-image{width:100%;height:500px;object-fit:cover;display:block;}\n"
    . ".animal-tile-inline-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:transparent;border:0;color:rgba(248,250,252,0.9);font-size:20px;line-height:1;cursor:pointer;opacity:0.66;transition:opacity 120ms ease,background 120ms ease,color 120ms ease;}\n"
    . ".animal-tile-inline-icon-close{display:none;}\n"
    . ".animal-tile-inline-icon:hover{opacity:1;color:#fff;background:rgba(255,255,255,0.14);}\n"
    . ".animal-tile-gallery-cols-toggle{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:transparent;border:0;color:rgba(248,250,252,0.86);font-size:16px;font-weight:700;line-height:1;cursor:pointer;opacity:0.62;transition:opacity 120ms ease,background 120ms ease,color 120ms ease;}\n"
    . ".animal-tile-gallery-cols-toggle:hover{opacity:1;color:#fff;background:rgba(255,255,255,0.14);}\n"
    . ".animal-tile-goal-header-action{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,0.24);background:rgba(255,255,255,0.08);color:#f8fafc;cursor:pointer;font-size:14px;line-height:1;padding:0;margin:0;transition:background 120ms ease,border-color 120ms ease,opacity 120ms ease;}\n"
    . ".animal-tile-goal-header-action:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.42);}\n"
    . ".animal-tile-goal-upload-input{position:absolute !important;left:-10000px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important;}\n"
    . ".animal-tile-goal-upload-btn{display:block;width:120px;margin:6px auto 0 auto;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.24);background:rgba(255,255,255,0.08);color:#f8fafc;text-align:center;cursor:pointer;font-size:12px;font-weight:700;}\n"
    . ".animal-tile-goal-upload-btn:hover{background:rgba(255,255,255,0.18);}\n"
    . "#{$quickDonatePanelId}{width:auto !important;max-width:min(96vw,1600px) !important;overflow:visible !important;align-self:center !important;}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout{display:grid;grid-template-columns:minmax(260px,1fr) max-content;gap:10px;align-items:start;}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout.has-goal-settings{grid-template-columns:minmax(260px,1fr) max-content minmax(500px,1fr);}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout > form{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:max-content;border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px;background:rgba(15,23,42,0.14);box-sizing:border-box;}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout .animal-tile-quick-donate-history-col{min-width:260px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px;background:rgba(15,23,42,0.14);display:flex;flex-direction:column;min-height:0;overflow:hidden;max-height:min(58vh,540px);}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout .animal-tile-quick-donate-goal-col{min-width:500px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px;background:rgba(15,23,42,0.14);display:flex;flex-direction:column;justify-content:flex-start;min-height:0;overflow:hidden;max-height:min(58vh,540px);}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout > form input[name=\"amount\"]{width:100px !important;max-width:100px !important;min-width:100px !important;background:rgba(54,209,124,0.26) !important;border:1px solid rgba(54,209,124,0.62) !important;border-radius:999px !important;color:#f8fafc !important;box-shadow:none !important;font-size:24px !important;font-weight:700 !important;line-height:1.15 !important;text-align:center !important;padding:4px 10px !important;appearance:textfield !important;-moz-appearance:textfield !important;overflow:hidden !important;}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout > form input[name=\"amount\"]::-webkit-outer-spin-button,#{$quickDonatePanelId} .animal-tile-quick-donate-layout > form input[name=\"amount\"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}\n"
    . "#{$quickDonatePanelId} .animal-tile-quick-donate-layout > form input[name=\"amount\"]::placeholder{color:rgba(248,250,252,0.82) !important;}\n"
    . ".animal-tile-goal-title-target-row{width:100%;}\n"
    . ".animal-tile-goal-selected-image{width:90px;height:90px;display:flex;align-items:center;justify-content:center;padding:3px;border-radius:12px;background:linear-gradient(120deg,rgba(56,189,248,0.7),rgba(52,211,153,0.72),rgba(99,102,241,0.72),rgba(56,189,248,0.7));background-size:220% 220%;animation:animalTileGoalImageBorderFlow 4.6s linear infinite;box-shadow:0 6px 14px rgba(2,8,23,0.28);flex:0 0 auto;}\n"
    . ".animal-tile-goal-selected-image-thumb{width:100%;height:100%;object-fit:cover;border-radius:9px;border:1px solid rgba(248,250,252,0.72);display:block;}\n"
    . ".animal-tile-goal-selected-image-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;line-height:1.2;text-align:center;color:rgba(248,250,252,0.92);background:rgba(15,23,42,0.42);border-radius:9px;padding:4px;}\n"
    . ".animal-tile-goal-image-list{min-height:64px;}\n"
    . ".animal-tile-donation-history-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,0.22);border-radius:10px;padding:10px 12px;background:rgba(15,23,42,0.24);margin-bottom:8px;}\n"
    . ".animal-tile-donation-history-meta{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;}\n"
    . ".animal-tile-donation-history-avatar{width:42px;height:42px;border-radius:999px;object-fit:cover;border:1px solid rgba(255,255,255,0.36);flex:0 0 auto;}\n"
    . ".animal-tile-donation-history-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);color:#f8fafc;font-size:16px;}\n"
    . ".animal-tile-donation-history-identity{display:flex;flex-direction:column;gap:2px;min-width:0;}\n"
    . ".animal-tile-donation-history-name{font-size:18px;font-weight:700;line-height:1.2;color:#f8fafc;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}\n"
    . ".animal-tile-donation-history-name:hover{text-decoration:underline;color:#ffffff;}\n"
    . ".animal-tile-donation-history-when{font-size:12px;line-height:1.2;color:rgba(226,232,240,0.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n"
    . ".animal-tile-donation-history-amount{font-size:18px;font-weight:700;color:#f8fafc;white-space:nowrap;padding-left:8px;}\n"
    . "#{$inlinePanelWrapId} .animal-tile-goal-editor-fields .form-control,#{$quickDonatePanelId} .animal-tile-goal-editor-fields .form-control{font-size:18px !important;line-height:1.3 !important;}\n"
    . "#{$inlinePanelWrapId} .animal-tile-goal-editor-fields .input-group-addon,#{$quickDonatePanelId} .animal-tile-goal-editor-fields .input-group-addon{font-size:18px !important;font-weight:700;line-height:1.1;}\n"
    . "@keyframes animalTileGoalImageBorderFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}\n"
    . "#{$inlinePanelWrapId} .form-control{background:rgba(255,255,255,0.05) !important;border-color:rgba(255,255,255,0.14) !important;color:#f8fafc !important;}\n"
    . "#{$quickDonatePanelId} .form-control{background:rgba(255,255,255,0.05) !important;border-color:rgba(255,255,255,0.14) !important;color:#f8fafc !important;}\n"
    . "#{$inlinePanelWrapId} .form-control::placeholder{color:rgba(226,232,240,0.84) !important;}\n"
    . "#{$quickDonatePanelId} .form-control::placeholder{color:rgba(226,232,240,0.84) !important;}\n"
    . "#{$inlinePanelWrapId} .text-muted{color:rgba(226,232,240,0.86) !important;}\n"
    . "#{$quickDonatePanelId} .text-muted{color:rgba(226,232,240,0.86) !important;}\n"
    . "#{$inlinePanelWrapId} .animal-donation-gallery-radio{position:absolute;opacity:0;pointer-events:none;}\n"
    . "#{$quickDonatePanelId} .animal-donation-gallery-radio{position:absolute;opacity:0;pointer-events:none;}\n"
    . "#{$inlinePanelWrapId} .animal-donation-gallery-radio:checked + .animal-donation-inline-gallery-item{border-color:#f8fafc !important;box-shadow:0 0 0 2px rgba(248,250,252,0.36) !important;}\n"
    . "#{$quickDonatePanelId} .animal-donation-gallery-radio:checked + .animal-donation-inline-gallery-item{border-color:#f8fafc !important;box-shadow:0 0 0 2px rgba(248,250,252,0.36) !important;}\n"
    . "#{$inlinePanelWrapId} a{color:#f8fafc;}\n"
    . ".animal-tile-goal-editor-toggle{position:absolute;left:-10000px;opacity:0;pointer-events:none;}\n"
    . ".animal-tile-goal-editor-toggle:not(:checked) + .animal-tile-set-goal-btn + .animal-tile-goal-editor-fields{display:none !important;}\n"
    . ".animal-tile-goal-editor-toggle:checked + .animal-tile-set-goal-btn{display:none !important;}\n"
    . ".animal-tile-goal-editor-toggle:not(:checked) + .animal-tile-goal-editor-fields{display:none !important;}\n"
    . ".animal-tile-scroll-region{scrollbar-width:none;-ms-overflow-style:none;}\n"
    . ".animal-tile-scroll-region::-webkit-scrollbar{width:0;height:0;}\n"
    . "[data-inline-tile-panel=\"transfer\"]{scrollbar-width:none;-ms-overflow-style:none;}\n"
    . "[data-inline-tile-panel=\"transfer\"]::-webkit-scrollbar{width:0;height:0;}\n"
    . ".animal-tile-item-edit-toggle{position:absolute;left:-10000px;opacity:0;pointer-events:none;}\n"
    . ".animal-tile-item-editor{display:none;}\n"
    . ".animal-tile-item-edit-toggle:checked + .animal-tile-item-card{display:none !important;}\n"
    . ".animal-tile-item-edit-toggle:checked + .animal-tile-item-card + .animal-tile-item-editor{display:block !important;}\n"
    . ".animal-tile-feed-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:rgba(34,52,70,0.18);min-height:220px;box-shadow:0 8px 22px rgba(12,24,36,0.12);}\n"
    . ".animal-tile-feed-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}\n"
    . ".animal-tile-feed-overlay{position:absolute;inset:0;background:linear-gradient(110deg, rgba(10,18,28,0.08) 10%, rgba(10,18,28,0.24) 52%, rgba(10,18,28,0.42) 100%);}\n"
    . ".animal-tile-feed-content{position:relative;z-index:1;min-height:220px;padding:12px;display:flex;flex-direction:column;gap:10px;}\n"
    . ".animal-tile-feed-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}\n"
    . ".animal-tile-item-edit-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;border:1px solid rgba(255,255,255,0.24);background:rgba(255,255,255,0.12);color:#f8fafc;cursor:pointer;font-size:12px;line-height:1;margin:0;}\n"
    . ".animal-tile-item-edit-btn:hover{background:rgba(255,255,255,0.24);border-color:rgba(255,255,255,0.42);}\n"
    . ".animal-tile-section-title{font-size:20px;font-weight:700;line-height:1.15;color:#f8fafc;text-decoration:none;text-shadow:0 2px 8px rgba(0,0,0,0.35);}\n"
    . ".animal-tile-inline-add-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(30,164,95,0.62);background:linear-gradient(90deg,#36d17c,#1ea45f);color:#f8fafc;cursor:pointer;font-size:12px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(10,40,24,0.32);margin:0;text-decoration:none;}\n"
    . ".animal-tile-inline-add-action:hover{background:linear-gradient(90deg,#42db88,#22b366);border-color:rgba(54,209,124,0.88);color:#ffffff;}\n"
    . ".animal-tile-inline-iframe-close{position:absolute;top:9px;right:8px;z-index:12;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,0.36);background:rgba(15,23,42,0.72);color:#f8fafc;cursor:pointer;line-height:1;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,0.28);}\n"
    . ".animal-tile-inline-iframe-close:hover{background:rgba(30,41,59,0.86);border-color:rgba(255,255,255,0.5);}\n"
    . ".animal-tile-feed-date{font-size:16px;font-weight:700;color:#ffffff;}\n"
    . ".animal-tile-feed-details{border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(10,18,28,0.2);padding:10px;color:#ecf2f8;}\n"
    . ".animal-tile-feed-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:rgba(231,241,249,0.78);margin-bottom:3px;}\n"
    . ".animal-tile-feed-copy{color:#eff5fb;margin-bottom:8px;font-size:12px;line-height:1.35;}\n"
    . ".animal-tile-transfer-event{border:1px solid #d5dfe8;border-radius:10px;padding:8px;background:linear-gradient(180deg,#2a3e53 0%,#233447 100%);box-shadow:0 6px 16px rgba(15,23,42,0.18);}\n");
$css =
    ".animal-profile-transfer-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }\n"
    . ".animal-profile-transfer-badge-requested { background: #ffe600; color: #111; }\n"
    . ".animal-profile-transfer-badge-accepted { background: #dcfce7; color: #166534; }\n"
    . ".animal-profile-transfer-badge-declined { background: #fee2e2; color: #991b1b; }\n"
    . ".animal-profile-transfer-badge-completed { background: #dbeafe; color: #1d4ed8; }\n"
    . ".animal-profile-transfer-badge-cancelled { background: #e5e7eb; color: #374151; }\n"
    . ".animal-profile-transfer-badge-default { background: rgba(255, 255, 255, 0.2); color: #f8fafc; }\n"
    . ".animal-tile-transfer-badge-accepted{background:#dcfce7;color:#166534;}\n"
    . ".animal-tile-transfer-badge-declined{background:#fee2e2;color:#991b1b;}\n"
    . ".animal-tile-transfer-badge-completed{background:#dbeafe;color:#1d4ed8;}\n"
    . ".animal-tile-transfer-badge-cancelled{background:#e5e7eb;color:#374151;}\n"
    . ".animal-tile-transfer-badge-default{background:rgba(255,255,255,0.2);color:#f8fafc;}\n"
    . ".animal-profile-transfer-event-head { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 6px; }\n"
    . ".animal-profile-transfer-route-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 10px; }\n"
    . ".animal-profile-transfer-rescue-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: 5px; }\n"
    . ".animal-profile-transfer-rescue-avatar { width: 54px; height: 54px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 3px 10px rgba(2, 8, 23, 0.28); display: block; background: rgba(255, 255, 255, 0.12); }\n"
    . ".animal-profile-transfer-rescue-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: #f8fafc; font-size: 20px; }\n"
    . ".animal-profile-transfer-rescue-name { color: #f8fafc; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }\n"
    . ".animal-profile-transfer-rescue-name:hover { text-decoration: underline; color: #ffffff; }\n"
    . ".animal-profile-transfer-rescue-date { color: rgba(226, 232, 240, 0.92); font-size: 12px; line-height: 1.2; }\n"
    . ".animal-profile-transfer-route-arrow { align-self: center; justify-self: center; font-size: 20px; color: rgba(248, 250, 252, 0.9); line-height: 1; padding-top: 8px; }\n"
    . ".animal-profile-transfer-event-lines { display: flex; flex-direction: column; gap: 4px; }\n"
    . ".animal-profile-transfer-event-line { font-size: 14px; line-height: 1.35; color: #f8fafc; display: flex; align-items: center; justify-content: space-between; gap: 10px; backdrop-filter: brightness(0.7); padding: 8px 12px; border-radius: 10px; }\n"
    . ".animal-profile-transfer-event-actor { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }\n"
    . ".animal-profile-transfer-event-avatar { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.36); flex: 0 0 auto; display: block; background: rgba(255, 255, 255, 0.1); }\n"
    . ".animal-profile-transfer-event-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: #f8fafc; font-size: 14px; }\n"
    . ".animal-profile-transfer-event-identity { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n"
    . ".animal-profile-transfer-event-actor-name { color: #f8fafc; font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n"
    . ".animal-profile-transfer-event-actor-name:hover { text-decoration: underline; color: #ffffff; }\n"
    . ".animal-profile-transfer-event-line-time { opacity: 0.9; font-weight: 500; font-size: 11px; line-height: 1.2; }\n"
    . ".animal-profile-transfer-event-action { margin-left: auto; text-align: right; font-size: 13px; font-weight: 700; color: #e2e8f0; white-space: nowrap; flex: 0 0 auto; }\n"
    . ".animal-profile-transfer-time { font-size: 16px; font-weight: 700; color: #f8fafc; }\n"
    . ".animal-profile-transfer-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }\n"
    . ".animal-profile-transfer-badge-requested { background: #ffe600; color: #111; }\n"
    . ".animal-profile-transfer-badge-accepted { background: #dcfce7; color: #166534; }\n"
    . ".animal-profile-transfer-badge-declined { background: #fee2e2; color: #991b1b; }\n"
    . ".animal-profile-transfer-badge-completed { background: #dbeafe; color: #1d4ed8; }\n"
    . ".animal-profile-transfer-badge-cancelled { background: #e5e7eb; color: #374151; }\n"
    . ".animal-profile-transfer-badge-default { background: rgba(255, 255, 255, 0.2); color: #f8fafc; }\n"
    . ".animal-tile-transfer-badge-accepted{background:#dcfce7;color:#166534;}\n"
    . ".animal-tile-transfer-badge-declined{background:#fee2e2;color:#991b1b;}\n"
    . ".animal-tile-transfer-badge-completed{background:#dbeafe;color:#1d4ed8;}\n"
    . ".animal-tile-transfer-badge-cancelled{background:#e5e7eb;color:#374151;}\n"
    . ".animal-tile-transfer-badge-default{background:rgba(255,255,255,0.2);color:#f8fafc;}\n"
    . ".animal-tile-transfer-badge-requested{background:#ffe600;color:#111;}\n";
$this->registerCss($css);
$this->registerCss("#{$inlineFormId} .animal-donation-inline-input{background:rgba(255,255,255,0.34);border-color:rgba(165,178,195,0.72);color:#16202a;}\n"
    . "#{$inlineFormId} .animal-donation-inline-input::placeholder{color:rgba(31,41,55,0.72);}\n"
    . "#{$inlineFormId} .animal-donation-inline-gallery{background:rgba(255,255,255,0.16);padding:6px;border-radius:6px;pointer-events:auto;}\n"
    . "#{$inlineFormId} .animal-donation-gallery-radio{position:absolute;opacity:0;pointer-events:none;}\n"
    . "#{$inlineFormId} .animal-donation-gallery-radio:checked + .animal-donation-inline-gallery-item{border-color:#1f78c1 !important;box-shadow:0 0 0 2px rgba(31,120,193,0.32) !important;}\n"
    . "#{$inlineFormId} .animal-donation-inline-btn{opacity:0.82;}");

$uploadPendingText = Json::htmlEncode(Yii::t('DonationsModule.base', 'Image will be uploaded with this goal.'));
$noImageText = Json::htmlEncode(Yii::t('DonationsModule.base', 'No image selected.'));
$inlineJsNamespace = 'animalDonationInlineToggle' . (int)$animal->id;

$this->registerJs(<<<JS
(function() {
    function syncInlineEditor(toggleSelector, formSelector) {
        var toggle = $(toggleSelector);
        var form = $(formSelector);
        if (!toggle.length || !form.length) {
            return;
        }

        form.css('display', toggle.is(':checked') ? 'block' : 'none');
    }

    function setEditorBackground(editorSelector, imageUrl) {
        if (!editorSelector) {
            return;
        }

        var editor = $(editorSelector);
        if (!editor.length) {
            return;
        }

        if (imageUrl) {
            editor.css('background-image', 'linear-gradient(rgba(255,255,255,0.35),rgba(255,255,255,0.45)),url(' + imageUrl + ')');
            editor.css('background-size', 'cover');
            editor.css('background-position', 'center');
        } else {
            editor.css('background-image', 'none');
            editor.css('background-color', '#fff');
        }
    }

    function setPreview(previewSelector, imageUrl) {
        var preview = $(previewSelector);
        if (!preview.length) {
            return;
        }

        if (!imageUrl) {
            preview.html('<span class="animal-tile-goal-selected-image-empty">' + $('<div/>').text($noImageText).html() + '</span>');
            return;
        }

        preview.html('<img class="animal-tile-goal-selected-image-thumb" src="' + $('<div/>').text(imageUrl).html() + '" alt="">');
    }

    var inlineToggleSelector = '#$toggleInputId';
    var inlineFormSelector = '#$inlineFormId';

    syncInlineEditor(inlineToggleSelector, inlineFormSelector);

    $(document).off('change.$inlineJsNamespace').on('change.$inlineJsNamespace', inlineToggleSelector, function() {
        syncInlineEditor(inlineToggleSelector, inlineFormSelector);
    });

    $(document).off('change.animalDonationGallery').on('change.animalDonationGallery', '.animal-donation-gallery-radio', function() {
        var radio = $(this);
        if (!radio.is(':checked')) {
            return;
        }

        var previewSelector = radio.data('preview');
        var editorSelector = radio.data('editor-bg');
        var url = radio.val() || '';

        setPreview(previewSelector, url);
        setEditorBackground(editorSelector, url);
    });

    $(document).off('change.animalDonationUpload').on('change.animalDonationUpload', '.js-animal-donation-upload', function() {
        var previewSelector = $(this).data('preview');
        var editorSelector = $(this).data('editor-bg');
        if (!previewSelector) {
            return;
        }

        var form = $(this).closest('form');
        form.find('.animal-donation-gallery-radio').prop('checked', false);

        var previousObjectUrl = $(this).data('object-url') || '';
        if (previousObjectUrl && window.URL && window.URL.revokeObjectURL) {
            window.URL.revokeObjectURL(previousObjectUrl);
        }

        if (this.files && this.files.length > 0) {
            var objectUrl = '';
            if (window.URL && window.URL.createObjectURL) {
                objectUrl = window.URL.createObjectURL(this.files[0]);
                $(this).data('object-url', objectUrl);
            }

            if (objectUrl) {
                setPreview(previewSelector, objectUrl);
                setEditorBackground(editorSelector, objectUrl);
            } else {
                $(previewSelector).text($uploadPendingText);
            }
        } else {
            $(this).data('object-url', '');
            var selectedRadio = form.find('.animal-donation-gallery-radio:checked').first();
            var fallbackUrl = selectedRadio.length ? (selectedRadio.val() || '') : '';
            setPreview(previewSelector, fallbackUrl);
            setEditorBackground(editorSelector, fallbackUrl);
        }
    });
})();
JS, \yii\web\View::POS_READY, 'animal-donation-inline-' . (int)$animal->id);

if ($tileLayoutMode === 'tablet') {
    $tabletBehaviorJs = <<<'JS'
(function() {
    var animalId = ANIMAL_ID_TOKEN;
    var inlinePanelNoneSelector = '#INLINE_PANEL_NONE_ID_TOKEN';
    var formModeNoneSelector = '#FORM_MODE_NONE_ID_TOKEN';
    var inlineMenuSelector = '#INLINE_MENU_ID_TOKEN';
    var inlinePanelWrapSelector = '#INLINE_PANEL_WRAP_ID_TOKEN';

    function triggerChange(element) {
        if (!element) {
            return;
        }

        var event;
        if (typeof Event === 'function') {
            event = new Event('change', { bubbles: true });
        } else {
            event = document.createEvent('Event');
            event.initEvent('change', true, true);
        }
        element.dispatchEvent(event);
    }

    function setChecked(selector, value) {
        var element = document.querySelector(selector);
        if (!element) {
            return false;
        }

        element.checked = !!value;
        triggerChange(element);
        return true;
    }

    function setCheckedById(id, value) {
        var element = document.getElementById(id);
        if (!element) {
            return false;
        }

        element.checked = !!value;
        triggerChange(element);
        return true;
    }

    function closeInlineEditorByFrameControl(collapseId) {
        var frameNodeList = document.querySelectorAll(inlinePanelWrapSelector + ' iframe[data-animal-inline-collapse-id]');
        if (!frameNodeList || frameNodeList.length === 0) {
            return false;
        }

        var matchedFrame = null;
        Array.prototype.some.call(frameNodeList, function(frameElement) {
            var frameCollapseId = String(frameElement.getAttribute('data-animal-inline-collapse-id') || '');
            if (frameCollapseId !== collapseId) {
                return false;
            }
            matchedFrame = frameElement;
            return true;
        });

        if (!matchedFrame || !matchedFrame.parentElement) {
            return false;
        }

        var closeControl = matchedFrame.parentElement.querySelector('.animal-tile-inline-iframe-close[for]');
        if (!closeControl) {
            return false;
        }

        var targetId = String(closeControl.getAttribute('for') || '');
        if (!targetId) {
            return false;
        }

        var targetElement = document.getElementById(targetId);
        if (!targetElement) {
            return false;
        }

        if ((targetElement.type || '').toLowerCase() === 'radio') {
            targetElement.checked = true;
        } else {
            targetElement.checked = false;
        }
        triggerChange(targetElement);
        return true;
    }

    document.addEventListener('click', function(e) {
        var target = e.target;
        if (!target || !target.closest) {
            return;
        }

        var trigger = target.closest(inlineMenuSelector + ' .animal-tile-inline-icon[data-panel-id]');
        if (!trigger) {
            return;
        }

        var panelId = String(trigger.getAttribute('data-panel-id') || '');
        if (!panelId) {
            return;
        }

        var panelInput = document.getElementById(panelId);
        if (!panelInput) {
            return;
        }

        if (panelInput.checked) {
            setChecked(inlinePanelNoneSelector, true);
            e.preventDefault();
            if (typeof e.stopImmediatePropagation === 'function') {
                e.stopImmediatePropagation();
            }
            e.stopPropagation();
            return;
        }

        // Rebind iframe watchers after panel changes and lazy iframe loads.
        window.setTimeout(bindInlineResultFrameWatchers, 0);
        window.setTimeout(bindInlineResultFrameWatchers, 250);
    }, false);

    function closeInlineEditorByPayload(collapseId) {
        collapseId = String(collapseId || '');
        if (!collapseId) {
            return;
        }

        if (collapseId === 'medical-add-inline' || collapseId === 'progress-add-inline') {
            setChecked(formModeNoneSelector, true);
            return;
        }

        if (collapseId === 'gallery-add-inline') {
            if (!setCheckedById('GALLERY_ADD_TOGGLE_ID_TOKEN', false)) {
                closeInlineEditorByFrameControl(collapseId);
            }
            return;
        }

        if (collapseId === 'transfer-add-inline') {
            if (!setCheckedById('TRANSFER_ADD_TOGGLE_ID_TOKEN', false)) {
                closeInlineEditorByFrameControl(collapseId);
            }
            return;
        }

        var medicalPrefix = 'medical-edit-inline-';
        if (collapseId.indexOf(medicalPrefix) === 0) {
            var medicalVisitId = collapseId.substring(medicalPrefix.length);
            if (!setCheckedById('animal-tile-medical-edit-toggle-' + animalId + '-' + medicalVisitId, false)) {
                closeInlineEditorByFrameControl(collapseId);
            }
            return;
        }

        var progressPrefix = 'progress-edit-inline-';
        if (collapseId.indexOf(progressPrefix) === 0) {
            var progressUpdateId = collapseId.substring(progressPrefix.length);
            if (!setCheckedById('animal-tile-progress-edit-toggle-' + animalId + '-' + progressUpdateId, false)) {
                closeInlineEditorByFrameControl(collapseId);
            }
            return;
        }

        closeInlineEditorByFrameControl(collapseId);
    }

    function handleInlineResultFrame(frameElement) {
        if (!frameElement) {
            return;
        }

        var collapseId = String(frameElement.getAttribute('data-animal-inline-collapse-id') || '');
        if (!collapseId) {
            return;
        }

        var frameDocument = null;
        try {
            frameDocument = frameElement.contentDocument || (frameElement.contentWindow ? frameElement.contentWindow.document : null);
        } catch (err) {
            return;
        }

        if (!frameDocument || !frameDocument.body) {
            return;
        }

        var hasSavedMarker = !!frameDocument.querySelector('[data-animal-inline-result="saved"]');
        if (!hasSavedMarker) {
            return;
        }

        closeInlineEditorByPayload(collapseId);
    }

    function bindInlineResultFrameWatchers() {
        var frameNodeList = document.querySelectorAll(inlinePanelWrapSelector + ' iframe[data-animal-inline-collapse-id]');
        if (!frameNodeList || frameNodeList.length === 0) {
            return;
        }

        Array.prototype.forEach.call(frameNodeList, function(frameElement) {
            if (!frameElement || frameElement.getAttribute('data-animal-inline-watch-bound') === '1') {
                return;
            }

            frameElement.setAttribute('data-animal-inline-watch-bound', '1');
            frameElement.addEventListener('load', function() {
                handleInlineResultFrame(frameElement);
            });

            handleInlineResultFrame(frameElement);
        });
    }

    bindInlineResultFrameWatchers();

    window.addEventListener('message', function(event) {
        var data = event && event.data ? event.data : null;
        if (typeof data === 'string') {
            try {
                data = JSON.parse(data);
            } catch (err) {
                return;
            }
        }

        if (!data || typeof data !== 'object' || data.source !== 'animal-inline-editor') {
            return;
        }

        var collapseId = String(data.collapseId || '');
        if (data.type === 'cancel' || data.type === 'saved') {
            closeInlineEditorByPayload(collapseId);
        }
    });
})();
JS;

    $tabletBehaviorJs = str_replace('ANIMAL_ID_TOKEN', (string)(int)$animal->id, $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('INLINE_PANEL_NONE_ID_TOKEN', Html::encode($inlinePanelNoneId), $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('FORM_MODE_NONE_ID_TOKEN', Html::encode($formModeNoneId), $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('INLINE_MENU_ID_TOKEN', Html::encode($inlineMenuId), $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('INLINE_PANEL_WRAP_ID_TOKEN', Html::encode($inlinePanelWrapId), $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('GALLERY_ADD_TOGGLE_ID_TOKEN', Html::encode($galleryAddToggleId), $tabletBehaviorJs);
    $tabletBehaviorJs = str_replace('TRANSFER_ADD_TOGGLE_ID_TOKEN', Html::encode($transferAddToggleId), $tabletBehaviorJs);
    $this->registerJs($tabletBehaviorJs, \yii\web\View::POS_READY, 'animal-tablet-inline-behavior-' . (int)$animal->id);

    $inlineTileCss = '#'. Html::encode($inlinePanelNoneId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . '{display:none !important;}';
    $inlineTileCss .= '#'. Html::encode($galleryCols2Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' .animal-tile-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;column-gap:8px !important;row-gap:12px !important;}';
    $inlineTileCss .= '#'. Html::encode($galleryCols3Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' .animal-tile-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;column-gap:8px !important;row-gap:10px !important;}';
    $inlineTileCss .= '#'. Html::encode($galleryCols2Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' label[for="' . Html::encode($galleryCols2Id) . '"]{opacity:1;background:rgba(255,255,255,0.2);color:#fff;}';
    $inlineTileCss .= '#'. Html::encode($galleryCols3Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' label[for="' . Html::encode($galleryCols3Id) . '"]{opacity:1;background:rgba(255,255,255,0.2);color:#fff;}';
    $inlineTileCss .= '#'. Html::encode($galleryCols2Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' label[for="' . Html::encode($galleryCols3Id) . '"],#'. Html::encode($galleryCols3Id) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' label[for="' . Html::encode($galleryCols2Id) . '"]{opacity:0.55;background:transparent;color:rgba(248,250,252,0.86);}';
    $inlineTileCss .= '#'. Html::encode($inlinePanelWrapId) . ' iframe[data-animal-inline-files]{height:250px;}';
    $inlineTileCss .= '#' . Html::encode($overlayStackId) . '{padding-bottom:58px;box-sizing:border-box;}';
    $inlineTileCss .= '#' . Html::encode($inlineMenuId) . '{position:absolute;left:0;right:0;bottom:0;z-index:6;margin-top:0 !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeMedicalId) . ':checked ~ div #' . Html::encode($medicalFormWrapId) . '{display:block !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeProgressId) . ':checked ~ div #' . Html::encode($progressFormWrapId) . '{display:block !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeMedicalId) . ':checked ~ div #' . Html::encode($goalCardId) . ',#' . Html::encode($formModeProgressId) . ':checked ~ div #' . Html::encode($goalCardId) . '{display:none !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeMedicalId) . ':checked ~ div #' . Html::encode($donorPanelId) . ',#' . Html::encode($formModeProgressId) . ':checked ~ div #' . Html::encode($donorPanelId) . '{display:none !important;opacity:0 !important;pointer-events:none !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeMedicalId) . ':checked ~ div #' . Html::encode($quickDonatePanelId) . ',#' . Html::encode($formModeProgressId) . ':checked ~ div #' . Html::encode($quickDonatePanelId) . '{display:none !important;opacity:0 !important;pointer-events:none !important;}';
    $inlineTileCss .= '#' . Html::encode($formModeMedicalId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ',#' . Html::encode($formModeProgressId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . '{max-height:calc(100% - 56px) !important;overflow:auto !important;}';
    $inlineTileCss .= '#' . Html::encode($galleryAddToggleId) . ':checked ~ div #' . Html::encode($galleryFormWrapId) . '{display:flex !important;flex-direction:column !important;flex:1 1 auto !important;min-height:0 !important;height:100% !important;}';
    $inlineTileCss .= '#' . Html::encode($galleryAddToggleId) . ':checked ~ div #' . Html::encode($galleryFormWrapId) . ' iframe[data-animal-inline-collapse-id="gallery-add-inline"]{flex:1 1 auto !important;min-height:0 !important;height:100% !important;}';
    $inlineTileCss .= '#' . Html::encode($galleryAddToggleId) . ':checked ~ div #' . Html::encode($galleryListWrapId) . '{display:none !important;}';
    $inlineTileCss .= '#' . Html::encode($inlinePanelWrapId) . ' #' . Html::encode($galleryListWrapId) . '{display:block;flex:1 1 auto;min-height:0;overflow:hidden;}';
    $inlineTileCss .= '#' . Html::encode($inlinePanelWrapId) . ' #' . Html::encode($galleryListWrapId) . ' .animal-tile-gallery-grid{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;}';
    $inlineTileCss .= '#' . Html::encode($transferAddToggleId) . ':checked ~ div #' . Html::encode($transferFormWrapId) . '{display:block !important;}';
    $inlineTileCss .= '#' . Html::encode($transferAddToggleId) . ':checked ~ div #' . Html::encode($transferHistoryWrapId) . '{display:none !important;}';

    foreach ($inlinePanelIds as $panelKey => $panelId) {
        $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($overlayStackId) . '{top:12px !important;bottom:12px !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;}';
        $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . '{display:block !important;width:100%;max-width:100%;flex:1 1 auto;min-height:0;overflow:hidden;}';
        if ($panelKey === 'files') {
            $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . '{overflow:auto;}';
        }
        if ($panelKey === 'gallery') {
            $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' [data-inline-tile-panel="gallery"]{display:grid !important;grid-template-rows:auto minmax(0,1fr) !important;width:100% !important;height:100% !important;min-height:0 !important;overflow:hidden !important;}';
            $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' #' . Html::encode($galleryListWrapId) . '{height:100% !important;min-height:0 !important;overflow:hidden !important;}';
            $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' #' . Html::encode($galleryListWrapId) . ' .animal-tile-gallery-grid{height:100% !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;}';
        } else {
            $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlinePanelWrapId) . ' [data-inline-tile-panel="' . Html::encode($panelKey) . '"]{display:block !important;width:100%;min-width:0;height:100%;overflow:auto;}';
        }
        $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlineMenuId) . ' label[for="' . Html::encode($panelId) . '"]{opacity:1;background:rgba(255,255,255,0.2);color:#fff;}';
        $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlineMenuId) . ' .animal-tile-inline-icon-open[data-panel-id="' . Html::encode($panelId) . '"]{display:none !important;}';
        $inlineTileCss .= '#' . Html::encode($panelId) . ':checked ~ div #' . Html::encode($inlineMenuId) . ' .animal-tile-inline-icon-close[data-panel-id-close="' . Html::encode($panelId) . '"]{display:inline-flex !important;opacity:1;background:rgba(255,255,255,0.2);color:#fff;}';
    }

    $this->registerCss($inlineTileCss);
}
?>