@php($embedded = $embedded ?? true)
@php($detailTabs = collect([
    ['key' => 'health', 'label' => __('messages.health'), 'can' => auth()->user()?->can('view health')],
    ['key' => 'breeding', 'label' => __('messages.breeding'), 'can' => auth()->user()?->can('view breeding')],
    ['key' => 'production', 'label' => __('messages.production'), 'can' => auth()->user()?->can('view breeding')],
    ['key' => 'feeding', 'label' => __('messages.feeding'), 'can' => auth()->user()?->can('view feeding')],
    ['key' => 'finance', 'label' => __('messages.finance'), 'can' => auth()->user()?->can('view finance')],
])->filter(fn ($tab) => $tab['can'])->values())
@php($firstVisibleDetailTab = $detailTabs->first()['key'] ?? null)

@if(!$embedded)
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="bi bi-info-circle me-2 text-primary"></i>{{ $cattle->tag_number }}</h1>
        <p class="page-subtitle">{{ $cattle->name ?? '—' }} • {{ $cattle->breed->name ?? '—' }}</p>
    </div>
    @can('edit cattle')
    <div class="d-flex gap-2">
        <a href="{{ route('cattle.edit', $cattle) }}" class="btn btn-warning"><i class="bi bi-pencil me-1"></i>{{ __('messages.edit') }}</a>
        @can('delete cattle')
        <button class="btn btn-danger" onclick="if(confirm('{{ __('messages.delete_question') }}')) document.getElementById('del').submit()">
            <i class="bi bi-trash me-1"></i>{{ __('messages.delete') }}
        </button>
        <form id="del" action="{{ route('cattle.destroy', $cattle) }}" method="POST" class="d-none">
            @csrf @method('DELETE')
        </form>
        @endcan
    </div>
    @endcan
</div>
@endif

