@extends('layouts.app')

@section('title', __('messages.cattle_records'))

@section('breadcrumb')
    <a href="{{ route('cattle.index') }}" class="text-decoration-none text-secondary">{{ __('messages.cattle') }}</a>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="bi bi-clipboard-data me-2 text-primary"></i>{{ __('messages.cattle_records') }}</h1>
        <p class="page-subtitle">{{ __('messages.manage_cattle_profiles') }}</p>
    </div>
    <div class="d-flex gap-2">
        @can('view cattle')
        <a href="{{ route('cattle.breeds') }}" class="btn btn-outline-secondary">
            <i class="bi bi-tags me-1"></i>{{ __('messages.manage_breeds') }}
        </a>
        @endcan
        @can('create cattle')
        <a href="{{ route('cattle.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>{{ __('messages.add_cattle') }}
        </a>
        @endcan
    </div>
</div>

{{-- Filters --}}
<div class="filter-bar mb-3">
    <form method="GET" class="row g-2 align-items-end">
        <div class="col-sm-4 col-md-3">
            <input type="text" name="search" class="form-control" placeholder="{{ __('messages.or_name') }}" value="{{ request('search') }}">
        </div>
        <div class="col-sm-3 col-md-2">
            <select name="status" class="form-select">
                <option value="">{{ __('messages.all_status') }}</option>
                @foreach(['active','sold','deceased','quarantine'] as $s)
                    <option value="{{ $s }}" {{ request('status')===$s ? 'selected' : '' }}>{{ __('messages.' . $s) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-sm-3 col-md-2">
            <select name="gender" class="form-select">
                <option value="">{{ __('messages.all_gender') }}</option>
                <option value="male"   {{ request('gender')==='male'   ? 'selected' : '' }}>{{ __('messages.male') }}</option>
                <option value="female" {{ request('gender')==='female' ? 'selected' : '' }}>{{ __('messages.female') }}</option>
            </select>
        </div>
        <div class="col-sm-3 col-md-2">
            <select name="breed_id" class="form-select">
                <option value="">{{ __('messages.all_breeds') }}</option>
                @foreach($breeds as $breed)
                    <option value="{{ $breed->id }}" {{ request('breed_id')==$breed->id ? 'selected' : '' }}>{{ $breed->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary"><i class="bi bi-search me-1"></i>{{ __('messages.filter') }}</button>
            <a href="{{ route('cattle.index') }}" class="btn btn-outline-secondary ms-1">{{ __('messages.clear') }}</a>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span class="text-secondary small">{{ __('messages.records_found', ['count' => $cattle->total()]) }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>{{ __('messages.tag') }} #</th>
                    <th>{{ __('messages.name') }}</th>
                    <th>{{ __('messages.breed') }}</th>
                    <th>{{ __('messages.gender') }}</th>
                    <th>{{ __('messages.age') }}</th>
                    <th>{{ __('messages.weight') }}</th>
                    <th>{{ __('messages.purpose') }}</th>
                    <th>{{ __('messages.status') }}</th>
                    <th>{{ __('messages.owner') }}</th>
                    <th class="text-center">{{ __('messages.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @forelse($cattle as $cow)
                <tr class="cattle-row" data-detail-url="{{ route('cattle.panel', $cow) }}" style="cursor:pointer">
                    <td>
                        <span class="fw-semibold" style="color:#a5b4fc">{{ $cow->tag_number }}</span>
                    </td>
                    <td>{{ $cow->name ?? '—' }}</td>
                    <td>{{ $cow->breed->name ?? '—' }}</td>
                    <td>
                        <span class="badge {{ $cow->gender==='female' ? 'bg-danger' : 'bg-info' }} bg-opacity-25"
                              style="color:{{ $cow->gender==='female' ? '#fca5a5' : '#7dd3fc' }}">
                            <i class="bi bi-gender-{{ $cow->gender==='female' ? 'female' : 'male' }} me-1"></i>
                            {{ __('messages.' . $cow->gender) }}
                        </span>
                    </td>
                    <td>{{ $cow->age }}</td>
                    <td>{{ $cow->weight_kg ? number_format($cow->weight_kg, 0).' kg' : '—' }}</td>
                    <td>
                        <span class="badge bg-secondary bg-opacity-25">{{ __('messages.' . $cow->purpose) }}</span>
                    </td>
                    <td>
                        <span class="badge bg-{{ $cow->status_badge }} bg-opacity-25"
                              style="color:{{ match($cow->status){ 'active'=>'#86efac','sold'=>'#94a3b8','deceased'=>'#fca5a5','quarantine'=>'#fcd34d',default=>'#94a3b8' } }}">
                            {{ __('messages.' . $cow->status) }}
                        </span>
                    </td>
                    <td>{{ $cow->owner->name ?? '—' }}</td>
                    <td class="text-center" onclick="event.stopPropagation()">
                        <div class="record-action-group justify-content-center">
                            @can('edit cattle')
                            <a href="{{ route('cattle.edit', $cow) }}" class="btn btn-sm btn-outline-warning" title="{{ __('messages.edit') }}">
                                <i class="bi bi-pencil"></i>
                            </a>
                            @endcan
                            @can('delete cattle')
                            <button class="btn btn-sm btn-outline-danger" title="{{ __('messages.delete') }}"
                                    onclick="if(confirm('{{ __('messages.confirm_delete') }}')) document.getElementById('del-{{ $cow->id }}').submit()">
                                <i class="bi bi-trash"></i>
                            </button>
                            <form id="del-{{ $cow->id }}" action="{{ route('cattle.destroy', $cow) }}" method="POST" class="d-none">
                                @csrf @method('DELETE')
                            </form>
                            @endcan
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="10" class="text-center py-5 text-muted">
                        <i class="bi bi-inbox fs-2 d-block mb-2"></i>{{ __('messages.no_records') }}
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($cattle->hasPages())
    <div class="card-body border-top d-flex justify-content-center py-3" style="border-color:var(--border-color)!important">
        {{ $cattle->links('pagination::bootstrap-4') }}
    </div>
    @endif
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="cattleDetailPanel" aria-labelledby="cattleDetailPanelLabel" style="width:min(820px, 92vw)">
    <div class="offcanvas-header border-bottom" style="border-color:var(--border-color)!important">
        <div>
            <h5 class="offcanvas-title" id="cattleDetailPanelLabel">{{ __('messages.cattle_details') }}</h5>
            <div class="text-secondary small">{{ __('messages.review_record_details') }}</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0 position-relative">
        <div id="cattleDetailLoading" class="d-flex align-items-center justify-content-center h-100 text-secondary">
            <div class="text-center">
                <div class="spinner-border spinner-border-sm mb-2" role="status" aria-hidden="true"></div>
                <div>{{ __('messages.loading_cattle_details') }}</div>
            </div>
        </div>
        <div id="cattleDetailContent" class="d-none"></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const panelElement = document.getElementById('cattleDetailPanel');
    const panel = new bootstrap.Offcanvas(panelElement);
    const loading = document.getElementById('cattleDetailLoading');
    const content = document.getElementById('cattleDetailContent');

    document.querySelectorAll('.cattle-row').forEach(function (row) {
        row.addEventListener('click', async function () {
            const detailUrl = row.dataset.detailUrl;

            loading.classList.remove('d-none');
            content.classList.add('d-none');
            content.innerHTML = '';
            panel.show();

            try {
                const response = await fetch(detailUrl, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'text/html'
                    }
                });

                if (!response.ok) {
                    throw new Error(@json(__('messages.unable_load_cattle_details')));
                }

                content.innerHTML = await response.text();
                loading.classList.add('d-none');
                content.classList.remove('d-none');
            } catch (error) {
                loading.classList.add('d-none');
                content.classList.remove('d-none');
                content.innerHTML = '<div class="p-4 text-danger">' + @json(__('messages.unable_load_cattle_details')) + '</div>';
            }
        });
    });

    panelElement.addEventListener('hidden.bs.offcanvas', function () {
        content.innerHTML = '';
        content.classList.add('d-none');
        loading.classList.remove('d-none');
    });
});
</script>
@endpush