@extends('layouts.app', ['title' => 'View animal', 'showNav' => true])

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0"><i class="bi bi-eye me-2"></i>{{ $animal->tag_no }}</h1>
        <div class="d-flex gap-2">
            <a href="{{ route('animals.edit', $animal) }}" class="btn btn-outline-warning btn-sm">Edit</a>
            <a href="{{ route('animals.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white fw-semibold">Details</div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-4 text-muted">Tag no</dt>
                        <dd class="col-sm-8">{{ $animal->tag_no }}</dd>
                        <dt class="col-sm-4 text-muted">Category</dt>
                        <dd class="col-sm-8"><span class="badge bg-{{ \App\Support\AnimalCategory::color($animal->category) }}">{{ \App\Support\AnimalCategory::label($animal->category) }}</span></dd>
                        <dt class="col-sm-4 text-muted">Gender</dt>
                        <dd class="col-sm-8">{{ ucfirst($animal->gender) }}</dd>
                        <dt class="col-sm-4 text-muted">Purchase date</dt>
                        <dd class="col-sm-8">{{ $animal->purchase_date->format('d M Y') }}</dd>
                        <dt class="col-sm-4 text-muted">Purchase from</dt>
                        <dd class="col-sm-8">{{ $animal->purchase_from }}</dd>
                        <dt class="col-sm-4 text-muted">Purchase price</dt>
                        <dd class="col-sm-8">{{ number_format($animal->purchase_price, 2) }}</dd>
                        <dt class="col-sm-4 text-muted">Born in farm</dt>
                        <dd class="col-sm-8">{!! $animal->born_in_farm ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' !!}</dd>
                        <dt class="col-sm-4 text-muted">Born date</dt>
                        <dd class="col-sm-8">{{ $animal->born_date?->format('d M Y') ?? '—' }}</dd>
                        <dt class="col-sm-4 text-muted">Mother</dt>
                        <dd class="col-sm-8">
                            @if($animal->mother)
                                <a href="{{ route('animals.show', $animal->mother) }}">{{ $animal->mother->tag_no }}</a>
                            @else
                                —
                            @endif
                        </dd>
                        <dt class="col-sm-4 text-muted">Active</dt>
                        <dd class="col-sm-8">{!! $animal->is_active ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' !!}</dd>
                        @if($animal->isDisposed())
                            <dt class="col-sm-4 text-muted">Disposed</dt>
                            <dd class="col-sm-8">{{ $animal->disposed_at->format('d M Y') }} — {{ \App\Support\DisposalType::labels()[$animal->disposal_type] ?? $animal->disposal_type }}
                                @if($animal->disposal_type === 'sold' && $animal->disposal_price)
                                    ({{ number_format($animal->disposal_price, 2) }})
                                @endif
                            </dd>
                        @endif
                    </dl>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            @if($animal->isDisposed())
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center text-muted">
                        <i class="bi bi-check-circle me-2"></i>This animal has been disposed.
                    </div>
                </div>
            @else
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white fw-semibold text-danger">
                        <i class="bi bi-box-arrow-right me-1"></i>Dispose
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('animals.dispose', $animal) }}" id="dispose-form">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label" for="disposed_at">Date</label>
                                <input class="form-control" type="date" name="disposed_at" id="disposed_at"
                                       value="{{ old('disposed_at', now()->format('Y-m-d')) }}" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label d-block">Reason</label>
                                @foreach($disposalTypes as $value => $label)
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="disposal_type" id="type_{{ $value }}"
                                               value="{{ $value }}" @checked(old('disposal_type') === $value) required>
                                        <label class="form-check-label" for="type_{{ $value }}">{{ $label }}</label>
                                    </div>
                                @endforeach
                            </div>
                            <div class="mb-3" id="sold-price-wrap" style="display:none">
                                <label class="form-label" for="disposal_price">Sale price</label>
                                <input class="form-control" type="number" step="0.01" min="0" name="disposal_price" id="disposal_price"
                                       value="{{ old('disposal_price') }}">
                            </div>
                            <button type="submit" class="btn btn-danger">Dispose animal</button>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="card border-0 shadow-sm mt-4">
        <div class="card-header bg-white fw-semibold"><i class="bi bi-capsule me-1"></i>Medication history</div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th class="text-end">Cost</th>
                        <th class="text-end"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($animal->medicationHistories->sortByDesc(fn ($h) => $h->medication->medication_date) as $history)
                        <tr>
                            <td>{{ $history->medication->medication_date->format('d M Y') }}</td>
                            <td>
                                <span class="badge bg-{{ $history->medication->type === 'bulk' ? 'primary' : 'info' }}">
                                    {{ \App\Support\MedicationType::labels()[$history->medication->type] }}
                                </span>
                            </td>
                            <td>{{ $history->medication->description }}</td>
                            <td class="text-end">{{ number_format($history->cost, 2) }}</td>
                            <td class="text-end">
                                <a href="{{ route('medications.show', $history->medication) }}" class="btn btn-sm btn-outline-primary">View</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted py-3">No medication records.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($animal->gender === 'female')
        <div class="card border-0 shadow-sm mt-4">
            <div class="card-header bg-white fw-semibold"><i class="bi bi-diagram-3 me-1"></i>Children</div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Tag no</th>
                            <th>Gender</th>
                            <th>Born date</th>
                            <th>Active</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($animal->children as $child)
                            <tr>
                                <td class="fw-semibold">{{ $child->tag_no }}</td>
                                <td>{{ ucfirst($child->gender) }}</td>
                                <td>{{ $child->born_date?->format('d M Y') ?? '—' }}</td>
                                <td>{!! $child->is_active ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' !!}</td>
                                <td class="text-end">
                                    <a href="{{ route('animals.show', $child) }}" class="btn btn-sm btn-outline-primary">View</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted py-3">No children recorded.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var form = document.getElementById('dispose-form');
        if (!form) return;
        var priceWrap = document.getElementById('sold-price-wrap');
        var priceInput = document.getElementById('disposal_price');
        function togglePrice() {
            var sold = form.querySelector('input[name="disposal_type"]:checked');
            var isSold = sold && sold.value === 'sold';
            priceWrap.style.display = isSold ? 'block' : 'none';
            priceInput.required = isSold;
        }
        form.querySelectorAll('input[name="disposal_type"]').forEach(function (el) {
            el.addEventListener('change', togglePrice);
        });
        togglePrice();
    });
</script>
@endpush