<div class="p-3 p-md-4">
    <div class="row g-3">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body text-center">
                    @if($cattle->photo)
                        <img src="{{ $cattle->photo_url }}" alt="{{ $cattle->tag_number }}" class="img-fluid mb-3" style="max-height: 300px;">
                    @else
                        <i class="bi bi-image fs-1 text-muted"></i>
                    @endif
                    <h5>{{ $cattle->tag_number }}</h5>
                    <p class="text-muted mb-0">{{ $cattle->name ?? __('messages.no_name') }}</p>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('messages.ownership_lineage') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="text-muted small">{{ __('messages.owner') }}</label>
                            <p>{{ $cattle->owner->name ?? '—' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small">{{ __('messages.acquisition_date') }}</label>
                            <p>{{ $cattle->acquisition_date?->format('M d, Y') ?? '—' }}</p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small">{{ __('messages.sire') }}</label>
                            <p>
                                @if($cattle->sire)
                                    <a href="{{ route('cattle.show', $cattle->sire) }}" class="text-decoration-none">
                                        {{ $cattle->sire->tag_number }} - {{ $cattle->sire->name }}
                                    </a>
                                @else
                                    —
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <label class="text-muted small">{{ __('messages.dam') }}</label>
                            <p>
                                @if($cattle->dam)
                                    <a href="{{ route('cattle.show', $cattle->dam) }}" class="text-decoration-none">
                                        {{ $cattle->dam->tag_number }} - {{ $cattle->dam->name }}
                                    </a>
                                @else
                                    —
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('messages.basic_information') }}</h6>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-6">{{ __('messages.status') }}</dt>
                        <dd class="col-6 text-end">
                            <span class="badge bg-{{ $cattle->status_badge }} bg-opacity-25">{{ __('messages.' . $cattle->status) }}</span>
                        </dd>
                        <dt class="col-6">{{ __('messages.breed') }}</dt>
                        <dd class="col-6 text-end">{{ $cattle->breed->name ?? '—' }}</dd>
                        <dt class="col-6">{{ __('messages.gender') }}</dt>
                        <dd class="col-6 text-end">
                            <i class="bi bi-gender-{{ $cattle->gender === 'female' ? 'female' : 'male' }} me-1"></i>
                            {{ __('messages.' . $cattle->gender) }}
                        </dd>
                        <dt class="col-6">{{ __('messages.purpose') }}</dt>
                        <dd class="col-6 text-end">{{ __('messages.' . $cattle->purpose) }}</dd>
                        <dt class="col-6">{{ __('messages.age') }}</dt>
                        <dd class="col-6 text-end">{{ $cattle->age }}</dd>
                        <dt class="col-6">{{ __('messages.weight') }}</dt>
                        <dd class="col-6 text-end">{{ $cattle->weight_kg ? number_format($cattle->weight_kg, 0) . ' kg' : '—' }}</dd>
                        <dt class="col-6">{{ __('messages.color') }}</dt>
                        <dd class="col-6 text-end">{{ $cattle->color ?? '—' }}</dd>
                        <dt class="col-6">{{ __('messages.date_of_birth') }}</dt>
                        <dd class="col-6 text-end">{{ $cattle->date_of_birth?->format('M d, Y') ?? '—' }}</dd>
                    </dl>
                </div>
            </div>

            @if($firstVisibleDetailTab)
            <ul class="nav nav-tabs cattle-detail-tabs" role="tablist">
                @foreach($detailTabs as $tab)
                <li class="nav-item">
                    <a class="nav-link {{ $firstVisibleDetailTab === $tab['key'] ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $tab['key'] }}">{{ $tab['label'] }}</a>
                </li>
                @endforeach
            </ul>

            <div class="tab-content card card-header-none cattle-detail-tab-card">
                @if($detailTabs->contains('key', 'health'))
                <div id="health" class="tab-pane fade {{ $firstVisibleDetailTab === 'health' ? 'show active' : '' }}">
                    <div class="card-body">
                        <h6 class="mb-3">{{ __('messages.health_records') }} ({{ $cattle->healthRecords->count() }})</h6>
                        @forelse($cattle->healthRecords as $record)
                            <div class="mb-2 pb-2 border-bottom">
                                <small class="text-muted">{{ $record->record_date?->format('M d, Y') ?? '—' }}</small>
                                <p class="mb-0">{{ $record->diagnosis ?? $record->notes ?? '—' }}</p>
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_health_records') }}</p>
                        @endforelse

                        <h6 class="mb-3 mt-4">{{ __('messages.vaccinations') }} ({{ $cattle->vaccinations->count() }})</h6>
                        @forelse($cattle->vaccinations as $vaccine)
                            <div class="mb-2 pb-2 border-bottom">
                                <small class="text-muted">{{ $vaccine->administered_date?->format('M d, Y') ?? '—' }}</small>
                                <p class="mb-0"><strong>{{ $vaccine->vaccine_name }}</strong> - {{ $vaccine->notes ?? '—' }}</p>
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_vaccination_records') }}</p>
                        @endforelse
                    </div>
                </div>
                @endif

                @if($detailTabs->contains('key', 'breeding'))
                <div id="breeding" class="tab-pane fade {{ $firstVisibleDetailTab === 'breeding' ? 'show active' : '' }}">
                    <div class="card-body">
                        <h6 class="mb-3">{{ __('messages.offspring') }} ({{ $cattle->breedingAsDam->count() }})</h6>
                        @forelse($cattle->breedingAsDam as $breeding)
                            <div class="mb-2 pb-2 border-bottom">
                                <p class="mb-0">
                                    <strong>{{ __('messages.sire') }}:</strong>
                                    @if($breeding->sire)
                                        <a href="{{ route('cattle.show', $breeding->sire) }}">{{ $breeding->sire->tag_number }}</a>
                                    @else
                                        —
                                    @endif
                                </p>
                                <p class="mb-0"><small class="text-muted">{{ $breeding->breeding_date?->format('M d, Y') ?? '—' }}</small></p>
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_breeding_records') }}</p>
                        @endforelse
                    </div>
                </div>
                @endif

                @if($detailTabs->contains('key', 'production'))
                <div id="production" class="tab-pane fade {{ $firstVisibleDetailTab === 'production' ? 'show active' : '' }}">
                    <div class="card-body">
                        <h6 class="mb-3">{{ __('messages.milk_production') }} ({{ $cattle->milkProductions->count() }})</h6>
                        @forelse($cattle->milkProductions as $milk)
                            <div class="mb-2 pb-2 border-bottom">
                                <div class="d-flex justify-content-between">
                                    <span>{{ $milk->record_date?->format('M d, Y') ?? '—' }}</span>
                                    <strong>{{ number_format($milk->quantity_liters, 2) }} L</strong>
                                </div>
                                <small class="text-muted">{{ $milk->notes ?? '—' }}</small>
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_data') }}</p>
                        @endforelse
                    </div>
                </div>
                @endif

                @if($detailTabs->contains('key', 'feeding'))
                <div id="feeding" class="tab-pane fade {{ $firstVisibleDetailTab === 'feeding' ? 'show active' : '' }}">
                    <div class="card-body">
                        <h6 class="mb-3">{{ __('messages.feeding_schedule') }} ({{ $cattle->feedSchedules->count() }})</h6>
                        @forelse($cattle->feedSchedules as $schedule)
                            <div class="mb-2 pb-2 border-bottom">
                                <p class="mb-0">
                                    <strong>{{ $schedule->feed->name ?? '—' }}</strong>
                                    ({{ number_format($schedule->quantity ?? 0, 2) }} kg {{ $schedule->session ?? '—' }})
                                </p>
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_feeding_schedules') }}</p>
                        @endforelse
                    </div>
                </div>
                @endif

                @if($detailTabs->contains('key', 'finance'))
                <div id="finance" class="tab-pane fade {{ $firstVisibleDetailTab === 'finance' ? 'show active' : '' }}">
                    <div class="card-body">
                        <h6 class="mb-3">{{ __('messages.expenses') }} ({{ $cattle->expenses->count() }})</h6>
                        @forelse($cattle->expenses->groupBy('category_id') as $expenses)
                            <div class="mb-2 pb-2 border-bottom">
                                @foreach($expenses as $exp)
                                    <div class="d-flex justify-content-between">
                                        <span>{{ $exp->category->name ?? __('messages.other') }} - {{ $exp->expense_date?->format('M d, Y') ?? '—' }}</span>
                                        <strong>{{ number_format($exp->amount, 2) }}</strong>
                                    </div>
                                @endforeach
                            </div>
                        @empty
                            <p class="text-muted">{{ __('messages.no_expenses') }}</p>
                        @endforelse
                    </div>
                </div>
                @endif
            </div>
            @endif
        </div>
    </div>

    @if($cattle->notes)
    <div class="card mt-3">
        <div class="card-header">
            <h6 class="mb-0">{{ __('messages.notes') }}</h6>
        </div>
        <div class="card-body">
            {{ $cattle->notes }}
        </div>
    </div>
    @endif

    <div class="mt-3 text-start">
        <small class="text-muted d-block">
            {{ __('messages.created_by_on', ['user' => $cattle->createdBy->name ?? __('messages.system'), 'date' => $cattle->created_at->format('M d, Y H:i')]) }}
            @if($cattle->updated_at != $cattle->created_at)
                | {{ __('messages.last_updated_at', ['time' => $cattle->updated_at->diffForHumans()]) }}
            @endif
        </small>
    </div>
</div>